@_linked/primitives 1.0.9 → 1.1.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/CHANGELOG.md +10 -0
- package/lib/cjs/components/Badge.d.ts +30 -0
- package/lib/cjs/components/Badge.js +64 -0
- package/lib/cjs/components/Badge.js.map +1 -0
- package/lib/cjs/components/Badge.module.css +89 -0
- package/lib/cjs/components/Command.d.ts +6 -6
- package/lib/cjs/components/MultiSelect.d.ts +4 -4
- package/lib/cjs/components/Slider.js +7 -3
- package/lib/cjs/components/Slider.js.map +1 -1
- package/lib/cjs/index.d.ts +1 -0
- package/lib/cjs/index.js +1 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/package.json +1 -1
- package/lib/esm/components/Badge.d.ts +30 -0
- package/lib/esm/components/Badge.js +13 -0
- package/lib/esm/components/Badge.js.map +1 -0
- package/lib/esm/components/Badge.module.css +89 -0
- package/lib/esm/components/Command.d.ts +6 -6
- package/lib/esm/components/MultiSelect.d.ts +4 -4
- package/lib/esm/components/Slider.js +6 -2
- package/lib/esm/components/Slider.js.map +1 -1
- package/lib/esm/index.d.ts +1 -0
- package/lib/esm/index.js +1 -0
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/package.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @\_linked/primitives
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#11](https://github.com/linked-cm/primitives/pull/11) [`85deea9`](https://github.com/linked-cm/primitives/commit/85deea9406d9a5c655427d9302e015c334799691) Thanks [@flyon](https://github.com/flyon)! - Add the `Badge` primitive — badge, tag, chip and pill in one component, with the
|
|
8
|
+
variant and size vocabulary the rest of the library uses.
|
|
9
|
+
|
|
10
|
+
Also forwards `aria-label` and `aria-disabled` to the single thumb in `Slider`, so a
|
|
11
|
+
one-thumb slider is announced correctly by screen readers.
|
|
12
|
+
|
|
3
13
|
## 1.0.9
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Badge — a small status/metadata label (badge, tag, chip, pill).
|
|
4
|
+
*
|
|
5
|
+
* One primitive, many looks: every axis is an independent prop so surfaces can
|
|
6
|
+
* swap variation without new components —
|
|
7
|
+
*
|
|
8
|
+
* variant solid | soft | outline | ghost fill strength
|
|
9
|
+
* color neutral | primary | success | warning | danger | info
|
|
10
|
+
* size small | medium | large
|
|
11
|
+
* shape pill | rounded
|
|
12
|
+
* dot leading status dot in the badge color
|
|
13
|
+
* asChild render as the child element (a link, a button) via Radix Slot,
|
|
14
|
+
* so an interactive badge keeps real semantics and focus behavior
|
|
15
|
+
*
|
|
16
|
+
* Theming follows the library contract: the component consumes `--badge-*`
|
|
17
|
+
* variables with working fallbacks, so it renders sensibly out of the box and
|
|
18
|
+
* apps re-skin it from their theme without touching the component.
|
|
19
|
+
*/
|
|
20
|
+
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
21
|
+
asChild?: boolean;
|
|
22
|
+
variant?: 'solid' | 'soft' | 'outline' | 'ghost';
|
|
23
|
+
color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
24
|
+
size?: 'small' | 'medium' | 'large';
|
|
25
|
+
shape?: 'pill' | 'rounded';
|
|
26
|
+
/** Leading status dot in the badge color. */
|
|
27
|
+
dot?: boolean;
|
|
28
|
+
}
|
|
29
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
30
|
+
export { Badge };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
36
|
+
var t = {};
|
|
37
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
38
|
+
t[p] = s[p];
|
|
39
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
40
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
41
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
42
|
+
t[p[i]] = s[p[i]];
|
|
43
|
+
}
|
|
44
|
+
return t;
|
|
45
|
+
};
|
|
46
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
47
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
exports.Badge = void 0;
|
|
51
|
+
const React = __importStar(require("react"));
|
|
52
|
+
const Badge_module_css_1 = __importDefault(require("./Badge.module.css"));
|
|
53
|
+
const ClassNames_1 = require("@_linked/react/utils/ClassNames");
|
|
54
|
+
const react_slot_1 = require("@radix-ui/react-slot");
|
|
55
|
+
const Badge = React.forwardRef((_a, ref) => {
|
|
56
|
+
var { className, variant = 'soft', color = 'neutral', size = 'medium', shape = 'pill', dot = false, asChild = false, children } = _a, props = __rest(_a, ["className", "variant", "color", "size", "shape", "dot", "asChild", "children"]);
|
|
57
|
+
const Comp = asChild ? react_slot_1.Slot : 'span';
|
|
58
|
+
return (React.createElement(Comp, Object.assign({ className: (0, ClassNames_1.cl)(Badge_module_css_1.default.Root, Badge_module_css_1.default[variant], Badge_module_css_1.default[color], Badge_module_css_1.default[size], Badge_module_css_1.default[shape], className), ref: ref }, props), asChild ? (children) : (React.createElement(React.Fragment, null,
|
|
59
|
+
dot && React.createElement("span", { className: Badge_module_css_1.default.dot, "aria-hidden": true }),
|
|
60
|
+
children))));
|
|
61
|
+
});
|
|
62
|
+
exports.Badge = Badge;
|
|
63
|
+
Badge.displayName = 'Badge';
|
|
64
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,0EAAuC;AACvC,gEAAqD;AACrD,qDAA4C;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,OAET,EADI,KAAK,cATV,gFAUC,CADS;IAIV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,IAAA,eAAE,EACX,0BAAK,CAAC,IAAI,EACV,0BAAK,CAAC,OAAO,CAAC,EACd,0BAAK,CAAC,KAAK,CAAC,EACZ,0BAAK,CAAC,IAAI,CAAC,EACX,0BAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,GAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,0BAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/* Badge — consumes `--badge-*` semantic variables with working fallbacks, so it
|
|
2
|
+
renders out of the box and apps re-skin it from their theme (same contract as
|
|
3
|
+
Button/Input: the component names the tokens, the app supplies them). */
|
|
4
|
+
|
|
5
|
+
.Root {
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
vertical-align: middle;
|
|
10
|
+
border: solid 1px transparent;
|
|
11
|
+
gap: var(--badge-gap, 0.3em);
|
|
12
|
+
font-family: var(--badge-font-family, inherit);
|
|
13
|
+
font-weight: var(--badge-font-weight, 500);
|
|
14
|
+
line-height: var(--badge-line-height, 1.2);
|
|
15
|
+
|
|
16
|
+
/* Per-color base; every visual below derives from this one custom property,
|
|
17
|
+
which is what keeps the variant × color matrix to two small class sets. */
|
|
18
|
+
--_badge-color: var(--badge-color-neutral, #64748b);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* ── color ─────────────────────────────────────────────────────────────── */
|
|
22
|
+
.neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
|
|
23
|
+
.primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
|
|
24
|
+
.success { --_badge-color: var(--badge-color-success, #15803d); }
|
|
25
|
+
.warning { --_badge-color: var(--badge-color-warning, #b45309); }
|
|
26
|
+
.danger { --_badge-color: var(--badge-color-danger, #b91c1c); }
|
|
27
|
+
.info { --_badge-color: var(--badge-color-info, #0369a1); }
|
|
28
|
+
|
|
29
|
+
/* ── variant ───────────────────────────────────────────────────────────── */
|
|
30
|
+
.solid {
|
|
31
|
+
background: var(--_badge-color);
|
|
32
|
+
color: var(--badge-solid-foreground, #fff);
|
|
33
|
+
}
|
|
34
|
+
.soft {
|
|
35
|
+
background: color-mix(in oklch, var(--_badge-color) 12%, transparent);
|
|
36
|
+
color: var(--_badge-color);
|
|
37
|
+
}
|
|
38
|
+
.outline {
|
|
39
|
+
border-color: color-mix(in oklch, var(--_badge-color) 45%, transparent);
|
|
40
|
+
color: var(--_badge-color);
|
|
41
|
+
}
|
|
42
|
+
.ghost {
|
|
43
|
+
color: var(--_badge-color);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* ── size ──────────────────────────────────────────────────────────────── */
|
|
47
|
+
.small {
|
|
48
|
+
font-size: var(--badge-font-size-sm, 0.6875rem);
|
|
49
|
+
padding: var(--badge-padding-y-sm, 0.0625rem) var(--badge-padding-x-sm, 0.375rem);
|
|
50
|
+
}
|
|
51
|
+
.medium {
|
|
52
|
+
font-size: var(--badge-font-size, 0.75rem);
|
|
53
|
+
padding: var(--badge-padding-y, 0.125rem) var(--badge-padding-x, 0.5rem);
|
|
54
|
+
}
|
|
55
|
+
.large {
|
|
56
|
+
font-size: var(--badge-font-size-lg, 0.8125rem);
|
|
57
|
+
padding: var(--badge-padding-y-lg, 0.1875rem) var(--badge-padding-x-lg, 0.625rem);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* ── shape ─────────────────────────────────────────────────────────────── */
|
|
61
|
+
.pill { border-radius: var(--badge-radius-pill, 999px); }
|
|
62
|
+
.rounded { border-radius: var(--badge-radius, var(--control-radius, 0.375rem)); }
|
|
63
|
+
|
|
64
|
+
/* ── dot ───────────────────────────────────────────────────────────────── */
|
|
65
|
+
.dot {
|
|
66
|
+
width: 0.375em;
|
|
67
|
+
height: 0.375em;
|
|
68
|
+
border-radius: 999px;
|
|
69
|
+
background: currentColor;
|
|
70
|
+
flex: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Interactive badges (asChild over a link/button) get hover/focus affordance
|
|
74
|
+
without imposing it on static ones. */
|
|
75
|
+
a.Root,
|
|
76
|
+
button.Root {
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
transition: var(--transition-fast, background-color 120ms ease);
|
|
79
|
+
text-decoration: none;
|
|
80
|
+
}
|
|
81
|
+
a.Root:hover,
|
|
82
|
+
button.Root:hover {
|
|
83
|
+
filter: brightness(0.95);
|
|
84
|
+
}
|
|
85
|
+
a.Root:focus-visible,
|
|
86
|
+
button.Root:focus-visible {
|
|
87
|
+
outline: 2px solid color-mix(in oklch, var(--_badge-color) 45%, transparent);
|
|
88
|
+
outline-offset: 1px;
|
|
89
|
+
}
|
|
@@ -27,7 +27,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
|
|
|
27
27
|
ref?: React.Ref<HTMLInputElement>;
|
|
28
28
|
} & {
|
|
29
29
|
asChild?: boolean;
|
|
30
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
30
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
31
31
|
value?: string;
|
|
32
32
|
onValueChange?: (search: string) => void;
|
|
33
33
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -53,7 +53,7 @@ declare const Group: React.ForwardRefExoticComponent<Omit<{
|
|
|
53
53
|
ref?: React.Ref<HTMLDivElement>;
|
|
54
54
|
} & {
|
|
55
55
|
asChild?: boolean;
|
|
56
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
56
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
|
|
57
57
|
heading?: React.ReactNode;
|
|
58
58
|
value?: string;
|
|
59
59
|
forceMount?: boolean;
|
|
@@ -71,7 +71,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<{
|
|
|
71
71
|
ref?: React.Ref<HTMLDivElement>;
|
|
72
72
|
} & {
|
|
73
73
|
asChild?: boolean;
|
|
74
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
74
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
75
75
|
disabled?: boolean;
|
|
76
76
|
onSelect?: (value: string) => void;
|
|
77
77
|
value?: string;
|
|
@@ -108,7 +108,7 @@ export declare const Command: {
|
|
|
108
108
|
ref?: React.Ref<HTMLInputElement>;
|
|
109
109
|
} & {
|
|
110
110
|
asChild?: boolean;
|
|
111
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
111
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
112
112
|
value?: string;
|
|
113
113
|
onValueChange?: (search: string) => void;
|
|
114
114
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -134,7 +134,7 @@ export declare const Command: {
|
|
|
134
134
|
ref?: React.Ref<HTMLDivElement>;
|
|
135
135
|
} & {
|
|
136
136
|
asChild?: boolean;
|
|
137
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
137
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
|
|
138
138
|
heading?: React.ReactNode;
|
|
139
139
|
value?: string;
|
|
140
140
|
forceMount?: boolean;
|
|
@@ -145,7 +145,7 @@ export declare const Command: {
|
|
|
145
145
|
ref?: React.Ref<HTMLDivElement>;
|
|
146
146
|
} & {
|
|
147
147
|
asChild?: boolean;
|
|
148
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
148
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
149
149
|
disabled?: boolean;
|
|
150
150
|
onSelect?: (value: string) => void;
|
|
151
151
|
value?: string;
|
|
@@ -14,7 +14,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
|
|
|
14
14
|
ref?: React.Ref<HTMLInputElement>;
|
|
15
15
|
} & {
|
|
16
16
|
asChild?: boolean;
|
|
17
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
17
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
18
18
|
value?: string;
|
|
19
19
|
onValueChange?: (search: string) => void;
|
|
20
20
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -36,7 +36,7 @@ declare const Item: React.ForwardRefExoticComponent<{
|
|
|
36
36
|
ref?: React.Ref<HTMLDivElement>;
|
|
37
37
|
} & {
|
|
38
38
|
asChild?: boolean;
|
|
39
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
39
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
40
40
|
disabled?: boolean;
|
|
41
41
|
onSelect?: (value: string) => void;
|
|
42
42
|
value?: string;
|
|
@@ -53,7 +53,7 @@ export declare const MultiSelect: {
|
|
|
53
53
|
ref?: React.Ref<HTMLInputElement>;
|
|
54
54
|
} & {
|
|
55
55
|
asChild?: boolean;
|
|
56
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
56
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
57
57
|
value?: string;
|
|
58
58
|
onValueChange?: (search: string) => void;
|
|
59
59
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -75,7 +75,7 @@ export declare const MultiSelect: {
|
|
|
75
75
|
ref?: React.Ref<HTMLDivElement>;
|
|
76
76
|
} & {
|
|
77
77
|
asChild?: boolean;
|
|
78
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
78
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
79
79
|
disabled?: boolean;
|
|
80
80
|
onSelect?: (value: string) => void;
|
|
81
81
|
value?: string;
|
|
@@ -67,11 +67,15 @@ exports.Range = Range;
|
|
|
67
67
|
const Thumb = extend(SliderPrimitive.Thumb, Slider_module_css_1.default.Thumb);
|
|
68
68
|
exports.Thumb = Thumb;
|
|
69
69
|
const Root = React.forwardRef((_a, ref) => {
|
|
70
|
-
var { className } = _a, props = __rest(_a, ["className"]);
|
|
71
|
-
return (
|
|
70
|
+
var { className, 'aria-label': ariaLabel, 'aria-disabled': ariaDisabled } = _a, props = __rest(_a, ["className", 'aria-label', 'aria-disabled']);
|
|
71
|
+
return (
|
|
72
|
+
// Self-contained single-thumb slider. Forward the accessible name / disabled
|
|
73
|
+
// state to the actual `role="slider"` element (the Thumb) rather than the Root,
|
|
74
|
+
// so `getByRole('slider', { name })` and assistive tech can address the control.
|
|
75
|
+
React.createElement(SliderPrimitive.Root, Object.assign({ ref: ref, className: (0, ClassNames_1.cl)(Slider_module_css_1.default.Root, className) }, props),
|
|
72
76
|
React.createElement(Track, null,
|
|
73
77
|
React.createElement(Range, null)),
|
|
74
|
-
React.createElement(Thumb,
|
|
78
|
+
React.createElement(Thumb, { "aria-label": ariaLabel, "aria-disabled": ariaDisabled })));
|
|
75
79
|
});
|
|
76
80
|
exports.Root = Root;
|
|
77
81
|
Root.displayName = SliderPrimitive.Root.displayName;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AAErD,wEAA0D;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;YAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;QACtB,OAAA,KAAK,CAAC,aAAa,CAAC,SAAS,kBAC3B,GAAG,EACH,SAAS,EAAE,IAAA,eAAE,EAAC,aAAa,EAAE,SAAS,CAAC,IACpC,KAAK,EACR,CAAA;KAAA,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AAErD,wEAA0D;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;YAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;QACtB,OAAA,KAAK,CAAC,aAAa,CAAC,SAAS,kBAC3B,GAAG,EACH,SAAS,EAAE,IAAA,eAAE,EAAC,aAAa,EAAE,SAAS,CAAC,IACpC,KAAK,EACR,CAAA;KAAA,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA+B1C,sBAAK;AA9BpB,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA8BnC,sBAAK;AA7B3B,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA6B5B,sBAAK;AA3BlC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAA+E,EAAE,GAAG,EAAE,EAAE;QAAxF,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,OAAY,EAAP,KAAK,cAA7E,4CAA+E,CAAF;IAAY,OAAA;IAC1F,6EAA6E;IAC7E,gFAAgF;IAChF,iFAAiF;IACjF,oBAAC,eAAe,CAAC,IAAI,kBACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,eAAE,EAAC,2BAAK,CAAC,IAAI,EAAE,SAAS,CAAC,IAChC,KAAK;QAET,oBAAC,KAAK;YACJ,oBAAC,KAAK,OAAG,CACH;QACR,oBAAC,KAAK,kBAAa,SAAS,mBAAiB,YAAY,GAAI,CACxC,CACxB,CAAA;CAAA,CAAC,CAAC;AAUM,oBAAI;AATb,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEvC,QAAA,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC"}
|
package/lib/cjs/index.d.ts
CHANGED
package/lib/cjs/index.js
CHANGED
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,sCAAoC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,sCAAoC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,iCAA+B;AAC/B,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B"}
|
package/lib/cjs/package.json
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Badge — a small status/metadata label (badge, tag, chip, pill).
|
|
4
|
+
*
|
|
5
|
+
* One primitive, many looks: every axis is an independent prop so surfaces can
|
|
6
|
+
* swap variation without new components —
|
|
7
|
+
*
|
|
8
|
+
* variant solid | soft | outline | ghost fill strength
|
|
9
|
+
* color neutral | primary | success | warning | danger | info
|
|
10
|
+
* size small | medium | large
|
|
11
|
+
* shape pill | rounded
|
|
12
|
+
* dot leading status dot in the badge color
|
|
13
|
+
* asChild render as the child element (a link, a button) via Radix Slot,
|
|
14
|
+
* so an interactive badge keeps real semantics and focus behavior
|
|
15
|
+
*
|
|
16
|
+
* Theming follows the library contract: the component consumes `--badge-*`
|
|
17
|
+
* variables with working fallbacks, so it renders sensibly out of the box and
|
|
18
|
+
* apps re-skin it from their theme without touching the component.
|
|
19
|
+
*/
|
|
20
|
+
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
21
|
+
asChild?: boolean;
|
|
22
|
+
variant?: 'solid' | 'soft' | 'outline' | 'ghost';
|
|
23
|
+
color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
24
|
+
size?: 'small' | 'medium' | 'large';
|
|
25
|
+
shape?: 'pill' | 'rounded';
|
|
26
|
+
/** Leading status dot in the badge color. */
|
|
27
|
+
dot?: boolean;
|
|
28
|
+
}
|
|
29
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
30
|
+
export { Badge };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import style from './Badge.module.css';
|
|
3
|
+
import { cl } from '@_linked/react/utils/ClassNames';
|
|
4
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
5
|
+
const Badge = React.forwardRef(({ className, variant = 'soft', color = 'neutral', size = 'medium', shape = 'pill', dot = false, asChild = false, children, ...props }, ref) => {
|
|
6
|
+
const Comp = asChild ? Slot : 'span';
|
|
7
|
+
return (React.createElement(Comp, { className: cl(style.Root, style[variant], style[color], style[size], style[shape], className), ref: ref, ...props }, asChild ? (children) : (React.createElement(React.Fragment, null,
|
|
8
|
+
dot && React.createElement("span", { className: style.dot, "aria-hidden": true }),
|
|
9
|
+
children))));
|
|
10
|
+
});
|
|
11
|
+
Badge.displayName = 'Badge';
|
|
12
|
+
export { Badge };
|
|
13
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,OAAO,CAAC,EACd,KAAK,CAAC,KAAK,CAAC,EACZ,KAAK,CAAC,IAAI,CAAC,EACX,KAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,IAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,KAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/* Badge — consumes `--badge-*` semantic variables with working fallbacks, so it
|
|
2
|
+
renders out of the box and apps re-skin it from their theme (same contract as
|
|
3
|
+
Button/Input: the component names the tokens, the app supplies them). */
|
|
4
|
+
|
|
5
|
+
.Root {
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
vertical-align: middle;
|
|
10
|
+
border: solid 1px transparent;
|
|
11
|
+
gap: var(--badge-gap, 0.3em);
|
|
12
|
+
font-family: var(--badge-font-family, inherit);
|
|
13
|
+
font-weight: var(--badge-font-weight, 500);
|
|
14
|
+
line-height: var(--badge-line-height, 1.2);
|
|
15
|
+
|
|
16
|
+
/* Per-color base; every visual below derives from this one custom property,
|
|
17
|
+
which is what keeps the variant × color matrix to two small class sets. */
|
|
18
|
+
--_badge-color: var(--badge-color-neutral, #64748b);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* ── color ─────────────────────────────────────────────────────────────── */
|
|
22
|
+
.neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
|
|
23
|
+
.primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
|
|
24
|
+
.success { --_badge-color: var(--badge-color-success, #15803d); }
|
|
25
|
+
.warning { --_badge-color: var(--badge-color-warning, #b45309); }
|
|
26
|
+
.danger { --_badge-color: var(--badge-color-danger, #b91c1c); }
|
|
27
|
+
.info { --_badge-color: var(--badge-color-info, #0369a1); }
|
|
28
|
+
|
|
29
|
+
/* ── variant ───────────────────────────────────────────────────────────── */
|
|
30
|
+
.solid {
|
|
31
|
+
background: var(--_badge-color);
|
|
32
|
+
color: var(--badge-solid-foreground, #fff);
|
|
33
|
+
}
|
|
34
|
+
.soft {
|
|
35
|
+
background: color-mix(in oklch, var(--_badge-color) 12%, transparent);
|
|
36
|
+
color: var(--_badge-color);
|
|
37
|
+
}
|
|
38
|
+
.outline {
|
|
39
|
+
border-color: color-mix(in oklch, var(--_badge-color) 45%, transparent);
|
|
40
|
+
color: var(--_badge-color);
|
|
41
|
+
}
|
|
42
|
+
.ghost {
|
|
43
|
+
color: var(--_badge-color);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* ── size ──────────────────────────────────────────────────────────────── */
|
|
47
|
+
.small {
|
|
48
|
+
font-size: var(--badge-font-size-sm, 0.6875rem);
|
|
49
|
+
padding: var(--badge-padding-y-sm, 0.0625rem) var(--badge-padding-x-sm, 0.375rem);
|
|
50
|
+
}
|
|
51
|
+
.medium {
|
|
52
|
+
font-size: var(--badge-font-size, 0.75rem);
|
|
53
|
+
padding: var(--badge-padding-y, 0.125rem) var(--badge-padding-x, 0.5rem);
|
|
54
|
+
}
|
|
55
|
+
.large {
|
|
56
|
+
font-size: var(--badge-font-size-lg, 0.8125rem);
|
|
57
|
+
padding: var(--badge-padding-y-lg, 0.1875rem) var(--badge-padding-x-lg, 0.625rem);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* ── shape ─────────────────────────────────────────────────────────────── */
|
|
61
|
+
.pill { border-radius: var(--badge-radius-pill, 999px); }
|
|
62
|
+
.rounded { border-radius: var(--badge-radius, var(--control-radius, 0.375rem)); }
|
|
63
|
+
|
|
64
|
+
/* ── dot ───────────────────────────────────────────────────────────────── */
|
|
65
|
+
.dot {
|
|
66
|
+
width: 0.375em;
|
|
67
|
+
height: 0.375em;
|
|
68
|
+
border-radius: 999px;
|
|
69
|
+
background: currentColor;
|
|
70
|
+
flex: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Interactive badges (asChild over a link/button) get hover/focus affordance
|
|
74
|
+
without imposing it on static ones. */
|
|
75
|
+
a.Root,
|
|
76
|
+
button.Root {
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
transition: var(--transition-fast, background-color 120ms ease);
|
|
79
|
+
text-decoration: none;
|
|
80
|
+
}
|
|
81
|
+
a.Root:hover,
|
|
82
|
+
button.Root:hover {
|
|
83
|
+
filter: brightness(0.95);
|
|
84
|
+
}
|
|
85
|
+
a.Root:focus-visible,
|
|
86
|
+
button.Root:focus-visible {
|
|
87
|
+
outline: 2px solid color-mix(in oklch, var(--_badge-color) 45%, transparent);
|
|
88
|
+
outline-offset: 1px;
|
|
89
|
+
}
|
|
@@ -27,7 +27,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
|
|
|
27
27
|
ref?: React.Ref<HTMLInputElement>;
|
|
28
28
|
} & {
|
|
29
29
|
asChild?: boolean;
|
|
30
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
30
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
31
31
|
value?: string;
|
|
32
32
|
onValueChange?: (search: string) => void;
|
|
33
33
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -53,7 +53,7 @@ declare const Group: React.ForwardRefExoticComponent<Omit<{
|
|
|
53
53
|
ref?: React.Ref<HTMLDivElement>;
|
|
54
54
|
} & {
|
|
55
55
|
asChild?: boolean;
|
|
56
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
56
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
|
|
57
57
|
heading?: React.ReactNode;
|
|
58
58
|
value?: string;
|
|
59
59
|
forceMount?: boolean;
|
|
@@ -71,7 +71,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<{
|
|
|
71
71
|
ref?: React.Ref<HTMLDivElement>;
|
|
72
72
|
} & {
|
|
73
73
|
asChild?: boolean;
|
|
74
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
74
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
75
75
|
disabled?: boolean;
|
|
76
76
|
onSelect?: (value: string) => void;
|
|
77
77
|
value?: string;
|
|
@@ -108,7 +108,7 @@ export declare const Command: {
|
|
|
108
108
|
ref?: React.Ref<HTMLInputElement>;
|
|
109
109
|
} & {
|
|
110
110
|
asChild?: boolean;
|
|
111
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
111
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
112
112
|
value?: string;
|
|
113
113
|
onValueChange?: (search: string) => void;
|
|
114
114
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -134,7 +134,7 @@ export declare const Command: {
|
|
|
134
134
|
ref?: React.Ref<HTMLDivElement>;
|
|
135
135
|
} & {
|
|
136
136
|
asChild?: boolean;
|
|
137
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
137
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
|
|
138
138
|
heading?: React.ReactNode;
|
|
139
139
|
value?: string;
|
|
140
140
|
forceMount?: boolean;
|
|
@@ -145,7 +145,7 @@ export declare const Command: {
|
|
|
145
145
|
ref?: React.Ref<HTMLDivElement>;
|
|
146
146
|
} & {
|
|
147
147
|
asChild?: boolean;
|
|
148
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
148
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
149
149
|
disabled?: boolean;
|
|
150
150
|
onSelect?: (value: string) => void;
|
|
151
151
|
value?: string;
|
|
@@ -14,7 +14,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
|
|
|
14
14
|
ref?: React.Ref<HTMLInputElement>;
|
|
15
15
|
} & {
|
|
16
16
|
asChild?: boolean;
|
|
17
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
17
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
18
18
|
value?: string;
|
|
19
19
|
onValueChange?: (search: string) => void;
|
|
20
20
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -36,7 +36,7 @@ declare const Item: React.ForwardRefExoticComponent<{
|
|
|
36
36
|
ref?: React.Ref<HTMLDivElement>;
|
|
37
37
|
} & {
|
|
38
38
|
asChild?: boolean;
|
|
39
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
39
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
40
40
|
disabled?: boolean;
|
|
41
41
|
onSelect?: (value: string) => void;
|
|
42
42
|
value?: string;
|
|
@@ -53,7 +53,7 @@ export declare const MultiSelect: {
|
|
|
53
53
|
ref?: React.Ref<HTMLInputElement>;
|
|
54
54
|
} & {
|
|
55
55
|
asChild?: boolean;
|
|
56
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "
|
|
56
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
|
|
57
57
|
value?: string;
|
|
58
58
|
onValueChange?: (search: string) => void;
|
|
59
59
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -75,7 +75,7 @@ export declare const MultiSelect: {
|
|
|
75
75
|
ref?: React.Ref<HTMLDivElement>;
|
|
76
76
|
} & {
|
|
77
77
|
asChild?: boolean;
|
|
78
|
-
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
|
78
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
|
|
79
79
|
disabled?: boolean;
|
|
80
80
|
onSelect?: (value: string) => void;
|
|
81
81
|
value?: string;
|
|
@@ -14,10 +14,14 @@ function extend(Component, baseClassName) {
|
|
|
14
14
|
const Track = extend(SliderPrimitive.Track, style.Track);
|
|
15
15
|
const Range = extend(SliderPrimitive.Range, style.Range);
|
|
16
16
|
const Thumb = extend(SliderPrimitive.Thumb, style.Thumb);
|
|
17
|
-
const Root = React.forwardRef(({ className,
|
|
17
|
+
const Root = React.forwardRef(({ className, 'aria-label': ariaLabel, 'aria-disabled': ariaDisabled, ...props }, ref) => (
|
|
18
|
+
// Self-contained single-thumb slider. Forward the accessible name / disabled
|
|
19
|
+
// state to the actual `role="slider"` element (the Thumb) rather than the Root,
|
|
20
|
+
// so `getByRole('slider', { name })` and assistive tech can address the control.
|
|
21
|
+
React.createElement(SliderPrimitive.Root, { ref: ref, className: cl(style.Root, className), ...props },
|
|
18
22
|
React.createElement(Track, null,
|
|
19
23
|
React.createElement(Range, null)),
|
|
20
|
-
React.createElement(Thumb,
|
|
24
|
+
React.createElement(Thumb, { "aria-label": ariaLabel, "aria-disabled": ariaDisabled }))));
|
|
21
25
|
Root.displayName = SliderPrimitive.Root.displayName;
|
|
22
26
|
export const Slider = {
|
|
23
27
|
Root,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CACjC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;QAC7B,GAAG;QACH,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;QACvC,GAAG,KAAK;KACT,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CACjC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;QAC7B,GAAG;QACH,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;QACvC,GAAG,KAAK;KACT,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1F,6EAA6E;AAC7E,gFAAgF;AAChF,iFAAiF;AACjF,oBAAC,eAAe,CAAC,IAAI,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAChC,KAAK;IAET,oBAAC,KAAK;QACJ,oBAAC,KAAK,OAAG,CACH;IACR,oBAAC,KAAK,kBAAa,SAAS,mBAAiB,YAAY,GAAI,CACxC,CACxB,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC"}
|
package/lib/esm/index.d.ts
CHANGED
package/lib/esm/index.js
CHANGED
package/lib/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,YAAY,CAAC;AACpB,OAAO,4BAA4B,CAAC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,CAAC;AACjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC,OAAO,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,YAAY,CAAC;AACpB,OAAO,4BAA4B,CAAC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,CAAC;AACjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC,OAAO,sBAAsB,CAAC"}
|
package/lib/esm/package.json
CHANGED