@acronis-platform/ui-react 0.24.0 → 0.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/ui/button/button.js +7 -7
  2. package/dist/components/ui/button/button.js.map +1 -1
  3. package/dist/components/ui/sidebar-secondary/sidebar-secondary.js +223 -170
  4. package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map +1 -1
  5. package/dist/src/components/ui/sidebar-secondary/sidebar-secondary.d.ts +24 -2
  6. package/dist/ui-react.css +1 -1
  7. package/package.json +3 -3
package/dist/components/ui/button/button.js CHANGED
@@ -1,28 +1,28 @@
1
1
  import { jsxs as c, Fragment as v, jsx as u } from "react/jsx-runtime";
2
- import * as b from "react";
3
- import { mergeProps as l } from "@base-ui/react/merge-props";
2
+ import * as l from "react";
3
+ import { mergeProps as b } from "@base-ui/react/merge-props";
4
4
  import { useRender as d } from "@base-ui/react/use-render";
5
5
  import { SparklesIcon as s } from "@acronis-platform/icons-react/stroke-mono";
6
6
  import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
7
7
  import { cn as x } from "../../../lib/utils.js";
8
8
  const h = g(
9
- "inline-flex h-[var(--ui-button-global-container-height)] items-center justify-center gap-[var(--ui-button-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-global-container-border-radius)] border border-transparent text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-global-icon-size)] [&_svg]:shrink-0",
9
+ "inline-flex h-[var(--ui-button-global-container-height)] items-center justify-center gap-[var(--ui-button-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-global-container-border-radius)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-global-icon-size)] [&_svg]:shrink-0",
10
10
  {
11
11
  variants: {
12
12
  variant: {
13
13
  default: "min-w-[var(--ui-button-primary-container-width-min)] px-[var(--ui-button-primary-container-padding-x)] bg-[var(--ui-button-primary-container-color-idle)] text-[var(--ui-button-primary-label-color-idle)] [&_svg]:text-[var(--ui-button-primary-icon-color-idle)] hover:bg-[var(--ui-button-primary-container-color-hover)] hover:text-[var(--ui-button-primary-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-primary-icon-color-hover)] active:bg-[var(--ui-button-primary-container-color-active)] active:text-[var(--ui-button-primary-label-color-active)] active:[&_svg]:text-[var(--ui-button-primary-icon-color-active)] disabled:bg-[var(--ui-button-primary-container-color-disabled)] disabled:text-[var(--ui-button-primary-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-primary-icon-color-disabled)]",
14
- secondary: "min-w-[var(--ui-button-secondary-container-width-min)] px-[var(--ui-button-secondary-container-padding-x)] bg-[var(--ui-button-secondary-container-color-idle)] text-[var(--ui-button-secondary-label-color-idle)] border-[var(--ui-button-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-secondary-icon-color-idle)] hover:bg-[var(--ui-button-secondary-container-color-hover)] hover:text-[var(--ui-button-secondary-label-color-hover)] hover:border-[var(--ui-button-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-secondary-icon-color-hover)] active:bg-[var(--ui-button-secondary-container-color-active)] active:text-[var(--ui-button-secondary-label-color-active)] active:border-[var(--ui-button-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-secondary-icon-color-active)] disabled:bg-[var(--ui-button-secondary-container-color-disabled)] disabled:text-[var(--ui-button-secondary-label-color-disabled)] disabled:border-[var(--ui-button-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-secondary-icon-color-disabled)]",
14
+ secondary: "border min-w-[var(--ui-button-secondary-container-width-min)] px-[var(--ui-button-secondary-container-padding-x)] bg-[var(--ui-button-secondary-container-color-idle)] text-[var(--ui-button-secondary-label-color-idle)] border-[var(--ui-button-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-secondary-icon-color-idle)] hover:bg-[var(--ui-button-secondary-container-color-hover)] hover:text-[var(--ui-button-secondary-label-color-hover)] hover:border-[var(--ui-button-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-secondary-icon-color-hover)] active:bg-[var(--ui-button-secondary-container-color-active)] active:text-[var(--ui-button-secondary-label-color-active)] active:border-[var(--ui-button-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-secondary-icon-color-active)] disabled:bg-[var(--ui-button-secondary-container-color-disabled)] disabled:text-[var(--ui-button-secondary-label-color-disabled)] disabled:border-[var(--ui-button-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-secondary-icon-color-disabled)]",
15
15
  ghost: "px-[var(--ui-button-ghost-container-padding-x)] text-[var(--ui-button-ghost-label-color-idle)] [&_svg]:text-[var(--ui-button-ghost-icon-color-idle)] hover:text-[var(--ui-button-ghost-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ghost-icon-color-hover)] active:text-[var(--ui-button-ghost-label-color-active)] active:[&_svg]:text-[var(--ui-button-ghost-icon-color-active)] disabled:text-[var(--ui-button-ghost-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ghost-icon-color-disabled)]",
16
16
  destructive: "min-w-[var(--ui-button-destructive-container-width-min)] px-[var(--ui-button-destructive-container-padding-x)] bg-[var(--ui-button-destructive-container-color-idle)] text-[var(--ui-button-destructive-label-color-idle)] [&_svg]:text-[var(--ui-button-destructive-icon-color-idle)] hover:bg-[var(--ui-button-destructive-container-color-hover)] hover:text-[var(--ui-button-destructive-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-destructive-icon-color-hover)] active:bg-[var(--ui-button-destructive-container-color-active)] active:text-[var(--ui-button-destructive-label-color-active)] active:[&_svg]:text-[var(--ui-button-destructive-icon-color-active)] disabled:bg-[var(--ui-button-destructive-container-color-disabled)] disabled:text-[var(--ui-button-destructive-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-destructive-icon-color-disabled)]",
17
17
  ai: "min-w-[var(--ui-button-ai-container-width-min)] px-[var(--ui-button-ai-container-padding-x)] bg-origin-border text-[var(--ui-button-ai-label-color-idle)] [&_svg]:text-[var(--ui-button-ai-icon-color-idle)] [background-image:var(--ui-button-ai-container-color-idle)] hover:text-[var(--ui-button-ai-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ai-icon-color-hover)] hover:[background-image:var(--ui-button-ai-container-color-hover)] active:text-[var(--ui-button-ai-label-color-active)] active:[&_svg]:text-[var(--ui-button-ai-icon-color-active)] active:[background-image:var(--ui-button-ai-container-color-active)] disabled:text-[var(--ui-button-ai-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ai-icon-color-disabled)] disabled:[background-image:var(--ui-button-ai-container-color-disabled)]",
18
- inverted: "min-w-[var(--ui-button-inverted-container-width-min)] px-[var(--ui-button-inverted-container-padding-x)] bg-[var(--ui-button-inverted-container-color-idle)] text-[var(--ui-button-inverted-label-color-idle)] border-[var(--ui-button-inverted-container-border-color-idle)] [&_svg]:text-[var(--ui-button-inverted-icon-color-idle)] hover:bg-[var(--ui-button-inverted-container-color-hover)] hover:text-[var(--ui-button-inverted-label-color-hover)] hover:border-[var(--ui-button-inverted-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-inverted-icon-color-hover)] active:bg-[var(--ui-button-inverted-container-color-active)] active:text-[var(--ui-button-inverted-label-color-active)] active:border-[var(--ui-button-inverted-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-inverted-icon-color-active)] disabled:bg-[var(--ui-button-inverted-container-color-disabled)] disabled:text-[var(--ui-button-inverted-label-color-disabled)] disabled:border-[var(--ui-button-inverted-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-inverted-icon-color-disabled)]"
18
+ inverted: "border min-w-[var(--ui-button-inverted-container-width-min)] px-[var(--ui-button-inverted-container-padding-x)] bg-[var(--ui-button-inverted-container-color-idle)] text-[var(--ui-button-inverted-label-color-idle)] border-[var(--ui-button-inverted-container-border-color-idle)] [&_svg]:text-[var(--ui-button-inverted-icon-color-idle)] hover:bg-[var(--ui-button-inverted-container-color-hover)] hover:text-[var(--ui-button-inverted-label-color-hover)] hover:border-[var(--ui-button-inverted-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-inverted-icon-color-hover)] active:bg-[var(--ui-button-inverted-container-color-active)] active:text-[var(--ui-button-inverted-label-color-active)] active:border-[var(--ui-button-inverted-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-inverted-icon-color-active)] disabled:bg-[var(--ui-button-inverted-container-color-disabled)] disabled:text-[var(--ui-button-inverted-label-color-disabled)] disabled:border-[var(--ui-button-inverted-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-inverted-icon-color-disabled)]"
19
19
  }
20
20
  },
21
21
  defaultVariants: {
22
22
  variant: "default"
23
23
  }
24
24
  }
25
- ), m = b.forwardRef(
25
+ ), m = l.forwardRef(
26
26
  ({ className: r, variant: t, render: e, children: o, ...i }, a) => {
27
27
  const n = t === "ai" ? /* @__PURE__ */ c(v, { children: [
28
28
  /* @__PURE__ */ u(s, {}),
@@ -32,7 +32,7 @@ const h = g(
32
32
  render: e,
33
33
  ref: a,
34
34
  defaultTagName: "button",
35
- props: l(
35
+ props: b(
36
36
  {
37
37
  className: x(h({ variant: t, className: r })),
38
38
  children: n
package/dist/components/ui/button/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SparklesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Variants mirror the Figma \"Button\" component's `Variant` property (Primary,\n// Secondary, Link→ghost, Destructive, Ai, Inverted). Each interaction state\n// (idle / hover / active / disabled) wires the container fill, label, icon, and\n// — for the variants that have one — the border to its own dedicated\n// `--ui-button-*` token from @acronis-platform/tokens-pd. Every state is wired\n// explicitly — even where acronis's value is unchanged — because these are\n// runtime `var()` references: a brand override is only honored if the matching\n// state token is referenced. The icon color is wired separately from the label\n// because the next-gen tier diverges the two on hover/active for `secondary` and\n// `ghost` (the icon keeps the brighter blue while the label darkens). Disabled\n// uses the design's explicit disabled tokens (not opacity); the focus ring uses\n// the `--ui-focus-*` tokens.\n//\n// Geometry is now tokenized: the shared box metrics (32px height, 8px gap, 4px\n// radius, 16px icon) come from `--ui-button-global-container-*` / `-icon-size`,\n// while padding-x and min-width are per-variant — `ghost` has 0 padding-x and no\n// min-width (it reads as an inline link), every other variant has 12px / 64px.\n// Only `secondary` and `inverted` define a container border (1px); the rest paint\n// a transparent border so the box geometry stays identical across variants. The\n// `ai` variant paints its gradient container via `background-image` and sets\n// `bg-origin-border` so it covers the (transparent) 1px border box.\nconst buttonVariants = cva(\n 'inline-flex h-[var(--ui-button-global-container-height)] items-center justify-center gap-[var(--ui-button-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-global-container-border-radius)] border border-transparent text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-global-icon-size)] [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n default:\n 'min-w-[var(--ui-button-primary-container-width-min)] px-[var(--ui-button-primary-container-padding-x)] bg-[var(--ui-button-primary-container-color-idle)] text-[var(--ui-button-primary-label-color-idle)] [&_svg]:text-[var(--ui-button-primary-icon-color-idle)] hover:bg-[var(--ui-button-primary-container-color-hover)] hover:text-[var(--ui-button-primary-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-primary-icon-color-hover)] active:bg-[var(--ui-button-primary-container-color-active)] active:text-[var(--ui-button-primary-label-color-active)] active:[&_svg]:text-[var(--ui-button-primary-icon-color-active)] disabled:bg-[var(--ui-button-primary-container-color-disabled)] disabled:text-[var(--ui-button-primary-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-primary-icon-color-disabled)]',\n secondary:\n 'min-w-[var(--ui-button-secondary-container-width-min)] px-[var(--ui-button-secondary-container-padding-x)] bg-[var(--ui-button-secondary-container-color-idle)] text-[var(--ui-button-secondary-label-color-idle)] border-[var(--ui-button-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-secondary-icon-color-idle)] hover:bg-[var(--ui-button-secondary-container-color-hover)] hover:text-[var(--ui-button-secondary-label-color-hover)] hover:border-[var(--ui-button-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-secondary-icon-color-hover)] active:bg-[var(--ui-button-secondary-container-color-active)] active:text-[var(--ui-button-secondary-label-color-active)] active:border-[var(--ui-button-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-secondary-icon-color-active)] disabled:bg-[var(--ui-button-secondary-container-color-disabled)] disabled:text-[var(--ui-button-secondary-label-color-disabled)] disabled:border-[var(--ui-button-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-secondary-icon-color-disabled)]',\n ghost:\n 'px-[var(--ui-button-ghost-container-padding-x)] text-[var(--ui-button-ghost-label-color-idle)] [&_svg]:text-[var(--ui-button-ghost-icon-color-idle)] hover:text-[var(--ui-button-ghost-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ghost-icon-color-hover)] active:text-[var(--ui-button-ghost-label-color-active)] active:[&_svg]:text-[var(--ui-button-ghost-icon-color-active)] disabled:text-[var(--ui-button-ghost-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ghost-icon-color-disabled)]',\n destructive:\n 'min-w-[var(--ui-button-destructive-container-width-min)] px-[var(--ui-button-destructive-container-padding-x)] bg-[var(--ui-button-destructive-container-color-idle)] text-[var(--ui-button-destructive-label-color-idle)] [&_svg]:text-[var(--ui-button-destructive-icon-color-idle)] hover:bg-[var(--ui-button-destructive-container-color-hover)] hover:text-[var(--ui-button-destructive-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-destructive-icon-color-hover)] active:bg-[var(--ui-button-destructive-container-color-active)] active:text-[var(--ui-button-destructive-label-color-active)] active:[&_svg]:text-[var(--ui-button-destructive-icon-color-active)] disabled:bg-[var(--ui-button-destructive-container-color-disabled)] disabled:text-[var(--ui-button-destructive-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-destructive-icon-color-disabled)]',\n ai: 'min-w-[var(--ui-button-ai-container-width-min)] px-[var(--ui-button-ai-container-padding-x)] bg-origin-border text-[var(--ui-button-ai-label-color-idle)] [&_svg]:text-[var(--ui-button-ai-icon-color-idle)] [background-image:var(--ui-button-ai-container-color-idle)] hover:text-[var(--ui-button-ai-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ai-icon-color-hover)] hover:[background-image:var(--ui-button-ai-container-color-hover)] active:text-[var(--ui-button-ai-label-color-active)] active:[&_svg]:text-[var(--ui-button-ai-icon-color-active)] active:[background-image:var(--ui-button-ai-container-color-active)] disabled:text-[var(--ui-button-ai-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ai-icon-color-disabled)] disabled:[background-image:var(--ui-button-ai-container-color-disabled)]',\n inverted:\n 'min-w-[var(--ui-button-inverted-container-width-min)] px-[var(--ui-button-inverted-container-padding-x)] bg-[var(--ui-button-inverted-container-color-idle)] text-[var(--ui-button-inverted-label-color-idle)] border-[var(--ui-button-inverted-container-border-color-idle)] [&_svg]:text-[var(--ui-button-inverted-icon-color-idle)] hover:bg-[var(--ui-button-inverted-container-color-hover)] hover:text-[var(--ui-button-inverted-label-color-hover)] hover:border-[var(--ui-button-inverted-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-inverted-icon-color-hover)] active:bg-[var(--ui-button-inverted-container-color-active)] active:text-[var(--ui-button-inverted-label-color-active)] active:border-[var(--ui-button-inverted-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-inverted-icon-color-active)] disabled:bg-[var(--ui-button-inverted-container-color-disabled)] disabled:text-[var(--ui-button-inverted-label-color-disabled)] disabled:border-[var(--ui-button-inverted-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-inverted-icon-color-disabled)]',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /**\n * Replace the rendered `<button>` with another element or component\n * (Base UI composition). Accepts a React element or a render function —\n * the component's props and class names are merged onto it.\n */\n render?: useRender.RenderProp;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, render, children, ...props }, ref) => {\n // The AI variant always leads with the Sparkles icon before its label\n // (the Figma \"Ai\" button is a Sparkles instance + label).\n const content =\n variant === 'ai' ? (\n <>\n <SparklesIcon />\n {children}\n </>\n ) : (\n children\n );\n return useRender({\n render,\n ref,\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(buttonVariants({ variant, className })),\n children: content,\n },\n props\n ),\n });\n }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","render","children","props","ref","content","jsxs","Fragment","jsx","SparklesIcon","useRender","mergeProps","cn"],"mappings":";;;;;;;AA6BA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,aACE;AAAA,QACF,IAAI;AAAA,QACJ,UACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAcMC,IAASC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AAG3D,UAAMC,IACJL,MAAY,OACV,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAa;AAAA,MACbP;AAAA,IAAA,EAAA,CACH,IAEAA;AAEJ,WAAOQ,EAAU;AAAA,MACf,QAAAT;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOO;AAAA,QACL;AAAA,UACE,WAAWC,EAAGjB,EAAe,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACpD,UAAUM;AAAA,QAAA;AAAA,QAEZF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAN,EAAO,cAAc;"}
1
+ {"version":3,"file":"button.js","sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SparklesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Variants mirror the Figma \"Button\" component's `Variant` property (Primary,\n// Secondary, Link→ghost, Destructive, Ai, Inverted). Each interaction state\n// (idle / hover / active / disabled) wires the container fill, label, icon, and\n// — for the variants that have one — the border to its own dedicated\n// `--ui-button-*` token from @acronis-platform/tokens-pd. Every state is wired\n// explicitly — even where acronis's value is unchanged — because these are\n// runtime `var()` references: a brand override is only honored if the matching\n// state token is referenced. The icon color is wired separately from the label\n// because the next-gen tier diverges the two on hover/active for `secondary` and\n// `ghost` (the icon keeps the brighter blue while the label darkens). Disabled\n// uses the design's explicit disabled tokens (not opacity); the focus ring uses\n// the `--ui-focus-*` tokens.\n//\n// Geometry is now tokenized: the shared box metrics (32px height, 8px gap, 4px\n// radius, 16px icon) come from `--ui-button-global-container-*` / `-icon-size`,\n// while padding-x and min-width are per-variant — `ghost` has 0 padding-x and no\n// min-width (it reads as an inline link), every other variant has 12px / 64px.\n// Only `secondary` and `inverted` draw a 1px container border — they add `border`\n// in their own class so the design's 12px horizontal padding sits inside it. The\n// other variants have NO border (the Figma draws none), so their `px` is measured\n// from the box edge and matches the design exactly (no stray 1px from a\n// transparent border). The `ai` variant paints its gradient via `background-image`.\n//\n// Focus: the Figma focus state is a 3px `--ui-focus-primary` ring flush to the\n// button edge (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonVariants = cva(\n 'inline-flex h-[var(--ui-button-global-container-height)] items-center justify-center gap-[var(--ui-button-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-global-container-border-radius)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-global-icon-size)] [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n default:\n 'min-w-[var(--ui-button-primary-container-width-min)] px-[var(--ui-button-primary-container-padding-x)] bg-[var(--ui-button-primary-container-color-idle)] text-[var(--ui-button-primary-label-color-idle)] [&_svg]:text-[var(--ui-button-primary-icon-color-idle)] hover:bg-[var(--ui-button-primary-container-color-hover)] hover:text-[var(--ui-button-primary-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-primary-icon-color-hover)] active:bg-[var(--ui-button-primary-container-color-active)] active:text-[var(--ui-button-primary-label-color-active)] active:[&_svg]:text-[var(--ui-button-primary-icon-color-active)] disabled:bg-[var(--ui-button-primary-container-color-disabled)] disabled:text-[var(--ui-button-primary-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-primary-icon-color-disabled)]',\n secondary:\n 'border min-w-[var(--ui-button-secondary-container-width-min)] px-[var(--ui-button-secondary-container-padding-x)] bg-[var(--ui-button-secondary-container-color-idle)] text-[var(--ui-button-secondary-label-color-idle)] border-[var(--ui-button-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-secondary-icon-color-idle)] hover:bg-[var(--ui-button-secondary-container-color-hover)] hover:text-[var(--ui-button-secondary-label-color-hover)] hover:border-[var(--ui-button-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-secondary-icon-color-hover)] active:bg-[var(--ui-button-secondary-container-color-active)] active:text-[var(--ui-button-secondary-label-color-active)] active:border-[var(--ui-button-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-secondary-icon-color-active)] disabled:bg-[var(--ui-button-secondary-container-color-disabled)] disabled:text-[var(--ui-button-secondary-label-color-disabled)] disabled:border-[var(--ui-button-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-secondary-icon-color-disabled)]',\n ghost:\n 'px-[var(--ui-button-ghost-container-padding-x)] text-[var(--ui-button-ghost-label-color-idle)] [&_svg]:text-[var(--ui-button-ghost-icon-color-idle)] hover:text-[var(--ui-button-ghost-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ghost-icon-color-hover)] active:text-[var(--ui-button-ghost-label-color-active)] active:[&_svg]:text-[var(--ui-button-ghost-icon-color-active)] disabled:text-[var(--ui-button-ghost-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ghost-icon-color-disabled)]',\n destructive:\n 'min-w-[var(--ui-button-destructive-container-width-min)] px-[var(--ui-button-destructive-container-padding-x)] bg-[var(--ui-button-destructive-container-color-idle)] text-[var(--ui-button-destructive-label-color-idle)] [&_svg]:text-[var(--ui-button-destructive-icon-color-idle)] hover:bg-[var(--ui-button-destructive-container-color-hover)] hover:text-[var(--ui-button-destructive-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-destructive-icon-color-hover)] active:bg-[var(--ui-button-destructive-container-color-active)] active:text-[var(--ui-button-destructive-label-color-active)] active:[&_svg]:text-[var(--ui-button-destructive-icon-color-active)] disabled:bg-[var(--ui-button-destructive-container-color-disabled)] disabled:text-[var(--ui-button-destructive-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-destructive-icon-color-disabled)]',\n ai: 'min-w-[var(--ui-button-ai-container-width-min)] px-[var(--ui-button-ai-container-padding-x)] bg-origin-border text-[var(--ui-button-ai-label-color-idle)] [&_svg]:text-[var(--ui-button-ai-icon-color-idle)] [background-image:var(--ui-button-ai-container-color-idle)] hover:text-[var(--ui-button-ai-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ai-icon-color-hover)] hover:[background-image:var(--ui-button-ai-container-color-hover)] active:text-[var(--ui-button-ai-label-color-active)] active:[&_svg]:text-[var(--ui-button-ai-icon-color-active)] active:[background-image:var(--ui-button-ai-container-color-active)] disabled:text-[var(--ui-button-ai-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ai-icon-color-disabled)] disabled:[background-image:var(--ui-button-ai-container-color-disabled)]',\n inverted:\n 'border min-w-[var(--ui-button-inverted-container-width-min)] px-[var(--ui-button-inverted-container-padding-x)] bg-[var(--ui-button-inverted-container-color-idle)] text-[var(--ui-button-inverted-label-color-idle)] border-[var(--ui-button-inverted-container-border-color-idle)] [&_svg]:text-[var(--ui-button-inverted-icon-color-idle)] hover:bg-[var(--ui-button-inverted-container-color-hover)] hover:text-[var(--ui-button-inverted-label-color-hover)] hover:border-[var(--ui-button-inverted-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-inverted-icon-color-hover)] active:bg-[var(--ui-button-inverted-container-color-active)] active:text-[var(--ui-button-inverted-label-color-active)] active:border-[var(--ui-button-inverted-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-inverted-icon-color-active)] disabled:bg-[var(--ui-button-inverted-container-color-disabled)] disabled:text-[var(--ui-button-inverted-label-color-disabled)] disabled:border-[var(--ui-button-inverted-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-inverted-icon-color-disabled)]',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /**\n * Replace the rendered `<button>` with another element or component\n * (Base UI composition). Accepts a React element or a render function —\n * the component's props and class names are merged onto it.\n */\n render?: useRender.RenderProp;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, render, children, ...props }, ref) => {\n // The AI variant always leads with the Sparkles icon before its label\n // (the Figma \"Ai\" button is a Sparkles instance + label).\n const content =\n variant === 'ai' ? (\n <>\n <SparklesIcon />\n {children}\n </>\n ) : (\n children\n );\n return useRender({\n render,\n ref,\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(buttonVariants({ variant, className })),\n children: content,\n },\n props\n ),\n });\n }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","render","children","props","ref","content","jsxs","Fragment","jsx","SparklesIcon","useRender","mergeProps","cn"],"mappings":";;;;;;;AAiCA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,aACE;AAAA,QACF,IAAI;AAAA,QACJ,UACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAcMC,IAASC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AAG3D,UAAMC,IACJL,MAAY,OACV,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAa;AAAA,MACbP;AAAA,IAAA,EAAA,CACH,IAEAA;AAEJ,WAAOQ,EAAU;AAAA,MACf,QAAAT;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOO;AAAA,QACL;AAAA,UACE,WAAWC,EAAGjB,EAAe,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACpD,UAAUM;AAAA,QAAA;AAAA,QAEZF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAN,EAAO,cAAc;"}