@keboola/design 10.1.0 → 11.0.0

package/dist/chunk-QQA37LFB.js

@@ -0,0 +1,190 @@
+import { cn } from './chunk-LXLIQ2D6.js';
+import { Root } from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  [
+    "tailwindcss-preflight",
+    // layout
+    "tw:relative",
+    "tw:flex",
+    "tw:items-center",
+    "tw:justify-center",
+    "tw:gap-2",
+    // text
+    "tw:uppercase",
+    "tw:text-xs",
+    "tw:leading-5",
+    "tw:font-medium",
+    "tw:tracking-[1px]",
+    // border
+    "tw:border",
+    // style
+    "tw:rounded",
+    "tw:whitespace-nowrap",
+    // transitions
+    "tw:transition-colors",
+    "tw:duration-100",
+    "tw:ease-linear",
+    "tw:[&_svg]:transition-colors",
+    "tw:[&_svg]:duration-100",
+    "tw:[&_svg]:ease-linear",
+    // hover
+    "tw:not-disabled:hover:border-neutral-300",
+    "tw:not-disabled:hover:bg-neutral-100",
+    "tw:disabled:opacity-50",
+    "tw:disabled:cursor-not-allowed",
+    // focus-visible
+    "tw:[&:not(:active)]:not-disabled:focus-visible:outline",
+    "tw:!outline-offset-0",
+    "tw:[&:not(:active)]:not-disabled:focus-visible:outline-ring",
+    "tw:[&:not(:active)]:not-disabled:focus-visible:outline-1",
+    "tw:[&:not(:active)]:not-disabled:focus-visible:ring-4",
+    "tw:[&:not(:active)]:not-disabled:focus-visible:ring-ring/20"
+  ],
+  {
+    variants: {
+      variant: {
+        ai: [
+          "tw:border-0",
+          // off state
+          "tw:aria-[pressed=false]:bg-gradient-to-br",
+          "tw:aria-[pressed=false]:from-secondary-100",
+          "tw:aria-[pressed=false]:to-purple-100",
+          "tw:hover:aria-[pressed=false]:from-secondary-200",
+          "tw:hover:aria-[pressed=false]:to-purple-200",
+          // on state
+          "tw:aria-pressed:bg-gradient-to-br",
+          "tw:aria-pressed:from-secondary-600",
+          "tw:aria-pressed:to-purple-600",
+          "tw:hover:aria-pressed:from-secondary-700",
+          "tw:hover:aria-pressed:to-purple-700",
+          // icon color - gradient stroke when off, white stroke when on.
+          // Lucide icons are stroke-based; targeting every shape (`*`)
+          // catches paths, circles, and other non-path sub-shapes so the
+          // whole glyph picks up the gradient.
+          "tw:[&_*]:stroke-aigradient-600",
+          "tw:aria-pressed:[&_*]:stroke-white",
+          "tw:*:aria-pressed:text-white"
+        ],
+        "ai-vivid": [
+          "tw:border-0",
+          "tw:rounded-lg",
+          "tw:normal-case",
+          "tw:tracking-normal",
+          "tw:gap-1.5",
+          // default: sky → violet gradient, white text
+          "tw:bg-gradient-to-br",
+          "tw:from-sky-400",
+          "tw:via-sky-600",
+          "tw:to-violet-600",
+          "tw:text-white",
+          // hover: light sky bg, dark text
+          "tw:not-disabled:hover:bg-none",
+          "tw:not-disabled:hover:bg-sky-100",
+          "tw:not-disabled:hover:border-transparent",
+          "tw:not-disabled:hover:text-sky-700",
+          "tw:not-disabled:hover:[&_svg]:text-sky-700",
+          // pressed: dark navy gradient, white
+          "tw:aria-[pressed=true]:bg-gradient-to-br",
+          "tw:aria-[pressed=true]:from-sky-700",
+          "tw:aria-[pressed=true]:to-sky-900",
+          "tw:aria-[pressed=true]:text-white",
+          "tw:aria-[pressed=true]:[&_svg]:text-white"
+        ],
+        ghost: [
+          "tw:border-0",
+          "tw:rounded-lg",
+          // The neutral utility variant — mostly icon-only, and where it does carry a label that
+          // label is content (a value, an identifier), not chrome, so it keeps its own casing.
+          // `ai` / `ai-vivid` stay on the house `uppercase` (`ai-vivid` already opts out).
+          "tw:normal-case",
+          // The fills are surface-relative — `muted` for hover, a translucent
+          // blue tint for pressed — rather than the fixed pale `neutral-100` /
+          // `secondary-100`, which glared as bright blocks on the dark scheme.
+          // The blue mark itself is unchanged and reads on either surface.
+          // default state - transparent background
+          "tw:bg-transparent",
+          "tw:[&_svg]:text-muted-foreground",
+          // hover state
+          "tw:not-disabled:hover:bg-muted",
+          "tw:not-disabled:hover:[&_svg]:text-secondary-500",
+          // pressed state
+          "tw:aria-pressed:bg-secondary-500/15",
+          "tw:aria-pressed:[&_svg]:text-secondary-500",
+          // hover on pressed state
+          "tw:not-disabled:hover:aria-pressed:bg-secondary-500/25",
+          "tw:not-disabled:hover:aria-pressed:[&_svg]:text-secondary-500"
+        ]
+      },
+      size: {
+        small: "tw:max-h-8 tw:min-h-8 tw:px-2 tw:py-1.5",
+        medium: "tw:max-h-10 tw:min-h-10 tw:px-4 tw:py-2.5",
+        large: "tw:max-h-12 tw:min-h-12 tw:px-4 tw:py-3.5"
+      },
+      // A stacked label wraps (`break-words` splits an identifier too long for its column) instead
+      // of forcing every cell as wide as its longest label.
+      orientation: {
+        horizontal: "",
+        vertical: [
+          "tw:flex-col",
+          "tw:gap-1",
+          "tw:whitespace-normal",
+          "tw:break-words",
+          "tw:text-center"
+        ]
+      },
+      iconOnly: {
+        true: "tw:p-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { iconOnly: true, size: "small", className: "tw:size-8" },
+      { iconOnly: true, size: "medium", className: "tw:size-10" },
+      { iconOnly: true, size: "large", className: "tw:size-12" }
+    ],
+    defaultVariants: {
+      variant: "ai",
+      size: "medium",
+      iconOnly: false,
+      orientation: "horizontal"
+    }
+  }
+);
+var Toggle = ({
+  ref,
+  className,
+  variant = "ai",
+  size = "medium",
+  orientation = "horizontal",
+  children,
+  icon,
+  badge,
+  disabled = false,
+  ...props
+}) => {
+  const isAiVariant = variant === "ai";
+  const isIconOnly = Boolean(icon && children == null);
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ...props,
+      ref,
+      className: cn(
+        toggleVariants({ variant, size, orientation, iconOnly: isIconOnly, className })
+      ),
+      disabled,
+      children: [
+        badge && /* @__PURE__ */ jsx("span", { className: "tw:absolute tw:right-0 tw:top-0 tw:-translate-y-1/2 tw:translate-x-1/4", children: badge }),
+        icon && /* @__PURE__ */ jsx("span", { className: "tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:align-middle tw:[&_svg:not([class*='tw:size-'])]:size-4", children: icon }),
+        isAiVariant ? /* @__PURE__ */ jsx("div", { className: "tw:bg-gradient-to-br tw:from-secondary-700 tw:to-purple-700 tw:bg-clip-text tw:text-transparent", children }) : children
+      ]
+    }
+  );
+};
+
+export { Toggle };
+//# sourceMappingURL=chunk-QQA37LFB.js.map
+//# sourceMappingURL=chunk-QQA37LFB.js.map

package/dist/chunk-QQA37LFB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"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","file":"chunk-QQA37LFB.js","sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst toggleVariants = cva(\n  [\n    'tailwindcss-preflight',\n\n    // layout\n    'tw:relative',\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-2',\n\n    // text\n    'tw:uppercase',\n    'tw:text-xs',\n    'tw:leading-5',\n    'tw:font-medium',\n    'tw:tracking-[1px]',\n\n    // border\n    'tw:border',\n\n    // style\n    'tw:rounded',\n    'tw:whitespace-nowrap',\n\n    // transitions\n    'tw:transition-colors',\n    'tw:duration-100',\n    'tw:ease-linear',\n    'tw:[&_svg]:transition-colors',\n    'tw:[&_svg]:duration-100',\n    'tw:[&_svg]:ease-linear',\n\n    // hover\n    'tw:not-disabled:hover:border-neutral-300',\n    'tw:not-disabled:hover:bg-neutral-100',\n\n    'tw:disabled:opacity-50',\n    'tw:disabled:cursor-not-allowed',\n\n    // focus-visible\n    'tw:[&:not(:active)]:not-disabled:focus-visible:outline',\n    'tw:!outline-offset-0',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:outline-ring',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:outline-1',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:ring-4',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:ring-ring/20',\n  ],\n  {\n    variants: {\n      variant: {\n        ai: [\n          'tw:border-0',\n\n          // off state\n          'tw:aria-[pressed=false]:bg-gradient-to-br',\n          'tw:aria-[pressed=false]:from-secondary-100',\n          'tw:aria-[pressed=false]:to-purple-100',\n          'tw:hover:aria-[pressed=false]:from-secondary-200',\n          'tw:hover:aria-[pressed=false]:to-purple-200',\n\n          // on state\n          'tw:aria-pressed:bg-gradient-to-br',\n          'tw:aria-pressed:from-secondary-600',\n          'tw:aria-pressed:to-purple-600',\n          'tw:hover:aria-pressed:from-secondary-700',\n          'tw:hover:aria-pressed:to-purple-700',\n\n          // icon color - gradient stroke when off, white stroke when on.\n          // Lucide icons are stroke-based; targeting every shape (`*`)\n          // catches paths, circles, and other non-path sub-shapes so the\n          // whole glyph picks up the gradient.\n          'tw:[&_*]:stroke-aigradient-600',\n          'tw:aria-pressed:[&_*]:stroke-white',\n          'tw:*:aria-pressed:text-white',\n        ],\n        'ai-vivid': [\n          'tw:border-0',\n          'tw:rounded-lg',\n          'tw:normal-case',\n          'tw:tracking-normal',\n          'tw:gap-1.5',\n\n          // default: sky → violet gradient, white text\n          'tw:bg-gradient-to-br',\n          'tw:from-sky-400',\n          'tw:via-sky-600',\n          'tw:to-violet-600',\n          'tw:text-white',\n\n          // hover: light sky bg, dark text\n          'tw:not-disabled:hover:bg-none',\n          'tw:not-disabled:hover:bg-sky-100',\n          'tw:not-disabled:hover:border-transparent',\n          'tw:not-disabled:hover:text-sky-700',\n          'tw:not-disabled:hover:[&_svg]:text-sky-700',\n\n          // pressed: dark navy gradient, white\n          'tw:aria-[pressed=true]:bg-gradient-to-br',\n          'tw:aria-[pressed=true]:from-sky-700',\n          'tw:aria-[pressed=true]:to-sky-900',\n          'tw:aria-[pressed=true]:text-white',\n          'tw:aria-[pressed=true]:[&_svg]:text-white',\n        ],\n        ghost: [\n          'tw:border-0',\n          'tw:rounded-lg',\n\n          // The neutral utility variant — mostly icon-only, and where it does carry a label that\n          // label is content (a value, an identifier), not chrome, so it keeps its own casing.\n          // `ai` / `ai-vivid` stay on the house `uppercase` (`ai-vivid` already opts out).\n          'tw:normal-case',\n\n          // The fills are surface-relative — `muted` for hover, a translucent\n          // blue tint for pressed — rather than the fixed pale `neutral-100` /\n          // `secondary-100`, which glared as bright blocks on the dark scheme.\n          // The blue mark itself is unchanged and reads on either surface.\n          // default state - transparent background\n          'tw:bg-transparent',\n          'tw:[&_svg]:text-muted-foreground',\n\n          // hover state\n          'tw:not-disabled:hover:bg-muted',\n          'tw:not-disabled:hover:[&_svg]:text-secondary-500',\n\n          // pressed state\n          'tw:aria-pressed:bg-secondary-500/15',\n          'tw:aria-pressed:[&_svg]:text-secondary-500',\n\n          // hover on pressed state\n          'tw:not-disabled:hover:aria-pressed:bg-secondary-500/25',\n          'tw:not-disabled:hover:aria-pressed:[&_svg]:text-secondary-500',\n        ],\n      },\n      size: {\n        small: 'tw:max-h-8 tw:min-h-8 tw:px-2 tw:py-1.5',\n        medium: 'tw:max-h-10 tw:min-h-10 tw:px-4 tw:py-2.5',\n        large: 'tw:max-h-12 tw:min-h-12 tw:px-4 tw:py-3.5',\n      },\n      // A stacked label wraps (`break-words` splits an identifier too long for its column) instead\n      // of forcing every cell as wide as its longest label.\n      orientation: {\n        horizontal: '',\n        vertical: [\n          'tw:flex-col',\n          'tw:gap-1',\n          'tw:whitespace-normal',\n          'tw:break-words',\n          'tw:text-center',\n        ],\n      },\n      iconOnly: {\n        true: 'tw:p-0',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      { iconOnly: true, size: 'small', className: 'tw:size-8' },\n      { iconOnly: true, size: 'medium', className: 'tw:size-10' },\n      { iconOnly: true, size: 'large', className: 'tw:size-12' },\n    ],\n    defaultVariants: {\n      variant: 'ai',\n      size: 'medium',\n      iconOnly: false,\n      orientation: 'horizontal',\n    },\n  },\n);\n\ntype Props = {\n  icon?: ReactNode;\n  badge?: ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n} & ComponentProps<typeof Root> &\n  Omit<VariantProps<typeof toggleVariants>, 'iconOnly' | 'orientation'>;\n\nexport const Toggle = ({\n  ref,\n  className,\n  variant = 'ai',\n  size = 'medium',\n  orientation = 'horizontal',\n  children,\n  icon,\n  badge,\n  disabled = false,\n  ...props\n}: Props) => {\n  const isAiVariant = variant === 'ai';\n  const isIconOnly = Boolean(icon && children == null);\n\n  return (\n    <Root\n      {...props}\n      ref={ref}\n      className={cn(\n        toggleVariants({ variant, size, orientation, iconOnly: isIconOnly, className }),\n      )}\n      disabled={disabled}\n    >\n      {badge && (\n        <span className=\"tw:absolute tw:right-0 tw:top-0 tw:-translate-y-1/2 tw:translate-x-1/4\">\n          {badge}\n        </span>\n      )}\n      {icon && (\n        <span className=\"tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:align-middle tw:[&_svg:not([class*='tw:size-'])]:size-4\">\n          {icon}\n        </span>\n      )}\n\n      {isAiVariant ? (\n        <div className=\"tw:bg-gradient-to-br tw:from-secondary-700 tw:to-purple-700 tw:bg-clip-text tw:text-transparent\">\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Root>\n  );\n};\n"]}

package/dist/chunk-QZAWRSEB.js

@@ -0,0 +1,61 @@
+import { InputGroup } from './chunk-SC275NHZ.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
+var NumberInput = ({
+  ref,
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  value,
+  defaultValue,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  prefix,
+  suffix,
+  ...inputProps
+}) => {
+  const handleChange = (event) => {
+    onValueChange?.(toNumberOrNull(event));
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    onValueBlur?.(toNumberOrNull(event));
+    onBlur?.(event);
+  };
+  const isControlled = value !== void 0;
+  const valueProp = isControlled ? { value: value ?? "" } : { defaultValue: defaultValue ?? "" };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      children: [
+        prefix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
+        /* @__PURE__ */ jsx(
+          InputGroup.Input,
+          {
+            ...inputProps,
+            ...valueProp,
+            ref,
+            type: "number",
+            onChange: handleChange,
+            onBlur: handleBlur
+          }
+        ),
+        suffix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-end", children: suffix })
+      ]
+    }
+  );
+};
+
+export { NumberInput };
+//# sourceMappingURL=chunk-QZAWRSEB.js.map
+//# sourceMappingURL=chunk-QZAWRSEB.js.map

package/dist/chunk-QZAWRSEB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/NumberInput/NumberInput.tsx"],"names":[],"mappings":";;;AA8BA,IAAM,cAAA,GAAiB,CAAC,KAAA,KACtB,MAAA,CAAO,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,aAAa,CAAA,GAAI,IAAA,GAAO,KAAA,CAAM,MAAA,CAAO,aAAA;AAE1D,IAAM,cAAc,CAAC;AAAA,EAC1B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EAEA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EAEA,MAAA;AAAA,EACA,MAAA;AAAA,EAEA,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,YAAA,GAAqD,CAAC,KAAA,KAAU;AACpE,IAAA,aAAA,GAAgB,cAAA,CAAe,KAAK,CAAC,CAAA;AACrC,IAAA,QAAA,GAAW,KAAK,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAkD,CAAC,KAAA,KAAU;AACjE,IAAA,WAAA,GAAc,cAAA,CAAe,KAAK,CAAC,CAAA;AACnC,IAAA,MAAA,GAAS,KAAK,CAAA;AAAA,EAChB,CAAA;AAEA,EAAA,MAAM,eAAe,KAAA,KAAU,MAAA;AAC/B,EAAA,MAAM,SAAA,GAAY,YAAA,GAAe,EAAE,KAAA,EAAO,KAAA,IAAS,IAAG,GAAI,EAAE,YAAA,EAAc,YAAA,IAAgB,EAAA,EAAG;AAE7F,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,MAAA,wBAAW,UAAA,CAAW,KAAA,EAAX,EAAiB,KAAA,EAAM,gBAAgB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBAC1D,GAAA;AAAA,UAAC,UAAA,CAAW,KAAA;AAAA,UAAX;AAAA,YACE,GAAG,UAAA;AAAA,YACH,GAAG,SAAA;AAAA,YACJ,GAAA;AAAA,YACA,IAAA,EAAK,QAAA;AAAA,YACL,QAAA,EAAU,YAAA;AAAA,YACV,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,QACC,0BAAU,GAAA,CAAC,UAAA,CAAW,OAAX,EAAiB,KAAA,EAAM,cAAc,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC1D;AAEJ","file":"chunk-QZAWRSEB.js","sourcesContent":["import type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentProps,\n  FocusEventHandler,\n  ReactNode,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type' | 'prefix'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: number | null;\n    defaultValue?: number | null;\n    onValueChange?: (value: number | null) => void;\n    onValueBlur?: (value: number | null) => void;\n    prefix?: ReactNode;\n    suffix?: ReactNode;\n  };\n\nconst toNumberOrNull = (event: ChangeEvent<HTMLInputElement>) =>\n  Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;\n\nexport const NumberInput = ({\n  ref,\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  value,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n\n  prefix,\n  suffix,\n\n  ...inputProps\n}: Props) => {\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    onValueChange?.(toNumberOrNull(event));\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    onValueBlur?.(toNumberOrNull(event));\n    onBlur?.(event);\n  };\n\n  const isControlled = value !== undefined;\n  const valueProp = isControlled ? { value: value ?? '' } : { defaultValue: defaultValue ?? '' };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      {prefix && <InputGroup.Addon align=\"inline-start\">{prefix}</InputGroup.Addon>}\n      <InputGroup.Input\n        {...inputProps}\n        {...valueProp}\n        ref={ref}\n        type=\"number\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n      />\n      {suffix && <InputGroup.Addon align=\"inline-end\">{suffix}</InputGroup.Addon>}\n    </InputGroup>\n  );\n};\n"]}