@keboola/design 9.1.0 → 11.0.0

package/dist/chunk-X4IHLKRD.js

@@ -0,0 +1,42 @@
+import { escapeStringRegexp } from './chunk-MODE4QIA.js';
+import { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/MarkedText/utils.ts
+var createSearchRegex = ({
+  mark,
+  isCaseSensitive = false
+}) => {
+  const pattern = escapeStringRegexp(mark).split(" ").filter(Boolean).join("|");
+  return new RegExp(`(${pattern})`, `g${isCaseSensitive ? "" : "i"}`);
+};
+var createMarkedParts = ({
+  mark,
+  isCaseSensitive,
+  source
+}) => {
+  if (!mark?.trim()) return [{ isMark: false, part: source }];
+  const searchRegex = createSearchRegex({
+    mark,
+    isCaseSensitive
+  });
+  return source.split(searchRegex).map((part) => ({
+    isMark: searchRegex.test(part),
+    part
+  })).filter(({ part }) => part !== "");
+};
+var MarkedText = ({ ref, source, mark, isCaseSensitive = false, ...spanProps }) => {
+  const parts = useMemo(
+    () => createMarkedParts({
+      mark,
+      source,
+      isCaseSensitive
+    }),
+    [isCaseSensitive, mark, source]
+  );
+  return /* @__PURE__ */ jsx("span", { ...spanProps, ref, children: parts.map(({ isMark, part }, index) => isMark ? /* @__PURE__ */ jsx("mark", { children: part }, index) : part) });
+};
+
+export { MarkedText };
+//# sourceMappingURL=chunk-X4IHLKRD.js.map
+//# sourceMappingURL=chunk-X4IHLKRD.js.map

package/dist/chunk-X4IHLKRD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MarkedText/utils.ts","../src/components/MarkedText/MarkedText.tsx"],"names":[],"mappings":";;;;;AAEA,IAAM,oBAAoB,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,eAAA,GAAkB;AACpB,CAAA,KAGM;AACJ,EAAA,MAAM,OAAA,GAAU,kBAAA,CAAmB,IAAI,CAAA,CAAE,KAAA,CAAM,GAAG,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAC5E,EAAA,OAAO,IAAI,OAAO,CAAA,CAAA,EAAI,OAAO,KAAK,CAAA,CAAA,EAAI,eAAA,GAAkB,EAAA,GAAK,GAAG,CAAA,CAAE,CAAA;AACpE,CAAA;AAEO,IAAM,oBAAoB,CAAC;AAAA,EAChC,IAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA,KAIM;AACJ,EAAA,IAAI,CAAC,IAAA,EAAM,IAAA,EAAK,EAAG,OAAO,CAAC,EAAE,MAAA,EAAQ,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,CAAA;AAE1D,EAAA,MAAM,cAAc,iBAAA,CAAkB;AAAA,IACpC,IAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,OAAO,OACJ,KAAA,CAAM,WAAW,CAAA,CACjB,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,IACd,MAAA,EAAQ,WAAA,CAAY,IAAA,CAAK,IAAI,CAAA;AAAA,IAC7B;AAAA,GACF,CAAE,EACD,MAAA,CAAO,CAAC,EAAE,IAAA,EAAK,KAAM,SAAS,EAAE,CAAA;AACrC,CAAA;ACxBO,IAAM,UAAA,GAAa,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,MAAM,eAAA,GAAkB,KAAA,EAAO,GAAG,SAAA,EAAU,KAAa;AACjG,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACZ,MACE,iBAAA,CAAkB;AAAA,MAChB,IAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,eAAA,EAAiB,IAAA,EAAM,MAAM;AAAA,GAChC;AAEA,EAAA,uBACE,GAAA,CAAC,UAAM,GAAG,SAAA,EAAW,KAElB,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,EAAE,MAAA,EAAQ,MAAK,EAAG,KAAA,KAAW,yBAAS,GAAA,CAAC,MAAA,EAAA,EAAkB,kBAAR,KAAa,CAAA,GAAU,IAAK,CAAA,EAC3F,CAAA;AAEJ","file":"chunk-X4IHLKRD.js","sourcesContent":["import { escapeStringRegexp } from '../../utils/escapeStringRegexp';\n\nconst createSearchRegex = ({\n  mark,\n  isCaseSensitive = false,\n}: {\n  mark: string;\n  isCaseSensitive?: boolean;\n}) => {\n  const pattern = escapeStringRegexp(mark).split(' ').filter(Boolean).join('|');\n  return new RegExp(`(${pattern})`, `g${isCaseSensitive ? '' : 'i'}`);\n};\n\nexport const createMarkedParts = ({\n  mark,\n  isCaseSensitive,\n  source,\n}: {\n  mark?: string;\n  source: string;\n  isCaseSensitive: boolean;\n}) => {\n  if (!mark?.trim()) return [{ isMark: false, part: source }];\n\n  const searchRegex = createSearchRegex({\n    mark,\n    isCaseSensitive,\n  });\n\n  return source\n    .split(searchRegex)\n    .map((part) => ({\n      isMark: searchRegex.test(part),\n      part,\n    }))\n    .filter(({ part }) => part !== '');\n};\n","import { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { createMarkedParts } from './utils';\n\ntype Props = {\n  source: string;\n  className?: string;\n  mark?: string;\n  isCaseSensitive?: boolean;\n} & ComponentProps<'span'>;\n\nexport const MarkedText = ({ ref, source, mark, isCaseSensitive = false, ...spanProps }: Props) => {\n  const parts = useMemo(\n    () =>\n      createMarkedParts({\n        mark,\n        source,\n        isCaseSensitive,\n      }),\n    [isCaseSensitive, mark, source],\n  );\n\n  return (\n    <span {...spanProps} ref={ref}>\n      {/* oxlint-disable-next-line react/no-array-index-key */}\n      {parts.map(({ isMark, part }, index) => (isMark ? <mark key={index}>{part}</mark> : part))}\n    </span>\n  );\n};\n"]}

package/dist/chunk-XAHEXZJC.js

@@ -0,0 +1,80 @@
+import { Card } from './chunk-F3FOFY2P.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var trendClassnames = cva(
+  ["tw:inline-flex", "tw:items-center", "tw:gap-1", "tw:text-sm", "tw:font-medium"],
+  {
+    variants: {
+      direction: {
+        up: "tw:text-success",
+        down: "tw:text-destructive",
+        flat: "tw:text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      direction: "flat"
+    }
+  }
+);
+var StatCardRoot = ({ className, children, bordered = true, ...rest }) => /* @__PURE__ */ jsx(Card, { bordered, className: cn("tw:gap-2", className), role: "group", ...rest, children });
+var StatCardIcon = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw:flex tw:size-9 tw:items-center tw:justify-center tw:rounded-md tw:bg-accent tw:text-accent-foreground",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-5',
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var StatCardLabel = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("tw:m-0 tw:text-sm tw:font-medium tw:text-muted-foreground", className),
+    ...rest,
+    children
+  }
+);
+var StatCardValue = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn(
+      "tw:m-0 tw:text-3xl tw:font-semibold tw:leading-tight tw:tracking-tight tw:text-foreground",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var StatCardTrend = ({ className, direction = "flat", icon, children, ...rest }) => /* @__PURE__ */ jsxs("span", { className: trendClassnames({ direction, className }), ...rest, children: [
+  icon,
+  children
+] });
+var StatCardFootnote = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("p", { className: cn("tw:m-0 tw:text-xs tw:text-muted-foreground", className), ...rest, children });
+var StatCard = StatCardRoot;
+StatCard.Icon = StatCardIcon;
+StatCard.Label = StatCardLabel;
+StatCard.Value = StatCardValue;
+StatCard.Trend = StatCardTrend;
+StatCard.Footnote = StatCardFootnote;
+var gridClassnames = cva(["tw:grid", "tw:gap-4"], {
+  variants: {
+    columns: {
+      2: "tw:grid-cols-1 tw:sm:grid-cols-2",
+      3: "tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3",
+      4: "tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4"
+    }
+  },
+  defaultVariants: {
+    columns: 4
+  }
+});
+var StatCardGrid = ({ className, columns = 4, children, ...rest }) => /* @__PURE__ */ jsx("div", { className: gridClassnames({ columns, className }), ...rest, children });
+
+export { StatCard, StatCardGrid };
+//# sourceMappingURL=chunk-XAHEXZJC.js.map
+//# sourceMappingURL=chunk-XAHEXZJC.js.map

package/dist/chunk-XAHEXZJC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/StatCard/StatCard.tsx","../src/blocks/StatCard/StatCardGrid.tsx"],"names":["cva","jsx"],"mappings":"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","file":"chunk-XAHEXZJC.js","sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Card } from '../../components/Card';\nimport { cn } from '../../utils';\n\nconst trendClassnames = cva(\n  ['tw:inline-flex', 'tw:items-center', 'tw:gap-1', 'tw:text-sm', 'tw:font-medium'],\n  {\n    variants: {\n      direction: {\n        up: 'tw:text-success',\n        down: 'tw:text-destructive',\n        flat: 'tw:text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      direction: 'flat',\n    },\n  },\n);\n\ntype TrendDirection = NonNullable<VariantProps<typeof trendClassnames>['direction']>;\n\ntype RootProps = ComponentProps<typeof Card>;\n\n/**\n * A single KPI / metric tile — a signature composition over `Card` with a label,\n * a large value, an optional trend delta, and an optional leading icon + footnote.\n *\n * **When to use:** the headline numbers of a dashboard (revenue, active users, uptime),\n * usually in a `StatCardGrid` strip at the top of a page.\n * **When NOT to use:** for a chart use `ChartPanel`; for a generic content surface use `Card`.\n * **Composition:** `StatCard.Icon`, `StatCard.Label`, `StatCard.Value`, `StatCard.Trend`,\n * `StatCard.Footnote`. All colours read semantic tokens, so the tile re-skins with the brand.\n */\nconst StatCardRoot = ({ className, children, bordered = true, ...rest }: RootProps) => (\n  <Card bordered={bordered} className={cn('tw:gap-2', className)} role=\"group\" {...rest}>\n    {children}\n  </Card>\n);\n\ntype IconProps = ComponentProps<'div'>;\n\nconst StatCardIcon = ({ className, children, ...rest }: IconProps) => (\n  <div\n    className={cn(\n      'tw:flex tw:size-9 tw:items-center tw:justify-center tw:rounded-md tw:bg-accent tw:text-accent-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\ntype LabelProps = ComponentProps<'p'>;\n\nconst StatCardLabel = ({ className, children, ...rest }: LabelProps) => (\n  <p\n    className={cn('tw:m-0 tw:text-sm tw:font-medium tw:text-muted-foreground', className)}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype ValueProps = ComponentProps<'p'>;\n\nconst StatCardValue = ({ className, children, ...rest }: ValueProps) => (\n  <p\n    className={cn(\n      'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-tight tw:tracking-tight tw:text-foreground',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype TrendProps = ComponentProps<'span'> & {\n  /** Which way the metric moved — sets the semantic colour (`success` / `destructive` / muted). */\n  direction?: TrendDirection;\n  /** Optional leading icon (e.g. an arrow). */\n  icon?: ReactNode;\n};\n\nconst StatCardTrend = ({ className, direction = 'flat', icon, children, ...rest }: TrendProps) => (\n  <span className={trendClassnames({ direction, className })} {...rest}>\n    {icon}\n    {children}\n  </span>\n);\n\ntype FootnoteProps = ComponentProps<'p'>;\n\nconst StatCardFootnote = ({ className, children, ...rest }: FootnoteProps) => (\n  <p className={cn('tw:m-0 tw:text-xs tw:text-muted-foreground', className)} {...rest}>\n    {children}\n  </p>\n);\n\nexport const StatCard = StatCardRoot as typeof StatCardRoot & {\n  Icon: typeof StatCardIcon;\n  Label: typeof StatCardLabel;\n  Value: typeof StatCardValue;\n  Trend: typeof StatCardTrend;\n  Footnote: typeof StatCardFootnote;\n};\n\nStatCard.Icon = StatCardIcon;\nStatCard.Label = StatCardLabel;\nStatCard.Value = StatCardValue;\nStatCard.Trend = StatCardTrend;\nStatCard.Footnote = StatCardFootnote;\n\nexport type {\n  RootProps as StatCardProps,\n  TrendProps as StatCardTrendProps,\n  TrendDirection as StatCardTrendDirection,\n};\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst gridClassnames = cva(['tw:grid', 'tw:gap-4'], {\n  variants: {\n    columns: {\n      2: 'tw:grid-cols-1 tw:sm:grid-cols-2',\n      3: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3',\n      4: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4',\n    },\n  },\n  defaultVariants: {\n    columns: 4,\n  },\n});\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof gridClassnames>;\n\n/**\n * Responsive strip of KPI tiles. Lay `StatCard`s inside it at the top of a dashboard.\n * `columns` caps the tiles per row on large screens; the grid collapses to one column on\n * mobile and two on small screens.\n */\nexport const StatCardGrid = ({ className, columns = 4, children, ...rest }: Props) => (\n  <div className={gridClassnames({ columns, className })} {...rest}>\n    {children}\n  </div>\n);\n\nexport type { Props as StatCardGridProps };\n"]}

package/dist/chunk-XCYGJDUX.js

@@ -0,0 +1,31 @@
+import { Popover } from './chunk-ON4BJTHI.js';
+import { Calendar } from './chunk-YI3WLXEN.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DatePicker = ({
+  align = "end",
+  alignOffset = -18,
+  children,
+  defaultOpen,
+  onOpenChange,
+  open,
+  sideOffset = 12,
+  ...calendarProps
+}) => /* @__PURE__ */ jsxs(Popover, { defaultOpen, open, onOpenChange, children: [
+  /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      align,
+      alignOffset,
+      className: "tw:w-auto tw:p-0",
+      sideOffset,
+      children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps })
+    }
+  )
+] });
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+//# sourceMappingURL=chunk-XCYGJDUX.js.map
+//# sourceMappingURL=chunk-XCYGJDUX.js.map

package/dist/chunk-XCYGJDUX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;AAaO,IAAM,aAAa,CAAC;AAAA,EACzB,KAAA,GAAQ,KAAA;AAAA,EACR,WAAA,GAAc,GAAA;AAAA,EACd,QAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA,GAAa,EAAA;AAAA,EACb,GAAG;AACL,CAAA,qBACE,IAAA,CAAC,OAAA,EAAA,EAAQ,WAAA,EAA0B,IAAA,EAAY,YAAA,EAC7C,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAS,CAAA;AAAA,kBACnC,GAAA;AAAA,IAAC,OAAA,CAAQ,OAAA;AAAA,IAAR;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,EAAU,kBAAA;AAAA,MACV,UAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,aAAA,EAAe;AAAA;AAAA;AAC/B,CAAA,EACF;AAGF,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-XCYGJDUX.js","sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';\n\nimport type { CalendarProps } from '../Calendar';\nimport { Calendar } from '../Calendar';\nimport { Popover } from '../Popover';\n\ntype OwnPopoverProps = PropsWithChildren &\n  Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &\n  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;\n\ntype DatePickerProps = OwnPopoverProps & CalendarProps;\n\nexport const DatePicker = ({\n  align = 'end',\n  alignOffset = -18,\n  children,\n  defaultOpen,\n  onOpenChange,\n  open,\n  sideOffset = 12,\n  ...calendarProps\n}: DatePickerProps) => (\n  <Popover defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>\n    <Popover.Trigger asChild>{children}</Popover.Trigger>\n    <Popover.Content\n      align={align}\n      alignOffset={alignOffset}\n      className=\"tw:w-auto tw:p-0\"\n      sideOffset={sideOffset}\n    >\n      <Calendar {...calendarProps} />\n    </Popover.Content>\n  </Popover>\n);\n\nDatePicker.displayName = 'DatePicker';\n"]}

package/dist/chunk-Y4W3JORC.js

@@ -0,0 +1,104 @@
+import { FieldBox } from './chunk-SCQPU4UE.js';
+import { Check, Minus } from './chunk-RQVK4IYC.js';
+import { Tooltip } from './chunk-SWQFYNYG.js';
+import { useArgoDesign } from './chunk-WETKNYZX.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { useId } from 'react';
+import { Root, Indicator } from '@radix-ui/react-checkbox';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var rootVariants = cva(
+  [
+    // reset
+    "tailwindcss-preflight",
+    // position
+    "tw:flex",
+    "tw:items-center",
+    "tw:justify-center",
+    "tw:peer",
+    "tw:size-4",
+    "tw:shrink-0",
+    "tw:cursor-pointer",
+    // border
+    "tw:border",
+    "tw:border-solid",
+    // disabled
+    "tw:disabled:opacity-50",
+    "tw:disabled:cursor-not-allowed"
+  ],
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: [
+          "tw:rounded",
+          "tw:border-neutral-200",
+          "tw:data-[state=checked]:bg-primary",
+          "tw:data-[state=checked]:border-primary",
+          "tw:data-[state=indeterminate]:bg-white",
+          "tw:data-[state=indeterminate]:border-neutral-200"
+        ],
+        argo: [
+          "tw:rounded",
+          "tw:border-input",
+          "tw:transition-colors",
+          "tw:data-[state=checked]:bg-primary",
+          "tw:data-[state=checked]:border-primary",
+          "tw:data-[state=indeterminate]:bg-primary",
+          "tw:data-[state=indeterminate]:border-primary",
+          // focus
+          "tw:focus-visible:outline-hidden",
+          "tw:focus-visible:border-primary",
+          "tw:focus-visible:ring-2",
+          "tw:focus-visible:ring-ring/50"
+        ]
+      }
+    }
+  }
+);
+var indicatorVariants = cva(["tw:group", "tw:flex", "tw:items-center"], {
+  defaultVariants: {
+    variant: "default"
+  },
+  variants: {
+    variant: {
+      default: [
+        "tw:data-[state=checked]:text-primary-foreground",
+        "tw:data-[state=indeterminate]:text-neutral-200"
+      ],
+      argo: ["tw:text-primary-foreground"]
+    }
+  }
+});
+function Checkbox({
+  className,
+  id: idProp,
+  children,
+  description,
+  variant,
+  position,
+  tooltip,
+  tooltipPlacement = "top",
+  ...rest
+}) {
+  const fallbackId = useId();
+  const id = idProp?.toString() ?? fallbackId;
+  const styleVariant = useArgoDesign() ? "argo" : "default";
+  const checkboxElement = /* @__PURE__ */ jsx(Root, { id, ...rest, className: cn(rootVariants({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxs(Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
+    /* @__PURE__ */ jsx(Check, { className: "tw:hidden tw:size-3 tw:stroke-[4px] tw:group-data-[state=checked]:block" }),
+    /* @__PURE__ */ jsx(Minus, { className: "tw:hidden tw:size-3 tw:stroke-[4px] tw:group-data-[state=indeterminate]:block" })
+  ] }) });
+  const rendered = !children ? checkboxElement : /* @__PURE__ */ jsxs(FieldBox, { htmlFor: id, variant, position, control: checkboxElement, children: [
+    /* @__PURE__ */ jsx(FieldBox.Title, { children }),
+    description && /* @__PURE__ */ jsx(FieldBox.Description, { children: description })
+  ] });
+  if (!tooltip) return rendered;
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip, placement: tooltipPlacement, triggerAsChild: !!children, children: rendered });
+}
+
+export { Checkbox };
+//# sourceMappingURL=chunk-Y4W3JORC.js.map
+//# sourceMappingURL=chunk-Y4W3JORC.js.map

package/dist/chunk-Y4W3JORC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/styles.ts","../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","file":"chunk-Y4W3JORC.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const rootVariants = cva(\n  [\n    // reset\n    'tailwindcss-preflight',\n\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n\n    'tw:peer',\n    'tw:size-4',\n    'tw:shrink-0',\n    'tw:cursor-pointer',\n\n    // border\n    'tw:border',\n    'tw:border-solid',\n\n    // disabled\n    'tw:disabled:opacity-50',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:rounded',\n          'tw:border-neutral-200',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n\n          'tw:data-[state=indeterminate]:bg-white',\n          'tw:data-[state=indeterminate]:border-neutral-200',\n        ],\n        argo: [\n          'tw:rounded',\n          'tw:border-input',\n          'tw:transition-colors',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n\n          'tw:data-[state=indeterminate]:bg-primary',\n          'tw:data-[state=indeterminate]:border-primary',\n\n          // focus\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n    },\n  },\n);\n\nexport const indicatorVariants = cva(['tw:group', 'tw:flex', 'tw:items-center'], {\n  defaultVariants: {\n    variant: 'default',\n  },\n  variants: {\n    variant: {\n      default: [\n        'tw:data-[state=checked]:text-primary-foreground',\n        'tw:data-[state=indeterminate]:text-neutral-200',\n      ],\n      argo: ['tw:text-primary-foreground'],\n    },\n  },\n});\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { CheckedState } from '@radix-ui/react-checkbox';\nimport { Indicator, Root } from '@radix-ui/react-checkbox';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { Check, Minus } from '../../icons';\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport type { fieldBoxVariants } from '../FieldBox/styles';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { indicatorVariants, rootVariants } from './styles';\n\ntype Props = {\n  id?: string | number;\n  description?: ReactNode;\n  variant?: VariantProps<typeof fieldBoxVariants>['variant'];\n  position?: 'start' | 'end';\n  tooltip?: TooltipProps['tooltip'];\n  tooltipPlacement?: TooltipProps['placement'];\n} & Omit<ComponentProps<typeof Root>, 'id'>;\n\n// First overload - for strict boolean usage\nexport function Checkbox(\n  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {\n    checked?: boolean;\n    onCheckedChange?: (checked: boolean) => void;\n  },\n): ReactNode;\n\n// Second overload - for CheckedState usage (boolean | 'indeterminate')\nexport function Checkbox(\n  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {\n    checked?: CheckedState;\n    onCheckedChange?: (checked: CheckedState) => void;\n  },\n): ReactNode;\n\nexport function Checkbox({\n  className,\n  id: idProp,\n  children,\n  description,\n  variant,\n  position,\n  tooltip,\n  tooltipPlacement = 'top',\n  ...rest\n}: Props) {\n  const fallbackId = useId();\n  const id = idProp?.toString() ?? fallbackId;\n  const styleVariant = useArgoDesign() ? 'argo' : 'default';\n\n  const checkboxElement = (\n    <Root id={id} {...rest} className={cn(rootVariants({ variant: styleVariant, className }))}>\n      <Indicator className={cn(indicatorVariants({ variant: styleVariant }))}>\n        <Check className=\"tw:hidden tw:size-3 tw:stroke-[4px] tw:group-data-[state=checked]:block\" />\n        <Minus className=\"tw:hidden tw:size-3 tw:stroke-[4px] tw:group-data-[state=indeterminate]:block\" />\n      </Indicator>\n    </Root>\n  );\n\n  const rendered = !children ? (\n    checkboxElement\n  ) : (\n    <FieldBox htmlFor={id} variant={variant} position={position} control={checkboxElement}>\n      <FieldBox.Title>{children}</FieldBox.Title>\n      {description && <FieldBox.Description>{description}</FieldBox.Description>}\n    </FieldBox>\n  );\n\n  if (!tooltip) return rendered;\n\n  // Only merge the tooltip trigger onto `rendered` when it's the FieldBox\n  // wrapper (i.e. there's a label). For a bare checkbox, `rendered` is the Radix\n  // Checkbox `Root` itself — merging a Radix Tooltip trigger onto it via\n  // `asChild` stacks two stateful primitives on one element, colliding on\n  // `data-state` (the tooltip's `open`/`closed` overwrites the checkbox's\n  // `checked`/`unchecked`) so the checkbox can no longer toggle. Falling back to\n  // the span-wrapping trigger keeps the checkbox independent.\n  return (\n    <Tooltip tooltip={tooltip} placement={tooltipPlacement} triggerAsChild={!!children}>\n      {rendered}\n    </Tooltip>\n  );\n}\n"]}