@keboola/design 10.1.0 → 11.0.0

package/dist/chunk-4GIAXOJG.js

@@ -0,0 +1,133 @@
+import { useArgoDesign } from './chunk-WETKNYZX.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var errorStateClassnames = cva(["tw:flex", "tw:flex-col", "tw:items-center", "tw:text-center"], {
+  variants: {
+    variant: {
+      default: ["tw:py-16", "tw:px-8", "tw:gap-4"],
+      compact: ["tw:py-8", "tw:px-4", "tw:gap-2"],
+      destructive: ["tw:py-16", "tw:px-8", "tw:gap-4"]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var errorStateIconClassnames = cva(["tw:flex", "tw:items-center", "tw:justify-center"], {
+  variants: {
+    variant: {
+      default: [
+        "tw:size-16",
+        "tw:text-4xl",
+        'tw:[&_svg:not([class*="tw:size-"])]:size-10',
+        "tw:text-warning"
+      ],
+      compact: [
+        "tw:size-10",
+        "tw:text-2xl",
+        'tw:[&_svg:not([class*="tw:size-"])]:size-6',
+        "tw:text-warning"
+      ],
+      // Legacy keeps the fixed error scale; argo uses the themeable destructive token.
+      destructive: [
+        "tw:size-16",
+        "tw:text-4xl",
+        'tw:[&_svg:not([class*="tw:size-"])]:size-10',
+        "tw:data-[argo=false]:text-error-500",
+        "tw:data-[argo=true]:text-destructive"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var errorStateTitleClassnames = cva(["tw:m-0", "tw:font-semibold"], {
+  variants: {
+    variant: {
+      default: ["tw:text-lg", "tw:leading-7", "tw:text-foreground"],
+      compact: ["tw:text-base", "tw:leading-6", "tw:text-foreground"],
+      destructive: [
+        "tw:text-lg",
+        "tw:leading-7",
+        "tw:data-[argo=false]:text-error-700",
+        "tw:data-[argo=true]:text-destructive"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var errorStateDescriptionClassnames = cva(["tw:m-0", "tw:text-muted-foreground"], {
+  variants: {
+    variant: {
+      default: ["tw:text-sm", "tw:leading-5", "tw:max-w-sm"],
+      compact: ["tw:text-xs", "tw:leading-4", "tw:max-w-xs"],
+      destructive: ["tw:text-sm", "tw:leading-5", "tw:max-w-sm"]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var errorStateActionsClassnames = cva(["tw:flex", "tw:items-center", "tw:flex-wrap"], {
+  variants: {
+    variant: {
+      default: ["tw:gap-3", "tw:mt-2"],
+      compact: ["tw:gap-2", "tw:mt-1"],
+      destructive: ["tw:gap-3", "tw:mt-2"]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var ErrorStateRoot = ({ className, variant = "default", children, ...rest }) => /* @__PURE__ */ jsx("div", { role: "alert", className: errorStateClassnames({ className, variant }), ...rest, children });
+var ErrorStateIcon = ({ className, variant = "default", children, ...rest }) => {
+  const renderArgo = useArgoDesign();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-argo": renderArgo,
+      className: errorStateIconClassnames({ className, variant }),
+      ...rest,
+      children
+    }
+  );
+};
+var ErrorStateTitle = ({
+  className,
+  variant = "default",
+  as: Tag = "h3",
+  children,
+  ...rest
+}) => {
+  const renderArgo = useArgoDesign();
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      "data-argo": renderArgo,
+      className: errorStateTitleClassnames({ className, variant }),
+      ...rest,
+      children
+    }
+  );
+};
+var ErrorStateDescription = ({
+  className,
+  variant = "default",
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx("p", { className: errorStateDescriptionClassnames({ className, variant }), ...rest, children });
+var ErrorStateActions = ({ className, variant = "default", children, ...rest }) => /* @__PURE__ */ jsx("div", { className: errorStateActionsClassnames({ className, variant }), ...rest, children });
+var ErrorState = ErrorStateRoot;
+ErrorState.Icon = ErrorStateIcon;
+ErrorState.Title = ErrorStateTitle;
+ErrorState.Description = ErrorStateDescription;
+ErrorState.Actions = ErrorStateActions;
+
+export { ErrorState };
+//# sourceMappingURL=chunk-4GIAXOJG.js.map
+//# sourceMappingURL=chunk-4GIAXOJG.js.map

package/dist/chunk-4GIAXOJG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/ErrorState/ErrorState.tsx"],"names":[],"mappings":"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","file":"chunk-4GIAXOJG.js","sourcesContent":["import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { useArgoDesign } from '../../components/ThemeProvider/context';\n\nconst errorStateClassnames = cva(['tw:flex', 'tw:flex-col', 'tw:items-center', 'tw:text-center'], {\n  variants: {\n    variant: {\n      default: ['tw:py-16', 'tw:px-8', 'tw:gap-4'],\n      compact: ['tw:py-8', 'tw:px-4', 'tw:gap-2'],\n      destructive: ['tw:py-16', 'tw:px-8', 'tw:gap-4'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst errorStateIconClassnames = cva(['tw:flex', 'tw:items-center', 'tw:justify-center'], {\n  variants: {\n    variant: {\n      default: [\n        'tw:size-16',\n        'tw:text-4xl',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-10',\n        'tw:text-warning',\n      ],\n      compact: [\n        'tw:size-10',\n        'tw:text-2xl',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-6',\n        'tw:text-warning',\n      ],\n      // Legacy keeps the fixed error scale; argo uses the themeable destructive token.\n      destructive: [\n        'tw:size-16',\n        'tw:text-4xl',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-10',\n        'tw:data-[argo=false]:text-error-500',\n        'tw:data-[argo=true]:text-destructive',\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst errorStateTitleClassnames = cva(['tw:m-0', 'tw:font-semibold'], {\n  variants: {\n    variant: {\n      default: ['tw:text-lg', 'tw:leading-7', 'tw:text-foreground'],\n      compact: ['tw:text-base', 'tw:leading-6', 'tw:text-foreground'],\n      destructive: [\n        'tw:text-lg',\n        'tw:leading-7',\n        'tw:data-[argo=false]:text-error-700',\n        'tw:data-[argo=true]:text-destructive',\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst errorStateDescriptionClassnames = cva(['tw:m-0', 'tw:text-muted-foreground'], {\n  variants: {\n    variant: {\n      default: ['tw:text-sm', 'tw:leading-5', 'tw:max-w-sm'],\n      compact: ['tw:text-xs', 'tw:leading-4', 'tw:max-w-xs'],\n      destructive: ['tw:text-sm', 'tw:leading-5', 'tw:max-w-sm'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst errorStateActionsClassnames = cva(['tw:flex', 'tw:items-center', 'tw:flex-wrap'], {\n  variants: {\n    variant: {\n      default: ['tw:gap-3', 'tw:mt-2'],\n      compact: ['tw:gap-2', 'tw:mt-1'],\n      destructive: ['tw:gap-3', 'tw:mt-2'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\ntype Variant = VariantProps<typeof errorStateClassnames>['variant'];\n\n/**\n * Props for `ErrorState`. `variant` chooses look — `\"default\"` for non-blocking errors, `\"compact\"` for\n * inside cards, `\"destructive\"` for blocking failures (red title + icon).\n */\ntype RootProps = ComponentProps<'div'> &\n  VariantProps<typeof errorStateClassnames> & {\n    variant?: Variant;\n  };\n\n/**\n * Page-level error placeholder with icon, title, description, and recovery-action slots.\n *\n * **When to use:** the page can't render its content because a request failed, the user lacks permission,\n * or the entity doesn't exist. Show a recovery action (retry, go back, request access) in\n * `ErrorState.Actions`.\n * **When NOT to use:** for transient operation failures use `toast()`; for inline form validation use\n * `FormGroup state=\"error\"`; for contextual warning banners use `Alert variant=\"error\"`.\n * **Composition:** nest `ErrorState.Icon`, `ErrorState.Title`, `ErrorState.Description`, and\n * `ErrorState.Actions`. Use `variant=\"destructive\"` for full-page critical failures.\n */\nconst ErrorStateRoot = ({ className, variant = 'default', children, ...rest }: RootProps) => (\n  <div role=\"alert\" className={errorStateClassnames({ className, variant })} {...rest}>\n    {children}\n  </div>\n);\n\ntype SlotProps = ComponentProps<'div'> & { variant?: Variant };\n\nconst ErrorStateIcon = ({ className, variant = 'default', children, ...rest }: SlotProps) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <div\n      data-argo={renderArgo}\n      className={errorStateIconClassnames({ className, variant })}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\ntype TitleProps = ComponentProps<'h3'> & {\n  variant?: Variant;\n  /** Heading tag to render. Defaults to `h3`; set explicitly to avoid a heading-order skip\n   *  (e.g. `as=\"h2\"` when the error state sits directly under a page's `h1`). */\n  as?: HeadingLevel;\n};\n\nconst ErrorStateTitle = ({\n  className,\n  variant = 'default',\n  as: Tag = 'h3',\n  children,\n  ...rest\n}: TitleProps) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <Tag\n      data-argo={renderArgo}\n      className={errorStateTitleClassnames({ className, variant })}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\ntype DescriptionProps = ComponentProps<'p'> & { variant?: Variant };\n\nconst ErrorStateDescription = ({\n  className,\n  variant = 'default',\n  children,\n  ...rest\n}: DescriptionProps) => (\n  <p className={errorStateDescriptionClassnames({ className, variant })} {...rest}>\n    {children}\n  </p>\n);\n\ntype ActionsProps = ComponentProps<'div'> & { variant?: Variant };\n\nconst ErrorStateActions = ({ className, variant = 'default', children, ...rest }: ActionsProps) => (\n  <div className={errorStateActionsClassnames({ className, variant })} {...rest}>\n    {children}\n  </div>\n);\n\nexport const ErrorState = ErrorStateRoot as typeof ErrorStateRoot & {\n  Icon: typeof ErrorStateIcon;\n  Title: typeof ErrorStateTitle;\n  Description: typeof ErrorStateDescription;\n  Actions: typeof ErrorStateActions;\n};\n\nErrorState.Icon = ErrorStateIcon;\nErrorState.Title = ErrorStateTitle;\nErrorState.Description = ErrorStateDescription;\nErrorState.Actions = ErrorStateActions;\n\nexport type { RootProps as ErrorStateProps, Variant as ErrorStateVariant };\n"]}

package/dist/chunk-52NDNMK7.js

@@ -0,0 +1,99 @@
+import { Toggle } from './chunk-QQA37LFB.js';
+import { Popover } from './chunk-ON4BJTHI.js';
+import { ScrollArea } from './chunk-THHB4EWS.js';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/TimePicker/utils.ts
+var pad = (n) => n.toString().padStart(2, "0");
+var formatTime = (hour, minute) => `${pad(hour)}:${pad(minute)}`;
+var parseTime = (time) => {
+  if (!time) return { hour: null, minute: null };
+  const match = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
+  if (!match) return { hour: null, minute: null };
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59)
+    return { hour: null, minute: null };
+  return { hour, minute };
+};
+var scrollToSelected = (viewport) => {
+  if (!viewport) return;
+  requestAnimationFrame(() => {
+    const selected = viewport.querySelector('[aria-pressed="true"]');
+    selected?.scrollIntoView({ block: "center" });
+  });
+};
+var HOURS = Array.from({ length: 24 }, (_, i) => i);
+var MINUTES = Array.from({ length: 60 }, (_, i) => i);
+var TimePicker = ({
+  align = "end",
+  alignOffset = -18,
+  children,
+  defaultOpen,
+  defaultSelected,
+  onOpenChange,
+  onSelect,
+  open,
+  selected,
+  sideOffset = 12
+}) => {
+  const [internalSelected, setInternalSelected] = useState(defaultSelected ?? null);
+  const isControlled = selected !== void 0;
+  const currentValue = isControlled ? selected : internalSelected;
+  const parsed = parseTime(currentValue);
+  const hour = parsed.hour ?? null;
+  const minute = parsed.minute ?? null;
+  const handleSelect = (time) => {
+    if (!isControlled) {
+      setInternalSelected(time);
+    }
+    onSelect?.(time);
+  };
+  const handleHourSelect = (h) => {
+    handleSelect(formatTime(h, minute ?? 0));
+  };
+  const handleMinuteSelect = (m) => {
+    handleSelect(formatTime(hour ?? 0, m));
+  };
+  return /* @__PURE__ */ jsxs(Popover, { defaultOpen, onOpenChange, open, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align,
+        alignOffset,
+        sideOffset,
+        className: "tw:flex tw:flex-row",
+        children: [
+          /* @__PURE__ */ jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw:h-60 tw:p-3", children: HOURS.map((value) => /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              variant: "ghost",
+              className: "tw:size-10 tw:p-0",
+              pressed: value === hour,
+              onPressedChange: () => handleHourSelect(value),
+              children: pad(value)
+            },
+            value
+          )) }),
+          /* @__PURE__ */ jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw:h-60 tw:p-3", children: MINUTES.map((value) => /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              variant: "ghost",
+              className: "tw:size-10 tw:p-0",
+              pressed: value === minute,
+              onPressedChange: () => handleMinuteSelect(value),
+              children: pad(value)
+            },
+            value
+          )) })
+        ]
+      }
+    )
+  ] });
+};
+
+export { TimePicker, formatTime, pad, parseTime };
+//# sourceMappingURL=chunk-52NDNMK7.js.map
+//# sourceMappingURL=chunk-52NDNMK7.js.map

package/dist/chunk-52NDNMK7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TimePicker/utils.ts","../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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","file":"chunk-52NDNMK7.js","sourcesContent":["export const pad = (n: number) => n.toString().padStart(2, '0');\n\n/** The \"HH:mm\" shape `parseTime` parses back. */\nexport const formatTime = (hour: number, minute: number) => `${pad(hour)}:${pad(minute)}`;\n\nexport const parseTime = (time?: string | null) => {\n  if (!time) return { hour: null, minute: null };\n\n  const match = /^(\\d{1,2}):(\\d{1,2})$/.exec(time.trim());\n  if (!match) return { hour: null, minute: null };\n\n  const hour = Number(match[1]);\n  const minute = Number(match[2]);\n  if (\n    Number.isNaN(hour) ||\n    Number.isNaN(minute) ||\n    hour < 0 ||\n    hour > 23 ||\n    minute < 0 ||\n    minute > 59\n  )\n    return { hour: null, minute: null };\n\n  return { hour, minute };\n};\n\nexport const scrollToSelected = (viewport: HTMLDivElement | null) => {\n  if (!viewport) return;\n  // Defer scroll until after the popover open animation completes and layout is calculated\n  requestAnimationFrame(() => {\n    const selected = viewport.querySelector('[aria-pressed=\"true\"]');\n    selected?.scrollIntoView({ block: 'center' });\n  });\n};\n","import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';\n\nimport { Popover } from '../Popover';\nimport { ScrollArea } from '../ScrollArea';\nimport { Toggle } from '../Toggle';\n\nimport { formatTime, pad, parseTime, scrollToSelected } from './utils';\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\nconst MINUTES = Array.from({ length: 60 }, (_, i) => i);\n\ntype Props = {\n  children?: ReactNode;\n  defaultSelected?: string | null;\n  selected?: string | null;\n  onSelect?: (time: string) => void;\n} & Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &\n  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;\n\nexport const TimePicker = ({\n  align = 'end',\n  alignOffset = -18,\n  children,\n  defaultOpen,\n  defaultSelected,\n  onOpenChange,\n  onSelect,\n  open,\n  selected,\n  sideOffset = 12,\n}: Props) => {\n  const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelected ?? null);\n\n  const isControlled = selected !== undefined;\n  const currentValue = isControlled ? selected : internalSelected;\n\n  const parsed = parseTime(currentValue);\n  const hour = parsed.hour ?? null;\n  const minute = parsed.minute ?? null;\n\n  const handleSelect = (time: string) => {\n    if (!isControlled) {\n      setInternalSelected(time);\n    }\n    onSelect?.(time);\n  };\n\n  const handleHourSelect = (h: number) => {\n    handleSelect(formatTime(h, minute ?? 0));\n  };\n\n  const handleMinuteSelect = (m: number) => {\n    handleSelect(formatTime(hour ?? 0, m));\n  };\n\n  return (\n    <Popover defaultOpen={defaultOpen} onOpenChange={onOpenChange} open={open}>\n      <Popover.Trigger asChild>{children}</Popover.Trigger>\n      <Popover.Content\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className=\"tw:flex tw:flex-row\"\n      >\n        <ScrollArea type=\"always\" ref={scrollToSelected} viewPortClassName=\"tw:h-60 tw:p-3\">\n          {HOURS.map((value) => (\n            <Toggle\n              key={value}\n              variant=\"ghost\"\n              className=\"tw:size-10 tw:p-0\"\n              pressed={value === hour}\n              onPressedChange={() => handleHourSelect(value)}\n            >\n              {pad(value)}\n            </Toggle>\n          ))}\n        </ScrollArea>\n\n        <ScrollArea type=\"always\" ref={scrollToSelected} viewPortClassName=\"tw:h-60 tw:p-3\">\n          {MINUTES.map((value) => (\n            <Toggle\n              key={value}\n              variant=\"ghost\"\n              className=\"tw:size-10 tw:p-0\"\n              pressed={value === minute}\n              onPressedChange={() => handleMinuteSelect(value)}\n            >\n              {pad(value)}\n            </Toggle>\n          ))}\n        </ScrollArea>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"]}

package/dist/chunk-576G5OES.js

@@ -0,0 +1,201 @@
+import { FieldBox } from './chunk-SCQPU4UE.js';
+import { useArgoDesign } from './chunk-WETKNYZX.js';
+import { useId } from 'react';
+import { Root, Thumb } from '@radix-ui/react-switch';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var switchVariants = cva(
+  [
+    "tailwindcss-preflight",
+    "tw:shrink-0",
+    "tw:cursor-pointer",
+    "tw:disabled:cursor-not-allowed",
+    "tw:disabled:opacity-50"
+  ],
+  {
+    defaultVariants: {
+      size: "medium",
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: [
+          "tw:peer/switch",
+          "tw:group/switch",
+          "tw:relative",
+          // positioning
+          "tw:flex",
+          "tw:items-center",
+          "tw:gap-2",
+          "tw:min-h-5",
+          // label
+          "tw:text-neutral-800",
+          "tw:font-normal",
+          // before pseudo element
+          'tw:before:content-[" "]',
+          "tw:before:block",
+          "tw:before:relative",
+          // color
+          "tw:aria-checked:before:bg-primary-500",
+          "tw:before:bg-neutral-200",
+          // hover
+          "tw:aria-checked:before:hover:bg-primary-600",
+          "tw:before:hover:bg-neutral-300",
+          // disabled
+          "tw:before:disabled:hover:bg-neutral-200",
+          // others
+          "tw:transition-colors",
+          "tw:focus-visible:outline-hidden",
+          "tw:before:focus-visible:outline",
+          "tw:before:focus-visible:outline-1",
+          "tw:before:focus-visible:outline-ring",
+          "tw:before:focus-visible:ring-4",
+          "tw:before:focus-visible:ring-ring/30"
+        ],
+        argo: [
+          "tw:peer",
+          "tw:inline-flex",
+          "tw:items-center",
+          // track
+          "tw:w-9",
+          "tw:h-5",
+          "tw:rounded-full",
+          "tw:border",
+          "tw:border-transparent",
+          "tw:bg-input",
+          "tw:transition-colors",
+          // checked
+          "tw:data-[state=checked]:bg-primary",
+          // focus
+          "tw:focus-visible:outline-hidden",
+          "tw:focus-visible:border-primary",
+          "tw:focus-visible:ring-3",
+          "tw:focus-visible:ring-ring/50"
+        ]
+      },
+      size: {
+        small: [],
+        medium: [],
+        large: []
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        size: "small",
+        class: ["tw:before:w-6", "tw:before:h-4", "tw:before:rounded-lg"]
+      },
+      {
+        variant: "default",
+        size: "medium",
+        class: ["tw:before:w-8", "tw:before:h-4", "tw:before:rounded-lg"]
+      },
+      {
+        variant: "default",
+        size: "large",
+        class: ["tw:before:w-10", "tw:before:h-5", "tw:before:rounded-xl"]
+      }
+    ]
+  }
+);
+var thumbVariants = cva(
+  ["tw:block", "tw:shrink-0", "tw:pointer-events-none", "tw:bg-white", "tw:rounded-full"],
+  {
+    defaultVariants: {
+      size: "medium",
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: [
+          "tw:absolute",
+          "tw:left-0",
+          "tw:transition-transform",
+          "tw:ease-in-out",
+          "tw:shadow-[0_2px_5px_rgba(0,0,0,.26)]"
+        ],
+        argo: [
+          "tw:size-4",
+          "tw:shadow-sm",
+          "tw:transition-transform",
+          "tw:data-[state=checked]:translate-x-[16px]",
+          "tw:data-[state=unchecked]:translate-x-0.5"
+        ]
+      },
+      size: {
+        small: [],
+        medium: [],
+        large: []
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        size: "small",
+        class: [
+          "tw:w-3",
+          "tw:h-3",
+          "tw:data-[state=checked]:translate-x-2.5",
+          "tw:data-[state=unchecked]:translate-x-0.5"
+        ]
+      },
+      {
+        variant: "default",
+        size: "medium",
+        class: [
+          "tw:w-3",
+          "tw:h-3",
+          "tw:data-[state=checked]:translate-x-[18px]",
+          "tw:data-[state=unchecked]:translate-x-0.5"
+        ]
+      },
+      {
+        variant: "default",
+        size: "large",
+        class: [
+          "tw:w-3.5",
+          "tw:h-3.5",
+          "tw:data-[state=checked]:translate-x-6",
+          "tw:data-[state=unchecked]:translate-x-0.5"
+        ]
+      }
+    ]
+  }
+);
+var Switch = ({
+  ref,
+  className,
+  size,
+  disabled = false,
+  id: idProp,
+  children,
+  description,
+  variant,
+  position,
+  ...props
+}) => {
+  const fallbackId = useId();
+  const id = idProp?.toString() ?? fallbackId;
+  const switchVariant = useArgoDesign() ? "argo" : "default";
+  const switchElement = /* @__PURE__ */ jsx(
+    Root,
+    {
+      ...props,
+      ref,
+      id,
+      disabled,
+      className: switchVariants({ className, size, variant: switchVariant }),
+      children: /* @__PURE__ */ jsx(Thumb, { className: thumbVariants({ size, variant: switchVariant }) })
+    }
+  );
+  if (!children) return switchElement;
+  return /* @__PURE__ */ jsxs(FieldBox, { htmlFor: id, variant, position, control: switchElement, children: [
+    /* @__PURE__ */ jsx(FieldBox.Title, { children }),
+    description && /* @__PURE__ */ jsx(FieldBox.Description, { children: description })
+  ] });
+};
+
+export { Switch };
+//# sourceMappingURL=chunk-576G5OES.js.map
+//# sourceMappingURL=chunk-576G5OES.js.map

package/dist/chunk-576G5OES.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/styles.ts","../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAEO,IAAM,cAAA,GAAiB,GAAA;AAAA,EAC5B;AAAA,IACE,uBAAA;AAAA,IACA,aAAA;AAAA,IACA,mBAAA;AAAA,IACA,gCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,gBAAA;AAAA,UACA,iBAAA;AAAA,UACA,aAAA;AAAA;AAAA,UAGA,SAAA;AAAA,UACA,iBAAA;AAAA,UACA,UAAA;AAAA,UAEA,YAAA;AAAA;AAAA,UAGA,qBAAA;AAAA,UACA,gBAAA;AAAA;AAAA,UAGA,yBAAA;AAAA,UACA,iBAAA;AAAA,UACA,oBAAA;AAAA;AAAA,UAGA,uCAAA;AAAA,UACA,0BAAA;AAAA;AAAA,UAGA,6CAAA;AAAA,UACA,gCAAA;AAAA;AAAA,UAGA,yCAAA;AAAA;AAAA,UAGA,sBAAA;AAAA,UAEA,iCAAA;AAAA,UACA,iCAAA;AAAA,UACA,mCAAA;AAAA,UACA,sCAAA;AAAA,UACA,gCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,SAAA;AAAA,UACA,gBAAA;AAAA,UACA,iBAAA;AAAA;AAAA,UAGA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,iBAAA;AAAA,UACA,WAAA;AAAA,UACA,uBAAA;AAAA,UACA,aAAA;AAAA,UACA,sBAAA;AAAA;AAAA,UAGA,oCAAA;AAAA;AAAA,UAGA,iCAAA;AAAA,UACA,iCAAA;AAAA,UACA,yBAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAO,EAAC;AAAA,QACR,QAAQ,EAAC;AAAA,QACT,OAAO;AAAC;AACV,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,OAAA,EAAS,SAAA;AAAA,QACT,IAAA,EAAM,OAAA;AAAA,QACN,KAAA,EAAO,CAAC,eAAA,EAAiB,eAAA,EAAiB,sBAAsB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,OAAA,EAAS,SAAA;AAAA,QACT,IAAA,EAAM,QAAA;AAAA,QACN,KAAA,EAAO,CAAC,eAAA,EAAiB,eAAA,EAAiB,sBAAsB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,OAAA,EAAS,SAAA;AAAA,QACT,IAAA,EAAM,OAAA;AAAA,QACN,KAAA,EAAO,CAAC,gBAAA,EAAkB,eAAA,EAAiB,sBAAsB;AAAA;AACnE;AACF;AAEJ,CAAA;AAEO,IAAM,aAAA,GAAgB,GAAA;AAAA,EAC3B,CAAC,UAAA,EAAY,aAAA,EAAe,wBAAA,EAA0B,eAAe,iBAAiB,CAAA;AAAA,EACtF;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,aAAA;AAAA,UACA,WAAA;AAAA,UACA,yBAAA;AAAA,UACA,gBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,WAAA;AAAA,UACA,cAAA;AAAA,UACA,yBAAA;AAAA,UACA,4CAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAO,EAAC;AAAA,QACR,QAAQ,EAAC;AAAA,QACT,OAAO;AAAC;AACV,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,OAAA,EAAS,SAAA;AAAA,QACT,IAAA,EAAM,OAAA;AAAA,QACN,KAAA,EAAO;AAAA,UACL,QAAA;AAAA,UACA,QAAA;AAAA,UACA,yCAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA;AAAA,QACE,OAAA,EAAS,SAAA;AAAA,QACT,IAAA,EAAM,QAAA;AAAA,QACN,KAAA,EAAO;AAAA,UACL,QAAA;AAAA,UACA,QAAA;AAAA,UACA,4CAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA;AAAA,QACE,OAAA,EAAS,SAAA;AAAA,QACT,IAAA,EAAM,OAAA;AAAA,QACN,KAAA,EAAO;AAAA,UACL,UAAA;AAAA,UACA,UAAA;AAAA,UACA,uCAAA;AAAA,UACA;AAAA;AACF;AACF;AACF;AAEJ,CAAA;ACxJO,IAAM,SAAS,CAAC;AAAA,EACrB,GAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,EAAA,EAAI,MAAA;AAAA,EACJ,QAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,aAAa,KAAA,EAAM;AACzB,EAAA,MAAM,EAAA,GAAK,MAAA,EAAQ,QAAA,EAAS,IAAK,UAAA;AACjC,EAAA,MAAM,aAAA,GAAgB,aAAA,EAAc,GAAI,MAAA,GAAS,SAAA;AAEjD,EAAA,MAAM,aAAA,mBACJ,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAW,cAAA,CAAe,EAAE,WAAW,IAAA,EAAM,OAAA,EAAS,eAAe,CAAA;AAAA,MAErE,QAAA,kBAAA,GAAA,CAAC,SAAM,SAAA,EAAW,aAAA,CAAc,EAAE,IAAA,EAAM,OAAA,EAAS,aAAA,EAAe,CAAA,EAAG;AAAA;AAAA,GACrE;AAGF,EAAA,IAAI,CAAC,UAAU,OAAO,aAAA;AAEtB,EAAA,4BACG,QAAA,EAAA,EAAS,OAAA,EAAS,IAAI,OAAA,EAAkB,QAAA,EAAoB,SAAS,aAAA,EACpE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAA,CAAS,KAAA,EAAT,EAAgB,QAAA,EAAS,CAAA;AAAA,IACzB,WAAA,oBAAe,GAAA,CAAC,QAAA,CAAS,WAAA,EAAT,EAAsB,QAAA,EAAA,WAAA,EAAY;AAAA,GAAA,EACrD,CAAA;AAEJ","file":"chunk-576G5OES.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const switchVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:shrink-0',\n    'tw:cursor-pointer',\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:opacity-50',\n  ],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:peer/switch',\n          'tw:group/switch',\n          'tw:relative',\n\n          // positioning\n          'tw:flex',\n          'tw:items-center',\n          'tw:gap-2',\n\n          'tw:min-h-5',\n\n          // label\n          'tw:text-neutral-800',\n          'tw:font-normal',\n\n          // before pseudo element\n          'tw:before:content-[\" \"]',\n          'tw:before:block',\n          'tw:before:relative',\n\n          // color\n          'tw:aria-checked:before:bg-primary-500',\n          'tw:before:bg-neutral-200',\n\n          // hover\n          'tw:aria-checked:before:hover:bg-primary-600',\n          'tw:before:hover:bg-neutral-300',\n\n          // disabled\n          'tw:before:disabled:hover:bg-neutral-200',\n\n          // others\n          'tw:transition-colors',\n\n          'tw:focus-visible:outline-hidden',\n          'tw:before:focus-visible:outline',\n          'tw:before:focus-visible:outline-1',\n          'tw:before:focus-visible:outline-ring',\n          'tw:before:focus-visible:ring-4',\n          'tw:before:focus-visible:ring-ring/30',\n        ],\n        argo: [\n          'tw:peer',\n          'tw:inline-flex',\n          'tw:items-center',\n\n          // track\n          'tw:w-9',\n          'tw:h-5',\n          'tw:rounded-full',\n          'tw:border',\n          'tw:border-transparent',\n          'tw:bg-input',\n          'tw:transition-colors',\n\n          // checked\n          'tw:data-[state=checked]:bg-primary',\n\n          // focus\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-3',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n      size: {\n        small: [],\n        medium: [],\n        large: [],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'default',\n        size: 'small',\n        class: ['tw:before:w-6', 'tw:before:h-4', 'tw:before:rounded-lg'],\n      },\n      {\n        variant: 'default',\n        size: 'medium',\n        class: ['tw:before:w-8', 'tw:before:h-4', 'tw:before:rounded-lg'],\n      },\n      {\n        variant: 'default',\n        size: 'large',\n        class: ['tw:before:w-10', 'tw:before:h-5', 'tw:before:rounded-xl'],\n      },\n    ],\n  },\n);\n\nexport const thumbVariants = cva(\n  ['tw:block', 'tw:shrink-0', 'tw:pointer-events-none', 'tw:bg-white', 'tw:rounded-full'],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:absolute',\n          'tw:left-0',\n          'tw:transition-transform',\n          'tw:ease-in-out',\n          'tw:shadow-[0_2px_5px_rgba(0,0,0,.26)]',\n        ],\n        argo: [\n          'tw:size-4',\n          'tw:shadow-sm',\n          'tw:transition-transform',\n          'tw:data-[state=checked]:translate-x-[16px]',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      size: {\n        small: [],\n        medium: [],\n        large: [],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'default',\n        size: 'small',\n        class: [\n          'tw:w-3',\n          'tw:h-3',\n          'tw:data-[state=checked]:translate-x-2.5',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      {\n        variant: 'default',\n        size: 'medium',\n        class: [\n          'tw:w-3',\n          'tw:h-3',\n          'tw:data-[state=checked]:translate-x-[18px]',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      {\n        variant: 'default',\n        size: 'large',\n        class: [\n          'tw:w-3.5',\n          'tw:h-3.5',\n          'tw:data-[state=checked]:translate-x-6',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n    ],\n  },\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root, Thumb } from '@radix-ui/react-switch';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { FieldBox } from '../FieldBox';\nimport type { fieldBoxVariants } from '../FieldBox/styles';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { switchVariants, thumbVariants } from './styles';\n\ntype Props = {\n  id?: string | number;\n  children?: ReactNode;\n  description?: ReactNode;\n  variant?: VariantProps<typeof fieldBoxVariants>['variant'];\n  position?: 'start' | 'end';\n} & Omit<ComponentProps<typeof Root>, 'asChild' | 'id'> &\n  Omit<VariantProps<typeof switchVariants>, 'variant'>;\n\nexport const Switch = ({\n  ref,\n  className,\n  size,\n  disabled = false,\n  id: idProp,\n  children,\n  description,\n  variant,\n  position,\n  ...props\n}: Props) => {\n  const fallbackId = useId();\n  const id = idProp?.toString() ?? fallbackId;\n  const switchVariant = useArgoDesign() ? 'argo' : 'default';\n\n  const switchElement = (\n    <Root\n      {...props}\n      ref={ref}\n      id={id}\n      disabled={disabled}\n      className={switchVariants({ className, size, variant: switchVariant })}\n    >\n      <Thumb className={thumbVariants({ size, variant: switchVariant })} />\n    </Root>\n  );\n\n  if (!children) return switchElement;\n\n  return (\n    <FieldBox htmlFor={id} variant={variant} position={position} control={switchElement}>\n      <FieldBox.Title>{children}</FieldBox.Title>\n      {description && <FieldBox.Description>{description}</FieldBox.Description>}\n    </FieldBox>\n  );\n};\n"]}