@acronis-platform/ui-react 0.25.1 → 0.27.0
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.
- package/dist/components/ui/button-icon/button-icon.js +6 -6
- package/dist/components/ui/button-icon/button-icon.js.map +1 -1
- package/dist/components/ui/{button-dropdown/button-dropdown.js → button-menu/button-menu.js} +15 -15
- package/dist/components/ui/button-menu/button-menu.js.map +1 -0
- package/dist/components/ui/card-filter/card-filter.js +63 -0
- package/dist/components/ui/card-filter/card-filter.js.map +1 -0
- package/dist/index.js +72 -69
- package/dist/index.js.map +1 -1
- package/dist/react.js +72 -69
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/{button-dropdown/button-dropdown.d.ts → button-menu/button-menu.d.ts} +4 -4
- package/dist/src/components/ui/button-menu/index.d.ts +1 -0
- package/dist/src/components/ui/card-filter/card-filter.d.ts +27 -0
- package/dist/src/components/ui/card-filter/index.d.ts +1 -0
- package/dist/src/index.d.ts +2 -1
- package/dist/ui-react.css +1 -1
- package/package.json +1 -1
- package/dist/components/ui/button-dropdown/button-dropdown.js.map +0 -1
- package/dist/src/components/ui/button-dropdown/index.d.ts +0 -1
|
@@ -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;"}
|
package/dist/components/ui/{button-dropdown/button-dropdown.js → button-menu/button-menu.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsxs as c, Fragment as
|
|
1
|
+
import { jsxs as c, Fragment as b, jsx as d } from "react/jsx-runtime";
|
|
2
2
|
import * as l from "react";
|
|
3
|
-
import { mergeProps as
|
|
4
|
-
import { useRender as
|
|
3
|
+
import { mergeProps as v } from "@base-ui/react/merge-props";
|
|
4
|
+
import { useRender as s } from "@base-ui/react/use-render";
|
|
5
5
|
import { ChevronUpIcon as m, ChevronDownIcon as p } 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 y } from "../../../lib/utils.js";
|
|
8
|
-
const
|
|
9
|
-
"inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6
|
|
8
|
+
const h = g(
|
|
9
|
+
"inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] 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-menu-global-icon-size)] [&_svg]:shrink-0",
|
|
10
10
|
{
|
|
11
11
|
variants: {
|
|
12
12
|
variant: {
|
|
@@ -18,25 +18,25 @@ const f = g(
|
|
|
18
18
|
variant: "primary"
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
),
|
|
21
|
+
), x = l.forwardRef(
|
|
22
22
|
({ className: r, variant: e, open: o, render: n, children: t, ...a }, i) => {
|
|
23
23
|
const u = o ? m : p;
|
|
24
|
-
return
|
|
24
|
+
return s({
|
|
25
25
|
render: n,
|
|
26
26
|
ref: i,
|
|
27
27
|
defaultTagName: "button",
|
|
28
|
-
props:
|
|
28
|
+
props: v(
|
|
29
29
|
{
|
|
30
|
-
className: y(
|
|
30
|
+
className: y(h({ variant: e, className: r })),
|
|
31
31
|
"aria-expanded": o,
|
|
32
32
|
// `data-open` drives the open (`*-active`) token switch via attribute
|
|
33
33
|
// selectors; present only while open, and typed loosely because
|
|
34
34
|
// React's button attribute map doesn't include arbitrary data-* keys
|
|
35
35
|
// as literals.
|
|
36
36
|
...o ? { "data-open": "" } : {},
|
|
37
|
-
children: /* @__PURE__ */ c(
|
|
37
|
+
children: /* @__PURE__ */ c(b, { children: [
|
|
38
38
|
t,
|
|
39
|
-
/* @__PURE__ */
|
|
39
|
+
/* @__PURE__ */ d(u, {})
|
|
40
40
|
] })
|
|
41
41
|
},
|
|
42
42
|
a
|
|
@@ -44,9 +44,9 @@ const f = g(
|
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
46
|
);
|
|
47
|
-
|
|
47
|
+
x.displayName = "ButtonMenu";
|
|
48
48
|
export {
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
x as ButtonMenu,
|
|
50
|
+
h as buttonMenuVariants
|
|
51
51
|
};
|
|
52
|
-
//# sourceMappingURL=button-
|
|
52
|
+
//# sourceMappingURL=button-menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-menu.js","sources":["../../../../src/components/ui/button-menu/button-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport {\n ChevronDownIcon,\n ChevronUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonMenu\" component: a Button-like trigger (label +\n// trailing chevron) that opens a menu. `variant` maps to the Figma `variant`\n// property (Primary / Secondary); the Figma `active` state is the **open** state\n// — the chevron flips down→up and the container takes its `*-active` colors. Each\n// interaction state wires the container fill, label, icon, and — for `secondary`\n// — the border to its own dedicated `--ui-button-menu-*` token from\n// @acronis-platform/tokens-pd. Every state is referenced explicitly (runtime\n// `var()` lookups: a brand override is only honored if the matching state token is\n// referenced). `primary` keeps a single label/icon color across states; only\n// `secondary` diverges them per state. Geometry — 32px height, 8px gap, 12px\n// padding-x, 4px radius, 64px min-width, 16px icon — comes from the\n// `--ui-button-menu-global-*` tokens. The open treatment is driven by the\n// `data-open` attribute (set from the `open` prop) and CSS `:active` for press\n// feedback; disabled uses the explicit disabled tokens (not opacity). Focus: the\n// Figma focus state is a 3px `--ui-focus-primary` ring flush to the button edge\n// (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonMenuVariants = cva(\n 'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] 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-menu-global-icon-size)] [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]',\n secondary:\n 'bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n);\n\nexport interface ButtonMenuProps\n extends\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n VariantProps<typeof buttonMenuVariants> {\n /**\n * Whether the associated menu is open. Flips the trailing chevron\n * (down → up), applies the open (`*-active`) treatment, and reflects\n * `aria-expanded`. Control this in sync with the menu you trigger.\n */\n open?: boolean;\n /** Label content rendered before the chevron. */\n children?: React.ReactNode;\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 * A button that opens a dropdown menu: a label followed by a chevron that\n * points up while `open`. Pair it with the menu/popover it controls and keep\n * the `open` prop in sync.\n */\nconst ButtonMenu = React.forwardRef<HTMLButtonElement, ButtonMenuProps>(\n ({ className, variant, open, render, children, ...props }, ref) => {\n const Chevron = open ? ChevronUpIcon : ChevronDownIcon;\n return useRender({\n render,\n ref,\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(buttonMenuVariants({ variant, className })),\n 'aria-expanded': open,\n // `data-open` drives the open (`*-active`) token switch via attribute\n // selectors; present only while open, and typed loosely because\n // React's button attribute map doesn't include arbitrary data-* keys\n // as literals.\n ...(open ? ({ 'data-open': '' } as Record<string, string>) : {}),\n children: (\n <>\n {children}\n <Chevron />\n </>\n ),\n },\n props\n ),\n });\n }\n);\nButtonMenu.displayName = 'ButtonMenu';\n\nexport { ButtonMenu, buttonMenuVariants };\n"],"names":["buttonMenuVariants","cva","ButtonMenu","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA2BA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA2BMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAUL,IAAOM,IAAgBC;AACvC,WAAOC,EAAU;AAAA,MACf,QAAAP;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOK;AAAA,QACL;AAAA,UACE,WAAWC,EAAGhB,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACxD,iBAAiBE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjB,GAAIA,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,UAC7D,UACE,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,8BACAG,GAAA,CAAA,CAAQ;AAAA,UAAA,EAAA,CACX;AAAA,QAAA;AAAA,QAGJF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAP,EAAW,cAAc;"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsxs as i, Fragment as v, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import * as g from "react";
|
|
3
|
+
import { mergeProps as m } from "@base-ui/react/merge-props";
|
|
4
|
+
import { useRender as p } from "@base-ui/react/use-render";
|
|
5
|
+
import { cva as x } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
6
|
+
import { cn as o } from "../../../lib/utils.js";
|
|
7
|
+
const h = x(
|
|
8
|
+
"inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
static: "",
|
|
13
|
+
"static-empty": "",
|
|
14
|
+
clickable: "cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
variant: "static"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
), y = {
|
|
22
|
+
static: "text-[var(--ui-card-filter-static-value-color-idle)]",
|
|
23
|
+
"static-empty": "text-[var(--ui-card-filter-static-value-color-disabled)]",
|
|
24
|
+
clickable: "text-[var(--ui-card-filter-clickable-value-color)]"
|
|
25
|
+
}, k = g.forwardRef(
|
|
26
|
+
({ className: t, variant: r = "static", label: c, value: s, icon: d, render: n, ...b }, u) => {
|
|
27
|
+
const a = r === "static-empty", e = r === "clickable", f = a ? "–" : s;
|
|
28
|
+
return p({
|
|
29
|
+
render: n,
|
|
30
|
+
ref: u,
|
|
31
|
+
defaultTagName: e ? "button" : "div",
|
|
32
|
+
props: m(
|
|
33
|
+
{
|
|
34
|
+
className: o(h({ variant: r }), t),
|
|
35
|
+
...e ? { type: "button" } : {},
|
|
36
|
+
children: /* @__PURE__ */ i(v, { children: [
|
|
37
|
+
/* @__PURE__ */ l("span", { className: "text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]", children: c }),
|
|
38
|
+
/* @__PURE__ */ i("span", { className: "flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0", children: [
|
|
39
|
+
!a && d,
|
|
40
|
+
/* @__PURE__ */ l(
|
|
41
|
+
"span",
|
|
42
|
+
{
|
|
43
|
+
className: o(
|
|
44
|
+
"text-2xl font-semibold leading-8",
|
|
45
|
+
y[r ?? "static"]
|
|
46
|
+
),
|
|
47
|
+
children: f
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
] })
|
|
51
|
+
] })
|
|
52
|
+
},
|
|
53
|
+
b
|
|
54
|
+
)
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
k.displayName = "CardFilter";
|
|
59
|
+
export {
|
|
60
|
+
k as CardFilter,
|
|
61
|
+
h as cardFilterVariants
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=card-filter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-filter.js","sources":["../../../../src/components/ui/card-filter/card-filter.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 \"CardFilter\" component: a compact stat/filter card — a caption\n// `label` above a content row (optional `icon` + a large `value`). `variant` maps\n// to the Figma `variant` property:\n// • `static` — non-interactive; value in `--ui-card-filter-static-value-color-idle`.\n// • `static-empty` — non-interactive placeholder; no icon, an em-dash value in\n// `--ui-card-filter-static-value-color-disabled`.\n// • `clickable` — interactive (renders a <button>); value in\n// `--ui-card-filter-clickable-value-color`, plus hover / active /\n// focus-visible treatments.\n// Per the Figma constraint (\"if an element is not clickable, it cannot have a state\n// other than Idle\") only `clickable` carries the hover / active / focus state\n// classes — `static` / `static-empty` stay idle. Geometry (224px width, 64px min\n// height, 8px radius, 16/8px padding, 8px content gap, 1px border) and every state\n// color come from the `--ui-card-filter-*` tokens. Focus: a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the rest of the library.\nconst cardFilterVariants = cva(\n 'inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors',\n {\n variants: {\n variant: {\n static: '',\n 'static-empty': '',\n clickable:\n 'cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n },\n },\n defaultVariants: {\n variant: 'static',\n },\n }\n);\n\n// The value color is the one token that varies by variant rather than by state.\nconst valueColorClass: Record<\n NonNullable<VariantProps<typeof cardFilterVariants>['variant']>,\n string\n> = {\n static: 'text-[var(--ui-card-filter-static-value-color-idle)]',\n 'static-empty': 'text-[var(--ui-card-filter-static-value-color-disabled)]',\n clickable: 'text-[var(--ui-card-filter-clickable-value-color)]',\n};\n\nexport interface CardFilterProps\n extends\n Omit<React.HTMLAttributes<HTMLElement>, 'children'>,\n VariantProps<typeof cardFilterVariants> {\n /** Caption shown above the value. */\n label?: React.ReactNode;\n /** The large value. Ignored for `variant=\"static-empty\"` (shows an em-dash). */\n value?: React.ReactNode;\n /** Optional leading icon (16px) rendered before the value. Hidden for `static-empty`. */\n icon?: React.ReactNode;\n /**\n * Replace the rendered element (`<button>` for `clickable`, otherwise `<div>`)\n * with another element or component (Base UI composition) — e.g. a router link\n * for a clickable filter. The component's props and class names are merged onto it.\n */\n render?: useRender.RenderProp;\n}\n\n/**\n * A compact stat/filter card: a label, an optional icon, and a prominent value.\n * Use `variant=\"clickable\"` for a filter the user can activate (renders a button);\n * `static` / `static-empty` are presentational.\n */\nconst CardFilter = React.forwardRef<HTMLElement, CardFilterProps>(\n (\n { className, variant = 'static', label, value, icon, render, ...props },\n ref\n ) => {\n const isEmpty = variant === 'static-empty';\n const isClickable = variant === 'clickable';\n const displayValue = isEmpty ? '–' : value;\n\n return useRender({\n render,\n ref,\n defaultTagName: isClickable ? 'button' : 'div',\n props: mergeProps<'button'>(\n {\n className: cn(cardFilterVariants({ variant }), className),\n ...(isClickable ? { type: 'button' as const } : {}),\n children: (\n <>\n <span className=\"text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]\">\n {label}\n </span>\n <span className=\"flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0\">\n {!isEmpty && icon}\n <span\n className={cn(\n 'text-2xl font-semibold leading-8',\n valueColorClass[variant ?? 'static']\n )}\n >\n {displayValue}\n </span>\n </span>\n </>\n ),\n },\n props\n ),\n });\n }\n);\nCardFilter.displayName = 'CardFilter';\n\nexport { CardFilter, cardFilterVariants };\n"],"names":["cardFilterVariants","cva","valueColorClass","CardFilter","React","className","variant","label","value","icon","render","props","ref","isEmpty","isClickable","displayValue","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AAsBA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAGMC,IAGF;AAAA,EACF,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AACb,GAyBMC,IAAaC,EAAM;AAAA,EACvB,CACE,EAAE,WAAAC,GAAW,SAAAC,IAAU,UAAU,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,EAAA,GAChEC,MACG;AACH,UAAMC,IAAUP,MAAY,gBACtBQ,IAAcR,MAAY,aAC1BS,IAAeF,IAAU,MAAML;AAErC,WAAOQ,EAAU;AAAA,MACf,QAAAN;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgBE,IAAc,WAAW;AAAA,MACzC,OAAOG;AAAA,QACL;AAAA,UACE,WAAWC,EAAGlB,EAAmB,EAAE,SAAAM,EAAA,CAAS,GAAGD,CAAS;AAAA,UACxD,GAAIS,IAAc,EAAE,MAAM,SAAA,IAAsB,CAAA;AAAA,UAChD,UACE,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,iFACb,UAAAd,GACH;AAAA,YACA,gBAAAY,EAAC,QAAA,EAAK,WAAU,oGACb,UAAA;AAAA,cAAA,CAACN,KAAWJ;AAAA,cACb,gBAAAY;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACT;AAAA,oBACAhB,EAAgBI,KAAW,QAAQ;AAAA,kBAAA;AAAA,kBAGpC,UAAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,QAGJJ;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAR,EAAW,cAAc;"}
|
package/dist/index.js
CHANGED
|
@@ -2,21 +2,22 @@ import { cn as a } from "./lib/utils.js";
|
|
|
2
2
|
import { Avatar as t, AvatarFallback as i, AvatarGroup as n, AvatarImage as d, avatarVariants as S } from "./components/ui/avatar/avatar.js";
|
|
3
3
|
import { Breadcrumb as m, BreadcrumbEllipsis as c, BreadcrumbItem as u, BreadcrumbLink as p, BreadcrumbList as l, BreadcrumbPage as y, BreadcrumbSeparator as x } from "./components/ui/breadcrumb/breadcrumb.js";
|
|
4
4
|
import { Button as f, buttonVariants as g } from "./components/ui/button/button.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
5
|
+
import { ButtonMenu as M, buttonMenuVariants as P } from "./components/ui/button-menu/button-menu.js";
|
|
6
|
+
import { CardFilter as T, cardFilterVariants as C } from "./components/ui/card-filter/card-filter.js";
|
|
7
|
+
import { Checkbox as v } from "./components/ui/checkbox/checkbox.js";
|
|
8
|
+
import { Radio as A, RadioGroup as F } from "./components/ui/radio/radio.js";
|
|
9
|
+
import { Input as h } from "./components/ui/input/input.js";
|
|
10
|
+
import { InputTextArea as k } from "./components/ui/input-text-area/input-text-area.js";
|
|
11
|
+
import { Search as E } from "./components/ui/search/search.js";
|
|
12
|
+
import { SearchGlobal as w } from "./components/ui/search-global/search-global.js";
|
|
13
|
+
import { Select as q, SelectContent as D, SelectGroup as J, SelectGroupLabel as K, SelectItem as N, SelectTrigger as O, SelectValue as Q } from "./components/ui/select/select.js";
|
|
14
|
+
import { ResizableHandle as W, ResizablePanel as X, ResizablePanelGroup as Y } from "./components/ui/resizable/resizable.js";
|
|
15
|
+
import { SidebarPrimary as _, SidebarPrimaryCollapseTrigger as $, SidebarPrimaryContent as rr, SidebarPrimaryFooter as er, SidebarPrimaryHeader as ar, SidebarPrimaryMenu as or, SidebarPrimaryMenuItem as tr, SidebarPrimaryMenuItemExtras as ir, SidebarPrimarySection as nr, sidebarPrimaryMenuItemVariants as dr } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
16
|
+
import { SidebarSecondary as br, SidebarSecondaryCollapseTrigger as mr, SidebarSecondaryCollapsedBreadcrumb as cr, SidebarSecondaryContent as ur, SidebarSecondaryFooter as pr, SidebarSecondaryHeader as lr, SidebarSecondaryMenu as yr, SidebarSecondaryMenuItem as xr, SidebarSecondaryMenuItemExtras as sr, SidebarSecondaryMenuSub as fr, SidebarSecondaryMenuSubContent as gr, SidebarSecondaryMenuSubItem as Ir, SidebarSecondaryMenuSubTrigger as Mr, SidebarSecondarySection as Pr, SidebarSecondarySectionLabel as Br, sidebarSecondaryMenuItemVariants as Tr } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
17
|
+
import { ButtonIcon as Vr, buttonIconVariants as vr } from "./components/ui/button-icon/button-icon.js";
|
|
18
|
+
import { Switch as Ar } from "./components/ui/switch/switch.js";
|
|
19
|
+
import { Tooltip as Rr, TooltipContent as hr, TooltipProvider as Lr, TooltipTrigger as kr } from "./components/ui/tooltip/tooltip.js";
|
|
20
|
+
import { Tag as Er, tagVariants as Hr } from "./components/ui/tag/tag.js";
|
|
20
21
|
export {
|
|
21
22
|
t as Avatar,
|
|
22
23
|
i as AvatarFallback,
|
|
@@ -30,62 +31,64 @@ export {
|
|
|
30
31
|
y as BreadcrumbPage,
|
|
31
32
|
x as BreadcrumbSeparator,
|
|
32
33
|
f as Button,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
T as
|
|
36
|
-
|
|
37
|
-
h as
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
D as
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
nr as
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
34
|
+
Vr as ButtonIcon,
|
|
35
|
+
M as ButtonMenu,
|
|
36
|
+
T as CardFilter,
|
|
37
|
+
v as Checkbox,
|
|
38
|
+
h as Input,
|
|
39
|
+
k as InputTextArea,
|
|
40
|
+
A as Radio,
|
|
41
|
+
F as RadioGroup,
|
|
42
|
+
W as ResizableHandle,
|
|
43
|
+
X as ResizablePanel,
|
|
44
|
+
Y as ResizablePanelGroup,
|
|
45
|
+
E as Search,
|
|
46
|
+
w as SearchGlobal,
|
|
47
|
+
q as Select,
|
|
48
|
+
D as SelectContent,
|
|
49
|
+
J as SelectGroup,
|
|
50
|
+
K as SelectGroupLabel,
|
|
51
|
+
N as SelectItem,
|
|
52
|
+
O as SelectTrigger,
|
|
53
|
+
Q as SelectValue,
|
|
54
|
+
_ as SidebarPrimary,
|
|
55
|
+
$ as SidebarPrimaryCollapseTrigger,
|
|
56
|
+
rr as SidebarPrimaryContent,
|
|
57
|
+
er as SidebarPrimaryFooter,
|
|
58
|
+
ar as SidebarPrimaryHeader,
|
|
59
|
+
or as SidebarPrimaryMenu,
|
|
60
|
+
tr as SidebarPrimaryMenuItem,
|
|
61
|
+
ir as SidebarPrimaryMenuItemExtras,
|
|
62
|
+
nr as SidebarPrimarySection,
|
|
63
|
+
br as SidebarSecondary,
|
|
64
|
+
mr as SidebarSecondaryCollapseTrigger,
|
|
65
|
+
cr as SidebarSecondaryCollapsedBreadcrumb,
|
|
66
|
+
ur as SidebarSecondaryContent,
|
|
67
|
+
pr as SidebarSecondaryFooter,
|
|
68
|
+
lr as SidebarSecondaryHeader,
|
|
69
|
+
yr as SidebarSecondaryMenu,
|
|
70
|
+
xr as SidebarSecondaryMenuItem,
|
|
71
|
+
sr as SidebarSecondaryMenuItemExtras,
|
|
72
|
+
fr as SidebarSecondaryMenuSub,
|
|
73
|
+
gr as SidebarSecondaryMenuSubContent,
|
|
74
|
+
Ir as SidebarSecondaryMenuSubItem,
|
|
75
|
+
Mr as SidebarSecondaryMenuSubTrigger,
|
|
76
|
+
Pr as SidebarSecondarySection,
|
|
77
|
+
Br as SidebarSecondarySectionLabel,
|
|
78
|
+
Ar as Switch,
|
|
79
|
+
Er as Tag,
|
|
80
|
+
Rr as Tooltip,
|
|
81
|
+
hr as TooltipContent,
|
|
82
|
+
Lr as TooltipProvider,
|
|
83
|
+
kr as TooltipTrigger,
|
|
82
84
|
S as avatarVariants,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
+
vr as buttonIconVariants,
|
|
86
|
+
P as buttonMenuVariants,
|
|
85
87
|
g as buttonVariants,
|
|
88
|
+
C as cardFilterVariants,
|
|
86
89
|
a as cn,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
+
dr as sidebarPrimaryMenuItemVariants,
|
|
91
|
+
Tr as sidebarSecondaryMenuItemVariants,
|
|
92
|
+
Hr as tagVariants
|
|
90
93
|
};
|
|
91
94
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
package/dist/react.js
CHANGED
|
@@ -2,21 +2,22 @@ import { cn as a } from "./lib/utils.js";
|
|
|
2
2
|
import { Avatar as t, AvatarFallback as i, AvatarGroup as n, AvatarImage as d, avatarVariants as S } from "./components/ui/avatar/avatar.js";
|
|
3
3
|
import { Breadcrumb as m, BreadcrumbEllipsis as c, BreadcrumbItem as u, BreadcrumbLink as p, BreadcrumbList as l, BreadcrumbPage as y, BreadcrumbSeparator as x } from "./components/ui/breadcrumb/breadcrumb.js";
|
|
4
4
|
import { Button as f, buttonVariants as g } from "./components/ui/button/button.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
5
|
+
import { ButtonMenu as M, buttonMenuVariants as P } from "./components/ui/button-menu/button-menu.js";
|
|
6
|
+
import { CardFilter as T, cardFilterVariants as C } from "./components/ui/card-filter/card-filter.js";
|
|
7
|
+
import { Checkbox as v } from "./components/ui/checkbox/checkbox.js";
|
|
8
|
+
import { Radio as A, RadioGroup as F } from "./components/ui/radio/radio.js";
|
|
9
|
+
import { Input as h } from "./components/ui/input/input.js";
|
|
10
|
+
import { InputTextArea as k } from "./components/ui/input-text-area/input-text-area.js";
|
|
11
|
+
import { Search as E } from "./components/ui/search/search.js";
|
|
12
|
+
import { SearchGlobal as w } from "./components/ui/search-global/search-global.js";
|
|
13
|
+
import { Select as q, SelectContent as D, SelectGroup as J, SelectGroupLabel as K, SelectItem as N, SelectTrigger as O, SelectValue as Q } from "./components/ui/select/select.js";
|
|
14
|
+
import { ResizableHandle as W, ResizablePanel as X, ResizablePanelGroup as Y } from "./components/ui/resizable/resizable.js";
|
|
15
|
+
import { SidebarPrimary as _, SidebarPrimaryCollapseTrigger as $, SidebarPrimaryContent as rr, SidebarPrimaryFooter as er, SidebarPrimaryHeader as ar, SidebarPrimaryMenu as or, SidebarPrimaryMenuItem as tr, SidebarPrimaryMenuItemExtras as ir, SidebarPrimarySection as nr, sidebarPrimaryMenuItemVariants as dr } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
16
|
+
import { SidebarSecondary as br, SidebarSecondaryCollapseTrigger as mr, SidebarSecondaryCollapsedBreadcrumb as cr, SidebarSecondaryContent as ur, SidebarSecondaryFooter as pr, SidebarSecondaryHeader as lr, SidebarSecondaryMenu as yr, SidebarSecondaryMenuItem as xr, SidebarSecondaryMenuItemExtras as sr, SidebarSecondaryMenuSub as fr, SidebarSecondaryMenuSubContent as gr, SidebarSecondaryMenuSubItem as Ir, SidebarSecondaryMenuSubTrigger as Mr, SidebarSecondarySection as Pr, SidebarSecondarySectionLabel as Br, sidebarSecondaryMenuItemVariants as Tr } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
17
|
+
import { ButtonIcon as Vr, buttonIconVariants as vr } from "./components/ui/button-icon/button-icon.js";
|
|
18
|
+
import { Switch as Ar } from "./components/ui/switch/switch.js";
|
|
19
|
+
import { Tooltip as Rr, TooltipContent as hr, TooltipProvider as Lr, TooltipTrigger as kr } from "./components/ui/tooltip/tooltip.js";
|
|
20
|
+
import { Tag as Er, tagVariants as Hr } from "./components/ui/tag/tag.js";
|
|
20
21
|
export {
|
|
21
22
|
t as Avatar,
|
|
22
23
|
i as AvatarFallback,
|
|
@@ -30,62 +31,64 @@ export {
|
|
|
30
31
|
y as BreadcrumbPage,
|
|
31
32
|
x as BreadcrumbSeparator,
|
|
32
33
|
f as Button,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
T as
|
|
36
|
-
|
|
37
|
-
h as
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
D as
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
nr as
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
34
|
+
Vr as ButtonIcon,
|
|
35
|
+
M as ButtonMenu,
|
|
36
|
+
T as CardFilter,
|
|
37
|
+
v as Checkbox,
|
|
38
|
+
h as Input,
|
|
39
|
+
k as InputTextArea,
|
|
40
|
+
A as Radio,
|
|
41
|
+
F as RadioGroup,
|
|
42
|
+
W as ResizableHandle,
|
|
43
|
+
X as ResizablePanel,
|
|
44
|
+
Y as ResizablePanelGroup,
|
|
45
|
+
E as Search,
|
|
46
|
+
w as SearchGlobal,
|
|
47
|
+
q as Select,
|
|
48
|
+
D as SelectContent,
|
|
49
|
+
J as SelectGroup,
|
|
50
|
+
K as SelectGroupLabel,
|
|
51
|
+
N as SelectItem,
|
|
52
|
+
O as SelectTrigger,
|
|
53
|
+
Q as SelectValue,
|
|
54
|
+
_ as SidebarPrimary,
|
|
55
|
+
$ as SidebarPrimaryCollapseTrigger,
|
|
56
|
+
rr as SidebarPrimaryContent,
|
|
57
|
+
er as SidebarPrimaryFooter,
|
|
58
|
+
ar as SidebarPrimaryHeader,
|
|
59
|
+
or as SidebarPrimaryMenu,
|
|
60
|
+
tr as SidebarPrimaryMenuItem,
|
|
61
|
+
ir as SidebarPrimaryMenuItemExtras,
|
|
62
|
+
nr as SidebarPrimarySection,
|
|
63
|
+
br as SidebarSecondary,
|
|
64
|
+
mr as SidebarSecondaryCollapseTrigger,
|
|
65
|
+
cr as SidebarSecondaryCollapsedBreadcrumb,
|
|
66
|
+
ur as SidebarSecondaryContent,
|
|
67
|
+
pr as SidebarSecondaryFooter,
|
|
68
|
+
lr as SidebarSecondaryHeader,
|
|
69
|
+
yr as SidebarSecondaryMenu,
|
|
70
|
+
xr as SidebarSecondaryMenuItem,
|
|
71
|
+
sr as SidebarSecondaryMenuItemExtras,
|
|
72
|
+
fr as SidebarSecondaryMenuSub,
|
|
73
|
+
gr as SidebarSecondaryMenuSubContent,
|
|
74
|
+
Ir as SidebarSecondaryMenuSubItem,
|
|
75
|
+
Mr as SidebarSecondaryMenuSubTrigger,
|
|
76
|
+
Pr as SidebarSecondarySection,
|
|
77
|
+
Br as SidebarSecondarySectionLabel,
|
|
78
|
+
Ar as Switch,
|
|
79
|
+
Er as Tag,
|
|
80
|
+
Rr as Tooltip,
|
|
81
|
+
hr as TooltipContent,
|
|
82
|
+
Lr as TooltipProvider,
|
|
83
|
+
kr as TooltipTrigger,
|
|
82
84
|
S as avatarVariants,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
+
vr as buttonIconVariants,
|
|
86
|
+
P as buttonMenuVariants,
|
|
85
87
|
g as buttonVariants,
|
|
88
|
+
C as cardFilterVariants,
|
|
86
89
|
a as cn,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
+
dr as sidebarPrimaryMenuItemVariants,
|
|
91
|
+
Tr as sidebarSecondaryMenuItemVariants,
|
|
92
|
+
Hr as tagVariants
|
|
90
93
|
};
|
|
91
94
|
//# sourceMappingURL=react.js.map
|
package/dist/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
package/dist/src/components/ui/{button-dropdown/button-dropdown.d.ts → button-menu/button-menu.d.ts}
RENAMED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useRender } from '@base-ui/react/use-render';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
declare const
|
|
4
|
+
declare const buttonMenuVariants: (props?: ({
|
|
5
5
|
variant?: "secondary" | "primary" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
-
export interface
|
|
7
|
+
export interface ButtonMenuProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof buttonMenuVariants> {
|
|
8
8
|
/**
|
|
9
9
|
* Whether the associated menu is open. Flips the trailing chevron
|
|
10
10
|
* (down → up), applies the open (`*-active`) treatment, and reflects
|
|
@@ -25,5 +25,5 @@ export interface ButtonDropdownProps extends Omit<React.ButtonHTMLAttributes<HTM
|
|
|
25
25
|
* points up while `open`. Pair it with the menu/popover it controls and keep
|
|
26
26
|
* the `open` prop in sync.
|
|
27
27
|
*/
|
|
28
|
-
declare const
|
|
29
|
-
export {
|
|
28
|
+
declare const ButtonMenu: React.ForwardRefExoticComponent<ButtonMenuProps & React.RefAttributes<HTMLButtonElement>>;
|
|
29
|
+
export { ButtonMenu, buttonMenuVariants };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ButtonMenu, buttonMenuVariants, type ButtonMenuProps, } from './button-menu';
|