tembro 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/display/carousel.cjs +1 -1
- package/dist/components/display/carousel.d.ts +3 -1
- package/dist/components/display/carousel.js +38 -27
- package/dist/components/inputs/async-select.cjs +1 -1
- package/dist/components/inputs/async-select.js +21 -21
- package/dist/components/ui/select/index.cjs +1 -1
- package/dist/components/ui/select/index.d.ts +1 -1
- package/dist/components/ui/select/index.js +3 -3
- package/dist/showcase/tembro-registry.json.cjs +1 -1
- package/dist/showcase/tembro-registry.json.js +1 -1
- package/package.json +2 -1
- package/packages/cli/dist/index.cjs +1 -1
- package/packages/cli/vendor/src/components/display/carousel.tsx +30 -12
- package/packages/cli/vendor/src/components/inputs/async-select.tsx +22 -22
- package/packages/cli/vendor/src/components/ui/select/index.tsx +4 -4
- package/packages/cli/vendor/src/showcase/tembro-registry.json +1 -1
- package/registry.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t,n){return t<=0?0:n?(e%t+t)%t:Math.min(Math.max(e,0),t-1)}function s({index:e,defaultIndex:s=0,onIndexChange:c,loop:l=!1,showDots:
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t,n){return t<=0?0:n?(e%t+t)%t:Math.min(Math.max(e,0),t-1)}function s({index:e,defaultIndex:s=0,onIndexChange:c,loop:l=!1,variant:u=`default`,showDots:d=!0,showArrows:f=!0,keyboard:p=!0,ariaLabel:m=`Carousel`,previousLabel:h=`Previous slide`,nextLabel:g=`Next slide`,className:_,children:v,...y}){let b=r.Children.toArray(v),[x,S]=r.useState(s),C=e!==void 0,w=o(C?e:x,b.length,l);function T(e){let t=o(e,b.length,l);C||S(t),c?.(t)}let E=l||w>0,D=l||w<b.length-1;return(0,a.jsxs)(`div`,{"data-slot":`carousel`,"data-variant":u,role:`region`,"aria-roledescription":`carousel`,"aria-label":m,className:t.cn(`grid gap-3`,_),onKeyDown:e=>{!p||b.length<=1||(e.key===`ArrowLeft`&&E&&(e.preventDefault(),T(w-1)),e.key===`ArrowRight`&&D&&(e.preventDefault(),T(w+1)))},...y,children:[(0,a.jsxs)(`div`,{className:t.cn(`relative overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08))]`,u===`hero`&&`min-h-72`,u===`minimal`&&`rounded-[var(--radius-md)] shadow-none`),children:[(0,a.jsx)(`div`,{className:`transition-transform duration-300 ease-out`,"aria-live":`polite`,children:b[w]}),f&&b.length>1?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.Button,{type:`button`,variant:u===`hero`?`default`:`secondary`,size:`icon-sm`,className:`absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg`,disabled:!E,"aria-label":h,onClick:()=>T(w-1),children:(0,a.jsx)(i.ChevronLeftIcon,{})}),(0,a.jsx)(n.Button,{type:`button`,variant:u===`hero`?`default`:`secondary`,size:`icon-sm`,className:`absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg`,disabled:!D,"aria-label":g,onClick:()=>T(w+1),children:(0,a.jsx)(i.ChevronRightIcon,{})})]}):null]}),d&&b.length>1&&(0,a.jsx)(`div`,{className:`flex items-center justify-center gap-2`,role:`tablist`,"aria-label":`${m} slides`,children:b.map((e,n)=>(0,a.jsx)(`button`,{type:`button`,role:`tab`,"aria-label":`Go to slide ${n+1}`,"aria-selected":n===w,className:t.cn(`h-2.5 rounded-full bg-muted-foreground/30 transition-[width,background-color,opacity] hover:bg-muted-foreground/55`,n===w?`w-7 bg-primary`:`w-2.5`),onClick:()=>T(n)},n))})]})}function c({className:e,...n}){return(0,a.jsx)(`div`,{"data-slot":`carousel-item`,className:t.cn(`min-h-40 p-5 sm:p-6`,e),...n})}exports.Carousel=s,exports.CarouselItem=c;
|
|
@@ -4,13 +4,15 @@ export type CarouselProps = React.ComponentProps<"div"> & {
|
|
|
4
4
|
defaultIndex?: number;
|
|
5
5
|
onIndexChange?: (index: number) => void;
|
|
6
6
|
loop?: boolean;
|
|
7
|
+
variant?: "default" | "hero" | "minimal";
|
|
7
8
|
showDots?: boolean;
|
|
8
9
|
showArrows?: boolean;
|
|
9
10
|
keyboard?: boolean;
|
|
11
|
+
ariaLabel?: string;
|
|
10
12
|
previousLabel?: string;
|
|
11
13
|
nextLabel?: string;
|
|
12
14
|
};
|
|
13
15
|
export type CarouselItemProps = React.ComponentProps<"div">;
|
|
14
|
-
declare function Carousel({ index, defaultIndex, onIndexChange, loop, showDots, showArrows, keyboard, previousLabel, nextLabel, className, children, ...props }: CarouselProps): React.JSX.Element;
|
|
16
|
+
declare function Carousel({ index, defaultIndex, onIndexChange, loop, variant, showDots, showArrows, keyboard, ariaLabel, previousLabel, nextLabel, className, children, ...props }: CarouselProps): React.JSX.Element;
|
|
15
17
|
declare function CarouselItem({ className, ...props }: CarouselItemProps): React.JSX.Element;
|
|
16
18
|
export { Carousel, CarouselItem };
|
|
@@ -7,49 +7,60 @@ import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
|
7
7
|
function c(e, t, n) {
|
|
8
8
|
return t <= 0 ? 0 : n ? (e % t + t) % t : Math.min(Math.max(e, 0), t - 1);
|
|
9
9
|
}
|
|
10
|
-
function l({ index: l, defaultIndex: u = 0, onIndexChange: d, loop: f = !1,
|
|
11
|
-
let
|
|
12
|
-
function
|
|
13
|
-
let t = c(e,
|
|
14
|
-
|
|
10
|
+
function l({ index: l, defaultIndex: u = 0, onIndexChange: d, loop: f = !1, variant: p = "default", showDots: m = !0, showArrows: h = !0, keyboard: g = !0, ariaLabel: _ = "Carousel", previousLabel: v = "Previous slide", nextLabel: y = "Next slide", className: b, children: x, ...S }) {
|
|
11
|
+
let C = n.Children.toArray(x), [w, T] = n.useState(u), E = l !== void 0, D = c(E ? l : w, C.length, f);
|
|
12
|
+
function O(e) {
|
|
13
|
+
let t = c(e, C.length, f);
|
|
14
|
+
E || T(t), d?.(t);
|
|
15
15
|
}
|
|
16
|
-
let
|
|
16
|
+
let k = f || D > 0, A = f || D < C.length - 1;
|
|
17
17
|
return /* @__PURE__ */ s("div", {
|
|
18
18
|
"data-slot": "carousel",
|
|
19
|
-
|
|
19
|
+
"data-variant": p,
|
|
20
|
+
role: "region",
|
|
21
|
+
"aria-roledescription": "carousel",
|
|
22
|
+
"aria-label": _,
|
|
23
|
+
className: e("grid gap-3", b),
|
|
20
24
|
onKeyDown: (e) => {
|
|
21
|
-
!
|
|
25
|
+
!g || C.length <= 1 || (e.key === "ArrowLeft" && k && (e.preventDefault(), O(D - 1)), e.key === "ArrowRight" && A && (e.preventDefault(), O(D + 1)));
|
|
22
26
|
},
|
|
23
|
-
...
|
|
27
|
+
...S,
|
|
24
28
|
children: [/* @__PURE__ */ s("div", {
|
|
25
|
-
className: "relative overflow-hidden rounded-
|
|
26
|
-
children: [
|
|
29
|
+
className: e("relative overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08))]", p === "hero" && "min-h-72", p === "minimal" && "rounded-[var(--radius-md)] shadow-none"),
|
|
30
|
+
children: [/* @__PURE__ */ o("div", {
|
|
31
|
+
className: "transition-transform duration-300 ease-out",
|
|
32
|
+
"aria-live": "polite",
|
|
33
|
+
children: C[D]
|
|
34
|
+
}), h && C.length > 1 ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
|
|
27
35
|
type: "button",
|
|
28
|
-
variant: "secondary",
|
|
36
|
+
variant: p === "hero" ? "default" : "secondary",
|
|
29
37
|
size: "icon-sm",
|
|
30
|
-
className: "absolute left-3 top-
|
|
31
|
-
disabled: !
|
|
32
|
-
"aria-label":
|
|
33
|
-
onClick: () =>
|
|
38
|
+
className: "absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg",
|
|
39
|
+
disabled: !k,
|
|
40
|
+
"aria-label": v,
|
|
41
|
+
onClick: () => O(D - 1),
|
|
34
42
|
children: /* @__PURE__ */ o(r, {})
|
|
35
43
|
}), /* @__PURE__ */ o(t, {
|
|
36
44
|
type: "button",
|
|
37
|
-
variant: "secondary",
|
|
45
|
+
variant: p === "hero" ? "default" : "secondary",
|
|
38
46
|
size: "icon-sm",
|
|
39
|
-
className: "absolute right-3 top-
|
|
40
|
-
disabled: !
|
|
41
|
-
"aria-label":
|
|
42
|
-
onClick: () =>
|
|
47
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg",
|
|
48
|
+
disabled: !A,
|
|
49
|
+
"aria-label": y,
|
|
50
|
+
onClick: () => O(D + 1),
|
|
43
51
|
children: /* @__PURE__ */ o(i, {})
|
|
44
52
|
})] }) : null]
|
|
45
|
-
}),
|
|
53
|
+
}), m && C.length > 1 && /* @__PURE__ */ o("div", {
|
|
46
54
|
className: "flex items-center justify-center gap-2",
|
|
47
|
-
|
|
55
|
+
role: "tablist",
|
|
56
|
+
"aria-label": `${_} slides`,
|
|
57
|
+
children: C.map((t, n) => /* @__PURE__ */ o("button", {
|
|
48
58
|
type: "button",
|
|
59
|
+
role: "tab",
|
|
49
60
|
"aria-label": `Go to slide ${n + 1}`,
|
|
50
|
-
"aria-
|
|
51
|
-
className: e("
|
|
52
|
-
onClick: () =>
|
|
61
|
+
"aria-selected": n === D,
|
|
62
|
+
className: e("h-2.5 rounded-full bg-muted-foreground/30 transition-[width,background-color,opacity] hover:bg-muted-foreground/55", n === D ? "w-7 bg-primary" : "w-2.5"),
|
|
63
|
+
onClick: () => O(n)
|
|
53
64
|
}, n))
|
|
54
65
|
})]
|
|
55
66
|
});
|
|
@@ -57,7 +68,7 @@ function l({ index: l, defaultIndex: u = 0, onIndexChange: d, loop: f = !1, show
|
|
|
57
68
|
function u({ className: t, ...n }) {
|
|
58
69
|
return /* @__PURE__ */ o("div", {
|
|
59
70
|
"data-slot": "carousel-item",
|
|
60
|
-
className: e("p-
|
|
71
|
+
className: e("min-h-40 p-5 sm:p-6", t),
|
|
61
72
|
...n
|
|
62
73
|
});
|
|
63
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/popover/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");function ee(e,t){let[n,r]=a.useState(e);return a.useEffect(()=>{let n=window.setTimeout(()=>{r(e)},t);return()=>{window.clearTimeout(n)}},[t,e]),n}function c(e){return typeof e==`object`&&!!e&&`options`in e}function l(e){if(!e||e.length===0)return[];let t=e[0];return c(t)?e:[{options:e}]}function u(e){return e.flatMap(e=>e.options)}function te(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label).toLowerCase():e.value.toLowerCase()}function ne(e,t){let n=e.trim().toLowerCase();return n?!t.some(e=>e.value.toLowerCase()===n||te(e)===n):!1}function re(e,t,n,r,i){if(e)return t?.value===e?t:i?.value===e?i:[...n,...r].find(t=>t.value===e)}function d(...e){let t=new Map;return e.forEach(e=>{e?.forEach(e=>{t.set(e.value,e)})}),Array.from(t.values())}function f(e,t){let n=new Map(t.map(e=>[e.value,e]));return e.map(e=>n.get(e)).filter(e=>!!e)}function ie(e,t,n){let r=e.get(t);if(r){if(Number.isFinite(n)&&Date.now()-r.createdAt>n){e.delete(t);return}return r.groups}}function ae(e,t,n){e.set(t,{groups:n,createdAt:Date.now()})}function oe(e){return e.trim().toLowerCase()}function p({className:e,children:n}){return(0,s.jsx)(`div`,{"data-slot":`async-select-state`,className:t.cn(`rounded-[min(var(--radius-xl),16px)] border px-3 py-3 text-sm text-muted-foreground`,e),children:n})}function m(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label):e.value}function se({option:e,selected:n,renderOption:r,optionClassName:i,onSelect:a}){return(0,s.jsxs)(`button`,{type:`button`,disabled:e.disabled,"data-slot":`async-select-option`,"data-selected":n||void 0,"data-disabled":e.disabled||void 0,className:t.cn(`flex w-full items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50`,i),onClick:()=>a(e),children:[(0,s.jsx)(`span`,{className:`flex size-4 shrink-0 items-center justify-center`,children:n&&(0,s.jsx)(o.CheckIcon,{className:`size-4`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1`,children:r?.(e,{selected:n})??(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:e.label}),e.description&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.description}),e.disabled&&e.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.disabledReason})]})})]})}function ce({search:e,isCreating:t,label:n,onCreate:r}){return(0,s.jsxs)(`button`,{type:`button`,disabled:t,"data-slot":`async-select-create`,className:`flex w-full items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-dashed px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50`,onClick:r,children:[(0,s.jsx)(`span`,{className:`flex size-4 shrink-0 items-center justify-center`,children:t?(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}):(0,s.jsx)(o.PlusIcon,{className:`size-4`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:n?.(e)??`Create "${e.trim()}"`})]})}function h({className:e,value:c,selectedOption:te,onValueChange:d,loadOptions:f,loadSelectedOption:m,defaultOptions:h,disabled:g=!1,clearable:le=!0,cacheOptions:_=!0,cacheTtl:ue=1/0,debounceMs:v=250,minSearchLength:y=0,labels:b,renderOption:de,renderValue:x,renderLoading:S,renderEmpty:fe,renderError:C,renderMinSearch:pe,onCreateOption:me,createOptionLabel:he,showCreateOption:ge,triggerClassName:_e,contentClassName:ve,searchClassName:ye,optionClassName:be,invalid:w,...xe}){let T=a.useMemo(()=>l(h),[h]),Se=a.useMemo(()=>u(T),[T]),[E,D]=a.useState(!1),[O,k]=a.useState(``),[A,j]=a.useState(T),[M,Ce]=a.useState(null),[N,P]=a.useState(!1),[F,I]=a.useState(!1),[L,R]=a.useState(!1),z=a.useRef(new Map),B=a.useRef(0),we=a.useRef(0),V=ee(O,v).trim(),H=a.useMemo(()=>u(A),[A]),U=a.useMemo(()=>({search:O,minSearchLength:y,options:H}),[H,y,O]),W=re(c,te,H,Se,M),Te=le&&!!c&&!g,G=V.length<y,K=!G&&!!me&&(ge??ne)(O,H);a.useEffect(()=>{z.current.clear()},[f]),a.useEffect(()=>{j(T)},[T]),a.useEffect(()=>{if(!c||W||!m)return;let e=new AbortController,t=++we.current;async function n(){let n=await m?.(c,e.signal);!e.signal.aborted&&t===we.current&&Ce(n??null)}return n(),()=>{e.abort()}},[W,m,c]),a.useEffect(()=>{if(!E)return;if(G){j(T),P(!1),R(!1);return}let e=_?ie(z.current,V,ue):void 0;if(e){j(e),P(!1),R(!1);return}let t=new AbortController,n=++B.current;async function r(){P(!0),R(!1);try{let e=l(await f(V,t.signal));!t.signal.aborted&&n===B.current&&(_&&ae(z.current,V,e),j(e))}catch{!t.signal.aborted&&n===B.current&&(R(!0),j([]))}finally{!t.signal.aborted&&n===B.current&&P(!1)}}return r(),()=>{t.abort()}},[_,ue,f,E,T,V,G]);let q=e=>{e.disabled||(d?.(e.value,e),D(!1),k(``))},J=()=>{d?.(void 0),k(``)},Ee=e=>{t.stopInteractivePropagation(e),J()},Y=e=>{if(!g){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),D(!0);return}(e.key===`Backspace`||e.key===`Delete`)&&c&&(e.preventDefault(),J())}},X=async()=>{if(!(!me||!O.trim()||G)){I(!0);try{let e=await me(O.trim()),t=oe(O);j(t=>[{options:[e]},...t]),_&&t&&ae(z.current,t,[{options:[e]}]),d?.(e.value,e),k(``),D(!1)}finally{I(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-select`,className:t.cn(`w-full`,e),...xe,children:(0,s.jsxs)(i.Popover,{open:E,onOpenChange:D,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:g,"aria-expanded":E,"aria-invalid":w||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between`,_e),onKeyDown:Y}),children:[(0,s.jsx)(`span`,{className:`min-w-0 flex-1 text-left`,children:W?(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:x?.(W)??W.label}),W.disabled&&W.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:W.disabledReason})]}):(0,s.jsx)(`span`,{className:`truncate`,children:b?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Te&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,className:`rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground`,"aria-label":b?.clear??`Clear`,onClick:Ee,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),J())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5`,ve),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:O,onChange:e=>k(e.target.value),placeholder:b?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,ye)})]}),(0,s.jsxs)(`div`,{className:`max-h-64 space-y-1 overflow-y-auto pr-1`,children:[G&&H.length===0&&(pe?.(U)??(0,s.jsx)(p,{children:b?.minSearchLength?.(y)??`Type at least ${y} characters`})),N&&(S?.(U)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),b?.loading??`Loading...`]})})),!N&&L&&(C?.(U)??(0,s.jsx)(p,{className:`text-destructive`,children:b?.error??`Could not load options`})),!N&&!L&&!G&&H.length===0&&!K&&(fe?.(U)??(0,s.jsx)(p,{children:b?.empty??`No options found`})),!N&&!L&&K&&(0,s.jsx)(ce,{search:O,isCreating:F,label:he,onCreate:X}),!N&&!L&&A.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:e.label}),e.options.map(e=>(0,s.jsx)(se,{option:e,selected:e.value===c,renderOption:de,optionClassName:be,onSelect:q},e.value))]},t))]})]})]})})}function g({className:e,value:c,selectedOptions:te,onValueChange:re,loadOptions:h,loadSelectedOptions:g,defaultOptions:le,disabled:_=!1,clearable:ue=!0,cacheOptions:v=!0,cacheTtl:y=1/0,closeOnSelect:b=!1,debounceMs:de=250,minSearchLength:x=0,maxSelected:S,showSelectAll:fe=!1,labels:C,renderOption:pe,renderValue:me,renderTag:he,renderLoading:ge,renderEmpty:_e,renderError:ve,renderMinSearch:ye,renderMaxSelected:be,onCreateOption:w,createOptionLabel:xe,showCreateOption:T,triggerClassName:Se,contentClassName:E,searchClassName:D,optionClassName:O,tagClassName:k,invalid:A,...j}){let M=a.useMemo(()=>c??[],[c]),Ce=M.join(`|`),N=a.useMemo(()=>l(le),[le]),P=a.useMemo(()=>u(N),[N]),[F,I]=a.useState(!1),[L,R]=a.useState(``),[z,B]=a.useState(N),[we,V]=a.useState([]),[H,U]=a.useState(!1),[W,Te]=a.useState(!1),[G,K]=a.useState(!1),q=a.useRef(new Map),J=a.useRef(0),Ee=a.useRef(0),Y=ee(L,de).trim(),X=a.useMemo(()=>u(z),[z]),De=a.useMemo(()=>new Set(M),[M]),Z=a.useMemo(()=>d(te,we,X,P),[P,X,we,te]),Oe=a.useMemo(()=>f(M,Z),[Z,M]),Q=a.useMemo(()=>({search:L,minSearchLength:x,options:X,selectedCount:M.length,maxSelected:S}),[X,S,x,L,M.length]),ke=M.length>0,Ae=ue&&ke&&!_,je=typeof S==`number`&&M.length>=S,$=Y.length<x,Me=!$&&!!w&&(T??ne)(L,X),Ne=X.filter(e=>!e.disabled).filter(e=>!De.has(e.value)),Pe=fe&&Ne.length>0&&!je;a.useEffect(()=>{q.current.clear()},[h]),a.useEffect(()=>{B(N)},[N]),a.useEffect(()=>{if(!M.length||!g)return;let e=new Set(Z.map(e=>e.value)),t=M.filter(t=>!e.has(t));if(!t.length)return;let n=new AbortController,r=++Ee.current;async function i(){let e=await g?.(t,n.signal);!n.signal.aborted&&r===Ee.current&&e&&V(t=>d(t,e))}return i(),()=>{n.abort()}},[Z,g,Ce,M]),a.useEffect(()=>{if(!F)return;if($){B(N),U(!1),K(!1);return}let e=v?ie(q.current,Y,y):void 0;if(e){B(e),U(!1),K(!1);return}let t=new AbortController,n=++J.current;async function r(){U(!0),K(!1);try{let e=l(await h(Y,t.signal));!t.signal.aborted&&n===J.current&&(v&&ae(q.current,Y,e),B(e))}catch{!t.signal.aborted&&n===J.current&&(K(!0),B([]))}finally{!t.signal.aborted&&n===J.current&&U(!1)}}return r(),()=>{t.abort()}},[v,y,h,F,N,Y,$]);let Fe=(e,t)=>{re?.(e,f(e,t))},Ie=e=>{Fe(M.filter(t=>t!==e),Z)},Le=e=>{e.disabled||(Fe(De.has(e.value)?M.filter(t=>t!==e.value):je?M:[...M,e.value],d(Z,[e])),b&&(I(!1),R(``)))},Re=(e,n)=>{e.key!==`Enter`&&e.key!==` `&&e.key!==`Backspace`&&e.key!==`Delete`||(e.preventDefault(),t.stopInteractivePropagation(e),Ie(n.value))},ze=e=>{if(!_){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),I(!0);return}L.length>0||M.length===0||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),Ie(M[M.length-1]))}},Be=()=>{if(!Ne.length)return;let e=typeof S==`number`?Math.max(S-M.length,0):Ne.length,t=Ne.slice(0,e);Fe(Array.from(new Set([...M,...t.map(e=>e.value)])),d(Z,t))},Ve=e=>{Ie(e.value)},He=()=>{re?.([],[]),R(``)},Ue=e=>{t.stopInteractivePropagation(e),He()},We=async()=>{if(!(!w||!L.trim()||$)){Te(!0);try{let e=await w(L.trim()),t=oe(L),n=d(Z,[e]),r=De.has(e.value)||je?M:[...M,e.value];B(t=>[{options:[e]},...t]),v&&t&&ae(q.current,t,[{options:[e]}]),Fe(r,n),R(``),b&&I(!1)}finally{Te(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-multi-select`,className:t.cn(`w-full`,e),...j,children:(0,s.jsxs)(i.Popover,{open:F,onOpenChange:I,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:_,"aria-expanded":F,"aria-invalid":A||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between`,Se),onKeyDown:ze}),children:[(0,s.jsx)(`span`,{className:`flex min-w-0 flex-1 flex-wrap gap-1 text-left`,children:Oe.length>0?Oe.map(e=>(0,s.jsxs)(`span`,{"data-slot":`async-select-tag`,className:t.cn(`inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-1 text-xs text-foreground`,k),children:[(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:he?.(e,{remove:()=>Ve(e)})??me?.(e)??e.label}),e.disabled&&e.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-[11px] text-muted-foreground`,children:e.disabledReason})]}),!_&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-tag-remove`,className:`rounded-full text-muted-foreground transition-colors hover:text-foreground`,"aria-label":`Remove ${m(e)}`,onClick:n=>{t.stopInteractivePropagation(n),Ve(e)},onKeyDown:t=>Re(t,e),children:(0,s.jsx)(o.XIcon,{className:`size-3`})})]},e.value)):(0,s.jsx)(`span`,{className:`truncate text-muted-foreground`,children:C?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Ae&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-clear`,className:`rounded-full border p-1 text-muted-foreground transition-colors hover:text-foreground`,"aria-label":C?.clearAll??C?.clear??`Clear all`,onClick:Ue,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),He())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5`,E),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:L,onChange:e=>R(e.target.value),placeholder:C?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,D)})]}),(0,s.jsxs)(`div`,{"data-slot":`async-select-meta`,className:`flex flex-wrap items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border px-3 py-2 text-xs text-muted-foreground`,children:[ke&&C?.selectedCount&&(0,s.jsx)(`span`,{children:C.selectedCount(M.length)}),je&&(be?.(Q)??(0,s.jsx)(`span`,{children:C?.maxSelected?.(S??M.length)??`Maximum ${S} selected`})),(0,s.jsxs)(`div`,{className:`ml-auto flex items-center gap-2`,children:[Pe&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:Be,children:C?.selectAll??`Select all`}),Ae&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:()=>re?.([],[]),children:C?.clearAll??C?.clear??`Clear all`})]})]}),(0,s.jsxs)(`div`,{className:`max-h-64 space-y-1 overflow-y-auto pr-1`,children:[$&&X.length===0&&(ye?.(Q)??(0,s.jsx)(p,{children:C?.minSearchLength?.(x)??`Type at least ${x} characters`})),H&&(ge?.(Q)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),C?.loading??`Loading...`]})})),!H&&G&&(ve?.(Q)??(0,s.jsx)(p,{className:`text-destructive`,children:C?.error??`Could not load options`})),!H&&!G&&!$&&X.length===0&&!Me&&(_e?.(Q)??(0,s.jsx)(p,{children:C?.empty??`No options found`})),!H&&!G&&Me&&(0,s.jsx)(ce,{search:L,isCreating:W,label:xe,onCreate:We}),!H&&!G&&z.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:(0,s.jsx)(`span`,{"data-slot":`async-select-group-label`,children:e.label})}),e.options.map(e=>(0,s.jsx)(se,{option:e,selected:De.has(e.value),renderOption:pe,optionClassName:O,onSelect:Le},e.value))]},t))]})]})]})})}exports.AsyncMultiSelect=g,exports.AsyncSelect=h;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/popover/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");function ee(e,t){let[n,r]=a.useState(e);return a.useEffect(()=>{let n=window.setTimeout(()=>{r(e)},t);return()=>{window.clearTimeout(n)}},[t,e]),n}function c(e){return typeof e==`object`&&!!e&&`options`in e}function l(e){if(!e||e.length===0)return[];let t=e[0];return c(t)?e:[{options:e}]}function u(e){return e.flatMap(e=>e.options)}function te(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label).toLowerCase():e.value.toLowerCase()}function ne(e,t){let n=e.trim().toLowerCase();return n?!t.some(e=>e.value.toLowerCase()===n||te(e)===n):!1}function re(e,t,n,r,i){if(e)return t?.value===e?t:i?.value===e?i:[...n,...r].find(t=>t.value===e)}function d(...e){let t=new Map;return e.forEach(e=>{e?.forEach(e=>{t.set(e.value,e)})}),Array.from(t.values())}function f(e,t){let n=new Map(t.map(e=>[e.value,e]));return e.map(e=>n.get(e)).filter(e=>!!e)}function ie(e,t,n){let r=e.get(t);if(r){if(Number.isFinite(n)&&Date.now()-r.createdAt>n){e.delete(t);return}return r.groups}}function ae(e,t,n){e.set(t,{groups:n,createdAt:Date.now()})}function oe(e){return e.trim().toLowerCase()}function p({className:e,children:n}){return(0,s.jsx)(`div`,{"data-slot":`async-select-state`,className:t.cn(`rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-3 text-sm leading-5 text-muted-foreground`,e),children:n})}function m(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label):e.value}function se({option:e,selected:n,renderOption:r,optionClassName:i,onSelect:a}){return(0,s.jsxs)(`button`,{type:`button`,disabled:e.disabled,"data-slot":`async-select-option`,"data-selected":n||void 0,"data-disabled":e.disabled||void 0,className:t.cn(`flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50`,i),onClick:()=>a(e),children:[(0,s.jsx)(`span`,{className:t.cn(`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70`,n&&`border-primary bg-primary text-primary-foreground`),children:n&&(0,s.jsx)(o.CheckIcon,{className:`size-3`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1`,children:r?.(e,{selected:n})??(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate font-medium`,children:e.label}),e.description&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.description}),e.disabled&&e.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.disabledReason})]})})]})}function ce({search:e,isCreating:t,label:n,onCreate:r}){return(0,s.jsxs)(`button`,{type:`button`,disabled:t,"data-slot":`async-select-create`,className:`flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50`,onClick:r,children:[(0,s.jsx)(`span`,{className:`flex size-4 shrink-0 items-center justify-center`,children:t?(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}):(0,s.jsx)(o.PlusIcon,{className:`size-4`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:n?.(e)??`Create "${e.trim()}"`})]})}function h({className:e,value:c,selectedOption:te,onValueChange:d,loadOptions:f,loadSelectedOption:m,defaultOptions:h,disabled:g=!1,clearable:le=!0,cacheOptions:_=!0,cacheTtl:ue=1/0,debounceMs:v=250,minSearchLength:y=0,labels:b,renderOption:de,renderValue:x,renderLoading:S,renderEmpty:fe,renderError:C,renderMinSearch:pe,onCreateOption:me,createOptionLabel:he,showCreateOption:ge,triggerClassName:_e,contentClassName:ve,searchClassName:ye,optionClassName:be,invalid:w,...xe}){let T=a.useMemo(()=>l(h),[h]),Se=a.useMemo(()=>u(T),[T]),[E,D]=a.useState(!1),[O,k]=a.useState(``),[A,j]=a.useState(T),[M,Ce]=a.useState(null),[N,P]=a.useState(!1),[F,I]=a.useState(!1),[L,R]=a.useState(!1),z=a.useRef(new Map),B=a.useRef(0),we=a.useRef(0),V=ee(O,v).trim(),H=a.useMemo(()=>u(A),[A]),U=a.useMemo(()=>({search:O,minSearchLength:y,options:H}),[H,y,O]),W=re(c,te,H,Se,M),Te=le&&!!c&&!g,G=V.length<y,K=!G&&!!me&&(ge??ne)(O,H);a.useEffect(()=>{z.current.clear()},[f]),a.useEffect(()=>{j(T)},[T]),a.useEffect(()=>{if(!c||W||!m)return;let e=new AbortController,t=++we.current;async function n(){let n=await m?.(c,e.signal);!e.signal.aborted&&t===we.current&&Ce(n??null)}return n(),()=>{e.abort()}},[W,m,c]),a.useEffect(()=>{if(!E)return;if(G){j(T),P(!1),R(!1);return}let e=_?ie(z.current,V,ue):void 0;if(e){j(e),P(!1),R(!1);return}let t=new AbortController,n=++B.current;async function r(){P(!0),R(!1);try{let e=l(await f(V,t.signal));!t.signal.aborted&&n===B.current&&(_&&ae(z.current,V,e),j(e))}catch{!t.signal.aborted&&n===B.current&&(R(!0),j([]))}finally{!t.signal.aborted&&n===B.current&&P(!1)}}return r(),()=>{t.abort()}},[_,ue,f,E,T,V,G]);let q=e=>{e.disabled||(d?.(e.value,e),D(!1),k(``))},J=()=>{d?.(void 0),k(``)},Ee=e=>{t.stopInteractivePropagation(e),J()},Y=e=>{if(!g){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),D(!0);return}(e.key===`Backspace`||e.key===`Delete`)&&c&&(e.preventDefault(),J())}},X=async()=>{if(!(!me||!O.trim()||G)){I(!0);try{let e=await me(O.trim()),t=oe(O);j(t=>[{options:[e]},...t]),_&&t&&ae(z.current,t,[{options:[e]}]),d?.(e.value,e),k(``),D(!1)}finally{I(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-select`,className:t.cn(`w-full`,e),...xe,children:(0,s.jsxs)(i.Popover,{open:E,onOpenChange:D,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:g,"aria-expanded":E,"aria-invalid":w||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left`,_e),onKeyDown:Y}),children:[(0,s.jsx)(`span`,{className:`min-w-0 flex-1 text-left`,children:W?(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col gap-0.5`,children:[(0,s.jsx)(`span`,{className:`truncate font-semibold`,children:x?.(W)??W.label}),W.disabled&&W.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:W.disabledReason})]}):(0,s.jsx)(`span`,{className:`truncate text-muted-foreground`,children:b?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Te&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,className:`rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground`,"aria-label":b?.clear??`Clear`,onClick:Ee,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),J())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]`,ve),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:O,onChange:e=>k(e.target.value),placeholder:b?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,ye)})]}),(0,s.jsxs)(`div`,{className:`max-h-72 space-y-1 overflow-y-auto pr-1`,children:[G&&H.length===0&&(pe?.(U)??(0,s.jsx)(p,{children:b?.minSearchLength?.(y)??`Type at least ${y} characters`})),N&&(S?.(U)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),b?.loading??`Loading...`]})})),!N&&L&&(C?.(U)??(0,s.jsx)(p,{className:`text-destructive`,children:b?.error??`Could not load options`})),!N&&!L&&!G&&H.length===0&&!K&&(fe?.(U)??(0,s.jsx)(p,{children:b?.empty??`No options found`})),!N&&!L&&K&&(0,s.jsx)(ce,{search:O,isCreating:F,label:he,onCreate:X}),!N&&!L&&A.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:e.label}),e.options.map(e=>(0,s.jsx)(se,{option:e,selected:e.value===c,renderOption:de,optionClassName:be,onSelect:q},e.value))]},t))]})]})]})})}function g({className:e,value:c,selectedOptions:te,onValueChange:re,loadOptions:h,loadSelectedOptions:g,defaultOptions:le,disabled:_=!1,clearable:ue=!0,cacheOptions:v=!0,cacheTtl:y=1/0,closeOnSelect:b=!1,debounceMs:de=250,minSearchLength:x=0,maxSelected:S,showSelectAll:fe=!1,labels:C,renderOption:pe,renderValue:me,renderTag:he,renderLoading:ge,renderEmpty:_e,renderError:ve,renderMinSearch:ye,renderMaxSelected:be,onCreateOption:w,createOptionLabel:xe,showCreateOption:T,triggerClassName:Se,contentClassName:E,searchClassName:D,optionClassName:O,tagClassName:k,invalid:A,...j}){let M=a.useMemo(()=>c??[],[c]),Ce=M.join(`|`),N=a.useMemo(()=>l(le),[le]),P=a.useMemo(()=>u(N),[N]),[F,I]=a.useState(!1),[L,R]=a.useState(``),[z,B]=a.useState(N),[we,V]=a.useState([]),[H,U]=a.useState(!1),[W,Te]=a.useState(!1),[G,K]=a.useState(!1),q=a.useRef(new Map),J=a.useRef(0),Ee=a.useRef(0),Y=ee(L,de).trim(),X=a.useMemo(()=>u(z),[z]),De=a.useMemo(()=>new Set(M),[M]),Z=a.useMemo(()=>d(te,we,X,P),[P,X,we,te]),Oe=a.useMemo(()=>f(M,Z),[Z,M]),Q=a.useMemo(()=>({search:L,minSearchLength:x,options:X,selectedCount:M.length,maxSelected:S}),[X,S,x,L,M.length]),ke=M.length>0,Ae=ue&&ke&&!_,je=typeof S==`number`&&M.length>=S,$=Y.length<x,Me=!$&&!!w&&(T??ne)(L,X),Ne=X.filter(e=>!e.disabled).filter(e=>!De.has(e.value)),Pe=fe&&Ne.length>0&&!je;a.useEffect(()=>{q.current.clear()},[h]),a.useEffect(()=>{B(N)},[N]),a.useEffect(()=>{if(!M.length||!g)return;let e=new Set(Z.map(e=>e.value)),t=M.filter(t=>!e.has(t));if(!t.length)return;let n=new AbortController,r=++Ee.current;async function i(){let e=await g?.(t,n.signal);!n.signal.aborted&&r===Ee.current&&e&&V(t=>d(t,e))}return i(),()=>{n.abort()}},[Z,g,Ce,M]),a.useEffect(()=>{if(!F)return;if($){B(N),U(!1),K(!1);return}let e=v?ie(q.current,Y,y):void 0;if(e){B(e),U(!1),K(!1);return}let t=new AbortController,n=++J.current;async function r(){U(!0),K(!1);try{let e=l(await h(Y,t.signal));!t.signal.aborted&&n===J.current&&(v&&ae(q.current,Y,e),B(e))}catch{!t.signal.aborted&&n===J.current&&(K(!0),B([]))}finally{!t.signal.aborted&&n===J.current&&U(!1)}}return r(),()=>{t.abort()}},[v,y,h,F,N,Y,$]);let Fe=(e,t)=>{re?.(e,f(e,t))},Ie=e=>{Fe(M.filter(t=>t!==e),Z)},Le=e=>{e.disabled||(Fe(De.has(e.value)?M.filter(t=>t!==e.value):je?M:[...M,e.value],d(Z,[e])),b&&(I(!1),R(``)))},Re=(e,n)=>{e.key!==`Enter`&&e.key!==` `&&e.key!==`Backspace`&&e.key!==`Delete`||(e.preventDefault(),t.stopInteractivePropagation(e),Ie(n.value))},ze=e=>{if(!_){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),I(!0);return}L.length>0||M.length===0||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),Ie(M[M.length-1]))}},Be=()=>{if(!Ne.length)return;let e=typeof S==`number`?Math.max(S-M.length,0):Ne.length,t=Ne.slice(0,e);Fe(Array.from(new Set([...M,...t.map(e=>e.value)])),d(Z,t))},Ve=e=>{Ie(e.value)},He=()=>{re?.([],[]),R(``)},Ue=e=>{t.stopInteractivePropagation(e),He()},We=async()=>{if(!(!w||!L.trim()||$)){Te(!0);try{let e=await w(L.trim()),t=oe(L),n=d(Z,[e]),r=De.has(e.value)||je?M:[...M,e.value];B(t=>[{options:[e]},...t]),v&&t&&ae(q.current,t,[{options:[e]}]),Fe(r,n),R(``),b&&I(!1)}finally{Te(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-multi-select`,className:t.cn(`w-full`,e),...j,children:(0,s.jsxs)(i.Popover,{open:F,onOpenChange:I,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:_,"aria-expanded":F,"aria-invalid":A||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left`,Se),onKeyDown:ze}),children:[(0,s.jsx)(`span`,{className:`flex min-w-0 flex-1 flex-wrap gap-1 text-left`,children:Oe.length>0?Oe.map(e=>(0,s.jsxs)(`span`,{"data-slot":`async-select-tag`,className:t.cn(`inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground`,k),children:[(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:he?.(e,{remove:()=>Ve(e)})??me?.(e)??e.label}),e.disabled&&e.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-[11px] text-muted-foreground`,children:e.disabledReason})]}),!_&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-tag-remove`,className:`rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground`,"aria-label":`Remove ${m(e)}`,onClick:n=>{t.stopInteractivePropagation(n),Ve(e)},onKeyDown:t=>Re(t,e),children:(0,s.jsx)(o.XIcon,{className:`size-3`})})]},e.value)):(0,s.jsx)(`span`,{className:`truncate text-muted-foreground`,children:C?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Ae&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-clear`,className:`rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground`,"aria-label":C?.clearAll??C?.clear??`Clear all`,onClick:Ue,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),He())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]`,E),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:L,onChange:e=>R(e.target.value),placeholder:C?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,D)})]}),(0,s.jsxs)(`div`,{"data-slot":`async-select-meta`,className:`flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground`,children:[ke&&C?.selectedCount&&(0,s.jsx)(`span`,{children:C.selectedCount(M.length)}),je&&(be?.(Q)??(0,s.jsx)(`span`,{children:C?.maxSelected?.(S??M.length)??`Maximum ${S} selected`})),(0,s.jsxs)(`div`,{className:`ml-auto flex items-center gap-2`,children:[Pe&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:Be,children:C?.selectAll??`Select all`}),Ae&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:()=>re?.([],[]),children:C?.clearAll??C?.clear??`Clear all`})]})]}),(0,s.jsxs)(`div`,{className:`max-h-72 space-y-1 overflow-y-auto pr-1`,children:[$&&X.length===0&&(ye?.(Q)??(0,s.jsx)(p,{children:C?.minSearchLength?.(x)??`Type at least ${x} characters`})),H&&(ge?.(Q)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),C?.loading??`Loading...`]})})),!H&&G&&(ve?.(Q)??(0,s.jsx)(p,{className:`text-destructive`,children:C?.error??`Could not load options`})),!H&&!G&&!$&&X.length===0&&!Me&&(_e?.(Q)??(0,s.jsx)(p,{children:C?.empty??`No options found`})),!H&&!G&&Me&&(0,s.jsx)(ce,{search:L,isCreating:W,label:xe,onCreate:We}),!H&&!G&&z.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:(0,s.jsx)(`span`,{"data-slot":`async-select-group-label`,children:e.label})}),e.options.map(e=>(0,s.jsx)(se,{option:e,selected:De.has(e.value),renderOption:pe,optionClassName:O,onSelect:Le},e.value))]},t))]})]})]})})}exports.AsyncMultiSelect=g,exports.AsyncSelect=h;
|
|
@@ -72,7 +72,7 @@ function pe(e) {
|
|
|
72
72
|
function m({ className: t, children: n }) {
|
|
73
73
|
return /* @__PURE__ */ s("div", {
|
|
74
74
|
"data-slot": "async-select-state",
|
|
75
|
-
className: e("rounded-[
|
|
75
|
+
className: e("rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-3 text-sm leading-5 text-muted-foreground", t),
|
|
76
76
|
children: n
|
|
77
77
|
});
|
|
78
78
|
}
|
|
@@ -86,18 +86,18 @@ function he({ option: t, selected: n, renderOption: r, optionClassName: i, onSel
|
|
|
86
86
|
"data-slot": "async-select-option",
|
|
87
87
|
"data-selected": n || void 0,
|
|
88
88
|
"data-disabled": t.disabled || void 0,
|
|
89
|
-
className: e("flex w-full items-start gap-2 rounded-[
|
|
89
|
+
className: e("flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50", i),
|
|
90
90
|
onClick: () => ee(t),
|
|
91
91
|
children: [/* @__PURE__ */ s("span", {
|
|
92
|
-
className: "flex size-4 shrink-0 items-center justify-center",
|
|
93
|
-
children: n && /* @__PURE__ */ s(ne, { className: "size-
|
|
92
|
+
className: e("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", n && "border-primary bg-primary text-primary-foreground"),
|
|
93
|
+
children: n && /* @__PURE__ */ s(ne, { className: "size-3" })
|
|
94
94
|
}), /* @__PURE__ */ s("span", {
|
|
95
95
|
className: "min-w-0 flex-1",
|
|
96
96
|
children: r?.(t, { selected: n }) ?? /* @__PURE__ */ c("span", {
|
|
97
97
|
className: "flex min-w-0 flex-col",
|
|
98
98
|
children: [
|
|
99
99
|
/* @__PURE__ */ s("span", {
|
|
100
|
-
className: "truncate",
|
|
100
|
+
className: "truncate font-medium",
|
|
101
101
|
children: t.label
|
|
102
102
|
}),
|
|
103
103
|
t.description && /* @__PURE__ */ s("span", {
|
|
@@ -118,7 +118,7 @@ function ge({ search: e, isCreating: t, label: n, onCreate: r }) {
|
|
|
118
118
|
type: "button",
|
|
119
119
|
disabled: t,
|
|
120
120
|
"data-slot": "async-select-create",
|
|
121
|
-
className: "flex w-full items-center gap-2 rounded-[
|
|
121
|
+
className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50",
|
|
122
122
|
onClick: r,
|
|
123
123
|
children: [/* @__PURE__ */ s("span", {
|
|
124
124
|
className: "flex size-4 shrink-0 items-center justify-center",
|
|
@@ -232,22 +232,22 @@ function h({ className: ne, value: o, selectedOption: ce, onValueChange: d, load
|
|
|
232
232
|
"aria-expanded": E,
|
|
233
233
|
"aria-invalid": w || void 0,
|
|
234
234
|
"data-slot": "async-select-trigger",
|
|
235
|
-
className: e("min-h-11 w-full justify-between", we),
|
|
235
|
+
className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", we),
|
|
236
236
|
onKeyDown: Y
|
|
237
237
|
}),
|
|
238
238
|
children: [/* @__PURE__ */ s("span", {
|
|
239
239
|
className: "min-w-0 flex-1 text-left",
|
|
240
240
|
children: W ? /* @__PURE__ */ c("span", {
|
|
241
|
-
className: "flex min-w-0 flex-col",
|
|
241
|
+
className: "flex min-w-0 flex-col gap-0.5",
|
|
242
242
|
children: [/* @__PURE__ */ s("span", {
|
|
243
|
-
className: "truncate",
|
|
243
|
+
className: "truncate font-semibold",
|
|
244
244
|
children: b?.(W) ?? W.label
|
|
245
245
|
}), W.disabled && W.disabledReason && /* @__PURE__ */ s("span", {
|
|
246
246
|
className: "truncate text-xs text-muted-foreground",
|
|
247
247
|
children: W.disabledReason
|
|
248
248
|
})]
|
|
249
249
|
}) : /* @__PURE__ */ s("span", {
|
|
250
|
-
className: "truncate",
|
|
250
|
+
className: "truncate text-muted-foreground",
|
|
251
251
|
children: y?.placeholder ?? "Select"
|
|
252
252
|
})
|
|
253
253
|
}), /* @__PURE__ */ c("span", {
|
|
@@ -267,7 +267,7 @@ function h({ className: ne, value: o, selectedOption: ce, onValueChange: d, load
|
|
|
267
267
|
}), /* @__PURE__ */ c(ee, {
|
|
268
268
|
align: "start",
|
|
269
269
|
"data-slot": "async-select-content",
|
|
270
|
-
className: e("w-(--anchor-width) gap-3 rounded-[var(--radius-
|
|
270
|
+
className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", Te),
|
|
271
271
|
children: [/* @__PURE__ */ c("div", {
|
|
272
272
|
"data-slot": "async-select-search-wrap",
|
|
273
273
|
className: "relative",
|
|
@@ -279,7 +279,7 @@ function h({ className: ne, value: o, selectedOption: ce, onValueChange: d, load
|
|
|
279
279
|
className: e("pl-8", Ee)
|
|
280
280
|
})]
|
|
281
281
|
}), /* @__PURE__ */ c("div", {
|
|
282
|
-
className: "max-h-
|
|
282
|
+
className: "max-h-72 space-y-1 overflow-y-auto pr-1",
|
|
283
283
|
children: [
|
|
284
284
|
G && H.length === 0 && (xe?.(U) ?? /* @__PURE__ */ s(m, { children: y?.minSearchLength?.(v) ?? `Type at least ${v} characters` })),
|
|
285
285
|
N && (x?.(U) ?? /* @__PURE__ */ s(m, { children: /* @__PURE__ */ c("span", {
|
|
@@ -440,14 +440,14 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
|
|
|
440
440
|
"aria-expanded": F,
|
|
441
441
|
"aria-invalid": A || void 0,
|
|
442
442
|
"data-slot": "async-select-trigger",
|
|
443
|
-
className: e("min-h-11 w-full justify-between", ke),
|
|
443
|
+
className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", ke),
|
|
444
444
|
onKeyDown: Ke
|
|
445
445
|
}),
|
|
446
446
|
children: [/* @__PURE__ */ s("span", {
|
|
447
447
|
className: "flex min-w-0 flex-1 flex-wrap gap-1 text-left",
|
|
448
448
|
children: Fe.length > 0 ? Fe.map((n) => /* @__PURE__ */ c("span", {
|
|
449
449
|
"data-slot": "async-select-tag",
|
|
450
|
-
className: e("inline-flex max-w-full items-center gap-1 rounded-
|
|
450
|
+
className: e("inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground", k),
|
|
451
451
|
children: [/* @__PURE__ */ c("span", {
|
|
452
452
|
className: "flex min-w-0 flex-col",
|
|
453
453
|
children: [/* @__PURE__ */ s("span", {
|
|
@@ -461,7 +461,7 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
|
|
|
461
461
|
role: "button",
|
|
462
462
|
tabIndex: 0,
|
|
463
463
|
"data-slot": "async-select-tag-remove",
|
|
464
|
-
className: "rounded-full text-muted-foreground transition-colors hover:text-foreground",
|
|
464
|
+
className: "rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground",
|
|
465
465
|
"aria-label": `Remove ${me(n)}`,
|
|
466
466
|
onClick: (e) => {
|
|
467
467
|
t(e), Je(n);
|
|
@@ -479,7 +479,7 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
|
|
|
479
479
|
role: "button",
|
|
480
480
|
tabIndex: 0,
|
|
481
481
|
"data-slot": "async-select-clear",
|
|
482
|
-
className: "rounded-full border p-1 text-muted-foreground transition-colors hover:text-foreground",
|
|
482
|
+
className: "rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground",
|
|
483
483
|
"aria-label": S?.clearAll ?? S?.clear ?? "Clear all",
|
|
484
484
|
onClick: Xe,
|
|
485
485
|
onKeyDown: (e) => {
|
|
@@ -491,7 +491,7 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
|
|
|
491
491
|
}), /* @__PURE__ */ c(ee, {
|
|
492
492
|
align: "start",
|
|
493
493
|
"data-slot": "async-select-content",
|
|
494
|
-
className: e("w-(--anchor-width) gap-3 rounded-[var(--radius-
|
|
494
|
+
className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", E),
|
|
495
495
|
children: [
|
|
496
496
|
/* @__PURE__ */ c("div", {
|
|
497
497
|
"data-slot": "async-select-search-wrap",
|
|
@@ -506,7 +506,7 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
|
|
|
506
506
|
}),
|
|
507
507
|
/* @__PURE__ */ c("div", {
|
|
508
508
|
"data-slot": "async-select-meta",
|
|
509
|
-
className: "flex flex-wrap items-center justify-between gap-2 rounded-[
|
|
509
|
+
className: "flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground",
|
|
510
510
|
children: [
|
|
511
511
|
Ie && S?.selectedCount && /* @__PURE__ */ s("span", { children: S.selectedCount(M.length) }),
|
|
512
512
|
Re && (De?.(Q) ?? /* @__PURE__ */ s("span", { children: S?.maxSelected?.(x ?? M.length) ?? `Maximum ${x} selected` })),
|
|
@@ -515,13 +515,13 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
|
|
|
515
515
|
children: [Ve && /* @__PURE__ */ s("button", {
|
|
516
516
|
type: "button",
|
|
517
517
|
"data-slot": "async-select-meta-action",
|
|
518
|
-
className: "rounded-
|
|
518
|
+
className: "rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
|
|
519
519
|
onClick: qe,
|
|
520
520
|
children: S?.selectAll ?? "Select all"
|
|
521
521
|
}), Le && /* @__PURE__ */ s("button", {
|
|
522
522
|
type: "button",
|
|
523
523
|
"data-slot": "async-select-meta-action",
|
|
524
|
-
className: "rounded-
|
|
524
|
+
className: "rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
|
|
525
525
|
onClick: () => d?.([], []),
|
|
526
526
|
children: S?.clearAll ?? S?.clear ?? "Clear all"
|
|
527
527
|
})]
|
|
@@ -529,7 +529,7 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
|
|
|
529
529
|
]
|
|
530
530
|
}),
|
|
531
531
|
/* @__PURE__ */ c("div", {
|
|
532
|
-
className: "max-h-
|
|
532
|
+
className: "max-h-72 space-y-1 overflow-y-auto pr-1",
|
|
533
533
|
children: [
|
|
534
534
|
$ && X.length === 0 && (Ee?.(Q) ?? /* @__PURE__ */ s(m, { children: S?.minSearchLength?.(b) ?? `Type at least ${b} characters` })),
|
|
535
535
|
H && (Ce?.(Q) ?? /* @__PURE__ */ s(m, { children: /* @__PURE__ */ c("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("@base-ui/react/select");var o=a.Select.Root;function s({className:e,...n}){return(0,i.jsx)(a.Select.Group,{"data-slot":`select-group`,className:t.cn(`scroll-my-1 p-1`,e),...n})}function c({className:e,...n}){return(0,i.jsx)(a.Select.Value,{"data-slot":`select-value`,className:t.cn(`flex flex-1 text-left`,e),...n})}function l({className:e,size:n=`default`,children:o,...s}){return(0,i.jsxs)(a.Select.Trigger,{"data-slot":`select-trigger`,"data-size":n,className:t.cn(`flex w-
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("@base-ui/react/select");var o=a.Select.Root;function s({className:e,...n}){return(0,i.jsx)(a.Select.Group,{"data-slot":`select-group`,className:t.cn(`scroll-my-1 p-1`,e),...n})}function c({className:e,...n}){return(0,i.jsx)(a.Select.Value,{"data-slot":`select-value`,className:t.cn(`flex flex-1 text-left`,e),...n})}function l({className:e,size:n=`default`,children:o,...s}){return(0,i.jsxs)(a.Select.Trigger,{"data-slot":`select-trigger`,"data-size":n,className:t.cn(`flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-10 data-[size=lg]:h-11 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,e),...s,children:[o,(0,i.jsx)(a.Select.Icon,{render:(0,i.jsx)(r.ChevronDownIcon,{className:`pointer-events-none size-4 text-muted-foreground`})})]})}function u({className:e,children:n,side:r=`bottom`,sideOffset:o=4,align:s=`center`,alignOffset:c=0,alignItemWithTrigger:l=!0,...u}){return(0,i.jsx)(a.Select.Portal,{children:(0,i.jsx)(a.Select.Positioner,{side:r,sideOffset:o,align:s,alignOffset:c,alignItemWithTrigger:l,className:`isolate z-50`,children:(0,i.jsxs)(a.Select.Popup,{"data-slot":`select-content`,"data-align-trigger":l,className:t.cn(`relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95`,e),...u,children:[(0,i.jsx)(m,{}),(0,i.jsx)(a.Select.List,{children:n}),(0,i.jsx)(h,{})]})})})}function d({className:e,...n}){return(0,i.jsx)(a.Select.GroupLabel,{"data-slot":`select-label`,className:t.cn(`px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90`,e),...n})}function f({className:e,children:n,...o}){return(0,i.jsxs)(a.Select.Item,{"data-slot":`select-item`,className:t.cn(`relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] data-[highlighted]:border-[color:color-mix(in_oklch,var(--primary),transparent_72%)] data-[highlighted]:bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] data-[highlighted]:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2`,e),...o,children:[(0,i.jsx)(a.Select.ItemText,{className:`flex flex-1 shrink-0 gap-2 whitespace-nowrap`,children:n}),(0,i.jsx)(a.Select.ItemIndicator,{render:(0,i.jsx)(`span`,{className:`pointer-events-none absolute right-2 flex size-4 items-center justify-center`}),children:(0,i.jsx)(r.CheckIcon,{className:`pointer-events-none`})})]})}function p({className:e,...n}){return(0,i.jsx)(a.Select.Separator,{"data-slot":`select-separator`,className:t.cn(`pointer-events-none -mx-1 my-1.5 h-px bg-border/80`,e),...n})}function m({className:e,...n}){return(0,i.jsx)(a.Select.ScrollUpArrow,{"data-slot":`select-scroll-up-button`,className:t.cn(`top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1.5 [&_svg:not([class*='size-'])]:size-4`,e),...n,children:(0,i.jsx)(r.ChevronUpIcon,{})})}function h({className:e,...n}){return(0,i.jsx)(a.Select.ScrollDownArrow,{"data-slot":`select-scroll-down-button`,className:t.cn(`bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1.5 [&_svg:not([class*='size-'])]:size-4`,e),...n,children:(0,i.jsx)(r.ChevronDownIcon,{})})}exports.Select=o,exports.SelectContent=u,exports.SelectGroup=s,exports.SelectItem=f,exports.SelectLabel=d,exports.SelectScrollDownButton=h,exports.SelectScrollUpButton=m,exports.SelectSeparator=p,exports.SelectTrigger=l,exports.SelectValue=c;
|
|
@@ -4,7 +4,7 @@ export type SelectRootProps = React.ComponentPropsWithoutRef<typeof SelectPrimit
|
|
|
4
4
|
export type SelectGroupProps = SelectPrimitive.Group.Props;
|
|
5
5
|
export type SelectValueProps = SelectPrimitive.Value.Props;
|
|
6
6
|
export type SelectTriggerProps = SelectPrimitive.Trigger.Props & {
|
|
7
|
-
size?: "sm" | "default";
|
|
7
|
+
size?: "sm" | "default" | "lg";
|
|
8
8
|
};
|
|
9
9
|
export type SelectContentProps = SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">;
|
|
10
10
|
export type SelectLabelProps = SelectPrimitive.GroupLabel.Props;
|
|
@@ -24,7 +24,7 @@ function u({ className: t, size: r = "default", children: s, ...c }) {
|
|
|
24
24
|
return /* @__PURE__ */ a(o.Trigger, {
|
|
25
25
|
"data-slot": "select-trigger",
|
|
26
26
|
"data-size": r,
|
|
27
|
-
className: e("flex w-
|
|
27
|
+
className: e("flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-10 data-[size=lg]:h-11 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
|
|
28
28
|
...c,
|
|
29
29
|
children: [s, /* @__PURE__ */ i(o.Icon, { render: /* @__PURE__ */ i(n, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
|
|
30
30
|
});
|
|
@@ -40,7 +40,7 @@ function d({ className: t, children: n, side: r = "bottom", sideOffset: s = 4, a
|
|
|
40
40
|
children: /* @__PURE__ */ a(o.Popup, {
|
|
41
41
|
"data-slot": "select-content",
|
|
42
42
|
"data-align-trigger": u,
|
|
43
|
-
className: e("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-
|
|
43
|
+
className: e("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", t),
|
|
44
44
|
...d,
|
|
45
45
|
children: [
|
|
46
46
|
/* @__PURE__ */ i(h, {}),
|
|
@@ -60,7 +60,7 @@ function f({ className: t, ...n }) {
|
|
|
60
60
|
function p({ className: n, children: r, ...s }) {
|
|
61
61
|
return /* @__PURE__ */ a(o.Item, {
|
|
62
62
|
"data-slot": "select-item",
|
|
63
|
-
className: e("relative flex w-full cursor-default items-center gap-
|
|
63
|
+
className: e("relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] data-[highlighted]:border-[color:color-mix(in_oklch,var(--primary),transparent_72%)] data-[highlighted]:bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] data-[highlighted]:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2", n),
|
|
64
64
|
...s,
|
|
65
65
|
children: [/* @__PURE__ */ i(o.ItemText, {
|
|
66
66
|
className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e={$schema:`https://tembro.dev/registry.schema.json`,name:`tembro`,version:`1.0.
|
|
1
|
+
var e={$schema:`https://tembro.dev/registry.schema.json`,name:`tembro`,version:`1.0.2`,description:`Reusable React + TypeScript UI kit registry`,groups:{ui:[`badge`,`button`,`card`,`checkbox`,`accordion`,`collapse`,`dialog`,`divider`,`dropdown-menu`,`input`,`kbd`,`popover`,`radio-group`,`right-click-menu`,`scroll-box`,`select`,`segmented-control`,`skeleton`,`spinner`,`switch`,`table`,`tabs`,`textarea`,`tooltip`],overlay:[`alert-dialog`,`confirm-dialog`,`dialog-actions`,`drawer`,`modal-shell`,`sheet-shell`],navigation:[`anchor-nav`,`nav-tabs`,`page-tabs`,`pagination`,`stepper-tabs`,`command-bar`],inputs:[`number-input`,`date-input`,`date-range-input`,`money-input`,`phone-input`,`async-select`,`combobox`,`clearable-input`,`search-input`,`password-input`,`masked-input`,`quantity-input`,`tag-input`,`otp-input`,`slider`,`rating`,`color-input`,`quantity-stepper`,`inline-editable`,`simple-select`],form:[`form-field-shell`,`form-input`,`form-select`,`form-textarea`,`form-switch`,`form-date-picker`,`form-date-range-picker`,`repeater-field`,`form-async-select`,`form-date-input`,`form-date-range-input`,`form-number-input`,`form-password-input`,`form-phone-input`,`form-search-input`],feedback:[`alert`,`empty-state`,`loading-state`,`page-state`,`empty-search-state`],display:`activity-feed.avatar.code-block.data-list.data-state.descriptions.description-list.entity-card.file-card.info-card.keyboard-shortcut.key-value-card.kanban.list.metric-grid.progress.progress-circle.property-grid.result.statistic.status-dot.status-legend.tag-list.timeline.tree-view.user-card.trend-card.comparison-card.delta-badge.skeleton-table.skeleton-form.entity-header`.split(`.`),actions:[`action-menu`,`button-group`,`copy-button`,`copy-field`,`quick-action-grid`],layout:[`app-header`,`sidebar`,`breadcrumbs`,`page-container`,`section`,`section-header`,`sidebar-nav`,`stack`,`stat-card`,`sticky-footer-bar`],filters:[`filter-chips`,`filter-bar`,`saved-filter-select`],"data-table":[`data-table`,`data-table-toolbar`,`data-table-pagination`,`data-table-row-actions`,`data-table-bulk-actions`,`data-table-view-presets`,`data-table-saved-filters`,`data-table-column-visibility-menu`,`data-table-select-column`,`data-table-sortable-header`,`data-table-actions-column`],calendar:[`calendar`,`date-picker`,`date-range-picker`,`form-date-picker`,`form-date-range-picker`],upload:[`file-upload`,`image-upload`,`file-dropzone`],wizard:[`stepper`,`wizard`],notifications:[`toast`,`notification-center`],command:[`command-palette`],patterns:[`resource-page`,`resource-detail-page`,`form-builder`],modern:[`affix`,`calendar-scheduler`,`dual-list-picker`,`menubar`,`navigation-menu`,`resizable-panel`,`rich-text-editor`,`tour`,`qr-code`,`tag`,`aspect-ratio`,`carousel`,`float-button`,`typography`,`watermark`,`cascader`,`json-input`,`mention-input`,`time-picker`],hooks:[`use-session-storage-state`,`use-before-unload-when-dirty`,`use-is-mobile`,`use-disclosure`,`use-debounce`,`use-data-table-view-state`],kits:[`dashboard`,`calendar-kit`,`wizard-kit`,`all`]},recommended:`button.input.textarea.checkbox.switch.radio-group.dialog.popover.select.table.badge.card.tabs.collapse.accordion.segmented-control.spinner.tooltip.kbd.sidebar.breadcrumbs.empty-state.loading-state.description-list.progress.metric-grid.activity-feed.action-menu.date-picker.data-table.notification-center.command-palette`.split(`.`),recommendedByMode:{foundation:[`button`,`input`,`textarea`,`checkbox`,`switch`,`radio-group`,`dialog`,`popover`,`select`,`table`,`badge`,`card`,`tabs`,`kbd`,`scroll-box`],sourceCopy:[`sidebar`,`sidebar-nav`,`breadcrumbs`,`empty-state`,`loading-state`,`description-list`,`metric-grid`,`activity-feed`,`action-menu`,`filter-bar`,`date-picker`,`date-range-picker`,`file-upload`,`file-dropzone`,`command-palette`,`use-data-table-view-state`,`data-table`,`form-input`,`form-select`,`form-textarea`,`form-switch`,`notification-center`,`command-bar`],system:[`data-table`,`data-table-view-presets`,`sidebar`,`sidebar-nav`]},publicSurface:{documented:[`button`,`input`,`select`,`card`,`badge`,`checkbox`,`dialog`,`form-field-shell`,`data-table`,`alert`,`charts`,`sidebar`,`file-upload`,`progress`],standalone:`accordion.divider.segmented-control.skeleton.spinner.command-bar.quantity-stepper.inline-editable.repeater-field.empty-search-state.avatar.code-block.data-state.descriptions.keyboard-shortcut.key-value-card.kanban.list.property-grid.statistic.tag-list.tree-view.skeleton-table.skeleton-form.copy-button.copy-field.section.stack.sticky-footer-bar.affix.calendar-scheduler.dual-list-picker.menubar.navigation-menu.resizable-panel.rich-text-editor.tour.qr-code.tag.aspect-ratio.carousel.float-button.typography.watermark.cascader.json-input.mention-input.time-picker`.split(`.`)},migrationAliases:{"form-search-input":`form-input`,"form-password-input":`form-input`,"form-number-input":`form-input`,"form-phone-input":`form-input`,"form-date-input":`form-input`,"form-async-select":`form-select`,"app-sidebar":`sidebar`,"smart-card":`info-card`}};exports.default=e;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tembro",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Reusable React UI kit with dashboard-ready components, CLI registry helpers, and TypeScript support.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -149,6 +149,7 @@
|
|
|
149
149
|
"test:render": "vitest run --config vitest.config.ts",
|
|
150
150
|
"test:fixtures": "node scripts/fixture-smoke.mjs",
|
|
151
151
|
"test:run": "npm run test:types && npm run test:render && npm run test:a11y && npm run test:registry && npm run test:family-governance && npm run test:root-exports && node scripts/ensure-build-output.mjs && npm run test:build-output && npm run check:showcase-quality",
|
|
152
|
+
"release:quick": "npm run test:types && npm run test:registry && npm run test:root-exports && npx vitest run tests/render/async-select.test.tsx tests/render/form-select.test.tsx tests/render/base-primitives.test.tsx --config vitest.config.ts && npm run build:all && npm run check-version-sync && npm run pack:dry-run",
|
|
152
153
|
"release:gate": "npm run lint && npm run build:all && npm run check-version-sync && npm run test:run && npm run test:cli && npm run test:fixtures && npm run pack:dry-run"
|
|
153
154
|
},
|
|
154
155
|
"peerDependencies": {
|
|
@@ -1180,4 +1180,4 @@ ${t}`),e.forEach(r=>{let i=ne[r],n=La(r),o=qa(r,i.category),s=i.registryDependen
|
|
|
1180
1180
|
${n}`),o.sort().forEach(s=>{let a=ne[s],c=La(s),u=qa(s,a.category),l=a.registryDependencies?.length?` -> ${a.registryDependencies.join(", ")}`:"";console.log(` ${s} [${c}/${u}]${l}`);});console.log(`
|
|
1181
1181
|
Status:`),console.log(" stable = safe public API"),console.log(" preview = usable but API may change"),console.log(" experimental = not ready for stable app contracts"),console.log(" internal = helper metadata"),console.log(`
|
|
1182
1182
|
Distribution:`),console.log(" foundation = small runtime-safe primitives, hooks, and helpers"),console.log(" source-copy = copy into app source with init/add and edit locally"),console.log(" system = larger product surfaces, kits, and patterns; prefer source-copy only"),console.log(`
|
|
1183
|
-
Usage:`),console.log(` ${$e("add button input data-table")}`),console.log(` ${$e("add form --overwrite")}`);}var Ua=Me(rt());async function Ly(t){let e=process.cwd(),r=U__default.default.join(e,"tembro.json"),i=Ua.default.existsSync(r)?await Ua.default.readJson(r):{},n=t??i.cssPath??i.globalCssPath??"src/index.css",o=await An({cwd:e,cssPath:n});C.success(`Tembro theme CSS yangilandi: ${o}`);}var Je=Me(rt());var qy={minimal:[{source:"src/lib/utils.ts",target:"{utils}"},{source:"src/components/ui/button",target:"{ui}/button"},{source:"src/components/ui/input",target:"{ui}/input"},{source:"src/components/ui/card",target:"{ui}/card"},{source:"src/components/ui/badge",target:"{ui}/badge"}],dashboard:[{source:"src/lib/utils.ts",target:"{utils}"},{source:"src/components/ui/button",target:"{ui}/button"},{source:"src/components/ui/input",target:"{ui}/input"},{source:"src/components/ui/card",target:"{ui}/card"},{source:"src/components/ui/badge",target:"{ui}/badge"},{source:"src/components/ui/dropdown-menu.tsx",target:"{ui}/dropdown-menu.tsx"},{source:"src/components/ui/skeleton.tsx",target:"{ui}/skeleton.tsx"},{source:"src/components/ui/tabs.tsx",target:"{ui}/tabs.tsx"},{source:"src/components/feedback/page-state.tsx",target:"{components}/feedback/page-state.tsx"},{source:"src/components/filters/filter-bar.tsx",target:"{components}/filters/filter-bar.tsx"},{source:"src/components/display/property-grid.tsx",target:"{components}/display/property-grid.tsx"},{source:"src/components/display/smart-card.tsx",target:"{components}/display/smart-card.tsx"},{source:"src/components/display/entity-card.tsx",target:"{components}/display/entity-card.tsx"},{source:"src/components/data-table/data-table.tsx",target:"{components}/data-table/data-table.tsx"}]};function c1(t,e="@"){return e==="@"?t:t.replaceAll("@/",`${e}/`)}function l1(t,e){let r=e.paths?.components??"src/components",i=e.paths?.ui??"src/components/ui",n=e.utilsPath??"src/lib/utils.ts";return t.replaceAll("{components}",r).replaceAll("{ui}",i).replaceAll("{utils}",n)}async function By(t,e,r,i){if((await Je.default.stat(t)).isDirectory()){let o=await Je.default.readdir(t,{withFileTypes:true});for(let s of o)await By(U__default.default.join(t,s.name),U__default.default.join(e,s.name),r,i);return}if(i.dryRun){C.info(`[dry-run] ${t} -> ${e}`);return}if(Je.default.existsSync(e)&&!i.overwrite){C.warn(`${e} allaqachon mavjud.`);return}await Je.default.ensureDir(U__default.default.dirname(e)),await Je.default.writeFile(e,c1(await Je.default.readFile(t,"utf8"),r)),C.success(`${e} qo\u2018shildi.`);}async function Uy(t,e={}){let r=qy[t];r||(C.error(`Preset topilmadi: ${t}`),process.exit(1));let i=process.cwd(),n=U__default.default.join(i,"tembro.json");Je.default.existsSync(n)||(C.error("tembro.json topilmadi. Avval init qiling."),process.exit(1));let o=await Je.default.readJson(n),s=In((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));for(let a of r){let c=U__default.default.join(s,a.source),u=U__default.default.join(i,l1(a.target,o));await By(c,u,o.alias,e);}}var Ot=new Tt;Ot.name("tembro").description("Tembro source-copy CLI").version("1.0.
|
|
1183
|
+
Usage:`),console.log(` ${$e("add button input data-table")}`),console.log(` ${$e("add form --overwrite")}`);}var Ua=Me(rt());async function Ly(t){let e=process.cwd(),r=U__default.default.join(e,"tembro.json"),i=Ua.default.existsSync(r)?await Ua.default.readJson(r):{},n=t??i.cssPath??i.globalCssPath??"src/index.css",o=await An({cwd:e,cssPath:n});C.success(`Tembro theme CSS yangilandi: ${o}`);}var Je=Me(rt());var qy={minimal:[{source:"src/lib/utils.ts",target:"{utils}"},{source:"src/components/ui/button",target:"{ui}/button"},{source:"src/components/ui/input",target:"{ui}/input"},{source:"src/components/ui/card",target:"{ui}/card"},{source:"src/components/ui/badge",target:"{ui}/badge"}],dashboard:[{source:"src/lib/utils.ts",target:"{utils}"},{source:"src/components/ui/button",target:"{ui}/button"},{source:"src/components/ui/input",target:"{ui}/input"},{source:"src/components/ui/card",target:"{ui}/card"},{source:"src/components/ui/badge",target:"{ui}/badge"},{source:"src/components/ui/dropdown-menu.tsx",target:"{ui}/dropdown-menu.tsx"},{source:"src/components/ui/skeleton.tsx",target:"{ui}/skeleton.tsx"},{source:"src/components/ui/tabs.tsx",target:"{ui}/tabs.tsx"},{source:"src/components/feedback/page-state.tsx",target:"{components}/feedback/page-state.tsx"},{source:"src/components/filters/filter-bar.tsx",target:"{components}/filters/filter-bar.tsx"},{source:"src/components/display/property-grid.tsx",target:"{components}/display/property-grid.tsx"},{source:"src/components/display/smart-card.tsx",target:"{components}/display/smart-card.tsx"},{source:"src/components/display/entity-card.tsx",target:"{components}/display/entity-card.tsx"},{source:"src/components/data-table/data-table.tsx",target:"{components}/data-table/data-table.tsx"}]};function c1(t,e="@"){return e==="@"?t:t.replaceAll("@/",`${e}/`)}function l1(t,e){let r=e.paths?.components??"src/components",i=e.paths?.ui??"src/components/ui",n=e.utilsPath??"src/lib/utils.ts";return t.replaceAll("{components}",r).replaceAll("{ui}",i).replaceAll("{utils}",n)}async function By(t,e,r,i){if((await Je.default.stat(t)).isDirectory()){let o=await Je.default.readdir(t,{withFileTypes:true});for(let s of o)await By(U__default.default.join(t,s.name),U__default.default.join(e,s.name),r,i);return}if(i.dryRun){C.info(`[dry-run] ${t} -> ${e}`);return}if(Je.default.existsSync(e)&&!i.overwrite){C.warn(`${e} allaqachon mavjud.`);return}await Je.default.ensureDir(U__default.default.dirname(e)),await Je.default.writeFile(e,c1(await Je.default.readFile(t,"utf8"),r)),C.success(`${e} qo\u2018shildi.`);}async function Uy(t,e={}){let r=qy[t];r||(C.error(`Preset topilmadi: ${t}`),process.exit(1));let i=process.cwd(),n=U__default.default.join(i,"tembro.json");Je.default.existsSync(n)||(C.error("tembro.json topilmadi. Avval init qiling."),process.exit(1));let o=await Je.default.readJson(n),s=In((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));for(let a of r){let c=U__default.default.join(s,a.source),u=U__default.default.join(i,l1(a.target,o));await By(c,u,o.alias,e);}}var Ot=new Tt;Ot.name("tembro").description("Tembro source-copy CLI").version("1.0.2");Ot.command("init").description("Initialize local Tembro source files in your project").option("--template <template>","Project defaults: vite or next","vite").option("--skip-install","Do not install base dependencies").option("-y, --defaults","Use template defaults without interactive prompts").action(Py);Ot.command("preset").description("Add a source-copy preset to your project").argument("<name>","preset name: minimal or dashboard").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(Uy);Ot.command("list").description("List available registry components").action(jy);Ot.command("add").description("Copy component source files into your project").argument("[components...]","components to add").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action($y);Ot.command("theme").description("Write or update Tembro theme CSS in your global CSS file").argument("[cssPath]","global CSS path, default from tembro.json or src/index.css").action(Ly);Ot.parse();
|
|
@@ -9,9 +9,11 @@ export type CarouselProps = React.ComponentProps<"div"> & {
|
|
|
9
9
|
defaultIndex?: number
|
|
10
10
|
onIndexChange?: (index: number) => void
|
|
11
11
|
loop?: boolean
|
|
12
|
+
variant?: "default" | "hero" | "minimal"
|
|
12
13
|
showDots?: boolean
|
|
13
14
|
showArrows?: boolean
|
|
14
15
|
keyboard?: boolean
|
|
16
|
+
ariaLabel?: string
|
|
15
17
|
previousLabel?: string
|
|
16
18
|
nextLabel?: string
|
|
17
19
|
}
|
|
@@ -29,9 +31,11 @@ function Carousel({
|
|
|
29
31
|
defaultIndex = 0,
|
|
30
32
|
onIndexChange,
|
|
31
33
|
loop = false,
|
|
34
|
+
variant = "default",
|
|
32
35
|
showDots = true,
|
|
33
36
|
showArrows = true,
|
|
34
37
|
keyboard = true,
|
|
38
|
+
ariaLabel = "Carousel",
|
|
35
39
|
previousLabel = "Previous slide",
|
|
36
40
|
nextLabel = "Next slide",
|
|
37
41
|
className,
|
|
@@ -55,6 +59,10 @@ function Carousel({
|
|
|
55
59
|
return (
|
|
56
60
|
<div
|
|
57
61
|
data-slot="carousel"
|
|
62
|
+
data-variant={variant}
|
|
63
|
+
role="region"
|
|
64
|
+
aria-roledescription="carousel"
|
|
65
|
+
aria-label={ariaLabel}
|
|
58
66
|
className={cn("grid gap-3", className)}
|
|
59
67
|
onKeyDown={(event) => {
|
|
60
68
|
if (!keyboard || items.length <= 1) return
|
|
@@ -69,15 +77,21 @@ function Carousel({
|
|
|
69
77
|
}}
|
|
70
78
|
{...props}
|
|
71
79
|
>
|
|
72
|
-
<div className=
|
|
73
|
-
|
|
80
|
+
<div className={cn(
|
|
81
|
+
"relative overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08))]",
|
|
82
|
+
variant === "hero" && "min-h-72",
|
|
83
|
+
variant === "minimal" && "rounded-[var(--radius-md)] shadow-none"
|
|
84
|
+
)}>
|
|
85
|
+
<div className="transition-transform duration-300 ease-out" aria-live="polite">
|
|
86
|
+
{items[activeIndex]}
|
|
87
|
+
</div>
|
|
74
88
|
{showArrows && items.length > 1 ? (
|
|
75
89
|
<>
|
|
76
90
|
<Button
|
|
77
91
|
type="button"
|
|
78
|
-
variant="secondary"
|
|
92
|
+
variant={variant === "hero" ? "default" : "secondary"}
|
|
79
93
|
size="icon-sm"
|
|
80
|
-
className="absolute left-3 top-
|
|
94
|
+
className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg"
|
|
81
95
|
disabled={!canGoPrevious}
|
|
82
96
|
aria-label={previousLabel}
|
|
83
97
|
onClick={() => setActiveIndex(activeIndex - 1)}
|
|
@@ -86,9 +100,9 @@ function Carousel({
|
|
|
86
100
|
</Button>
|
|
87
101
|
<Button
|
|
88
102
|
type="button"
|
|
89
|
-
variant="secondary"
|
|
103
|
+
variant={variant === "hero" ? "default" : "secondary"}
|
|
90
104
|
size="icon-sm"
|
|
91
|
-
className="absolute right-3 top-
|
|
105
|
+
className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg"
|
|
92
106
|
disabled={!canGoNext}
|
|
93
107
|
aria-label={nextLabel}
|
|
94
108
|
onClick={() => setActiveIndex(activeIndex + 1)}
|
|
@@ -99,14 +113,18 @@ function Carousel({
|
|
|
99
113
|
) : null}
|
|
100
114
|
</div>
|
|
101
115
|
{showDots && items.length > 1 && (
|
|
102
|
-
<div className="flex items-center justify-center gap-2">
|
|
116
|
+
<div className="flex items-center justify-center gap-2" role="tablist" aria-label={`${ariaLabel} slides`}>
|
|
103
117
|
{items.map((_, itemIndex) => (
|
|
104
118
|
<button
|
|
105
119
|
key={itemIndex}
|
|
106
120
|
type="button"
|
|
121
|
+
role="tab"
|
|
107
122
|
aria-label={`Go to slide ${itemIndex + 1}`}
|
|
108
|
-
aria-
|
|
109
|
-
className={cn(
|
|
123
|
+
aria-selected={itemIndex === activeIndex}
|
|
124
|
+
className={cn(
|
|
125
|
+
"h-2.5 rounded-full bg-muted-foreground/30 transition-[width,background-color,opacity] hover:bg-muted-foreground/55",
|
|
126
|
+
itemIndex === activeIndex ? "w-7 bg-primary" : "w-2.5"
|
|
127
|
+
)}
|
|
110
128
|
onClick={() => setActiveIndex(itemIndex)}
|
|
111
129
|
/>
|
|
112
130
|
))}
|
|
@@ -116,8 +134,8 @@ function Carousel({
|
|
|
116
134
|
)
|
|
117
135
|
}
|
|
118
136
|
|
|
119
|
-
function CarouselItem({ className, ...props }: CarouselItemProps) {
|
|
120
|
-
return <div data-slot="carousel-item" className={cn("p-
|
|
121
|
-
}
|
|
137
|
+
function CarouselItem({ className, ...props }: CarouselItemProps) {
|
|
138
|
+
return <div data-slot="carousel-item" className={cn("min-h-40 p-5 sm:p-6", className)} {...props} />
|
|
139
|
+
}
|
|
122
140
|
|
|
123
141
|
export { Carousel, CarouselItem }
|
|
@@ -314,7 +314,7 @@ function AsyncStateMessage({
|
|
|
314
314
|
<div
|
|
315
315
|
data-slot="async-select-state"
|
|
316
316
|
className={cn(
|
|
317
|
-
"rounded-[
|
|
317
|
+
"rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-3 text-sm leading-5 text-muted-foreground",
|
|
318
318
|
className
|
|
319
319
|
)}
|
|
320
320
|
>
|
|
@@ -356,18 +356,18 @@ function AsyncOptionButton<
|
|
|
356
356
|
data-selected={selected || undefined}
|
|
357
357
|
data-disabled={option.disabled || undefined}
|
|
358
358
|
className={cn(
|
|
359
|
-
"flex w-full items-start gap-2 rounded-[
|
|
359
|
+
"flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50",
|
|
360
360
|
optionClassName
|
|
361
361
|
)}
|
|
362
362
|
onClick={() => onSelect(option)}
|
|
363
363
|
>
|
|
364
|
-
<span className="flex size-4 shrink-0 items-center justify-center">
|
|
365
|
-
{selected && <CheckIcon className="size-
|
|
364
|
+
<span className={cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", selected && "border-primary bg-primary text-primary-foreground")}>
|
|
365
|
+
{selected && <CheckIcon className="size-3" />}
|
|
366
366
|
</span>
|
|
367
367
|
<span className="min-w-0 flex-1">
|
|
368
368
|
{renderOption?.(option, { selected }) ?? (
|
|
369
369
|
<span className="flex min-w-0 flex-col">
|
|
370
|
-
<span className="truncate">{option.label}</span>
|
|
370
|
+
<span className="truncate font-medium">{option.label}</span>
|
|
371
371
|
{option.description && (
|
|
372
372
|
<span className="truncate text-xs text-muted-foreground">{option.description}</span>
|
|
373
373
|
)}
|
|
@@ -397,7 +397,7 @@ function AsyncCreateButton({
|
|
|
397
397
|
type="button"
|
|
398
398
|
disabled={isCreating}
|
|
399
399
|
data-slot="async-select-create"
|
|
400
|
-
className="flex w-full items-center gap-2 rounded-[
|
|
400
|
+
className="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50"
|
|
401
401
|
onClick={onCreate}
|
|
402
402
|
>
|
|
403
403
|
<span className="flex size-4 shrink-0 items-center justify-center">
|
|
@@ -625,17 +625,17 @@ function AsyncSelect<
|
|
|
625
625
|
aria-invalid={invalid || undefined}
|
|
626
626
|
data-slot="async-select-trigger"
|
|
627
627
|
className={cn(
|
|
628
|
-
"min-h-11 w-full justify-between",
|
|
628
|
+
"min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
|
|
629
629
|
triggerClassName
|
|
630
630
|
)}
|
|
631
631
|
onKeyDown={handleTriggerKeyDown}
|
|
632
632
|
/>
|
|
633
633
|
}
|
|
634
634
|
>
|
|
635
|
-
<span className="min-w-0 flex-1 text-left">
|
|
635
|
+
<span className="min-w-0 flex-1 text-left">
|
|
636
636
|
{currentOption ? (
|
|
637
|
-
<span className="flex min-w-0 flex-col">
|
|
638
|
-
<span className="truncate">
|
|
637
|
+
<span className="flex min-w-0 flex-col gap-0.5">
|
|
638
|
+
<span className="truncate font-semibold">
|
|
639
639
|
{renderValue?.(currentOption) ?? currentOption.label}
|
|
640
640
|
</span>
|
|
641
641
|
{currentOption.disabled && currentOption.disabledReason && (
|
|
@@ -643,7 +643,7 @@ function AsyncSelect<
|
|
|
643
643
|
)}
|
|
644
644
|
</span>
|
|
645
645
|
) : (
|
|
646
|
-
<span className="truncate">{labels?.placeholder ?? "Select"}</span>
|
|
646
|
+
<span className="truncate text-muted-foreground">{labels?.placeholder ?? "Select"}</span>
|
|
647
647
|
)}
|
|
648
648
|
</span>
|
|
649
649
|
<span className="ml-2 flex shrink-0 items-center gap-1">
|
|
@@ -671,7 +671,7 @@ function AsyncSelect<
|
|
|
671
671
|
align="start"
|
|
672
672
|
data-slot="async-select-content"
|
|
673
673
|
className={cn(
|
|
674
|
-
"w-(--anchor-width) gap-3 rounded-[var(--radius-
|
|
674
|
+
"w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]",
|
|
675
675
|
contentClassName
|
|
676
676
|
)}
|
|
677
677
|
>
|
|
@@ -686,7 +686,7 @@ function AsyncSelect<
|
|
|
686
686
|
/>
|
|
687
687
|
</div>
|
|
688
688
|
|
|
689
|
-
<div className="max-h-
|
|
689
|
+
<div className="max-h-72 space-y-1 overflow-y-auto pr-1">
|
|
690
690
|
{searchTooShort && flatOptions.length === 0 && (
|
|
691
691
|
renderMinSearch?.(state) ?? (
|
|
692
692
|
<AsyncStateMessage>
|
|
@@ -1043,7 +1043,7 @@ function AsyncMultiSelect<
|
|
|
1043
1043
|
aria-invalid={invalid || undefined}
|
|
1044
1044
|
data-slot="async-select-trigger"
|
|
1045
1045
|
className={cn(
|
|
1046
|
-
"min-h-11 w-full justify-between",
|
|
1046
|
+
"min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
|
|
1047
1047
|
triggerClassName
|
|
1048
1048
|
)}
|
|
1049
1049
|
onKeyDown={handleTriggerKeyDown}
|
|
@@ -1057,7 +1057,7 @@ function AsyncMultiSelect<
|
|
|
1057
1057
|
key={option.value}
|
|
1058
1058
|
data-slot="async-select-tag"
|
|
1059
1059
|
className={cn(
|
|
1060
|
-
"inline-flex max-w-full items-center gap-1 rounded-
|
|
1060
|
+
"inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground",
|
|
1061
1061
|
tagClassName
|
|
1062
1062
|
)}
|
|
1063
1063
|
>
|
|
@@ -1076,7 +1076,7 @@ function AsyncMultiSelect<
|
|
|
1076
1076
|
role="button"
|
|
1077
1077
|
tabIndex={0}
|
|
1078
1078
|
data-slot="async-select-tag-remove"
|
|
1079
|
-
className="rounded-full text-muted-foreground transition-colors hover:text-foreground"
|
|
1079
|
+
className="rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground"
|
|
1080
1080
|
aria-label={`Remove ${getOptionLabelText(option)}`}
|
|
1081
1081
|
onClick={(event) => {
|
|
1082
1082
|
stopInteractivePropagation(event)
|
|
@@ -1101,7 +1101,7 @@ function AsyncMultiSelect<
|
|
|
1101
1101
|
role="button"
|
|
1102
1102
|
tabIndex={0}
|
|
1103
1103
|
data-slot="async-select-clear"
|
|
1104
|
-
className="rounded-full border p-1 text-muted-foreground transition-colors hover:text-foreground"
|
|
1104
|
+
className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
|
|
1105
1105
|
aria-label={labels?.clearAll ?? labels?.clear ?? "Clear all"}
|
|
1106
1106
|
onClick={handleClear}
|
|
1107
1107
|
onKeyDown={(event) => {
|
|
@@ -1121,7 +1121,7 @@ function AsyncMultiSelect<
|
|
|
1121
1121
|
align="start"
|
|
1122
1122
|
data-slot="async-select-content"
|
|
1123
1123
|
className={cn(
|
|
1124
|
-
"w-(--anchor-width) gap-3 rounded-[var(--radius-
|
|
1124
|
+
"w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]",
|
|
1125
1125
|
contentClassName
|
|
1126
1126
|
)}
|
|
1127
1127
|
>
|
|
@@ -1136,7 +1136,7 @@ function AsyncMultiSelect<
|
|
|
1136
1136
|
/>
|
|
1137
1137
|
</div>
|
|
1138
1138
|
|
|
1139
|
-
<div data-slot="async-select-meta" className="flex flex-wrap items-center justify-between gap-2 rounded-[
|
|
1139
|
+
<div data-slot="async-select-meta" className="flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground">
|
|
1140
1140
|
{hasValue && labels?.selectedCount && <span>{labels.selectedCount(values.length)}</span>}
|
|
1141
1141
|
{isMaxReached &&
|
|
1142
1142
|
(renderMaxSelected?.(state) ?? (
|
|
@@ -1147,7 +1147,7 @@ function AsyncMultiSelect<
|
|
|
1147
1147
|
<button
|
|
1148
1148
|
type="button"
|
|
1149
1149
|
data-slot="async-select-meta-action"
|
|
1150
|
-
className="rounded-
|
|
1150
|
+
className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
|
|
1151
1151
|
onClick={handleSelectAllVisible}
|
|
1152
1152
|
>
|
|
1153
1153
|
{labels?.selectAll ?? "Select all"}
|
|
@@ -1157,7 +1157,7 @@ function AsyncMultiSelect<
|
|
|
1157
1157
|
<button
|
|
1158
1158
|
type="button"
|
|
1159
1159
|
data-slot="async-select-meta-action"
|
|
1160
|
-
className="rounded-
|
|
1160
|
+
className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
|
|
1161
1161
|
onClick={() => onValueChange?.([], [])}
|
|
1162
1162
|
>
|
|
1163
1163
|
{labels?.clearAll ?? labels?.clear ?? "Clear all"}
|
|
@@ -1166,7 +1166,7 @@ function AsyncMultiSelect<
|
|
|
1166
1166
|
</div>
|
|
1167
1167
|
</div>
|
|
1168
1168
|
|
|
1169
|
-
<div className="max-h-
|
|
1169
|
+
<div className="max-h-72 space-y-1 overflow-y-auto pr-1">
|
|
1170
1170
|
{searchTooShort && flatOptions.length === 0 && (
|
|
1171
1171
|
renderMinSearch?.(state) ?? (
|
|
1172
1172
|
<AsyncStateMessage>
|
|
@@ -9,7 +9,7 @@ import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
|
|
9
9
|
export type SelectRootProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
|
|
10
10
|
export type SelectGroupProps = SelectPrimitive.Group.Props
|
|
11
11
|
export type SelectValueProps = SelectPrimitive.Value.Props
|
|
12
|
-
export type SelectTriggerProps = SelectPrimitive.Trigger.Props & { size?: "sm" | "default" }
|
|
12
|
+
export type SelectTriggerProps = SelectPrimitive.Trigger.Props & { size?: "sm" | "default" | "lg" }
|
|
13
13
|
export type SelectContentProps = SelectPrimitive.Popup.Props &
|
|
14
14
|
Pick<
|
|
15
15
|
SelectPrimitive.Positioner.Props,
|
|
@@ -54,7 +54,7 @@ function SelectTrigger({
|
|
|
54
54
|
data-slot="select-trigger"
|
|
55
55
|
data-size={size}
|
|
56
56
|
className={cn(
|
|
57
|
-
"flex w-
|
|
57
|
+
"flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-10 data-[size=lg]:h-11 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
58
58
|
className
|
|
59
59
|
)}
|
|
60
60
|
{...props}
|
|
@@ -92,7 +92,7 @@ function SelectContent({
|
|
|
92
92
|
<SelectPrimitive.Popup
|
|
93
93
|
data-slot="select-content"
|
|
94
94
|
data-align-trigger={alignItemWithTrigger}
|
|
95
|
-
className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-
|
|
95
|
+
className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
|
|
96
96
|
{...props}
|
|
97
97
|
>
|
|
98
98
|
<SelectScrollUpButton />
|
|
@@ -126,7 +126,7 @@ function SelectItem({
|
|
|
126
126
|
<SelectPrimitive.Item
|
|
127
127
|
data-slot="select-item"
|
|
128
128
|
className={cn(
|
|
129
|
-
"relative flex w-full cursor-default items-center gap-
|
|
129
|
+
"relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] data-[highlighted]:border-[color:color-mix(in_oklch,var(--primary),transparent_72%)] data-[highlighted]:bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] data-[highlighted]:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2",
|
|
130
130
|
className
|
|
131
131
|
)}
|
|
132
132
|
{...props}
|