</div>
  );
}
`,
  },
  "textarea/example-2": {
    component: lazy(() => import("@/examples/textarea/example-2.tsx")),
    code: `import { Textarea } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <div className="m-auto flex max-w-sm flex-col gap-10 text-left">
      <Textarea
        className="resize-none"
        placeholder="Placeholder"
        label="Label"
        tooltip="Hello world"
        value="Value in disabled state"
        disabled
      />

<Textarea
        className="resize-none"
        description="(description)"
        helperText="Helper text"
        label="Label"
      />
    </div>
  );
}
`,
  },
  "textarea/preview": {
    component: lazy(() => import("@/examples/textarea/preview.tsx")),
    code: `import { Textarea } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <div className="m-auto max-w-sm text-left">
      <Textarea label="Label" placeholder="Placeholder" />
    </div>
  );
}
`,
  },
  "theming/custom-themes": {
    component: lazy(() => import("@/examples/theming/custom-themes.tsx")),
    code: `import { Button } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <div className="dark-blue mx-auto flex max-w-xs justify-center rounded-lg bg-background p-10 text-foreground">
      <Button variant="primary">Primary Button</Button>
    </div>
  );
}
`,
  },
  "theming/dark-mode": {
    component: lazy(() => import("@/examples/theming/dark-mode.tsx")),
    code: `import * as React from "react";
import { MoonIcon, SunIcon } from "@iconicicons/react";
import { Button, Switch, Toggle, ToggleGroup, Tooltip } from "@lemonsqueezy/wedges";

export function Example() {
  /** In your app, you can use a hook, such as \`useTheme\` or a similar way to access
   *  the current theme and a setter function to change the theme.
   */
  const [theme, setTheme] = React.useState<"light" | "dark">("light");

return (
    <div className="m-auto flex w-fit flex-col items-center gap-8 text-left">
      {/* Example 1 */}
      <Tooltip
        sideOffset={8}
        content={\`Click to switch to the ${
          typeof theme !== "undefined" && theme === "dark" ? "light" : "dark"
        } theme\`}
      >
        <Button
          variant="transparent"
          onClick={() => setTheme(theme === "light" ? "dark" : "light")}
          isIconOnly
        >
          {theme === "light" ? <SunIcon /> : <MoonIcon />}
        </Button>
      </Tooltip>

{/* Example 2 */}
      <ToggleGroup size="sm" type="single" defaultValue="light">
        <ToggleGroup.Item value="light">Light</ToggleGroup.Item>
        <ToggleGroup.Item value="dark">Dark</ToggleGroup.Item>
        <ToggleGroup.Item value="System">System</ToggleGroup.Item>
      </ToggleGroup>

{/* Example 3 */}
      <Toggle shape="pill">Dark theme</Toggle>

{/* Example 4 */}
      <Switch label="Dark theme" />
    </div>
  );
}
`,
  },
  "toggle/preview": {
    component: lazy(() => import("@/examples/toggle/preview.tsx")),
    code: `import { CropIcon } from "@iconicicons/react";
import { Toggle } from "@lemonsqueezy/wedges";

export function Example() {
  return <Toggle before={<CropIcon />} />;
}
`,
  },
  "toggle-group/example-1": {
    component: lazy(() => import("@/examples/toggle-group/example-1.tsx")),
    code: `import {
  ColumnsHorizontalIcon,
  GridIcon,
  GridMasonryIcon,
  RowsIcon,
  TableColumnsIcon,
  TableRowsIcon,
} from "@iconicicons/react";
import { ToggleGroup } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <div className="mx-auto flex max-w-fit flex-col items-center gap-6">
      <ToggleGroup type="single" defaultValue="days">
        <ToggleGroup.Item value="days">Days</ToggleGroup.Item>
        <ToggleGroup.Item value="months">Months</ToggleGroup.Item>
        <ToggleGroup.Item value="years">Years</ToggleGroup.Item>
      </ToggleGroup>

<ToggleGroup type="single" size="sm" defaultValue="grid">
        <ToggleGroup.Item before={<GridIcon />} value="grid">
          Grid
        </ToggleGroup.Item>

<ToggleGroup.Item before={<ColumnsHorizontalIcon />} value="column">
          Column
        </ToggleGroup.Item>

<ToggleGroup.Item before={<RowsIcon />} value="row">
          Row
        </ToggleGroup.Item>
      </ToggleGroup>

<ToggleGroup orientation="vertical" size="sm" defaultValue="grid" type="single">
          <ToggleGroup.Item value="grid" before={<GridIcon />} />
          <ToggleGroup.Item value="masonry" before={<GridMasonryIcon />} />
          <ToggleGroup.Item value="column" before={<TableColumnsIcon />} />
          <ToggleGroup.Item value="row" before={<TableRowsIcon />} />
        </ToggleGroup>
      </div>
    </div>
  );
}
`,
  },
  "toggle-group/example-2": {
    component: lazy(() => import("@/examples/toggle-group/example-2.tsx")),
    code: `import { ToggleGroup } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <ToggleGroup type="multiple" size="sm" defaultValue={["mon", "wed"]}>
      <ToggleGroup.Item value="mon">Mon</ToggleGroup.Item>
      <ToggleGroup.Item value="tue">Tue</ToggleGroup.Item>
      <ToggleGroup.Item value="wed">Wed</ToggleGroup.Item>
      <ToggleGroup.Item value="thu">Thu</ToggleGroup.Item>
      <ToggleGroup.Item value="fri">Fri</ToggleGroup.Item>

<ToggleGroup.Item value="sat" disabled>
        Sat
      </ToggleGroup.Item>

<ToggleGroup.Item value="sun" disabled>
        Sun
      </ToggleGroup.Item>
    </ToggleGroup>
  );
}
`,
  },
  "toggle-group/preview": {
    component: lazy(() => import("@/examples/toggle-group/preview.tsx")),
    code: `import { GridIcon, GridMasonryIcon, TableColumnsIcon, TableRowsIcon } from "@iconicicons/react";
import { ToggleGroup } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <ToggleGroup.Root orientation="horizontal" defaultValue="grid" type="single">
      <ToggleGroup.Item value="grid" before={<GridIcon />} />
      <ToggleGroup.Item value="masonry" before={<GridMasonryIcon />} />
      <ToggleGroup.Item value="column" before={<TableColumnsIcon />} />
      <ToggleGroup.Item value="row" before={<TableRowsIcon />} />
    </ToggleGroup.Root>
  );
}
`,
  },
  "tooltip/example-1": {
    component: lazy(() => import("@/examples/tooltip/example-1.tsx")),
    code: `import { Tooltip } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <section className="mx-auto flex flex-col items-center gap-4">
      <div className="flex items-center gap-4">
        <Tooltip
          align="start"
          animation={true}
          content="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
          delayDuration={0}
          side="top"
        />

<Tooltip
          align="end"
          animation={true}
          content="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
          delayDuration={0}
          side="right"
        />
      </div>
    </section>
  );
}
`,
  },
  "tooltip/example-2": {
    component: lazy(() => import("@/examples/tooltip/example-2.tsx")),
    code: `import * as React from "react";
import { Tooltip } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <div className="mx-auto flex flex-col items-center justify-center gap-6">
      <div className="flex items-center gap-4">
        <Tooltip content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element." />

<Tooltip
          color="soft"
          content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element. It typically contains brief, helpful text or instructions relevant to the trigger's context."
          arrow={false}
          sideOffset={10}
          size="md"
        />
      </div>
    </div>
  );
}
`,
  },
  "tooltip/preview": {
    component: lazy(() => import("@/examples/tooltip/preview.tsx")),
    code: `import { Tooltip } from "@lemonsqueezy/wedges";

export function Example() {
  return (
    <Tooltip
      animation={true}
      content="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
      delayDuration={0}
    />
  );
}
`,
  },
};