@keboola/design 10.1.0 → 11.0.1

package/dist/Card-BAoZ35CV.js

@@ -0,0 +1,105 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/styles.ts
+const cardClassnames = cva([
+	"tw:flex",
+	"tw:flex-col",
+	"tw:rounded-lg",
+	"tw:bg-card",
+	"tw:text-card-foreground"
+], {
+	defaultVariants: { padding: "small" },
+	variants: {
+		bordered: {
+			true: "tw:border tw:border-solid tw:border-neutral-200 tw:data-[argo=true]:border-border",
+			false: "tw:shadow-raised tw:data-[argo=true]:shadow-sm"
+		},
+		padding: {
+			none: "tw:p-0",
+			small: "tw:gap-4 tw:px-6 tw:py-4",
+			medium: "tw:gap-4 tw:p-7",
+			large: "tw:gap-4 tw:p-8"
+		}
+	}
+});
+const cardHeaderClassnames = cva("tw:flex", {
+	defaultVariants: {
+		divider: false,
+		layout: "row"
+	},
+	variants: {
+		divider: {
+			true: "tw:min-h-16 tw:border-b tw:border-neutral-200 tw:px-6 tw:py-2 tw:data-[argo=true]:border-border",
+			false: ""
+		},
+		layout: {
+			row: "tw:items-center tw:justify-between tw:gap-4",
+			inline: "tw:items-center tw:gap-3",
+			stack: "tw:flex-col tw:gap-1.5"
+		}
+	}
+});
+const cardContentClassnames = cva("", {
+	defaultVariants: { padded: false },
+	variants: { padded: {
+		true: "tw:px-6 tw:py-5",
+		false: ""
+	} }
+});
+const cardTitleClassnames = cn("tw:m-0", "tw:leading-6", "tw:font-medium", "tw:text-base", "tw:text-card-foreground");
+//#endregion
+//#region src/components/Card/CardContent.tsx
+const CardContent = ({ children, className, padded = false, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cardContentClassnames({
+		className,
+		padded
+	}) || void 0,
+	children
+});
+//#endregion
+//#region src/components/Card/CardHeader.tsx
+const CardHeader = ({ children, className, divider = false, layout = "row", ...rest }) => {
+	const renderArgo = useArgoDesign();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-argo": renderArgo,
+		className: cardHeaderClassnames({
+			className,
+			divider,
+			layout
+		}),
+		children
+	});
+};
+//#endregion
+//#region src/components/Card/CardTitle.tsx
+const CardTitle = ({ children, className, as: Tag = "h3", ...rest }) => /* @__PURE__ */ jsx(Tag, {
+	className: cn(cardTitleClassnames, className),
+	...rest,
+	children
+});
+//#endregion
+//#region src/components/Card/Card.tsx
+const Card = ({ children, className, bordered = false, padding = "small", ...rest }) => {
+	const renderArgo = useArgoDesign();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-argo": renderArgo,
+		className: cardClassnames({
+			className,
+			bordered,
+			padding
+		}),
+		children
+	});
+};
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Title = CardTitle;
+//#endregion
+export { Card };
+
+//# sourceMappingURL=Card-BAoZ35CV.js.map

package/dist/Card-BAoZ35CV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-BAoZ35CV.js","names":[],"sources":["../src/components/Card/styles.ts","../src/components/Card/CardContent.tsx","../src/components/Card/CardHeader.tsx","../src/components/Card/CardTitle.tsx","../src/components/Card/Card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nexport const cardClassnames = cva(\n  ['tw:flex', 'tw:flex-col', 'tw:rounded-lg', 'tw:bg-card', 'tw:text-card-foreground'],\n  {\n    defaultVariants: {\n      padding: 'small',\n    },\n    variants: {\n      bordered: {\n        true: 'tw:border tw:border-solid tw:border-neutral-200 tw:data-[argo=true]:border-border',\n        false: 'tw:shadow-raised tw:data-[argo=true]:shadow-sm',\n      },\n      // `none` also drops the row gap: the slots own their own padding in that\n      // mode, so a gap would double-space a `Card.Header divider` against the\n      // content it is already ruled off from.\n      padding: {\n        none: 'tw:p-0',\n        small: 'tw:gap-4 tw:px-6 tw:py-4',\n        medium: 'tw:gap-4 tw:p-7',\n        large: 'tw:gap-4 tw:p-8',\n      },\n    },\n  },\n);\n\nexport const cardHeaderClassnames = cva('tw:flex', {\n  defaultVariants: {\n    divider: false,\n    layout: 'row',\n  },\n  variants: {\n    // A divider only reads correctly full-bleed, which in turn only happens on an\n    // unpadded root — so it carries the header's own padding rather than relying\n    // on `Card padding`.\n    //\n    // No `border-solid` here, unlike the `bordered` root: that sets the style on\n    // all four sides, and with only `border-b` supplying a width the other three\n    // fall back to the CSS initial `medium` (3px) and draw a box round the header.\n    // `border-b` already sets its own side's style.\n    // `min-h-16` keeps the band a consistent height whether the header holds just a\n    // title or a title plus a button — with padding alone the height tracks the\n    // tallest child, so an action button made the band 9px taller than a bare title.\n    // Padding stays small enough that both cases land on the min rather than over it.\n    divider: {\n      true: 'tw:min-h-16 tw:border-b tw:border-neutral-200 tw:px-6 tw:py-2 tw:data-[argo=true]:border-border',\n      false: '',\n    },\n    layout: {\n      row: 'tw:items-center tw:justify-between tw:gap-4',\n      inline: 'tw:items-center tw:gap-3',\n      stack: 'tw:flex-col tw:gap-1.5',\n    },\n  },\n});\n\nexport const cardContentClassnames = cva('', {\n  defaultVariants: {\n    padded: false,\n  },\n  variants: {\n    padded: {\n      true: 'tw:px-6 tw:py-5',\n      false: '',\n    },\n  },\n});\n\nexport const cardTitleClassnames = cn(\n  'tw:m-0',\n  'tw:leading-6',\n  'tw:font-medium',\n  'tw:text-base',\n  'tw:text-card-foreground',\n);\n","import type { HTMLAttributes } from 'react';\n\nimport { cardContentClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /** Applies the standard body padding. Use with `Card padding=\"none\"`, where the\n   *  root adds none — otherwise the padding is doubled. */\n  padded?: boolean;\n};\n\nexport const CardContent = ({ children, className, padded = false, ...rest }: Props) => (\n  // `|| undefined` so an unpadded, unstyled content slot stays attribute-free\n  // rather than rendering `class=\"\"`.\n  <div {...rest} className={cardContentClassnames({ className, padded }) || undefined}>\n    {children}\n  </div>\n);\n","import type { HTMLAttributes } from 'react';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { cardHeaderClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /** Adds a bottom rule, the header's own padding, and a 64px height floor so the\n   *  band stays the same height with or without an action button. The rule spans the\n   *  full card width — pair with `Card padding=\"none\"`; on a padded root it is inset. */\n  divider?: boolean;\n  /** How the header distributes its children. `row` (default) pushes them apart —\n   *  title left, actions right. `inline` keeps them together on one line, for a\n   *  title with an adornment such as an icon or badge. `stack` puts a description\n   *  under the title. */\n  layout?: 'row' | 'inline' | 'stack';\n};\n\nexport const CardHeader = ({\n  children,\n  className,\n  divider = false,\n  layout = 'row',\n  ...rest\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <div\n      {...rest}\n      data-argo={renderArgo}\n      className={cardHeaderClassnames({ className, divider, layout })}\n    >\n      {children}\n    </div>\n  );\n};\n","import type { HTMLAttributes } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { cardTitleClassnames } from './styles';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\ntype Props = HTMLAttributes<HTMLHeadingElement> & {\n  /** Heading tag to render. Defaults to `h3`; set explicitly to avoid a heading-order skip\n   *  (e.g. `as=\"h2\"` when the Card sits directly under a page's `h1`). */\n  as?: HeadingLevel;\n};\n\nexport const CardTitle = ({ children, className, as: Tag = 'h3', ...rest }: Props) => (\n  <Tag className={cn(cardTitleClassnames, className)} {...rest}>\n    {children}\n  </Tag>\n);\n","import type { HTMLAttributes } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { CardContent } from './CardContent';\nimport { CardHeader } from './CardHeader';\nimport { CardTitle } from './CardTitle';\nimport { cardClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardClassnames>;\n\nexport const Card = ({\n  children,\n  className,\n  bordered = false,\n  padding = 'small',\n  ...rest\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <div\n      {...rest}\n      data-argo={renderArgo}\n      className={cardClassnames({ className, bordered, padding })}\n    >\n      {children}\n    </div>\n  );\n};\n\nCard.Header = CardHeader;\nCard.Content = CardContent;\nCard.Title = CardTitle;\n"],"mappings":";;;;;AAIA,MAAa,iBAAiB,IAC5B;CAAC;CAAW;CAAe;CAAiB;CAAc;AAAyB,GACnF;CACE,iBAAiB,EACf,SAAS,QACX;CACA,UAAU;EACR,UAAU;GACR,MAAM;GACN,OAAO;EACT;EAIA,SAAS;GACP,MAAM;GACN,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CACF;AAEA,MAAa,uBAAuB,IAAI,WAAW;CACjD,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EAaR,SAAS;GACP,MAAM;GACN,OAAO;EACT;EACA,QAAQ;GACN,KAAK;GACL,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAa,wBAAwB,IAAI,IAAI;CAC3C,iBAAiB,EACf,QAAQ,MACV;CACA,UAAU,EACR,QAAQ;EACN,MAAM;EACN,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAa,sBAAsB,GACjC,UACA,gBACA,kBACA,gBACA,yBACF;;;AClEA,MAAa,eAAe,EAAE,UAAU,WAAW,SAAS,OAAO,GAAG,WAGpE,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,sBAAsB;EAAE;EAAW;CAAO,CAAC,KAAK,KAAA;CACvE;AACE,CAAA;;;ACGP,MAAa,cAAc,EACzB,UACA,WACA,UAAU,OACV,SAAS,OACT,GAAG,WACQ;CACX,MAAM,aAAa,cAAc;CACjC,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAW;EACX,WAAW,qBAAqB;GAAE;GAAW;GAAS;EAAO,CAAC;EAE7D;CACE,CAAA;AAET;;;ACrBA,MAAa,aAAa,EAAE,UAAU,WAAW,IAAI,MAAM,MAAM,GAAG,WAClE,oBAAC,KAAD;CAAK,WAAW,GAAG,qBAAqB,SAAS;CAAG,GAAI;CACrD;AACE,CAAA;;;ACLP,MAAa,QAAQ,EACnB,UACA,WACA,WAAW,OACX,UAAU,SACV,GAAG,WACQ;CACX,MAAM,aAAa,cAAc;CACjC,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAW;EACX,WAAW,eAAe;GAAE;GAAW;GAAU;EAAQ,CAAC;EAEzD;CACE,CAAA;AAET;AAEA,KAAK,SAAS;AACd,KAAK,UAAU;AACf,KAAK,QAAQ"}

package/dist/Checkbox-GJ8-srt4.js

@@ -0,0 +1,97 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip } from "./utils-D0c5VAyF.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { Check, Minus } from "./icons-Cek151jC.js";
+import { FieldBox } from "./FieldBox-D7DYtX_m.js";
+import { useId } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Indicator, Root } from "@radix-ui/react-checkbox";
+//#region src/components/Checkbox/styles.ts
+const rootVariants = cva([
+	"tailwindcss-preflight",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:peer",
+	"tw:size-4",
+	"tw:shrink-0",
+	"tw:cursor-pointer",
+	"tw:border",
+	"tw:border-solid",
+	"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",
+			"tw:focus-visible:outline-hidden",
+			"tw:focus-visible:border-primary",
+			"tw:focus-visible:ring-2",
+			"tw:focus-visible:ring-ring/50"
+		]
+	} }
+});
+const 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"]
+	} }
+});
+//#endregion
+//#region src/components/Checkbox/Checkbox.tsx
+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
+	});
+}
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox-GJ8-srt4.js.map

package/dist/Checkbox-GJ8-srt4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-GJ8-srt4.js","names":[],"sources":["../src/components/Checkbox/styles.ts","../src/components/Checkbox/Checkbox.tsx"],"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"],"mappings":";;;;;;;;;;AAEA,MAAa,eAAe,IAC1B;CAEE;CAGA;CACA;CACA;CAEA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GAEA;GACA;GAEA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GAEA;GACA;GAEA;GACA;GAGA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,IAAI;CAAC;CAAY;CAAW;AAAiB,GAAG;CAC/E,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS,CACP,mDACA,gDACF;EACA,MAAM,CAAC,4BAA4B;CACrC,EACF;AACF,CAAC;;;ACnCD,SAAgB,SAAS,EACvB,WACA,IAAI,QACJ,UACA,aACA,SACA,UACA,SACA,mBAAmB,OACnB,GAAG,QACK;CACR,MAAM,aAAa,MAAM;CACzB,MAAM,KAAK,QAAQ,SAAS,KAAK;CACjC,MAAM,eAAe,cAAc,IAAI,SAAS;CAEhD,MAAM,kBACJ,oBAAC,MAAD;EAAU;EAAI,GAAI;EAAM,WAAW,GAAG,aAAa;GAAE,SAAS;GAAc;EAAU,CAAC,CAAC;EACtF,UAAA,qBAAC,WAAD;GAAW,WAAW,GAAG,kBAAkB,EAAE,SAAS,aAAa,CAAC,CAAC;GAArE,UAAA,CACE,oBAAC,OAAD,EAAO,WAAU,0EAA2E,CAAA,GAC5F,oBAAC,OAAD,EAAO,WAAU,gFAAiF,CAAA,CACzF;;CACP,CAAA;CAGR,MAAM,WAAW,CAAC,WAChB,kBAEA,qBAAC,UAAD;EAAU,SAAS;EAAa;EAAmB;EAAU,SAAS;EAAtE,UAAA,CACE,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;CAGZ,IAAI,CAAC,SAAS,OAAO;CASrB,OACE,oBAAC,SAAD;EAAkB;EAAS,WAAW;EAAkB,gBAAgB,CAAC,CAAC;EACvE,UAAA;CACM,CAAA;AAEb"}

package/dist/Clipboard-CBJZiviP.js

@@ -0,0 +1,58 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip, copyToClipboard } from "./utils-D0c5VAyF.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Clipboard/Clipboard.tsx
+const Clipboard = ({ ref, text: textProp, children, tooltip = "Copy to Clipboard", tooltipPlacement = "top", tooltipVariant: tooltipVariantProp = "action", asChild = false, onClick, className, ...restButtonProps }) => {
+	const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+	const [state, setState] = useState("ready");
+	const text = typeof textProp === "function" ? textProp() : textProp;
+	const copy = async (text) => {
+		try {
+			if (!document.hasFocus()) window.focus();
+			await copyToClipboard(text);
+			setState("copied");
+		} catch {
+			setState("error");
+		}
+	};
+	const handleOnClick = (event) => {
+		setIsTooltipOpen(true);
+		if (text && state === "ready") copy(text);
+		onClick?.(event);
+	};
+	const handleOnOpenChange = (open) => {
+		if (!open && state !== "ready") setState("ready");
+		setIsTooltipOpen(open);
+	};
+	const tooltipContent = (() => {
+		if (!text) return "Nothing to copy";
+		if (state === "error") return "Failed to copy";
+		if (state === "copied") return "Copied to Clipboard";
+		return tooltip;
+	})();
+	const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
+	const hasTooltipContent = tooltipContent !== null && tooltipContent !== void 0;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		open: isTooltipOpen,
+		onOpenChange: handleOnOpenChange,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			...restButtonProps,
+			asChild,
+			keepOpenOnClick: true,
+			onClick: handleOnClick,
+			className: cn("tw:cursor-pointer", className),
+			ref,
+			children: children ?? text
+		}), hasTooltipContent && /* @__PURE__ */ jsx(Tooltip.Content, {
+			keepOpenOnPointerDownOutside: true,
+			placement: tooltipPlacement,
+			variant: tooltipVariant,
+			children: tooltipContent
+		})]
+	});
+};
+//#endregion
+export { Clipboard };
+
+//# sourceMappingURL=Clipboard-CBJZiviP.js.map

package/dist/Clipboard-CBJZiviP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard-CBJZiviP.js","names":[],"sources":["../src/components/Clipboard/Clipboard.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { cn, copyToClipboard } from '../../utils';\nimport { type Props as TooltipProps, Tooltip } from '../Tooltip';\n\ntype Props = {\n  tooltip?: TooltipProps['tooltip'];\n  tooltipPlacement?: TooltipProps['placement'];\n  tooltipVariant?: TooltipProps['variant'];\n  asChild?: TooltipProps['triggerAsChild'];\n  text?: string | (() => string);\n} & ComponentProps<'button'>;\n\nexport const Clipboard = ({\n  ref,\n  text: textProp,\n  children,\n  tooltip = 'Copy to Clipboard',\n  tooltipPlacement = 'top',\n  tooltipVariant: tooltipVariantProp = 'action',\n  asChild = false,\n  onClick,\n  className,\n  ...restButtonProps\n}: Props) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  const [state, setState] = useState<'ready' | 'copied' | 'error'>('ready');\n  const text = typeof textProp === 'function' ? textProp() : textProp;\n\n  const copy = async (text: string) => {\n    try {\n      // For the clipboard feature to work reliably, the window must be in focus for security reasons.\n      // However, the button can be clicked without the window being focused.\n      if (!document.hasFocus()) window.focus();\n\n      await copyToClipboard(text);\n      setState('copied');\n    } catch {\n      setState('error');\n    }\n  };\n\n  const handleOnClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    // Open on click rather than waiting for hover. Radix opens on pointer-enter via a\n    // `delayDuration` timer (300ms here), so clicking faster than that left the outcome invisible\n    // until the timer caught up — the message was already rendered, just inside a closed tooltip.\n    setIsTooltipOpen(true);\n    if (text && state === 'ready') void copy(text);\n    onClick?.(event);\n  };\n\n  const handleOnOpenChange: ComponentProps<typeof Tooltip.Root>['onOpenChange'] = (open) => {\n    // Reset when the tooltip closes, allowing the user to leave the copy button.\n    if (!open && state !== 'ready') setState('ready');\n    setIsTooltipOpen(open);\n  };\n\n  const tooltipContent = (() => {\n    if (!text) return 'Nothing to copy';\n    if (state === 'error') return 'Failed to copy';\n    if (state === 'copied') return 'Copied to Clipboard';\n    return tooltip;\n  })();\n\n  const tooltipVariant: TooltipProps['variant'] =\n    state === 'ready' && !!text ? tooltipVariantProp : 'action';\n\n  // `tooltip={null}` leaves nothing to say until there is an outcome. Not rendering `Content` at all\n  // is what makes that work: hovering still opens the tooltip, there is simply nothing in it, and\n  // the copied / failed message appears in place the moment `state` changes. It also keeps Radix\n  // from pointing the trigger's `aria-describedby` at content that has no text.\n  const hasTooltipContent = tooltipContent !== null && tooltipContent !== undefined;\n\n  return (\n    <Tooltip.Root open={isTooltipOpen} onOpenChange={handleOnOpenChange}>\n      <Tooltip.Trigger\n        {...restButtonProps}\n        asChild={asChild}\n        keepOpenOnClick\n        onClick={handleOnClick}\n        className={cn('tw:cursor-pointer', className)}\n        ref={ref}\n      >\n        {children ?? text}\n      </Tooltip.Trigger>\n\n      {hasTooltipContent && (\n        <Tooltip.Content\n          keepOpenOnPointerDownOutside\n          placement={tooltipPlacement}\n          variant={tooltipVariant}\n        >\n          {tooltipContent}\n        </Tooltip.Content>\n      )}\n    </Tooltip.Root>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAa,aAAa,EACxB,KACA,MAAM,UACN,UACA,UAAU,qBACV,mBAAmB,OACnB,gBAAgB,qBAAqB,UACrC,UAAU,OACV,SACA,WACA,GAAG,sBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,SAAuC,OAAO;CACxE,MAAM,OAAO,OAAO,aAAa,aAAa,SAAS,IAAI;CAE3D,MAAM,OAAO,OAAO,SAAiB;EACnC,IAAI;GAGF,IAAI,CAAC,SAAS,SAAS,GAAG,OAAO,MAAM;GAEvC,MAAM,gBAAgB,IAAI;GAC1B,SAAS,QAAQ;EACnB,QAAQ;GACN,SAAS,OAAO;EAClB;CACF;CAEA,MAAM,iBAAuD,UAAU;EAIrE,iBAAiB,IAAI;EACrB,IAAI,QAAQ,UAAU,SAAS,KAAU,IAAI;EAC7C,UAAU,KAAK;CACjB;CAEA,MAAM,sBAA2E,SAAS;EAExF,IAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,OAAO;EAChD,iBAAiB,IAAI;CACvB;CAEA,MAAM,wBAAwB;EAC5B,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,UAAU,SAAS,OAAO;EAC9B,IAAI,UAAU,UAAU,OAAO;EAC/B,OAAO;CACT,EAAA,CAAG;CAEH,MAAM,iBACJ,UAAU,WAAW,CAAC,CAAC,OAAO,qBAAqB;CAMrD,MAAM,oBAAoB,mBAAmB,QAAQ,mBAAmB,KAAA;CAExE,OACE,qBAAC,QAAQ,MAAT;EAAc,MAAM;EAAe,cAAc;EAAjD,UAAA,CACE,oBAAC,QAAQ,SAAT;GACE,GAAI;GACK;GACT,iBAAA;GACA,SAAS;GACT,WAAW,GAAG,qBAAqB,SAAS;GACvC;GAEJ,UAAA,YAAY;EACE,CAAA,GAEhB,qBACC,oBAAC,QAAQ,SAAT;GACE,8BAAA;GACA,WAAW;GACX,SAAS;GAER,UAAA;EACc,CAAA,CAEP;;AAElB"}

package/dist/ClipboardButton-ez5V3fkk.js

@@ -0,0 +1,43 @@
+import { Copy } from "./icons-Cek151jC.js";
+import { Button, ButtonInline } from "./Button-nzmDNS2q.js";
+import { Clipboard } from "./Clipboard-CBJZiviP.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/ClipboardButton/ClipboardButton.tsx
+const DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
+const DEFAULT_ARIA_LABEL = "Copy";
+const ClipboardButton = ({ text, tooltip, tooltipPlacement, tooltipVariant, icon = DEFAULT_ICON, variant = "outline", children, ...rest }) => {
+	const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
+	const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
+	return /* @__PURE__ */ jsx(Clipboard, {
+		asChild: true,
+		tooltip,
+		tooltipPlacement,
+		tooltipVariant,
+		text,
+		children: /* @__PURE__ */ jsxs(Button, {
+			...rest,
+			"aria-label": ariaLabel,
+			variant,
+			disabled: !text,
+			children: [icon, children]
+		})
+	});
+};
+//#endregion
+//#region src/blocks/ClipboardButton/ClipboardInline.tsx
+const ClipboardInline = ({ text, tooltip, tooltipPlacement, tooltipVariant, children = "Copy To Clipboard", hideIcon = false, ...rest }) => /* @__PURE__ */ jsx(Clipboard, {
+	asChild: true,
+	text,
+	tooltip,
+	tooltipPlacement,
+	tooltipVariant,
+	children: /* @__PURE__ */ jsxs(ButtonInline, {
+		...rest,
+		disabled: !text,
+		children: [!hideIcon && /* @__PURE__ */ jsx(Copy, { className: "tw:size-4" }), children]
+	})
+});
+//#endregion
+export { ClipboardButton, ClipboardInline };
+
+//# sourceMappingURL=ClipboardButton-ez5V3fkk.js.map

package/dist/ClipboardButton-ez5V3fkk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClipboardButton-ez5V3fkk.js","names":[],"sources":["../src/blocks/ClipboardButton/ClipboardButton.tsx","../src/blocks/ClipboardButton/ClipboardInline.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof Button>, 'disabled' | 'icon'>;\n\ntype Props = ClipboardProps & ButtonProps & { icon?: ReactNode };\n\nconst DEFAULT_ICON: ReactNode = <Copy />;\nconst DEFAULT_ARIA_LABEL = 'Copy';\n\nexport const ClipboardButton = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  icon = DEFAULT_ICON,\n  variant = 'outline',\n  children,\n  ...rest\n}: Props) => {\n  // Icon-only (no text children): the `tooltip` is visual only, not an accessible\n  // name, so fall back to it (when it's a string) or a sensible default. A\n  // consumer-supplied `aria-label` in `rest` still wins.\n  // A non-empty string tooltip names the action; an empty/absent tooltip still\n  // needs a name, so fall back to the default rather than an empty aria-label.\n  const defaultAriaLabel =\n    typeof tooltip === 'string' && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;\n  const ariaLabel = rest['aria-label'] ?? (children == null ? defaultAriaLabel : undefined);\n\n  return (\n    <Clipboard\n      asChild\n      tooltip={tooltip}\n      tooltipPlacement={tooltipPlacement}\n      tooltipVariant={tooltipVariant}\n      text={text}\n    >\n      <Button {...rest} aria-label={ariaLabel} variant={variant} disabled={!text}>\n        {icon}\n        {children}\n      </Button>\n    </Clipboard>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { ButtonInline } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof ButtonInline>, 'disabled'>;\n\ntype Props = { hideIcon?: boolean } & ClipboardProps & ButtonProps;\n\nexport const ClipboardInline = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  children = 'Copy To Clipboard',\n  hideIcon = false,\n  ...rest\n}: Props) => (\n  <Clipboard\n    asChild\n    text={text}\n    tooltip={tooltip}\n    tooltipPlacement={tooltipPlacement}\n    tooltipVariant={tooltipVariant}\n  >\n    <ButtonInline {...rest} disabled={!text}>\n      {!hideIcon && <Copy className=\"tw:size-4\" />}\n      {children}\n    </ButtonInline>\n  </Clipboard>\n);\n"],"mappings":";;;;;AAeA,MAAM,eAA0B,oBAAC,MAAD,CAAO,CAAA;AACvC,MAAM,qBAAqB;AAE3B,MAAa,mBAAmB,EAE9B,MACA,SACA,kBACA,gBAGA,OAAO,cACP,UAAU,WACV,UACA,GAAG,WACQ;CAMX,MAAM,mBACJ,OAAO,YAAY,YAAY,QAAQ,KAAK,IAAI,UAAU;CAC5D,MAAM,YAAY,KAAK,kBAAkB,YAAY,OAAO,mBAAmB,KAAA;CAE/E,OACE,oBAAC,WAAD;EACE,SAAA;EACS;EACS;EACF;EACV;EAEN,UAAA,qBAAC,QAAD;GAAQ,GAAI;GAAM,cAAY;GAAoB;GAAS,UAAU,CAAC;GAAtE,UAAA,CACG,MACA,QACK;;CACC,CAAA;AAEf;;;ACvCA,MAAa,mBAAmB,EAE9B,MACA,SACA,kBACA,gBAGA,WAAW,qBACX,WAAW,OACX,GAAG,WAEH,oBAAC,WAAD;CACE,SAAA;CACM;CACG;CACS;CACF;CAEhB,UAAA,qBAAC,cAAD;EAAc,GAAI;EAAM,UAAU,CAAC;EAAnC,UAAA,CACG,CAAC,YAAY,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC1C,QACW;;AACL,CAAA"}