@stridge/noctis 1.0.0-beta.3 → 1.0.0-beta.4
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/avatar/avatar.d.ts +2 -2
- package/dist/components/avatar/avatar.js +1 -1
- package/dist/components/avatar/avatar.props.d.ts +1 -1
- package/dist/components/avatar/avatar.slots.d.ts +1 -1
- package/dist/components/avatar/avatar.slots.js +1 -1
- package/dist/components/badge/badge.d.ts +114 -0
- package/dist/components/badge/badge.js +74 -0
- package/dist/components/badge/badge.props.d.ts +42 -0
- package/dist/components/badge/badge.props.js +42 -0
- package/dist/components/badge/badge.slots.d.ts +19 -0
- package/dist/components/badge/badge.slots.js +30 -0
- package/dist/components/badge/badge.types.d.ts +24 -0
- package/dist/components/badge/index.d.ts +3 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.js +3 -1
- package/dist/props.d.ts +29 -28
- package/dist/props.js +29 -28
- package/dist/styles.css +434 -34
- package/dist/tailwind.css +11 -11
- package/package.json +4 -4
|
@@ -38,7 +38,7 @@ declare function AvatarImage({
|
|
|
38
38
|
}: Avatar.Image.Props): ReactElement;
|
|
39
39
|
/**
|
|
40
40
|
* Shown when no image loads — initials or a glyph on a static, accent-independent swatch. Pass `seed`
|
|
41
|
-
* (a user id, name, or email) to hash a stable `bg-
|
|
41
|
+
* (a user id, name, or email) to hash a stable `bg-palette-N` colour, so the same person always gets the
|
|
42
42
|
* same hue; omit it for the neutral muted fill. Base UI handles the `delay` before it appears.
|
|
43
43
|
*/
|
|
44
44
|
declare function AvatarFallback({
|
|
@@ -182,7 +182,7 @@ declare namespace Avatar {
|
|
|
182
182
|
}
|
|
183
183
|
namespace Fallback {
|
|
184
184
|
type Props = avatar_d_exports.Avatar.Fallback.Props & {
|
|
185
|
-
/** A stable identifier hashed to one of ten `bg-
|
|
185
|
+
/** A stable identifier hashed to one of ten `bg-palette-N` swatches; omit for the neutral muted fill. */seed?: string;
|
|
186
186
|
};
|
|
187
187
|
type State = avatar_d_exports.Avatar.Fallback.State;
|
|
188
188
|
/** Argument to the `Avatar.Fallback.props(...)` escape-hatch helper. */
|
|
@@ -72,7 +72,7 @@ function AvatarImage({ onLoadingStatusChange, className, ...props }) {
|
|
|
72
72
|
}
|
|
73
73
|
/**
|
|
74
74
|
* Shown when no image loads — initials or a glyph on a static, accent-independent swatch. Pass `seed`
|
|
75
|
-
* (a user id, name, or email) to hash a stable `bg-
|
|
75
|
+
* (a user id, name, or email) to hash a stable `bg-palette-N` colour, so the same person always gets the
|
|
76
76
|
* same hue; omit it for the neutral muted fill. Base UI handles the `delay` before it appears.
|
|
77
77
|
*/
|
|
78
78
|
function AvatarFallback({ seed, className, children, ...props }) {
|
|
@@ -28,7 +28,7 @@ type AvatarStatelessPropsArgs = BasePropsArgs;
|
|
|
28
28
|
/** Argument to `Avatar.Fallback.props(...)` — the seed that selects the static swatch the fill reads. */
|
|
29
29
|
interface AvatarFallbackPropsArgs extends BasePropsArgs {
|
|
30
30
|
/**
|
|
31
|
-
* A stable identifier (a user id, name, or email) hashed to one of the ten `bg-
|
|
31
|
+
* A stable identifier (a user id, name, or email) hashed to one of the ten `bg-palette-N` swatches,
|
|
32
32
|
* so the same person always lands on the same colour. Omit to fall back to the neutral muted fill.
|
|
33
33
|
*/
|
|
34
34
|
seed?: string;
|
|
@@ -16,7 +16,7 @@ declare enum AvatarDataAttributes {
|
|
|
16
16
|
size = "data-size",
|
|
17
17
|
/** The shape — `circle` (default, fully round) | `rounded` (rounded corners). */
|
|
18
18
|
shape = "data-shape",
|
|
19
|
-
/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-
|
|
19
|
+
/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-palette-N` role from. */
|
|
20
20
|
avatarIndex = "data-avatar-index",
|
|
21
21
|
/** Present when the avatar is dimmed/inactive — gates interactive states and applies the disabled opacity. */
|
|
22
22
|
disabled = "data-disabled",
|
|
@@ -29,7 +29,7 @@ let AvatarDataAttributes = /* @__PURE__ */ function(AvatarDataAttributes) {
|
|
|
29
29
|
AvatarDataAttributes["size"] = "data-size";
|
|
30
30
|
/** The shape — `circle` (default, fully round) | `rounded` (rounded corners). */
|
|
31
31
|
AvatarDataAttributes["shape"] = "data-shape";
|
|
32
|
-
/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-
|
|
32
|
+
/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-palette-N` role from. */
|
|
33
33
|
AvatarDataAttributes["avatarIndex"] = "data-avatar-index";
|
|
34
34
|
/** Present when the avatar is dimmed/inactive — gates interactive states and applies the disabled opacity. */
|
|
35
35
|
AvatarDataAttributes["disabled"] = "data-disabled";
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
|
|
2
|
+
import { BadgePartProps, BadgeRootPropsArgs, BadgeStatelessPropsArgs, dotProps, iconProps, rootProps } from "./badge.props.js";
|
|
3
|
+
import { ComponentProps, ReactElement } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/badge/badge.d.ts
|
|
6
|
+
/**
|
|
7
|
+
* A small label for status, categorization, or metadata — a pill chip that sits inline with text or in
|
|
8
|
+
* a row of its own. The look is two orthogonal axes: `variant` is the emphasis (a filled `solid`, a
|
|
9
|
+
* quiet `soft` tint, or a transparent `outline`) and `tone` is the colour identity (the six semantic
|
|
10
|
+
* tones — `neutral`/`accent` and the four statuses — plus eight accent-independent decorative hues for
|
|
11
|
+
* categorization). Compose a leading `Badge.Dot` for an at-a-glance status dot or a `Badge.Icon` for a
|
|
12
|
+
* glyph; both inherit the chip's text colour so they stay legible in every variant.
|
|
13
|
+
*
|
|
14
|
+
* Decorative and accent-independent: the styling is precompiled CSS keyed off the `data-slot` anchor
|
|
15
|
+
* (`badge.css`), and the colour grid reads the semantic roles and the shared categorical palette directly, so a
|
|
16
|
+
* retheme propagates and a categorical tone never re-derives off the accent. Renders a `<span>` by
|
|
17
|
+
* default; spread `Badge.Root.props(...)` onto an `<a>` (or any element) to style it as a chip.
|
|
18
|
+
*
|
|
19
|
+
* @see {@link Badge.Root.Props}
|
|
20
|
+
*/
|
|
21
|
+
declare function BadgeRoot({
|
|
22
|
+
variant,
|
|
23
|
+
tone,
|
|
24
|
+
size,
|
|
25
|
+
className,
|
|
26
|
+
...props
|
|
27
|
+
}: Badge.Root.Props): ReactElement;
|
|
28
|
+
/**
|
|
29
|
+
* An optional leading status dot. Decorative by default (`aria-hidden`) — the chip's label carries the
|
|
30
|
+
* meaning — so it is never a colour-only signal; pair a label like "Online" with it. Fills with the
|
|
31
|
+
* chip's `currentColor`, so it reads as a knockout on a `solid` chip and as the saturated tone on a
|
|
32
|
+
* `soft`/`outline` one.
|
|
33
|
+
*/
|
|
34
|
+
declare function BadgeDot({
|
|
35
|
+
className,
|
|
36
|
+
...props
|
|
37
|
+
}: Badge.Dot.Props): ReactElement;
|
|
38
|
+
/**
|
|
39
|
+
* An optional leading icon. Clamps its glyph to the chip's icon size and inherits the chip's text
|
|
40
|
+
* colour. Decorative by default (`aria-hidden`); wrap an `<Icon>` or any inline svg inside it — don't
|
|
41
|
+
* put `data-slot` on the icon itself, which would drop its own token sizing.
|
|
42
|
+
*/
|
|
43
|
+
declare function BadgeIcon({
|
|
44
|
+
className,
|
|
45
|
+
children,
|
|
46
|
+
...props
|
|
47
|
+
}: Badge.Icon.Props): ReactElement;
|
|
48
|
+
/**
|
|
49
|
+
* A small status/label chip. `Badge.Root` owns the pill and its `variant` (emphasis) + `tone` (colour)
|
|
50
|
+
* + `size`; compose a leading `Badge.Dot` (a status dot) or `Badge.Icon` (a glyph) before the label.
|
|
51
|
+
*
|
|
52
|
+
* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
|
|
53
|
+
* the matching `Badge` namespace — e.g. `Badge.Root.Props`.
|
|
54
|
+
*/
|
|
55
|
+
declare const Badge: {
|
|
56
|
+
/** Owns the pill + its variant/tone/size. `Badge.Root.props({ variant, tone, size })` → its prop bag. */Root: typeof BadgeRoot & {
|
|
57
|
+
props: typeof rootProps;
|
|
58
|
+
}; /** A leading status dot (decorative). `Badge.Dot.props()` → its spreadable prop bag. */
|
|
59
|
+
Dot: typeof BadgeDot & {
|
|
60
|
+
props: typeof dotProps;
|
|
61
|
+
}; /** A leading icon glyph (decorative). `Badge.Icon.props()` → its spreadable prop bag. */
|
|
62
|
+
Icon: typeof BadgeIcon & {
|
|
63
|
+
props: typeof iconProps;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Per-part prop types. Types-only — it emits no runtime code and merges with the `Badge` object above,
|
|
68
|
+
* so `Badge.Root` is the component value while `Badge.Root.Props` is its prop type.
|
|
69
|
+
*/
|
|
70
|
+
declare namespace Badge {
|
|
71
|
+
/** Emphasis axis — `solid` | `soft` | `outline`. */
|
|
72
|
+
type Variant = BadgeVariant;
|
|
73
|
+
/** Colour identity — a semantic tone or a decorative hue. */
|
|
74
|
+
type Tone = BadgeTone;
|
|
75
|
+
/** Chip scale — `sm` | `md`. */
|
|
76
|
+
type Size = BadgeSize;
|
|
77
|
+
/** The spreadable data-attribute prop bag every `Badge.*.props()` returns (D12). */
|
|
78
|
+
type PartProps = BadgePartProps;
|
|
79
|
+
namespace Root {
|
|
80
|
+
type Props = ComponentProps<"span"> & {
|
|
81
|
+
/**
|
|
82
|
+
* Emphasis — a filled `solid` chip, a quiet `soft` tint, a transparent `outline`, or a
|
|
83
|
+
* neutral `dot` chip whose only colour is its leading `Badge.Dot`.
|
|
84
|
+
* @default "soft"
|
|
85
|
+
*/
|
|
86
|
+
variant?: BadgeVariant;
|
|
87
|
+
/**
|
|
88
|
+
* Colour identity — a semantic tone (`neutral`/`accent`/`success`/`warning`/`danger`/`info`)
|
|
89
|
+
* or a decorative hue (`red`…`pink`) for categorization.
|
|
90
|
+
* @default "neutral"
|
|
91
|
+
*/
|
|
92
|
+
tone?: BadgeTone;
|
|
93
|
+
/**
|
|
94
|
+
* Chip scale.
|
|
95
|
+
* @default "md"
|
|
96
|
+
*/
|
|
97
|
+
size?: BadgeSize;
|
|
98
|
+
};
|
|
99
|
+
/** Argument to the `Badge.Root.props(...)` escape-hatch helper. */
|
|
100
|
+
type PropsArgs = BadgeRootPropsArgs;
|
|
101
|
+
}
|
|
102
|
+
namespace Dot {
|
|
103
|
+
type Props = ComponentProps<"span">;
|
|
104
|
+
/** Argument to the `Badge.Dot.props(...)` escape-hatch helper. */
|
|
105
|
+
type PropsArgs = BadgeStatelessPropsArgs;
|
|
106
|
+
}
|
|
107
|
+
namespace Icon {
|
|
108
|
+
type Props = ComponentProps<"span">;
|
|
109
|
+
/** Argument to the `Badge.Icon.props(...)` escape-hatch helper. */
|
|
110
|
+
type PropsArgs = BadgeStatelessPropsArgs;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
//#endregion
|
|
114
|
+
export { Badge };
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { BADGE_SLOTS } from "./badge.slots.js";
|
|
2
|
+
import { dotProps, iconProps, rootProps } from "./badge.props.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/badge/badge.tsx
|
|
5
|
+
/**
|
|
6
|
+
* A small label for status, categorization, or metadata — a pill chip that sits inline with text or in
|
|
7
|
+
* a row of its own. The look is two orthogonal axes: `variant` is the emphasis (a filled `solid`, a
|
|
8
|
+
* quiet `soft` tint, or a transparent `outline`) and `tone` is the colour identity (the six semantic
|
|
9
|
+
* tones — `neutral`/`accent` and the four statuses — plus eight accent-independent decorative hues for
|
|
10
|
+
* categorization). Compose a leading `Badge.Dot` for an at-a-glance status dot or a `Badge.Icon` for a
|
|
11
|
+
* glyph; both inherit the chip's text colour so they stay legible in every variant.
|
|
12
|
+
*
|
|
13
|
+
* Decorative and accent-independent: the styling is precompiled CSS keyed off the `data-slot` anchor
|
|
14
|
+
* (`badge.css`), and the colour grid reads the semantic roles and the shared categorical palette directly, so a
|
|
15
|
+
* retheme propagates and a categorical tone never re-derives off the accent. Renders a `<span>` by
|
|
16
|
+
* default; spread `Badge.Root.props(...)` onto an `<a>` (or any element) to style it as a chip.
|
|
17
|
+
*
|
|
18
|
+
* @see {@link Badge.Root.Props}
|
|
19
|
+
*/
|
|
20
|
+
function BadgeRoot({ variant = "soft", tone = "neutral", size = "md", className, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx("span", {
|
|
22
|
+
"data-slot": BADGE_SLOTS.root,
|
|
23
|
+
"data-variant": variant,
|
|
24
|
+
"data-tone": tone,
|
|
25
|
+
"data-size": size,
|
|
26
|
+
className,
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* An optional leading status dot. Decorative by default (`aria-hidden`) — the chip's label carries the
|
|
32
|
+
* meaning — so it is never a colour-only signal; pair a label like "Online" with it. Fills with the
|
|
33
|
+
* chip's `currentColor`, so it reads as a knockout on a `solid` chip and as the saturated tone on a
|
|
34
|
+
* `soft`/`outline` one.
|
|
35
|
+
*/
|
|
36
|
+
function BadgeDot({ className, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx("span", {
|
|
38
|
+
"data-slot": BADGE_SLOTS.dot,
|
|
39
|
+
"aria-hidden": true,
|
|
40
|
+
className,
|
|
41
|
+
...props
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* An optional leading icon. Clamps its glyph to the chip's icon size and inherits the chip's text
|
|
46
|
+
* colour. Decorative by default (`aria-hidden`); wrap an `<Icon>` or any inline svg inside it — don't
|
|
47
|
+
* put `data-slot` on the icon itself, which would drop its own token sizing.
|
|
48
|
+
*/
|
|
49
|
+
function BadgeIcon({ className, children, ...props }) {
|
|
50
|
+
return /* @__PURE__ */ jsx("span", {
|
|
51
|
+
"data-slot": BADGE_SLOTS.icon,
|
|
52
|
+
"aria-hidden": true,
|
|
53
|
+
className,
|
|
54
|
+
...props,
|
|
55
|
+
children
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* A small status/label chip. `Badge.Root` owns the pill and its `variant` (emphasis) + `tone` (colour)
|
|
60
|
+
* + `size`; compose a leading `Badge.Dot` (a status dot) or `Badge.Icon` (a glyph) before the label.
|
|
61
|
+
*
|
|
62
|
+
* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
|
|
63
|
+
* the matching `Badge` namespace — e.g. `Badge.Root.Props`.
|
|
64
|
+
*/
|
|
65
|
+
const Badge = {
|
|
66
|
+
/** Owns the pill + its variant/tone/size. `Badge.Root.props({ variant, tone, size })` → its prop bag. */
|
|
67
|
+
Root: Object.assign(BadgeRoot, { props: rootProps }),
|
|
68
|
+
/** A leading status dot (decorative). `Badge.Dot.props()` → its spreadable prop bag. */
|
|
69
|
+
Dot: Object.assign(BadgeDot, { props: dotProps }),
|
|
70
|
+
/** A leading icon glyph (decorative). `Badge.Icon.props()` → its spreadable prop bag. */
|
|
71
|
+
Icon: Object.assign(BadgeIcon, { props: iconProps })
|
|
72
|
+
};
|
|
73
|
+
//#endregion
|
|
74
|
+
export { Badge };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/components/badge/badge.props.d.ts
|
|
4
|
+
/** A spreadable data-attribute prop bag — the shape every `Badge.*.props()` returns. */
|
|
5
|
+
type BadgePartProps = {
|
|
6
|
+
/** The slot value the matching `badge.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
|
|
7
|
+
className?: string; /** A data-attribute present (string) or absent (`undefined`); never `false`. */
|
|
8
|
+
[attr: `data-${string}`]: string | undefined;
|
|
9
|
+
};
|
|
10
|
+
/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
|
|
11
|
+
interface BasePropsArgs {
|
|
12
|
+
/** Forwarded verbatim onto the returned prop bag. */
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
/** Argument to `Badge.Root.props(...)` — the chip's variant + tone + size. */
|
|
16
|
+
interface BadgeRootPropsArgs extends BasePropsArgs {
|
|
17
|
+
/** Emphasis — `solid` (filled) | `soft` (tint) | `outline` (edge) | `dot` (neutral chip, coloured dot). @default "soft" */
|
|
18
|
+
variant?: BadgeVariant;
|
|
19
|
+
/** Colour identity — a semantic tone or a decorative hue. @default "neutral" */
|
|
20
|
+
tone?: BadgeTone;
|
|
21
|
+
/** Chip scale. @default "md" */
|
|
22
|
+
size?: BadgeSize;
|
|
23
|
+
}
|
|
24
|
+
/** Argument to a stateless part's `.props(...)` — no recipe of its own; colour flows from the root. */
|
|
25
|
+
type BadgeStatelessPropsArgs = BasePropsArgs;
|
|
26
|
+
/** Root prop bag: `data-slot` plus the `data-variant`/`data-tone`/`data-size` the colour grid reads. */
|
|
27
|
+
declare function rootProps({
|
|
28
|
+
variant,
|
|
29
|
+
tone,
|
|
30
|
+
size,
|
|
31
|
+
className
|
|
32
|
+
}?: BadgeRootPropsArgs): BadgePartProps;
|
|
33
|
+
/** Dot prop bag: just the slot anchor (it fills with the chip's `currentColor`). */
|
|
34
|
+
declare function dotProps({
|
|
35
|
+
className
|
|
36
|
+
}?: BadgeStatelessPropsArgs): BadgePartProps;
|
|
37
|
+
/** Icon prop bag: just the slot anchor (the glyph is clamped to the chip's icon size and inherits its colour). */
|
|
38
|
+
declare function iconProps({
|
|
39
|
+
className
|
|
40
|
+
}?: BadgeStatelessPropsArgs): BadgePartProps;
|
|
41
|
+
//#endregion
|
|
42
|
+
export { BadgePartProps, BadgeRootPropsArgs, BadgeStatelessPropsArgs, dotProps, iconProps, rootProps };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { BADGE_SLOTS } from "./badge.slots.js";
|
|
2
|
+
//#region src/components/badge/badge.props.ts
|
|
3
|
+
/**
|
|
4
|
+
* The D12 unified variant contract for Badge — the data-attribute-native styling helpers.
|
|
5
|
+
*
|
|
6
|
+
* Each compound part exposes a `props(...)` builder returning a **spreadable props object** of the form
|
|
7
|
+
* `{ "data-slot": "noctis-badge-<part>", ...dataAttrs }`, derived from the part's variant/tone/size
|
|
8
|
+
* inputs. Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
|
|
9
|
+
* `badge.css` keys every rule off it plus the `data-*` recipe — so spreading a part's `props()` onto a
|
|
10
|
+
* *foreign* element styles it as that part:
|
|
11
|
+
*
|
|
12
|
+
* <a {...Badge.Root.props({ tone: "success" })} href="/status">Live</a>
|
|
13
|
+
* // → <a data-slot="noctis-badge" data-variant="soft" data-tone="success" data-size="md">
|
|
14
|
+
*
|
|
15
|
+
* The escape hatch carries no className (styling is attribute-driven); an optional `className`
|
|
16
|
+
* passthrough is accepted and forwarded verbatim. The same variant→data-attribute→values mapping is
|
|
17
|
+
* emitted as data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React /
|
|
18
|
+
* agent consumers can hand-write the markup from the docs.
|
|
19
|
+
*/
|
|
20
|
+
const withClassName = (bag, className) => className === void 0 ? bag : {
|
|
21
|
+
...bag,
|
|
22
|
+
className
|
|
23
|
+
};
|
|
24
|
+
/** Root prop bag: `data-slot` plus the `data-variant`/`data-tone`/`data-size` the colour grid reads. */
|
|
25
|
+
function rootProps({ variant = "soft", tone = "neutral", size = "md", className } = {}) {
|
|
26
|
+
return withClassName({
|
|
27
|
+
"data-slot": BADGE_SLOTS.root,
|
|
28
|
+
"data-variant": variant,
|
|
29
|
+
"data-tone": tone,
|
|
30
|
+
"data-size": size
|
|
31
|
+
}, className);
|
|
32
|
+
}
|
|
33
|
+
/** Dot prop bag: just the slot anchor (it fills with the chip's `currentColor`). */
|
|
34
|
+
function dotProps({ className } = {}) {
|
|
35
|
+
return withClassName({ "data-slot": BADGE_SLOTS.dot }, className);
|
|
36
|
+
}
|
|
37
|
+
/** Icon prop bag: just the slot anchor (the glyph is clamped to the chip's icon size and inherits its colour). */
|
|
38
|
+
function iconProps({ className } = {}) {
|
|
39
|
+
return withClassName({ "data-slot": BADGE_SLOTS.icon }, className);
|
|
40
|
+
}
|
|
41
|
+
//#endregion
|
|
42
|
+
export { dotProps, iconProps, rootProps };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//#region src/components/badge/badge.slots.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* The `data-*` hooks `Badge` stamps on its parts, for host-side styling and tests. The slot values
|
|
4
|
+
* mark each rendered element; the `data-variant`/`data-tone`/`data-size` axes carry the recipe the
|
|
5
|
+
* precompiled `badge.css` keys its colour grid and per-size metrics off. The dot and icon take no
|
|
6
|
+
* axis of their own — they ride the chip's `currentColor`, so they stay legible in every variant.
|
|
7
|
+
*/
|
|
8
|
+
declare enum BadgeDataAttributes {
|
|
9
|
+
/** The root chip element. */
|
|
10
|
+
slot = "data-slot",
|
|
11
|
+
/** The emphasis — `solid` (filled) | `soft` (tint, default) | `outline` (transparent, coloured edge). */
|
|
12
|
+
variant = "data-variant",
|
|
13
|
+
/** The colour identity — a semantic tone (`neutral`…`info`) or a decorative hue (`red`…`pink`). */
|
|
14
|
+
tone = "data-tone",
|
|
15
|
+
/** The chip scale — `sm` | `md` (default); the generated layer keys the per-size internals off it. */
|
|
16
|
+
size = "data-size"
|
|
17
|
+
}
|
|
18
|
+
//#endregion
|
|
19
|
+
export { BadgeDataAttributes };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
//#region src/components/badge/badge.slots.ts
|
|
2
|
+
/**
|
|
3
|
+
* The slot vocabulary every `Badge` part stamps as its `data-slot`. The authored source the
|
|
4
|
+
* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix;
|
|
5
|
+
* SLOTS.md still generates from the token-graph declarations.
|
|
6
|
+
*/
|
|
7
|
+
const BADGE_SLOTS = {
|
|
8
|
+
root: "noctis-badge",
|
|
9
|
+
dot: "noctis-badge-dot",
|
|
10
|
+
icon: "noctis-badge-icon"
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* The `data-*` hooks `Badge` stamps on its parts, for host-side styling and tests. The slot values
|
|
14
|
+
* mark each rendered element; the `data-variant`/`data-tone`/`data-size` axes carry the recipe the
|
|
15
|
+
* precompiled `badge.css` keys its colour grid and per-size metrics off. The dot and icon take no
|
|
16
|
+
* axis of their own — they ride the chip's `currentColor`, so they stay legible in every variant.
|
|
17
|
+
*/
|
|
18
|
+
let BadgeDataAttributes = /* @__PURE__ */ function(BadgeDataAttributes) {
|
|
19
|
+
/** The root chip element. */
|
|
20
|
+
BadgeDataAttributes["slot"] = "data-slot";
|
|
21
|
+
/** The emphasis — `solid` (filled) | `soft` (tint, default) | `outline` (transparent, coloured edge). */
|
|
22
|
+
BadgeDataAttributes["variant"] = "data-variant";
|
|
23
|
+
/** The colour identity — a semantic tone (`neutral`…`info`) or a decorative hue (`red`…`pink`). */
|
|
24
|
+
BadgeDataAttributes["tone"] = "data-tone";
|
|
25
|
+
/** The chip scale — `sm` | `md` (default); the generated layer keys the per-size internals off it. */
|
|
26
|
+
BadgeDataAttributes["size"] = "data-size";
|
|
27
|
+
return BadgeDataAttributes;
|
|
28
|
+
}({});
|
|
29
|
+
//#endregion
|
|
30
|
+
export { BADGE_SLOTS, BadgeDataAttributes };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
//#region src/components/badge/badge.types.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* The variant/tone/size vocabulary `Badge` paints. Authored source of truth since styling is
|
|
4
|
+
* precompiled in `badge.css`. Types-only: no runtime code, so it never participates in the styling
|
|
5
|
+
* layer.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* A badge's emphasis — a filled `solid` chip, a quiet `soft` tint, a transparent `outline` with a
|
|
9
|
+
* coloured edge, or a neutral `dot` chip whose only colour is its leading status dot (the rest of the
|
|
10
|
+
* chip stays neutral). Crossed with {@link BadgeTone} to form the colour grid.
|
|
11
|
+
*/
|
|
12
|
+
type BadgeVariant = "solid" | "soft" | "outline" | "dot";
|
|
13
|
+
/**
|
|
14
|
+
* A badge's colour identity. The six **semantic** tones carry meaning — `neutral` (the default
|
|
15
|
+
* metadata chip), `accent`, and the four statuses `success`/`warning`/`danger`/`info`. The eight
|
|
16
|
+
* **decorative** tones (`red`/`orange`/`amber`/`green`/`teal`/`blue`/`purple`/`pink`) are
|
|
17
|
+
* accent-independent category colours drawn from the shared categorical palette — use them to distinguish
|
|
18
|
+
* categories, not to signal status.
|
|
19
|
+
*/
|
|
20
|
+
type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info" | "red" | "orange" | "amber" | "green" | "teal" | "blue" | "purple" | "pink";
|
|
21
|
+
/** A badge's chip scale — `sm` (the inline-with-text chip) or `md` (the default). */
|
|
22
|
+
type BadgeSize = "sm" | "md";
|
|
23
|
+
//#endregion
|
|
24
|
+
export { BadgeSize, BadgeTone, BadgeVariant };
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,9 @@ import { AlertDialog } from "./components/alert-dialog/alert-dialog.js";
|
|
|
11
11
|
import { AlertDialogDataAttributes } from "./components/alert-dialog/alert-dialog.slots.js";
|
|
12
12
|
import { Avatar } from "./components/avatar/avatar.js";
|
|
13
13
|
import { AvatarDataAttributes } from "./components/avatar/avatar.slots.js";
|
|
14
|
+
import { BadgeSize, BadgeTone, BadgeVariant } from "./components/badge/badge.types.js";
|
|
15
|
+
import { Badge } from "./components/badge/badge.js";
|
|
16
|
+
import { BadgeDataAttributes } from "./components/badge/badge.slots.js";
|
|
14
17
|
import { Button } from "./components/button/button.js";
|
|
15
18
|
import { ButtonDataAttributes } from "./components/button/button.slots.js";
|
|
16
19
|
import { mergeProps, useRender } from "./core/render.js";
|
|
@@ -123,4 +126,4 @@ import { NoctisProvider } from "./core/noctis-provider.js";
|
|
|
123
126
|
/** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
|
|
124
127
|
declare const UI_PACKAGE: "@stridge/noctis";
|
|
125
128
|
//#endregion
|
|
126
|
-
export { Accordion, AccordionDataAttributes, type AccordionLevel, type AccordionSize, AlertDialog, type AlertDialogActionTone, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, type AutocompleteSize, Avatar, AvatarDataAttributes, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, type ClassNameProp, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, type ColorFormat, ColorPicker, type ColorPickerLabels, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, type IconGlyph, InlineCode, Input, type InputAdornmentSide, type InputAdornmentVariant, InputDataAttributes, type InputSize, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, type OtpFieldSize, type PackageManager, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, type ProgressSize, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, type SearchResult, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, type SheetStackEntry, type SheetStackEntryInput, type SheetStackManager, Slider, SliderDataAttributes, type SliderSize, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, type TextareaSize, Toast, ToastDataAttributes, type ToastManager, type ToastObject, type ToastOptions, type ToastPlacement, type ToastPromiseOptions, type ToastStatusOptions, type ToastType, type ToastUpdateOptions, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
|
|
129
|
+
export { Accordion, AccordionDataAttributes, type AccordionLevel, type AccordionSize, AlertDialog, type AlertDialogActionTone, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, type AutocompleteSize, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, type BadgeSize, type BadgeTone, type BadgeVariant, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, type ClassNameProp, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, type ColorFormat, ColorPicker, type ColorPickerLabels, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, type IconGlyph, InlineCode, Input, type InputAdornmentSide, type InputAdornmentVariant, InputDataAttributes, type InputSize, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, type OtpFieldSize, type PackageManager, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, type ProgressSize, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, type SearchResult, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, type SheetStackEntry, type SheetStackEntryInput, type SheetStackManager, Slider, SliderDataAttributes, type SliderSize, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, type TextareaSize, Toast, ToastDataAttributes, type ToastManager, type ToastObject, type ToastOptions, type ToastPlacement, type ToastPromiseOptions, type ToastStatusOptions, type ToastType, type ToastUpdateOptions, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
|
package/dist/index.js
CHANGED
|
@@ -10,6 +10,8 @@ import { AlertDialogDataAttributes } from "./components/alert-dialog/alert-dialo
|
|
|
10
10
|
import { AlertDialog } from "./components/alert-dialog/alert-dialog.js";
|
|
11
11
|
import { AvatarDataAttributes } from "./components/avatar/avatar.slots.js";
|
|
12
12
|
import { Avatar } from "./components/avatar/avatar.js";
|
|
13
|
+
import { BadgeDataAttributes } from "./components/badge/badge.slots.js";
|
|
14
|
+
import { Badge } from "./components/badge/badge.js";
|
|
13
15
|
import { ButtonDataAttributes } from "./components/button/button.slots.js";
|
|
14
16
|
import { Button } from "./components/button/button.js";
|
|
15
17
|
import { ColorPicker } from "./components/color-picker/color-picker.js";
|
|
@@ -109,4 +111,4 @@ import { NoctisProvider } from "./core/noctis-provider.js";
|
|
|
109
111
|
/** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
|
|
110
112
|
const UI_PACKAGE = "@stridge/noctis";
|
|
111
113
|
//#endregion
|
|
112
|
-
export { Accordion, AccordionDataAttributes, AlertDialog, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, Avatar, AvatarDataAttributes, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, ColorPicker, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, InlineCode, Input, InputDataAttributes, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, Slider, SliderDataAttributes, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, Toast, ToastDataAttributes, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
|
|
114
|
+
export { Accordion, AccordionDataAttributes, AlertDialog, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, ColorPicker, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, InlineCode, Input, InputDataAttributes, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, Slider, SliderDataAttributes, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, Toast, ToastDataAttributes, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
|
package/dist/props.d.ts
CHANGED
|
@@ -2,45 +2,46 @@ import { itemProps, panelProps, rootProps, triggerProps } from "./components/acc
|
|
|
2
2
|
import { contentProps, emptyProps, groupLabelProps, groupProps, iconProps, inputProps, itemProps as itemProps$1, listProps, loadingProps, separatorProps, statusProps } from "./components/autocomplete/autocomplete.props.js";
|
|
3
3
|
import { actionProps, backdropProps, bodyProps, cancelProps, closeProps, descriptionProps, footerProps, headerProps, popupProps, titleProps, triggerProps as triggerProps$1, viewportProps } from "./components/alert-dialog/alert-dialog.props.js";
|
|
4
4
|
import { fallbackProps, imageProps, rootProps as rootProps$1 } from "./components/avatar/avatar.props.js";
|
|
5
|
+
import { dotProps, iconProps as iconProps$1, rootProps as rootProps$2 } from "./components/badge/badge.props.js";
|
|
5
6
|
import { buttonProps } from "./components/button/button.props.js";
|
|
6
|
-
import { rootProps as rootProps$
|
|
7
|
+
import { rootProps as rootProps$21 } from "./components/surface/surface.props.js";
|
|
7
8
|
import { alphaSliderProps, areaProps, eyeDropperProps, formatTabsProps, hueSliderProps, inputProps as inputProps$1, panelProps as panelProps$2, swatchProps } from "./components/color-picker/color-picker.props.js";
|
|
8
9
|
import { pickerItemProps, pickerProps, swatchProps as swatchProps$1 } from "./components/color-swatch/color-swatch.props.js";
|
|
9
|
-
import { fieldProps, groupProps as groupProps$1, indicatorProps, labelProps, rootProps as rootProps$
|
|
10
|
+
import { fieldProps, groupProps as groupProps$1, indicatorProps, labelProps, rootProps as rootProps$4 } from "./components/checkbox/checkbox.props.js";
|
|
10
11
|
import { bodyProps as bodyProps$1, floatingCopyProps, frameProps, headerProps as headerProps$1, logoProps, managerGlyphProps, titleProps as titleProps$1 } from "./components/code-block/code-block.props.js";
|
|
11
|
-
import { panelProps as panelProps$1, rootProps as rootProps$
|
|
12
|
-
import { chipProps, chipsInputProps, emptyProps as emptyProps$1, groupLabelProps as groupLabelProps$1, iconProps as iconProps$
|
|
12
|
+
import { panelProps as panelProps$1, rootProps as rootProps$5, triggerProps as triggerProps$2 } from "./components/collapsible/collapsible.props.js";
|
|
13
|
+
import { chipProps, chipsInputProps, emptyProps as emptyProps$1, groupLabelProps as groupLabelProps$1, iconProps as iconProps$2, inputProps as inputProps$2, itemProps as itemProps$2, listProps as listProps$1, separatorProps as separatorProps$1, statusProps as statusProps$1 } from "./components/combobox/combobox.props.js";
|
|
13
14
|
import { checkboxItemProps, contentProps as contentProps$2, groupLabelProps as groupLabelProps$2, groupProps as groupProps$2, itemProps as itemProps$3, radioGroupProps, radioItemProps, separatorProps as separatorProps$2, shortcutProps, submenuTriggerProps, triggerProps as triggerProps$5 } from "./components/menu/menu.props.js";
|
|
14
15
|
import { contentProps as contentProps$1, triggerProps as triggerProps$3 } from "./components/context-menu/context-menu.props.js";
|
|
15
|
-
import { rootProps as rootProps$
|
|
16
|
-
import { actionProps as actionProps$1, controlProps, countProps, descriptionProps as descriptionProps$2, errorProps, fieldsetProps, formProps, labelProps as labelProps$1, legendProps, rootProps as rootProps$
|
|
17
|
-
import { rootProps as rootProps$
|
|
18
|
-
import { adornmentProps, controlProps as controlProps$1, rootProps as rootProps$
|
|
19
|
-
import { chordProps, glyphProps, keyProps, rootProps as rootProps$
|
|
20
|
-
import { footerProps as footerProps$3, inputProps as inputProps$5, itemProps as itemProps$5, resultsProps, rootProps as rootProps$
|
|
21
|
-
import { backdropProps as backdropProps$2, groupLabelProps as groupLabelProps$3, groupProps as groupProps$5, iconProps as iconProps$
|
|
16
|
+
import { rootProps as rootProps$6 } from "./components/copy-button/copy-button.props.js";
|
|
17
|
+
import { actionProps as actionProps$1, controlProps, countProps, descriptionProps as descriptionProps$2, errorProps, fieldsetProps, formProps, labelProps as labelProps$1, legendProps, rootProps as rootProps$7 } from "./components/field/field.props.js";
|
|
18
|
+
import { rootProps as rootProps$8 } from "./components/inline-code/inline-code.props.js";
|
|
19
|
+
import { adornmentProps, controlProps as controlProps$1, rootProps as rootProps$9 } from "./components/input/input.props.js";
|
|
20
|
+
import { chordProps, glyphProps, keyProps, rootProps as rootProps$10 } from "./components/kbd/kbd.props.js";
|
|
21
|
+
import { footerProps as footerProps$3, inputProps as inputProps$5, itemProps as itemProps$5, resultsProps, rootProps as rootProps$19 } from "./components/search-dialog/search-dialog.props.js";
|
|
22
|
+
import { backdropProps as backdropProps$2, groupLabelProps as groupLabelProps$3, groupProps as groupProps$5, iconProps as iconProps$3, itemDescriptionProps, itemIconProps, itemIndicatorProps, itemProps as itemProps$6, itemTextProps, listProps as listProps$3, popupProps as popupProps$4, scrollDownArrowProps, scrollUpArrowProps, separatorProps as separatorProps$5, triggerProps as triggerProps$11, valueProps as valueProps$2 } from "./components/select/select.props.js";
|
|
22
23
|
import { separatorProps as separatorProps$6 } from "./components/separator/separator.props.js";
|
|
23
|
-
import { bodyProps as bodyProps$3, closeProps as closeProps$3, contentProps as contentProps$4, headerProps as headerProps$3, layoutProps, panelProps as panelProps$3, rootProps as rootProps$
|
|
24
|
+
import { bodyProps as bodyProps$3, closeProps as closeProps$3, contentProps as contentProps$4, headerProps as headerProps$3, layoutProps, panelProps as panelProps$3, rootProps as rootProps$17, surfaceProps, titleProps as titleProps$5, triggerProps as triggerProps$10 } from "./components/rail/rail.props.js";
|
|
24
25
|
import { backdropProps as backdropProps$3, bodyProps as bodyProps$4, closeProps as closeProps$4, descriptionProps as descriptionProps$5, footerProps as footerProps$4, headerProps as headerProps$4, popupProps as popupProps$5, titleProps as titleProps$6, triggerProps as triggerProps$12, viewportProps as viewportProps$3 } from "./components/sheet/sheet.props.js";
|
|
25
|
-
import { controlProps as controlProps$2, indicatorProps as indicatorProps$4, labelProps as labelProps$4, rootProps as rootProps$
|
|
26
|
-
import { rootProps as rootProps$
|
|
26
|
+
import { controlProps as controlProps$2, indicatorProps as indicatorProps$4, labelProps as labelProps$4, rootProps as rootProps$20, thumbProps as thumbProps$1, trackProps as trackProps$2, valueProps as valueProps$3 } from "./components/slider/slider.props.js";
|
|
27
|
+
import { rootProps as rootProps$3 } from "./components/button-group/button-group.props.js";
|
|
27
28
|
import { backdropProps as backdropProps$1, bodyProps as bodyProps$2, closeProps as closeProps$1, descriptionProps as descriptionProps$1, footerProps as footerProps$1, headerProps as headerProps$2, popupProps as popupProps$1, titleProps as titleProps$2, triggerProps as triggerProps$4 } from "./components/dialog/dialog.props.js";
|
|
28
|
-
import { rootProps as rootProps$
|
|
29
|
-
import { indicatorProps as indicatorProps$1, labelProps as labelProps$2, rootProps as rootProps$
|
|
30
|
-
import { decrementProps, groupProps as groupProps$3, incrementProps, inputProps as inputProps$3, prefixProps, rootProps as rootProps$
|
|
31
|
-
import { inputProps as inputProps$4, rootProps as rootProps$
|
|
29
|
+
import { rootProps as rootProps$11, triggerProps as triggerProps$6 } from "./components/menubar/menubar.props.js";
|
|
30
|
+
import { indicatorProps as indicatorProps$1, labelProps as labelProps$2, rootProps as rootProps$12, trackProps, valueProps } from "./components/meter/meter.props.js";
|
|
31
|
+
import { decrementProps, groupProps as groupProps$3, incrementProps, inputProps as inputProps$3, prefixProps, rootProps as rootProps$14, scrubAreaCursorProps, scrubAreaProps, suffixProps } from "./components/number-field/number-field.props.js";
|
|
32
|
+
import { inputProps as inputProps$4, rootProps as rootProps$15, separatorProps as separatorProps$4 } from "./components/otp-field/otp-field.props.js";
|
|
32
33
|
import { descriptionProps as descriptionProps$4, mediaProps, metaProps, popupProps as popupProps$3, titleProps as titleProps$4, triggerProps as triggerProps$9 } from "./components/preview-card/preview-card.props.js";
|
|
33
34
|
import { closeProps as closeProps$2, descriptionProps as descriptionProps$3, popupProps as popupProps$2, titleProps as titleProps$3, triggerProps as triggerProps$8 } from "./components/popover/popover.props.js";
|
|
34
|
-
import { indicatorProps as indicatorProps$2, labelProps as labelProps$3, rootProps as rootProps$
|
|
35
|
+
import { indicatorProps as indicatorProps$2, labelProps as labelProps$3, rootProps as rootProps$16, trackProps as trackProps$1, valueProps as valueProps$1 } from "./components/progress/progress.props.js";
|
|
35
36
|
import { groupProps as groupProps$4, indicatorProps as indicatorProps$3, radioProps } from "./components/radio/radio.props.js";
|
|
36
|
-
import { contentProps as contentProps$3, footerProps as footerProps$2, itemProps as itemProps$4, linkDescriptionProps, linkProps, linkTitleProps, listProps as listProps$2, rootProps as rootProps$
|
|
37
|
-
import { bodyProps as bodyProps$5, cellProps, headProps, headerProps as headerProps$5, rootProps as rootProps$
|
|
38
|
-
import { indicatorProps as indicatorProps$5, listProps as listProps$4, panelProps as panelProps$4, rootProps as rootProps$
|
|
39
|
-
import { groupProps as groupProps$6, rootProps as rootProps$
|
|
40
|
-
import { groupProps as groupProps$7, inputProps as inputProps$6, rootProps as rootProps$
|
|
41
|
-
import { controlProps as controlProps$3, rootProps as rootProps$
|
|
42
|
-
import { actionProps as actionProps$2, closeProps as closeProps$5, contentProps as contentProps$6, descriptionProps as descriptionProps$6, rootProps as rootProps$
|
|
37
|
+
import { contentProps as contentProps$3, footerProps as footerProps$2, itemProps as itemProps$4, linkDescriptionProps, linkProps, linkTitleProps, listProps as listProps$2, rootProps as rootProps$13, sectionProps, sectionTitleProps, separatorProps as separatorProps$3, triggerProps as triggerProps$7, viewportProps as viewportProps$1 } from "./components/navigation-menu/navigation-menu.props.js";
|
|
38
|
+
import { bodyProps as bodyProps$5, cellProps, headProps, headerProps as headerProps$5, rootProps as rootProps$22, rowProps } from "./components/table/table.props.js";
|
|
39
|
+
import { indicatorProps as indicatorProps$5, listProps as listProps$4, panelProps as panelProps$4, rootProps as rootProps$23, tabProps } from "./components/tabs/tabs.props.js";
|
|
40
|
+
import { groupProps as groupProps$6, rootProps as rootProps$26 } from "./components/toggle/toggle.props.js";
|
|
41
|
+
import { groupProps as groupProps$7, inputProps as inputProps$6, rootProps as rootProps$27, separatorProps as separatorProps$7, spacerProps } from "./components/toolbar/toolbar.props.js";
|
|
42
|
+
import { controlProps as controlProps$3, rootProps as rootProps$24, toolbarProps } from "./components/textarea/textarea.props.js";
|
|
43
|
+
import { actionProps as actionProps$2, closeProps as closeProps$5, contentProps as contentProps$6, descriptionProps as descriptionProps$6, rootProps as rootProps$25, titleProps as titleProps$7, viewportProps as viewportProps$4 } from "./components/toast/toast.props.js";
|
|
43
44
|
import { popupProps as popupProps$6, triggerProps as triggerProps$13 } from "./components/tooltip/tooltip.props.js";
|
|
44
|
-
import { contentProps as contentProps$5, cornerProps, rootProps as rootProps$
|
|
45
|
+
import { contentProps as contentProps$5, cornerProps, rootProps as rootProps$18, scrollbarProps, thumbProps, viewportProps as viewportProps$2 } from "./components/scroll-area/scroll-area.props.js";
|
|
45
46
|
import { fieldProps as fieldProps$1, labelProps as labelProps$5, switchProps, thumbProps as thumbProps$2 } from "./components/switch/switch.props.js";
|
|
46
|
-
export { itemProps as accordionItemProps, panelProps as accordionPanelProps, rootProps as accordionProps, triggerProps as accordionTriggerProps, actionProps as alertDialogActionProps, backdropProps as alertDialogBackdropProps, bodyProps as alertDialogBodyProps, cancelProps as alertDialogCancelProps, closeProps as alertDialogCloseProps, descriptionProps as alertDialogDescriptionProps, footerProps as alertDialogFooterProps, headerProps as alertDialogHeaderProps, popupProps as alertDialogPopupProps, titleProps as alertDialogTitleProps, triggerProps$1 as alertDialogTriggerProps, viewportProps as alertDialogViewportProps, contentProps as autocompleteContentProps, emptyProps as autocompleteEmptyProps, groupLabelProps as autocompleteGroupLabelProps, groupProps as autocompleteGroupProps, iconProps as autocompleteIconProps, inputProps as autocompleteInputProps, itemProps$1 as autocompleteItemProps, listProps as autocompleteListProps, loadingProps as autocompleteLoadingProps, separatorProps as autocompleteSeparatorProps, statusProps as autocompleteStatusProps, fallbackProps as avatarFallbackProps, imageProps as avatarImageProps, rootProps$1 as avatarRootProps, rootProps$2 as buttonGroupProps, buttonProps, fieldProps as checkboxFieldProps, groupProps$1 as checkboxGroupProps, indicatorProps as checkboxIndicatorProps, labelProps as checkboxLabelProps, rootProps$
|
|
47
|
+
export { itemProps as accordionItemProps, panelProps as accordionPanelProps, rootProps as accordionProps, triggerProps as accordionTriggerProps, actionProps as alertDialogActionProps, backdropProps as alertDialogBackdropProps, bodyProps as alertDialogBodyProps, cancelProps as alertDialogCancelProps, closeProps as alertDialogCloseProps, descriptionProps as alertDialogDescriptionProps, footerProps as alertDialogFooterProps, headerProps as alertDialogHeaderProps, popupProps as alertDialogPopupProps, titleProps as alertDialogTitleProps, triggerProps$1 as alertDialogTriggerProps, viewportProps as alertDialogViewportProps, contentProps as autocompleteContentProps, emptyProps as autocompleteEmptyProps, groupLabelProps as autocompleteGroupLabelProps, groupProps as autocompleteGroupProps, iconProps as autocompleteIconProps, inputProps as autocompleteInputProps, itemProps$1 as autocompleteItemProps, listProps as autocompleteListProps, loadingProps as autocompleteLoadingProps, separatorProps as autocompleteSeparatorProps, statusProps as autocompleteStatusProps, fallbackProps as avatarFallbackProps, imageProps as avatarImageProps, rootProps$1 as avatarRootProps, dotProps as badgeDotProps, iconProps$1 as badgeIconProps, rootProps$2 as badgeRootProps, rootProps$3 as buttonGroupProps, buttonProps, fieldProps as checkboxFieldProps, groupProps$1 as checkboxGroupProps, indicatorProps as checkboxIndicatorProps, labelProps as checkboxLabelProps, rootProps$4 as checkboxRootProps, bodyProps$1 as codeBlockBodyProps, floatingCopyProps as codeBlockFloatingCopyProps, frameProps as codeBlockFrameProps, headerProps$1 as codeBlockHeaderProps, logoProps as codeBlockLogoProps, managerGlyphProps as codeBlockManagerGlyphProps, titleProps$1 as codeBlockTitleProps, panelProps$1 as collapsiblePanelProps, rootProps$5 as collapsibleRootProps, triggerProps$2 as collapsibleTriggerProps, alphaSliderProps as colorPickerAlphaSliderProps, areaProps as colorPickerAreaProps, eyeDropperProps as colorPickerEyeDropperProps, formatTabsProps as colorPickerFormatTabsProps, hueSliderProps as colorPickerHueSliderProps, inputProps$1 as colorPickerInputProps, panelProps$2 as colorPickerPanelProps, swatchProps as colorPickerSwatchProps, pickerItemProps as colorSwatchPickerItemProps, pickerProps as colorSwatchPickerProps, swatchProps$1 as colorSwatchSwatchProps, chipProps as comboboxChipProps, chipsInputProps as comboboxChipsInputProps, emptyProps$1 as comboboxEmptyProps, groupLabelProps$1 as comboboxGroupLabelProps, iconProps$2 as comboboxIconProps, inputProps$2 as comboboxInputProps, itemProps$2 as comboboxItemProps, listProps$1 as comboboxListProps, separatorProps$1 as comboboxSeparatorProps, statusProps$1 as comboboxStatusProps, contentProps$1 as contextMenuContentProps, triggerProps$3 as contextMenuTriggerProps, rootProps$6 as copyButtonProps, backdropProps$1 as dialogBackdropProps, bodyProps$2 as dialogBodyProps, closeProps$1 as dialogCloseProps, descriptionProps$1 as dialogDescriptionProps, footerProps$1 as dialogFooterProps, headerProps$2 as dialogHeaderProps, popupProps$1 as dialogPopupProps, titleProps$2 as dialogTitleProps, triggerProps$4 as dialogTriggerProps, actionProps$1 as fieldActionProps, controlProps as fieldControlProps, countProps as fieldCountProps, descriptionProps$2 as fieldDescriptionProps, errorProps as fieldErrorProps, labelProps$1 as fieldLabelProps, rootProps$7 as fieldRootProps, legendProps as fieldsetLegendProps, fieldsetProps as fieldsetRootProps, formProps as formRootProps, rootProps$8 as inlineCodeRootProps, adornmentProps as inputAdornmentProps, controlProps$1 as inputControlProps, rootProps$9 as inputRootProps, chordProps as kbdChordProps, glyphProps as kbdGlyphProps, keyProps as kbdKeyProps, rootProps$10 as kbdRootProps, checkboxItemProps as menuCheckboxItemProps, contentProps$2 as menuContentProps, groupLabelProps$2 as menuGroupLabelProps, groupProps$2 as menuGroupProps, itemProps$3 as menuItemProps, radioGroupProps as menuRadioGroupProps, radioItemProps as menuRadioItemProps, separatorProps$2 as menuSeparatorProps, shortcutProps as menuShortcutProps, submenuTriggerProps as menuSubmenuTriggerProps, triggerProps$5 as menuTriggerProps, rootProps$11 as menubarRootProps, triggerProps$6 as menubarTriggerProps, indicatorProps$1 as meterIndicatorProps, labelProps$2 as meterLabelProps, rootProps$12 as meterRootProps, trackProps as meterTrackProps, valueProps as meterValueProps, contentProps$3 as navigationMenuContentProps, footerProps$2 as navigationMenuFooterProps, itemProps$4 as navigationMenuItemProps, linkDescriptionProps as navigationMenuLinkDescriptionProps, linkProps as navigationMenuLinkProps, linkTitleProps as navigationMenuLinkTitleProps, listProps$2 as navigationMenuListProps, rootProps$13 as navigationMenuRootProps, sectionProps as navigationMenuSectionProps, sectionTitleProps as navigationMenuSectionTitleProps, separatorProps$3 as navigationMenuSeparatorProps, triggerProps$7 as navigationMenuTriggerProps, viewportProps$1 as navigationMenuViewportProps, decrementProps as numberFieldDecrementProps, groupProps$3 as numberFieldGroupProps, incrementProps as numberFieldIncrementProps, inputProps$3 as numberFieldInputProps, prefixProps as numberFieldPrefixProps, rootProps$14 as numberFieldRootProps, scrubAreaCursorProps as numberFieldScrubAreaCursorProps, scrubAreaProps as numberFieldScrubAreaProps, suffixProps as numberFieldSuffixProps, inputProps$4 as otpFieldInputProps, rootProps$15 as otpFieldRootProps, separatorProps$4 as otpFieldSeparatorProps, closeProps$2 as popoverCloseProps, descriptionProps$3 as popoverDescriptionProps, popupProps$2 as popoverPopupProps, titleProps$3 as popoverTitleProps, triggerProps$8 as popoverTriggerProps, descriptionProps$4 as previewCardDescriptionProps, mediaProps as previewCardMediaProps, metaProps as previewCardMetaProps, popupProps$3 as previewCardPopupProps, titleProps$4 as previewCardTitleProps, triggerProps$9 as previewCardTriggerProps, indicatorProps$2 as progressIndicatorProps, labelProps$3 as progressLabelProps, rootProps$16 as progressRootProps, trackProps$1 as progressTrackProps, valueProps$1 as progressValueProps, groupProps$4 as radioGroupProps, indicatorProps$3 as radioIndicatorProps, radioProps, bodyProps$3 as railBodyProps, closeProps$3 as railCloseProps, contentProps$4 as railContentProps, headerProps$3 as railHeaderProps, layoutProps as railLayoutProps, panelProps$3 as railPanelProps, rootProps$17 as railRootProps, surfaceProps as railSurfaceProps, titleProps$5 as railTitleProps, triggerProps$10 as railTriggerProps, contentProps$5 as scrollAreaContentProps, cornerProps as scrollAreaCornerProps, rootProps$18 as scrollAreaRootProps, scrollbarProps as scrollAreaScrollbarProps, thumbProps as scrollAreaThumbProps, viewportProps$2 as scrollAreaViewportProps, footerProps$3 as searchDialogFooterProps, inputProps$5 as searchDialogInputProps, itemProps$5 as searchDialogItemProps, resultsProps as searchDialogResultsProps, rootProps$19 as searchDialogRootProps, backdropProps$2 as selectBackdropProps, groupLabelProps$3 as selectGroupLabelProps, groupProps$5 as selectGroupProps, iconProps$3 as selectIconProps, itemDescriptionProps as selectItemDescriptionProps, itemIconProps as selectItemIconProps, itemIndicatorProps as selectItemIndicatorProps, itemProps$6 as selectItemProps, itemTextProps as selectItemTextProps, listProps$3 as selectListProps, popupProps$4 as selectPopupProps, scrollDownArrowProps as selectScrollDownArrowProps, scrollUpArrowProps as selectScrollUpArrowProps, separatorProps$5 as selectSeparatorProps, triggerProps$11 as selectTriggerProps, valueProps$2 as selectValueProps, separatorProps$6 as separatorProps, backdropProps$3 as sheetBackdropProps, bodyProps$4 as sheetBodyProps, closeProps$4 as sheetCloseProps, descriptionProps$5 as sheetDescriptionProps, footerProps$4 as sheetFooterProps, headerProps$4 as sheetHeaderProps, popupProps$5 as sheetPopupProps, titleProps$6 as sheetTitleProps, triggerProps$12 as sheetTriggerProps, viewportProps$3 as sheetViewportProps, controlProps$2 as sliderControlProps, indicatorProps$4 as sliderIndicatorProps, labelProps$4 as sliderLabelProps, rootProps$20 as sliderRootProps, thumbProps$1 as sliderThumbProps, trackProps$2 as sliderTrackProps, valueProps$3 as sliderValueProps, rootProps$21 as surfaceRootProps, fieldProps$1 as switchFieldProps, labelProps$5 as switchLabelProps, switchProps, thumbProps$2 as switchThumbProps, bodyProps$5 as tableBodyProps, cellProps as tableCellProps, headProps as tableHeadProps, headerProps$5 as tableHeaderProps, rootProps$22 as tableRootProps, rowProps as tableRowProps, indicatorProps$5 as tabsIndicatorProps, listProps$4 as tabsListProps, panelProps$4 as tabsPanelProps, rootProps$23 as tabsRootProps, tabProps as tabsTabProps, controlProps$3 as textareaControlProps, rootProps$24 as textareaRootProps, toolbarProps as textareaToolbarProps, actionProps$2 as toastActionProps, closeProps$5 as toastCloseProps, contentProps$6 as toastContentProps, descriptionProps$6 as toastDescriptionProps, rootProps$25 as toastRootProps, titleProps$7 as toastTitleProps, viewportProps$4 as toastViewportProps, groupProps$6 as toggleGroupProps, rootProps$26 as toggleProps, groupProps$7 as toolbarGroupProps, inputProps$6 as toolbarInputProps, rootProps$27 as toolbarRootProps, separatorProps$7 as toolbarSeparatorProps, spacerProps as toolbarSpacerProps, popupProps$6 as tooltipPopupProps, triggerProps$13 as tooltipTriggerProps };
|