@acronis-platform/ui-react 0.25.1 → 0.25.2
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.
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
import { mergeProps as a } from "@base-ui/react/merge-props";
|
|
3
3
|
import { useRender as c } from "@base-ui/react/use-render";
|
|
4
|
-
import { cva as
|
|
5
|
-
import { cn as
|
|
6
|
-
const s =
|
|
7
|
-
"inline-flex size-[var(--ui-button-icon-global-container-height)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-global-container-border-radius)]
|
|
4
|
+
import { cva as l } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
5
|
+
import { cn as b } from "../../../lib/utils.js";
|
|
6
|
+
const s = l(
|
|
7
|
+
"inline-flex size-[var(--ui-button-icon-global-container-height)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-global-container-border-radius)] transition-colors bg-[var(--ui-button-icon-global-container-color-idle)] text-[var(--ui-button-icon-global-icon-color-idle)] hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] disabled:pointer-events-none disabled:bg-[var(--ui-button-icon-global-container-color-disabled)] disabled:text-[var(--ui-button-icon-global-icon-color-disabled)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0",
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
11
|
ghost: "",
|
|
12
|
-
secondary: "border-[var(--ui-button-icon-secondary-container-border-color-idle)] hover:border-[var(--ui-button-icon-secondary-container-border-color-hover)] active:border-[var(--ui-button-icon-secondary-container-border-color-active)] disabled:border-[var(--ui-button-icon-secondary-container-border-color-disabled)]"
|
|
12
|
+
secondary: "border border-[var(--ui-button-icon-secondary-container-border-color-idle)] hover:border-[var(--ui-button-icon-secondary-container-border-color-hover)] active:border-[var(--ui-button-icon-secondary-container-border-color-active)] disabled:border-[var(--ui-button-icon-secondary-container-border-color-disabled)]"
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
defaultVariants: {
|
|
@@ -22,7 +22,7 @@ const s = b(
|
|
|
22
22
|
ref: t,
|
|
23
23
|
defaultTagName: "button",
|
|
24
24
|
props: a(
|
|
25
|
-
{ className:
|
|
25
|
+
{ className: b(s({ variant: r, className: o })) },
|
|
26
26
|
i
|
|
27
27
|
)
|
|
28
28
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-icon.js","sources":["../../../../src/components/ui/button-icon/button-icon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonIcon\" component set: an icon-only button (square 32px\n// box,
|
|
1
|
+
{"version":3,"file":"button-icon.js","sources":["../../../../src/components/ui/button-icon/button-icon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonIcon\" component set: an icon-only button (square 32px\n// box, 24px glyph centered → the design's 4px padding) with a `variant` property\n// (`ghost` / `secondary`) and idle / hover / active / disabled states. The\n// container fill and the glyph color are shared across both variants and come\n// from the `--ui-button-icon-global-*` tokens; only `secondary` draws a 1px\n// container border (it adds `border` in its own class), from the\n// `--ui-button-icon-secondary-container-border-color-*` tokens — `ghost` has no\n// border (the Figma draws none). Each interaction state is wired to its own token\n// (runtime `var()` references, so brand overrides are honored). Box geometry —\n// 32px height, 4px radius, 24px icon — comes from the `global-container-*` /\n// `global-icon-size` tokens. Like Button, disabled uses the design's explicit\n// disabled tokens (not opacity), and the focus state is a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the Figma.\nconst buttonIconVariants = cva(\n 'inline-flex size-[var(--ui-button-icon-global-container-height)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-global-container-border-radius)] transition-colors ' +\n 'bg-[var(--ui-button-icon-global-container-color-idle)] text-[var(--ui-button-icon-global-icon-color-idle)] ' +\n 'hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] ' +\n 'active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] ' +\n 'disabled:pointer-events-none disabled:bg-[var(--ui-button-icon-global-container-color-disabled)] disabled:text-[var(--ui-button-icon-global-icon-color-disabled)] ' +\n 'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] ' +\n '[&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n ghost: '',\n secondary:\n 'border border-[var(--ui-button-icon-secondary-container-border-color-idle)] hover:border-[var(--ui-button-icon-secondary-container-border-color-hover)] active:border-[var(--ui-button-icon-secondary-container-border-color-active)] disabled:border-[var(--ui-button-icon-secondary-container-border-color-disabled)]',\n },\n },\n defaultVariants: {\n variant: 'ghost',\n },\n }\n);\n\nexport interface ButtonIconProps\n extends\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonIconVariants> {\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\n/**\n * Icon-only button. The icon is passed as `children`; provide an `aria-label`\n * (or `aria-labelledby`) so the control has an accessible name.\n */\nconst ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n ({ className, variant, render, ...props }, ref) => {\n return useRender({\n render,\n ref,\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n { className: cn(buttonIconVariants({ variant, className })) },\n props\n ),\n });\n }\n);\nButtonIcon.displayName = 'ButtonIcon';\n\nexport { ButtonIcon, buttonIconVariants };\n"],"names":["buttonIconVariants","cva","ButtonIcon","React","className","variant","render","props","ref","useRender","mergeProps","cn"],"mappings":";;;;;AAoBA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EAOA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAkBMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAClCC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAGX,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC,EAAA;AAAA,MAC1DG;AAAA,IAAA;AAAA,EACF,CACD;AAEL;AACAL,EAAW,cAAc;"}
|