admin-ui-starter-kit 0.1.4 → 0.4.2

package/dist/showcase/assets/frame-CkLEABTd.js

@@ -0,0 +1,167 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,Nr as i,hr as a,mr as o,r as s,t as c,xr as l,yr as u}from"./example-BIrQab7K.js";import{t as d}from"./activity-B-FxNryB.js";import{t as f}from"./badge-check-BRAVo7dA.js";import{t as p}from"./credit-card-CYgRtM77.js";import{t as m}from"./database-BVwSMeGM.js";import{t as h}from"./shield-check-CRbBJXw2.js";import{n as g,s as _}from"./index-Cz4UGUT2.js";import{t as v}from"./props-table-BR-KjRNe.js";import{c as y,i as b,n as x,r as S,t as C,u as w}from"./item-CbiuwbAN.js";var T=t(n(),1),E=_(),D=l([`frame--component relative flex flex-col rounded-[var(--frame-radius)]`,`[--frame-radius:var(--radius-lg)]`,`[--frame-border-color:var(--border)]`,`[--frame-panel-bg:var(--card)] [--frame-panel-border-color:var(--border)]`,`gap-[var(--frame-gap)] p-[var(--frame-pad)]`],{variants:{variant:{default:`border border-[var(--frame-border-color)] bg-muted/50 bg-clip-padding`,inverse:[`border border-[var(--frame-border-color)] bg-background bg-clip-padding`,`[--frame-panel-bg:color-mix(in_oklch,var(--muted)_44%,transparent)]`,`[--frame-panel-border-color:var(--border)]`],ghost:`bg-transparent [--frame-pad:0]`},spacing:{xs:[`[--frame-gap:0.125rem] [--frame-pad:0.125rem]`,`[--frame-panel-p:0.5rem]`,`[--frame-panel-header-px:0.5rem] [--frame-panel-header-py:0.375rem]`,`[--frame-panel-footer-px:0.5rem] [--frame-panel-footer-py:0.375rem]`],sm:[`[--frame-gap:0.25rem] [--frame-pad:0.25rem]`,`[--frame-panel-p:0.75rem]`,`[--frame-panel-header-px:0.75rem] [--frame-panel-header-py:0.5rem]`,`[--frame-panel-footer-px:0.75rem] [--frame-panel-footer-py:0.5rem]`],base:[`[--frame-gap:0.375rem] [--frame-pad:0.375rem]`,`[--frame-panel-p:1rem]`,`[--frame-panel-header-px:1rem] [--frame-panel-header-py:0.75rem]`,`[--frame-panel-footer-px:1rem] [--frame-panel-footer-py:0.75rem]`],lg:[`[--frame-gap:0.5rem] [--frame-pad:0.5rem]`,`[--frame-panel-p:1.25rem]`,`[--frame-panel-header-px:1.25rem] [--frame-panel-header-py:1rem]`,`[--frame-panel-footer-px:1.25rem] [--frame-panel-footer-py:1rem]`]},stacked:{true:[`gap-0`,`[&>[data-slot=frame-panel]:not(:first-child)]:rounded-t-none`,`[&>[data-slot=frame-panel]:not(:first-child)]:border-t-0`,`[&>[data-slot=frame-panel]:not(:last-child)]:rounded-b-none`,`[&>[data-slot=frame-panel]:not(:last-child)]:before:hidden`],false:``},dense:{true:[`gap-0 p-0`,`[&>[data-slot=frame-panel]]:-mx-px`,`[&>[data-slot=frame-panel]:last-child]:-mb-px`,`[&>[data-slot=frame-panel]:not(:first-child)]:rounded-t-none`,`[&>[data-slot=frame-panel]:not(:first-child)]:border-t-0`,`[&>[data-slot=frame-panel]:not(:last-child)]:rounded-b-none`],false:``}},defaultVariants:{variant:`default`,spacing:`base`,stacked:!1,dense:!1}}),O={sm:`sm`,base:`base`,lg:`lg`},k=(0,T.forwardRef)(function({variant:e=`default`,spacing:t,stacked:n=!1,dense:r=!1,className:a,...o},s){let{defaultPadding:c}=i(),l=t??O[c??`sm`]??`sm`;return(0,E.jsx)(`div`,{ref:s,"data-slot":`frame`,"data-variant":e,"data-spacing":l,"data-stacked":n?``:void 0,"data-dense":r?``:void 0,className:g(D({variant:e,spacing:l,stacked:n,dense:r}),a),...o})});k.displayName=`Frame`;var A=(0,T.forwardRef)(function({fit:e=!1,className:t,...n},r){return(0,E.jsx)(`div`,{ref:r,"data-slot":`frame-panel`,"data-fit":e?``:void 0,className:g(`frame--panel relative grow overflow-hidden rounded-[var(--frame-radius)] border border-[var(--frame-panel-border-color)] bg-[var(--frame-panel-bg)] bg-clip-padding shadow-xs`,`before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-radius)-1px)] before:shadow-[1px_1px_2px_color-mix(in_oklch,var(--foreground)_3%,transparent)] before:content-[""]`,e?`p-0`:`p-[var(--frame-panel-p)]`,t),...n})});A.displayName=`FramePanel`;var j=(0,T.forwardRef)(function({className:e,...t},n){return(0,E.jsx)(`header`,{ref:n,"data-slot":`frame-header`,className:g(`frame--header flex flex-col px-[var(--frame-panel-header-px)] py-[var(--frame-panel-header-py)]`,e),...t})});j.displayName=`FrameHeader`;var M=(0,T.forwardRef)(function({className:e,children:t,...n},i){return(0,E.jsx)(`div`,{ref:i,"data-slot":`frame-title`,className:g(`frame--title`,e),...n,children:(0,E.jsx)(r,{tag:`span`,weight:`semibold`,className:`leading-snug`,children:t})})});M.displayName=`FrameTitle`;var N=(0,T.forwardRef)(function({className:e,children:t,...n},i){return(0,E.jsx)(`div`,{ref:i,"data-slot":`frame-description`,className:g(`frame--description mt-0.5`,e),...n,children:(0,E.jsx)(r,{tag:`span`,size:`xs`,type:`secondary`,className:`leading-normal`,children:t})})});N.displayName=`FrameDescription`;var P=(0,T.forwardRef)(function({className:e,...t},n){return(0,E.jsx)(`footer`,{ref:n,"data-slot":`frame-footer`,className:g(`frame--footer flex flex-col gap-1 px-[var(--frame-panel-footer-px)] py-[var(--frame-panel-footer-py)]`,e),...t})});P.displayName=`FrameFooter`;var F=e({DefaultFrame:()=>R,DenseFitPanel:()=>V,FrameVariantMatrix:()=>H,InverseFrame:()=>B,StackedPanels:()=>z}),I=[{id:`sync`,title:`Catalog sync`,description:`Last completed 8 minutes ago`,icon:m,badge:`Healthy`},{id:`payments`,title:`Payments`,description:`Stripe webhooks are processing normally`,icon:p,badge:`Live`},{id:`security`,title:`Security review`,description:`2 team members need SSO confirmation`,icon:h,badge:`Review`}],L=[{variant:`default`,spacing:`xs`,title:`Default / xs`},{variant:`inverse`,spacing:`sm`,title:`Inverse / sm`},{variant:`ghost`,spacing:`base`,title:`Ghost / base`},{variant:`default`,spacing:`lg`,title:`Default / lg`}];function R(){return(0,E.jsxs)(k,{className:`w-full max-w-xl`,children:[(0,E.jsxs)(j,{children:[(0,E.jsx)(M,{children:`Workspace health`}),(0,E.jsx)(N,{children:`Grouped panels with one shared outer frame.`})]}),(0,E.jsx)(A,{children:(0,E.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,E.jsxs)(`div`,{children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:`Uptime`}),(0,E.jsx)(r,{weight:`semibold`,children:`99.98%`})]}),(0,E.jsxs)(`div`,{children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:`Open alerts`}),(0,E.jsx)(r,{weight:`semibold`,children:`3`})]}),(0,E.jsxs)(`div`,{children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:`Queued jobs`}),(0,E.jsx)(r,{weight:`semibold`,children:`18`})]})]})}),(0,E.jsx)(P,{children:(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:`Updated just now`})})]})}function z(){return(0,E.jsx)(k,{stacked:!0,spacing:`sm`,className:`w-full max-w-xl`,children:I.map(e=>{let t=e.icon;return(0,E.jsx)(A,{children:(0,E.jsxs)(C,{className:`rounded-none p-0`,children:[(0,E.jsx)(y,{variant:`icon`,children:(0,E.jsx)(t,{})}),(0,E.jsxs)(S,{children:[(0,E.jsx)(w,{children:e.title}),(0,E.jsx)(b,{children:e.description})]}),(0,E.jsx)(x,{children:(0,E.jsx)(u,{variant:e.badge===`Review`?`warning`:`success`,children:e.badge})})]})},e.id)})})}function B(){return(0,E.jsx)(k,{variant:`inverse`,spacing:`base`,className:`w-full max-w-xl`,children:(0,E.jsx)(A,{children:(0,E.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,E.jsxs)(`div`,{className:`space-y-1`,children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:`Monthly automation run`}),(0,E.jsx)(r,{weight:`semibold`,children:`12,842 tasks completed`}),(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:`Average queue latency is down 18% from last week.`})]}),(0,E.jsxs)(u,{variant:`info`,children:[(0,E.jsx)(d,{className:`size-3`}),`Live`]})]})})})}function V(){return(0,E.jsx)(k,{dense:!0,className:`w-full max-w-xl`,children:(0,E.jsx)(A,{fit:!0,children:(0,E.jsxs)(`div`,{className:`grid grid-cols-[1fr_auto] items-center gap-3 px-3 py-2`,children:[(0,E.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,E.jsx)(f,{className:`size-4 text-success`}),(0,E.jsx)(r,{weight:`semibold`,children:`Payout batch approved`})]}),(0,E.jsx)(s,{variant:`secondary`,buttonStyle:`ghost`,children:`View`})]})})})}function H(){return(0,E.jsx)(`div`,{className:`grid w-full gap-3 md:grid-cols-2`,children:L.map(e=>(0,E.jsxs)(k,{variant:e.variant,spacing:e.spacing,children:[(0,E.jsxs)(j,{children:[(0,E.jsx)(M,{children:e.title}),(0,E.jsx)(N,{children:`Provider-aware spacing with stable frame hooks.`})]}),(0,E.jsx)(A,{children:(0,E.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:`Review queue`}),(0,E.jsx)(u,{variant:e.variant===`ghost`?`secondary`:`info`,children:`12 open`})]})})]},`${e.variant}-${e.spacing}`))})}var U=`import { Activity, BadgeCheck, CreditCard, Database, ShieldCheck } from 'lucide-react';
+
+import {
+	Frame,
+	FrameDescription,
+	FrameFooter,
+	FrameHeader,
+	FramePanel,
+	FrameTitle,
+} from '@/components/base/frame';
+import {
+	Item,
+	ItemActions,
+	ItemContent,
+	ItemDescription,
+	ItemMedia,
+	ItemTitle,
+} from '@/components/base/item';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Text } from '@/components/typography';
+
+const systemRows = [
+	{ id: 'sync', title: 'Catalog sync', description: 'Last completed 8 minutes ago', icon: Database, badge: 'Healthy' },
+	{ id: 'payments', title: 'Payments', description: 'Stripe webhooks are processing normally', icon: CreditCard, badge: 'Live' },
+	{ id: 'security', title: 'Security review', description: '2 team members need SSO confirmation', icon: ShieldCheck, badge: 'Review' },
+];
+
+const frameMatrix = [
+	{ variant: 'default', spacing: 'xs', title: 'Default / xs' },
+	{ variant: 'inverse', spacing: 'sm', title: 'Inverse / sm' },
+	{ variant: 'ghost', spacing: 'base', title: 'Ghost / base' },
+	{ variant: 'default', spacing: 'lg', title: 'Default / lg' },
+] as const;
+
+export function DefaultFrame() {
+	return (
+		<Frame className="w-full max-w-xl">
+			<FrameHeader>
+				<FrameTitle>Workspace health</FrameTitle>
+				<FrameDescription>Grouped panels with one shared outer frame.</FrameDescription>
+			</FrameHeader>
+			<FramePanel>
+				<div className="grid gap-3 sm:grid-cols-3">
+					<div>
+						<Text size="xs" type="secondary">Uptime</Text>
+						<Text weight="semibold">99.98%</Text>
+					</div>
+					<div>
+						<Text size="xs" type="secondary">Open alerts</Text>
+						<Text weight="semibold">3</Text>
+					</div>
+					<div>
+						<Text size="xs" type="secondary">Queued jobs</Text>
+						<Text weight="semibold">18</Text>
+					</div>
+				</div>
+			</FramePanel>
+			<FrameFooter>
+				<Text size="xs" type="secondary">Updated just now</Text>
+			</FrameFooter>
+		</Frame>
+	);
+}
+
+export function StackedPanels() {
+	return (
+		<Frame stacked spacing="sm" className="w-full max-w-xl">
+			{systemRows.map((row) => {
+				const Icon = row.icon;
+				return (
+					<FramePanel key={row.id}>
+						<Item className="rounded-none p-0">
+							<ItemMedia variant="icon">
+								<Icon />
+							</ItemMedia>
+							<ItemContent>
+								<ItemTitle>{row.title}</ItemTitle>
+								<ItemDescription>{row.description}</ItemDescription>
+							</ItemContent>
+							<ItemActions>
+								<Badge variant={row.badge === 'Review' ? 'warning' : 'success'}>{row.badge}</Badge>
+							</ItemActions>
+						</Item>
+					</FramePanel>
+				);
+			})}
+		</Frame>
+	);
+}
+
+export function InverseFrame() {
+	return (
+		<Frame variant="inverse" spacing="base" className="w-full max-w-xl">
+			<FramePanel>
+				<div className="flex items-start justify-between gap-3">
+					<div className="space-y-1">
+						<Text size="xs" type="secondary">Monthly automation run</Text>
+						<Text weight="semibold">12,842 tasks completed</Text>
+						<Text size="xs" type="secondary">Average queue latency is down 18% from last week.</Text>
+					</div>
+					<Badge variant="info">
+						<Activity className="size-3" />
+						Live
+					</Badge>
+				</div>
+			</FramePanel>
+		</Frame>
+	);
+}
+
+export function DenseFitPanel() {
+	return (
+		<Frame dense className="w-full max-w-xl">
+			<FramePanel fit>
+				<div className="grid grid-cols-[1fr_auto] items-center gap-3 px-3 py-2">
+					<div className="flex items-center gap-2">
+						<BadgeCheck className="size-4 text-success" />
+						<Text weight="semibold">Payout batch approved</Text>
+					</div>
+					<Button variant="secondary" buttonStyle="ghost">View</Button>
+				</div>
+			</FramePanel>
+		</Frame>
+	);
+}
+
+export function FrameVariantMatrix() {
+	return (
+		<div className="grid w-full gap-3 md:grid-cols-2">
+			{frameMatrix.map((item) => (
+				<Frame
+					key={\`\${item.variant}-\${item.spacing}\`}
+					variant={item.variant}
+					spacing={item.spacing}
+				>
+					<FrameHeader>
+						<FrameTitle>{item.title}</FrameTitle>
+						<FrameDescription>Provider-aware spacing with stable frame hooks.</FrameDescription>
+					</FrameHeader>
+					<FramePanel>
+						<div className="flex items-center justify-between gap-3">
+							<Text size="xs" type="secondary">Review queue</Text>
+							<Badge variant={item.variant === 'ghost' ? 'secondary' : 'info'}>12 open</Badge>
+						</div>
+					</FramePanel>
+				</Frame>
+			))}
+		</div>
+	);
+}
+`;function W(e){let t={code:`code`,h4:`h4`,p:`p`,pre:`pre`,...e.components};return F||K(`Examples`,!1),R||K(`Examples.DefaultFrame`,!0),V||K(`Examples.DenseFitPanel`,!0),H||K(`Examples.FrameVariantMatrix`,!0),B||K(`Examples.InverseFrame`,!0),z||K(`Examples.StackedPanels`,!0),(0,E.jsxs)(a,{title:`Frame`,description:`Grouped panel primitive for related admin content, stacked records, and dense framed surfaces.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/frame`,children:[(0,E.jsx)(o,{title:`Overview`,id:`overview`,children:(0,E.jsxs)(t.p,{children:[(0,E.jsx)(t.code,{children:`Frame`}),` gives consumers a reusable grouping shell without reaching for ad hoc
+card divs. It owns the outer chrome and spacing tokens; `,(0,E.jsx)(t.code,{children:`FramePanel`}),` owns each
+inner surface. Use it when several related panels should read as one object.`]})}),(0,E.jsxs)(o,{title:`Usage`,id:`usage`,children:[(0,E.jsx)(t.p,{children:`Import from the exact public entrypoint:`}),(0,E.jsx)(t.pre,{children:(0,E.jsx)(t.code,{className:`language-tsx`,children:`import {
+	Frame,
+	FramePanel,
+	FrameHeader,
+	FrameTitle,
+	FrameDescription,
+	FrameFooter,
+} from 'admin-ui-starter-kit/base/frame';
+`})}),(0,E.jsxs)(t.p,{children:[`Use `,(0,E.jsx)(t.code,{children:`Frame`}),` for related admin panels that need one shared boundary. Use
+`,(0,E.jsx)(t.code,{children:`FramePanel`}),` for each contained surface, `,(0,E.jsx)(t.code,{children:`fit`}),` when media or charts should
+touch the panel edge, `,(0,E.jsx)(t.code,{children:`stacked`}),` when panels should collapse into one segmented
+record, and `,(0,E.jsx)(t.code,{children:`dense`}),` for table-adjacent or settings-row layouts. The default
+`,(0,E.jsx)(t.code,{children:`spacing`}),` follows `,(0,E.jsx)(t.code,{children:`useCardConfig().defaultPadding`}),`; pass `,(0,E.jsx)(t.code,{children:`spacing`}),` only when a
+surface needs to override the provider default.`]})]}),(0,E.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(c,{name:`DefaultFrame`,source:U,children:(0,E.jsx)(R,{})}),(0,E.jsx)(c,{name:`StackedPanels`,source:U,children:(0,E.jsx)(z,{})}),(0,E.jsx)(c,{name:`InverseFrame`,source:U,children:(0,E.jsx)(B,{})}),(0,E.jsx)(c,{name:`DenseFitPanel`,source:U,children:(0,E.jsx)(V,{})}),(0,E.jsx)(c,{name:`FrameVariantMatrix`,source:U,children:(0,E.jsx)(H,{})})]}),(0,E.jsxs)(o,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`Frame`}),(0,E.jsx)(v,{component:`Frame`}),(0,E.jsx)(t.h4,{children:`FramePanel`}),(0,E.jsx)(v,{component:`FramePanel`}),(0,E.jsx)(t.h4,{children:`FrameHeader`}),(0,E.jsx)(v,{component:`FrameHeader`}),(0,E.jsx)(t.h4,{children:`FrameTitle`}),(0,E.jsx)(v,{component:`FrameTitle`}),(0,E.jsx)(t.h4,{children:`FrameDescription`}),(0,E.jsx)(v,{component:`FrameDescription`}),(0,E.jsx)(t.h4,{children:`FrameFooter`}),(0,E.jsx)(v,{component:`FrameFooter`})]})]})}function G(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(W,{...e})}):W(e)}function K(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{G as default};

package/dist/showcase/assets/getPseudoElementBounds-Bznj386s.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{An as n,At as r,Cn as i,Ct as a,Dt as o,En as s,Et as c,Ht as l,It as u,Ln as d,On as f,Ot as p,Rt as m,Sn as h,St as g,Tn as _,Tt as v,Zt as y,_n as b,an as ee,bn as te,cr as x,hn as ne,ir as S,jt as re,kn as ie,kt as ae,nt as oe,rr as C,rt as se,ur as ce,wn as w,wt as le,xn as T,zt as E}from"./example-BIrQab7K.js";import{s as ue}from"./useOpenInteractionType-eyZ6twES.js";var D=e(t()),O=`Escape`;function k(e,t,n){switch(e){case`vertical`:return t;case`horizontal`:return n;default:return t||n}}function A(e,t){return k(t,e===`ArrowUp`||e===`ArrowDown`,e===`ArrowLeft`||e===`ArrowRight`)}function de(e,t,n){return k(t,e===`ArrowDown`,n?e===`ArrowLeft`:e===`ArrowRight`)||e===`Enter`||e===` `||e===``}function fe(e,t,n){return k(t,n?e===w:e===_,e===i)}function pe(e,t,n,r){return t===`both`||t===`horizontal`&&r&&r>1?e===O:k(t,n?e===_:e===w,e===s)}function j(e,t){let{listRef:i,activeIndex:s,onNavigate:d=()=>{},enabled:_=!0,selectedIndex:x=null,allowEscape:ae=!1,loopFocus:w=!1,nested:O=!1,rtl:k=!1,virtual:j=!1,focusItemOnOpen:M=`auto`,focusItemOnHover:N=!0,openOnArrowKeyDown:me=!0,disabledIndices:P=void 0,orientation:F=`vertical`,parentOrientation:he,cols:I=1,id:ge,resetOnPointerLeave:_e=!0,externalTree:ve}=t,L=`rootStore`in e?e.rootStore:e,R=L.useState(`open`),z=L.useState(`floatingElement`),B=L.useState(`domReferenceElement`),ye=L.context.dataRef,be=ne(z),xe=b(B),V=E(be),Se=oe(),H=se(ve),U=D.useRef(M),W=D.useRef(x??-1),G=D.useRef(null),K=D.useRef(!0),q=S(e=>{d(W.current===-1?null:W.current,e)}),Ce=D.useRef(q),J=D.useRef(!!z),we=D.useRef(R),Y=D.useRef(!1),X=D.useRef(!1),Te=D.useRef(null),Ee=E(P),Z=E(R),Q=E(x),De=E(_e),Oe=m(),ke=m(),Ae=S(()=>{function e(e){j?H?.events.emit(`virtualfocus`,e):Te.current=ue(e,{sync:Y.current,preventScroll:!0})}let t=i.current[W.current],n=X.current;t&&e(t),(Y.current?e=>e():e=>Oe.request(e))(()=>{let r=i.current[W.current]||t;r&&(t||e(r),Fe&&(n||!K.current)&&r.scrollIntoView?.({block:`nearest`,inline:`nearest`}))})});C(()=>{ye.current.orientation=F},[ye,F]),C(()=>{_&&(R&&z?(W.current=x??-1,U.current&&x!=null&&(X.current=!0,q())):J.current&&(W.current=-1,Ce.current()))},[_,R,z,x,q]),C(()=>{if(_){if(!R){Y.current=!1;return}if(z)if(s==null){if(Y.current=!1,Q.current!=null)return;if(J.current&&(W.current=-1,Ae()),(!we.current||!J.current)&&U.current&&(G.current!=null||U.current===!0&&G.current==null)){let e=0,t=()=>{i.current[0]==null?(e<2&&(e?e=>ke.request(e):queueMicrotask)(t),e+=1):(W.current=G.current==null||de(G.current,F,k)||O?p(i):o(i),G.current=null,q())};t()}}else r(i.current,s)||(W.current=s,Ae(),X.current=!1)}},[_,R,z,s,Q,O,i,F,k,q,Ae,ke]),C(()=>{if(!_||z||!H||j||!J.current)return;let e=H.nodesRef.current,t=e.find(e=>e.id===Se)?.context?.elements.floating,n=te(u(z)),r=e.some(e=>e.context&&T(e.context.elements.floating,n));t&&!r&&K.current&&t.focus({preventScroll:!0})},[_,z,H,Se,j]),C(()=>{Ce.current=q,we.current=R,J.current=!!z}),C(()=>{R||(G.current=null,U.current=M)},[R,M]);let je=s!=null,Me=S(e=>{if(!Z.current)return;let t=i.current.indexOf(e.currentTarget);t!==-1&&(W.current!==t||s!==t)&&(W.current=t,q(e))}),Ne=S(()=>he??H?.nodesRef.current.find(e=>e.id===Se)?.context?.dataRef?.current.orientation),Pe=S(()=>p(i,Ee.current)),$=S(e=>{if(K.current=!1,Y.current=!0,e.which===229||!Z.current&&e.currentTarget===V.current)return;if(O&&pe(e.key,F,k,I)){A(e.key,Ne())||n(e),L.setOpen(!1,l(ee,e.nativeEvent)),ce(B)&&(j?H?.events.emit(`virtualfocus`,B):B.focus());return}let t=W.current,s=p(i,P),u=o(i,P);if(xe||(e.key===`Home`&&(n(e),W.current=s,q(e)),e.key===`End`&&(n(e),W.current=u,q(e))),I>1){let t=Array.from({length:i.current.length},()=>({width:1,height:1})),n=g(t,I,!1),r=n.findIndex(e=>e!=null&&!re(i.current,e,P)),a=n.reduce((e,t,n)=>t!=null&&!re(i.current,t,P)?n:e,-1),o=n[c(n.map(e=>e==null?null:i.current[e]),{event:e,orientation:F,loopFocus:w,rtl:k,cols:I,disabledIndices:v([...(typeof P==`function`?null:P)||i.current.map((e,t)=>re(i.current,t,P)?t:void 0),void 0],n),minIndex:r,maxIndex:a,prevIndex:le(W.current>u?s:W.current,t,n,I,e.key===`ArrowDown`?`bl`:e.key===(k?`ArrowLeft`:`ArrowRight`)?`tr`:`tl`),stopEvent:!0})];if(o!=null&&(W.current=o,q(e)),F===`both`)return}if(A(e.key,F)){if(n(e),R&&!j&&te(e.currentTarget.ownerDocument)===e.currentTarget){W.current=de(e.key,F,k)?s:u,q(e);return}de(e.key,F,k)?w?t>=u?ae&&t!==i.current.length?W.current=-1:(Y.current=!1,W.current=s):W.current=a(i.current,{startingIndex:t,disabledIndices:P}):W.current=Math.min(u,a(i.current,{startingIndex:t,disabledIndices:P})):w?t<=s?ae&&t!==-1?W.current=i.current.length:(Y.current=!1,W.current=u):W.current=a(i.current,{startingIndex:t,decrement:!0,disabledIndices:P}):W.current=Math.max(s,a(i.current,{startingIndex:t,decrement:!0,disabledIndices:P})),r(i.current,W.current)&&(W.current=-1),q(e)}}),Fe=D.useMemo(()=>({onFocus(e){Y.current=!0,Me(e)},onClick:({currentTarget:e})=>e.focus({preventScroll:!0}),onMouseMove(e){Y.current=!0,X.current=!1,N&&Me(e)},onPointerLeave(e){if(!Z.current||!K.current||e.pointerType===`touch`)return;Y.current=!0;let t=e.relatedTarget;if(!(!N||i.current.includes(t))&&De.current&&(Te.current?.(),Te.current=null,W.current=-1,q(e),!j)){let e=V.current,t=te(u(e));e&&T(e,t)&&e.focus({preventScroll:!0})}}}),[Me,Z,V,N,i,q,De,j]),Ie=D.useMemo(()=>j&&R&&je&&{"aria-activedescendant":`${ge}-${s}`},[j,R,je,ge,s]),Le=D.useMemo(()=>({"aria-orientation":F===`both`?void 0:F,...xe?{}:Ie,onKeyDown(e){if(e.key===`Tab`&&e.shiftKey&&R&&!j){let t=h(e.nativeEvent);if(t&&!T(V.current,t))return;n(e),L.setOpen(!1,l(y,e.nativeEvent)),ce(B)&&B.focus();return}$(e)},onPointerMove(){K.current=!0}}),[Ie,$,V,F,xe,L,R,j,B]),Re=D.useMemo(()=>{function e(e){L.setOpen(!0,l(ee,e.nativeEvent,e.currentTarget))}function t(e){M===`auto`&&f(e.nativeEvent)&&(U.current=!j)}function r(e){U.current=M,M===`auto`&&ie(e.nativeEvent)&&(U.current=!0)}return{onKeyDown(t){let r=L.select(`open`);K.current=!1;let i=t.key.startsWith(`Arrow`),a=fe(t.key,Ne(),k),o=A(t.key,F),s=(O?a:o)||t.key===`Enter`||t.key.trim()===``;if(j&&r)return $(t);if(!(!r&&!me&&i)){if(s){let e=A(t.key,Ne());G.current=O&&e?null:t.key}if(O){a&&(n(t),r?(W.current=Pe(),q(t)):e(t));return}o&&(Q.current!=null&&(W.current=Q.current),n(t),!r&&me?e(t):$(t),r&&q(t))}},onFocus(e){L.select(`open`)&&!j&&(W.current=-1,q(e))},onPointerDown:r,onPointerEnter:r,onMouseDown:t,onClick:t}},[$,M,Pe,O,q,L,me,F,Ne,k,Q,j]),ze=D.useMemo(()=>({...Ie,...Re}),[Ie,Re]);return D.useMemo(()=>_?{reference:ze,floating:Le,item:Fe,trigger:Re}:{},[_,ze,Le,Re,Fe])}function M(e,t){let{listRef:r,elementsRef:i,activeIndex:a,onMatch:o,onTyping:s,enabled:c=!0,resetMs:l=750,selectedIndex:u=null}=t,f=`rootStore`in e?e.rootStore:e,p=f.useState(`open`),m=d(),h=D.useRef(``),g=D.useRef(u??a??-1),_=D.useRef(null),v=S(e=>{function t(e){let t=i?.current[e];return!t||ae(t)}function c(e,n,r=0){if(e.length===0)return-1;let i=(r%e.length+e.length)%e.length,a=n.toLocaleLowerCase();for(let n=0;n<e.length;n+=1){let r=(i+n)%e.length;if(!(!e[r]?.toLocaleLowerCase().startsWith(a)||!t(r)))return r}return-1}let d=r.current;if(h.current.length>0&&e.key===` `&&(n(e),s?.(!0)),h.current.length>0&&h.current[0]!==` `&&c(d,h.current)===-1&&e.key!==` `&&s?.(!1),d==null||e.key.length!==1||e.ctrlKey||e.metaKey||e.altKey)return;p&&e.key!==` `&&(n(e),s?.(!0));let f=h.current===``;f&&(g.current=u??a??-1),d.every(e=>e?e[0]?.toLocaleLowerCase()!==e[1]?.toLocaleLowerCase():!0)&&h.current===e.key&&(h.current=``,g.current=_.current),h.current+=e.key,m.start(l,()=>{h.current=``,g.current=_.current,s?.(!1)});let v=((f?u??a??-1:g.current)??0)+1,y=c(d,h.current,v);y===-1?e.key!==` `&&(h.current=``,s?.(!1)):(o?.(y),_.current=y)}),y=S(e=>{let t=e.relatedTarget,n=f.select(`domReferenceElement`),r=f.select(`floatingElement`);T(n,t)||T(r,t)||(m.clear(),h.current=``,g.current=_.current,s?.(!1))});C(()=>{!p&&u!==null||(m.clear(),_.current=null,h.current!==``&&(h.current=``))},[p,u,m]),C(()=>{p&&h.current===``&&(g.current=u??a??-1)},[p,u,a]);let b=D.useMemo(()=>({onKeyDown:v,onBlur:y}),[v,y]);return D.useMemo(()=>c?{reference:b,floating:b}:{},[c,b])}function N(e){let t=e.getBoundingClientRect(),n=x(e),r=n.getComputedStyle(e,`::before`),i=n.getComputedStyle(e,`::after`);if(!(r.content!==`none`||i.content!==`none`))return t;let a=parseFloat(r.width)||0,o=parseFloat(r.height)||0,s=parseFloat(i.width)||0,c=parseFloat(i.height)||0,l=Math.max(t.width,a,s),u=Math.max(t.height,o,c),d=l-t.width,f=u-t.height;return{left:t.left-d/2,right:t.right+d/2,top:t.top-f/2,bottom:t.bottom+f/2}}export{M as n,j as r,N as t};

package/dist/showcase/assets/gift-Bx8IO1FQ.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`gift`,[[`path`,{d:`M12 7v14`,key:`1akyts`}],[`path`,{d:`M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8`,key:`1sqzm4`}],[`path`,{d:`M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5`,key:`kc0143`}],[`rect`,{x:`3`,y:`7`,width:`18`,height:`4`,rx:`1`,key:`1hberx`}]]);export{t};

package/dist/showcase/assets/giftcard-cards-CZTXBjv0.js

@@ -0,0 +1,85 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Ar as t,Er as n,Tr as r,hr as i,mr as a,r as o,t as s,yr as c}from"./example-BIrQab7K.js";import{t as l}from"./arrow-right-Bf1Tl6D5.js";import{t as u}from"./eye-CnRPL_H8.js";import{t as d}from"./gift-Bx8IO1FQ.js";import{k as f,n as p,s as m}from"./index-Cz4UGUT2.js";import{t as h}from"./props-table-BR-KjRNe.js";import{t as g}from"./icon-badge-CxvxB8Vd.js";import{c as _,i as v,n as y,r as b,t as x,u as S}from"./item-CbiuwbAN.js";import{t as C}from"./metadata-list-fm8e58ID.js";var w={status:{active:`Active`,redeemed:`Redeemed`,expired:`Expired`,disabled:`Disabled`},giftCard:`Gift Card`,balance:`Balance`,personalMessage:`Personal Message`,to:`To`,from:`From`,expires:`Expires`,recipient:`Recipient`,viewDetails:`View Details`,copyCode:`Copy code`},T={active:`success`,redeemed:`secondary`,expired:`error`,disabled:`warning`};w.status.active,w.status.redeemed,w.status.expired,w.status.disabled;var E={purple:{card:`from-primary via-primary/90 to-info`,strip:`from-primary via-primary/90 to-info`},green:{card:`from-success via-info to-success`,strip:`from-success via-info to-success`},warm:{card:`from-warning via-warning/90 to-destructive`,strip:`from-warning via-warning/90 to-destructive`}},D={purple:`from-primary to-info`,green:`from-success to-info`,warm:`from-warning to-destructive`},O={green:{line:`bg-success`,iconBg:`bg-success/15 text-success`},purple:{line:`bg-primary`,iconBg:`bg-primary/15 text-primary`},warm:{line:`bg-warning`,iconBg:`bg-warning/15 text-warning-foreground`}},k={green:`from-success to-info`,blue:`from-info to-primary`,amber:`from-warning to-destructive`},A={green:`bg-success ring-4 ring-background shadow-lg`,blue:`bg-info ring-4 ring-background shadow-lg`,amber:`bg-warning ring-4 ring-background shadow-lg`},j=m();function M({code:e,amount:i,remainingAmount:a,status:s,recipientName:c,senderName:l,message:m,expiresAt:h,createdAt:g,template:_,onView:v,gradient:y=`purple`,pattern:b=`none`,className:x,strings:S}){let D=f(w,S),O=D.status[s],k=T[s],A=!!a&&a!==i,M=A?a:i,N=[...c?[{label:D.to,value:c}]:[],...l?[{label:D.from,value:l}]:[],...h?[{label:D.expires,value:h}]:[]];return(0,j.jsxs)(`div`,{className:p(`giftcard-card--component w-full max-w-sm transition-shadow duration-300 ease-out`,`hover:shadow-md hover:shadow-foreground/10`,x),children:[(0,j.jsxs)(`div`,{className:p(`relative overflow-hidden rounded-t-lg bg-gradient-to-br p-6`,E[y].card),children:[b===`circles`&&(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(`div`,{className:`absolute -top-8 -right-8 h-32 w-32 rounded-full bg-inverse-decoration`,"aria-hidden":`true`}),(0,j.jsx)(`div`,{className:`absolute -bottom-4 -left-4 h-20 w-20 rounded-full bg-inverse-decoration`,"aria-hidden":`true`})]}),b===`waves`&&(0,j.jsxs)(`svg`,{className:`absolute inset-0 h-full w-full opacity-5`,viewBox:`0 0 400 200`,preserveAspectRatio:`none`,"aria-hidden":`true`,children:[(0,j.jsx)(`path`,{d:`M0 80 C100 20, 200 140, 400 60 L400 200 L0 200 Z`,className:`fill-inverse-foreground`}),(0,j.jsx)(`path`,{d:`M0 120 C120 60, 280 180, 400 100 L400 200 L0 200 Z`,className:`fill-inverse-foreground`})]}),(0,j.jsx)(`div`,{className:`absolute top-4 right-4 z-20`,children:(0,j.jsxs)(`span`,{className:p(`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xxs font-semibold uppercase tracking-wide`,`bg-inverse-surface-strong text-inverse-foreground border border-inverse-border shadow-sm backdrop-blur-md`),"data-status":k,children:[(0,j.jsx)(`span`,{className:`size-1.5 rounded-full bg-inverse-foreground/85`,"aria-hidden":`true`}),O]})}),(0,j.jsxs)(`div`,{className:`relative z-10`,children:[(0,j.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,j.jsx)(d,{className:`h-5 w-5 text-inverse-foreground opacity-80`}),(0,j.jsx)(n,{weight:`medium`,className:`text-inverse-muted`,children:D.giftCard})]}),(0,j.jsxs)(`div`,{className:`mt-8 mb-5`,children:[(0,j.jsx)(n,{size:`xs`,className:`uppercase tracking-wider text-inverse-subtle`,children:D.balance}),(0,j.jsxs)(`div`,{className:`flex items-baseline gap-2.5 mt-1`,children:[(0,j.jsx)(r,{tag:`h2`,className:`text-4xl border-none pb-0 text-inverse-foreground tabular-nums drop-shadow-sm`,children:M}),!!A&&(0,j.jsx)(n,{className:`line-through tabular-nums text-inverse-disabled`,children:i})]})]}),(0,j.jsxs)(`div`,{className:p(`flex items-center gap-2 rounded-lg px-4 py-2.5`,`bg-inverse-surface backdrop-blur-sm`,`border border-inverse-border`,`shadow-sm`),children:[(0,j.jsx)(n,{weight:`semibold`,className:`flex-1 font-mono tracking-[0.2em] text-inverse-foreground`,children:e}),(0,j.jsx)(o,{variant:`light`,buttonStyle:`ghost`,className:`p-1 h-auto text-inverse-foreground opacity-60 hover:bg-inverse-surface hover:opacity-100`,"aria-label":D.copyCode,children:(0,j.jsx)(t,{className:`h-4 w-4`})})]})]})]}),(0,j.jsxs)(`div`,{className:`rounded-b-lg bg-card p-5 shadow-sm border border-t-0 border-border/50 space-y-4`,children:[!!m&&(0,j.jsxs)(`div`,{className:`rounded-lg bg-muted/50 p-3 border border-border/30`,children:[(0,j.jsx)(n,{size:`xxs`,type:`secondary`,weight:`medium`,className:`mb-1 uppercase tracking-wide`,children:D.personalMessage}),(0,j.jsxs)(n,{type:`secondary`,className:`italic leading-relaxed`,children:[`“`,m,`”`]})]}),(0,j.jsx)(C,{items:N,columns:2}),!!v&&(0,j.jsx)(o,{variant:`secondary`,buttonStyle:`outline`,icon:u,fullWidth:!0,onClick:v,children:D.viewDetails})]})]})}M.displayName=`GiftcardCard`;function N({code:e,amount:t,remainingAmount:r,status:i,recipientName:a,gradient:o=`purple`,className:s,strings:l}){let u=f(w,l).status[i],m=T[i],h=!!r&&r!==t,g=h?r:t;return(0,j.jsxs)(x,{size:`xs`,variant:`outline`,className:p(`giftcard-compact--component flex-nowrap gap-x-2.5 px-3 py-2 shadow-sm transition-colors duration-150 hover:border-border`,s),children:[(0,j.jsx)(_,{variant:`image`,children:(0,j.jsx)(`div`,{className:p(`flex size-full items-center justify-center bg-gradient-to-br`,D[o]),children:(0,j.jsx)(d,{className:`h-4 w-4 text-inverse-foreground`})})}),(0,j.jsxs)(b,{className:`min-w-0`,children:[(0,j.jsx)(S,{className:`w-full max-w-full truncate whitespace-nowrap font-mono text-xs`,children:e}),!!a&&(0,j.jsx)(v,{clamp:1,children:a})]}),(0,j.jsx)(y,{className:`shrink-0`,children:(0,j.jsxs)(`div`,{className:`flex shrink-0 flex-col items-end gap-0.5`,children:[(0,j.jsxs)(`div`,{className:`flex items-baseline gap-1`,children:[(0,j.jsx)(n,{size:`sm`,weight:`bold`,className:`tabular-nums`,children:g}),!!h&&(0,j.jsx)(n,{size:`xxs`,type:`discrete`,className:`line-through tabular-nums`,children:t})]}),(0,j.jsx)(c,{variant:m,size:`xs`,children:u})]})})]})}N.displayName=`GiftcardCompact`;function P({code:e,amount:i,remainingAmount:a,status:s,recipientName:u,expiresAt:m,onView:h,color:g=`green`,className:v,strings:E}){let D=f(w,E),k=D.status[s],A=T[s],M=!!a&&a!==i,N=M?a:i,P=O[g],F=[...u?[{label:D.recipient,value:u}]:[],...m?[{label:D.expires,value:m}]:[]];return(0,j.jsxs)(`div`,{className:p(`giftcard-minimal--component w-full max-w-sm overflow-hidden rounded-lg border border-border bg-card shadow-sm`,v),children:[(0,j.jsx)(`div`,{className:p(`mx-4 mt-3 h-1 w-12 rounded-sm`,P.line)}),(0,j.jsxs)(x,{size:`xs`,className:`flex-nowrap items-center px-4 pb-1.5 pt-2`,children:[(0,j.jsx)(_,{children:(0,j.jsx)(`div`,{className:p(`flex h-7 w-7 items-center justify-center rounded-full`,P.iconBg),children:(0,j.jsx)(d,{className:`h-3.5 w-3.5`})})}),(0,j.jsx)(b,{children:(0,j.jsx)(S,{bold:!1,className:`text-muted-foreground`,children:D.giftCard})}),(0,j.jsx)(y,{className:`shrink-0`,children:(0,j.jsx)(c,{variant:A,size:`xs`,children:k})})]}),(0,j.jsx)(`div`,{className:`px-4 pb-2 pt-0`,children:(0,j.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,j.jsx)(r,{tag:`h2`,className:`border-none pb-0 text-2xl tabular-nums`,children:N}),!!M&&(0,j.jsx)(n,{type:`discrete`,className:`line-through tabular-nums`,children:i})]})}),(0,j.jsxs)(`div`,{className:`mx-4 flex items-center gap-1.5 rounded-md border border-border/30 bg-muted/50 px-2.5 py-1.5`,children:[(0,j.jsx)(n,{weight:`medium`,className:`flex-1 font-mono tracking-[0.15em]`,children:e}),(0,j.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,className:`shrink-0`,"aria-label":D.copyCode,children:(0,j.jsx)(t,{className:`h-3.5 w-3.5`})})]}),(0,j.jsx)(C,{items:F,columns:1,dense:!0,gapClassName:`gap-1.5`,className:`px-4 pb-1.5 pt-2`}),!!h&&(0,j.jsx)(`div`,{className:`mt-1 border-t border-border/30 px-3 py-1.5`,children:(0,j.jsxs)(o,{variant:`secondary`,buttonStyle:`ghost`,onClick:h,className:`group/link`,children:[D.viewDetails,(0,j.jsx)(l,{className:`ml-1 h-3.5 w-3.5 transition-transform group-hover/link:translate-x-0.5`})]})})]})}P.displayName=`GiftcardCardMinimal`;function F({code:e,amount:i,remainingAmount:a,status:s,recipientName:l,expiresAt:m,onView:h,className:g,strings:v}){let E=f(w,v),D=E.status[s],O=T[s],k=!!a&&a!==i,A=k?a:i,M=[...l?[{label:E.recipient,value:l}]:[],...m?[{label:E.expires,value:m}]:[]];return(0,j.jsxs)(`div`,{className:p(`giftcard-dark--component dark w-full max-w-sm overflow-hidden rounded-lg bg-card text-card-foreground shadow-sm ring-1 ring-border`,g),children:[(0,j.jsxs)(x,{size:`xs`,className:`px-4 pb-2 pt-4`,children:[(0,j.jsx)(_,{children:(0,j.jsx)(`div`,{className:`flex h-8 w-8 items-center justify-center rounded-full bg-warning/15`,children:(0,j.jsx)(d,{className:`h-4 w-4 text-warning`})})}),(0,j.jsx)(b,{children:(0,j.jsx)(S,{bold:!1,className:`text-muted-foreground`,children:E.giftCard})}),(0,j.jsx)(y,{children:(0,j.jsx)(c,{variant:O,children:D})})]}),(0,j.jsx)(`div`,{className:`px-4 pb-3 pt-2`,children:(0,j.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,j.jsx)(r,{tag:`h2`,className:`border-none pb-0 text-3xl tabular-nums`,children:A}),!!k&&(0,j.jsx)(n,{type:`discrete`,className:`line-through tabular-nums`,children:i})]})}),(0,j.jsxs)(`div`,{className:`mx-4 flex items-center gap-2 rounded-md border border-border bg-muted px-3 py-2`,children:[(0,j.jsx)(n,{weight:`medium`,className:`font-mono tracking-[0.15em] flex-1`,children:e}),(0,j.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,className:`p-1 h-auto`,"aria-label":E.copyCode,children:(0,j.jsx)(t,{className:`h-3.5 w-3.5`})})]}),(0,j.jsx)(C,{items:M,columns:1,className:`px-4 pb-2 pt-3`}),!!h&&(0,j.jsx)(`div`,{className:`px-4 pb-4 pt-2`,children:(0,j.jsx)(o,{variant:`dark`,buttonStyle:`solid`,icon:u,fullWidth:!0,onClick:h,children:E.viewDetails})})]})}F.displayName=`GiftcardCardDark`;function I({code:e,amount:i,remainingAmount:a,status:s,recipientName:l,expiresAt:m,onView:h,headerColor:_=`green`,className:v,strings:y}){let b=f(w,y),x=b.status[s],S=T[s],E=!!a&&a!==i,D=E?a:i,O=[...l?[{label:b.recipient,value:l}]:[],...m?[{label:b.expires,value:m}]:[]];return(0,j.jsxs)(`div`,{className:p(`giftcard-illustrated--component w-full max-w-sm overflow-hidden rounded-lg border border-border bg-card shadow-sm`,v),children:[(0,j.jsxs)(`div`,{className:p(`relative flex h-16 items-center justify-between overflow-hidden bg-gradient-to-br px-4`,k[_]),children:[(0,j.jsx)(`div`,{className:`absolute inset-0 opacity-80`,style:{backgroundImage:`repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in oklch, var(--inverse-foreground) 3%, transparent) 10px 20px)`},"aria-hidden":`true`}),(0,j.jsx)(g,{icon:d,size:`md`,shape:`square`,className:p(`relative rounded-md text-inverse-foreground ring-1 ring-inverse-border`,A[_])}),(0,j.jsx)(n,{tag:`span`,size:`xs`,weight:`semibold`,className:`relative uppercase tracking-wider text-inverse-foreground opacity-80`,children:b.giftCard})]}),(0,j.jsxs)(`div`,{className:`space-y-3 px-4 py-4`,children:[(0,j.jsxs)(`div`,{className:`flex items-start justify-between`,children:[(0,j.jsxs)(`div`,{children:[(0,j.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,j.jsx)(r,{tag:`h2`,className:`border-none pb-0 text-2xl tabular-nums`,children:D}),!!E&&(0,j.jsx)(n,{type:`discrete`,className:`line-through tabular-nums`,children:i})]}),(0,j.jsx)(n,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:b.balance})]}),(0,j.jsx)(c,{variant:S,children:x})]}),(0,j.jsxs)(`div`,{className:`flex items-center gap-2 rounded-md border border-border/50 bg-muted/40 px-3 py-2`,children:[(0,j.jsx)(n,{weight:`medium`,className:`font-mono tracking-[0.15em] flex-1`,children:e}),(0,j.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,className:`p-1 h-auto`,"aria-label":b.copyCode,children:(0,j.jsx)(t,{className:`h-3.5 w-3.5`})})]}),(0,j.jsx)(C,{items:O,columns:2}),!!h&&(0,j.jsx)(o,{variant:`secondary`,buttonStyle:`outline`,icon:u,fullWidth:!0,onClick:h,children:b.viewDetails})]})]})}I.displayName=`GiftcardCardIllustrated`;var L=e({CompactActiveExpired:()=>H,Dark:()=>B,GradientDefault:()=>R,Illustrated:()=>V,Minimal:()=>z});function R(){return(0,j.jsx)(j.Fragment,{children:(0,j.jsx)(M,{code:`GCT-A4B7-C9E2`,amount:`250.00 USD`,status:`active`,gradient:`purple`,recipientName:`Davida Todorova`,senderName:`Petar Williams`,message:`Happy Birthday!`,expiresAt:`Dec 31, 2026`,createdAt:`Mar 15, 2026`,onView:()=>{}})})}function z(){return(0,j.jsx)(j.Fragment,{children:(0,j.jsx)(P,{code:`GCT-M1N2-A3L4`,amount:`150.00 USD`,status:`active`,color:`green`,recipientName:`Daniel Kowalski`,expiresAt:`Sep 15, 2026`,onView:()=>{}})})}function B(){return(0,j.jsx)(j.Fragment,{children:(0,j.jsx)(F,{code:`GCT-D4K5-G6H7`,amount:`1,000.00 USD`,status:`active`,recipientName:`Viktoria Johnsona`,expiresAt:`Dec 31, 2026`,onView:()=>{}})})}function V(){return(0,j.jsx)(j.Fragment,{children:(0,j.jsx)(I,{code:`GCT-I1L2-U3S4`,amount:`350.00 USD`,status:`active`,headerColor:`green`,recipientName:`Kalina Smitha`,expiresAt:`Nov 30, 2026`,onView:()=>{}})})}function H(){return(0,j.jsx)(j.Fragment,{children:(0,j.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-2`,children:[(0,j.jsx)(N,{code:`GCT-A4B7-C9E2`,amount:`250.00 USD`,status:`active`,gradient:`purple`,recipientName:`Davida Todorova`,expiresAt:`Dec 31, 2026`,onView:()=>{}}),(0,j.jsx)(N,{code:`GCT-W5X8-Y1Z3`,amount:`75.00 USD`,status:`expired`,recipientName:`Dimitar Georgiev`,expiresAt:`Jan 15, 2026`})]})})}var U=`import {
+	GiftcardCard,
+	GiftcardCompact,
+	GiftcardCardMinimal,
+	GiftcardCardDark,
+	GiftcardCardIllustrated,
+} from '@/components/composed/cards/giftcard-card';
+
+export function GradientDefault() {
+	return (
+		<>
+			<GiftcardCard
+								code="GCT-A4B7-C9E2"
+								amount="250.00 USD"
+								status="active"
+								gradient="purple"
+								recipientName="Davida Todorova"
+								senderName="Petar Williams"
+								message="Happy Birthday!"
+								expiresAt="Dec 31, 2026"
+								createdAt="Mar 15, 2026"
+								onView={() => {}}
+							/>
+		</>
+	);
+}
+
+export function Minimal() {
+	return (
+		<>
+			<GiftcardCardMinimal
+								code="GCT-M1N2-A3L4"
+								amount="150.00 USD"
+								status="active"
+								color="green"
+								recipientName="Daniel Kowalski"
+								expiresAt="Sep 15, 2026"
+								onView={() => {}}
+							/>
+		</>
+	);
+}
+
+export function Dark() {
+	return (
+		<>
+			<GiftcardCardDark
+								code="GCT-D4K5-G6H7"
+								amount="1,000.00 USD"
+								status="active"
+								recipientName="Viktoria Johnsona"
+								expiresAt="Dec 31, 2026"
+								onView={() => {}}
+							/>
+		</>
+	);
+}
+
+export function Illustrated() {
+	return (
+		<>
+			<GiftcardCardIllustrated
+								code="GCT-I1L2-U3S4"
+								amount="350.00 USD"
+								status="active"
+								headerColor="green"
+								recipientName="Kalina Smitha"
+								expiresAt="Nov 30, 2026"
+								onView={() => {}}
+							/>
+		</>
+	);
+}
+
+export function CompactActiveExpired() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2">
+								<GiftcardCompact code="GCT-A4B7-C9E2" amount="250.00 USD" status="active" gradient="purple" recipientName="Davida Todorova" expiresAt="Dec 31, 2026" onView={() => {}} />
+								<GiftcardCompact code="GCT-W5X8-Y1Z3" amount="75.00 USD" status="expired" recipientName="Dimitar Georgiev" expiresAt="Jan 15, 2026" />
+							</div>
+		</>
+	);
+}
+`;function W(e){let t={h4:`h4`,...e.components};return L||K(`Examples`,!1),H||K(`Examples.CompactActiveExpired`,!0),B||K(`Examples.Dark`,!0),R||K(`Examples.GradientDefault`,!0),V||K(`Examples.Illustrated`,!0),z||K(`Examples.Minimal`,!0),(0,j.jsxs)(i,{title:`Composed · Giftcard cards`,description:`Five visual variants — gradient, compact, minimal, dark, illustrated.`,layer:`composed`,status:`ready`,children:[(0,j.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,j.jsx)(s,{name:`GradientDefault`,source:U,children:(0,j.jsx)(R,{})}),(0,j.jsx)(s,{name:`Minimal`,source:U,children:(0,j.jsx)(z,{})}),(0,j.jsx)(s,{name:`Dark`,source:U,children:(0,j.jsx)(B,{})}),(0,j.jsx)(s,{name:`Illustrated`,source:U,children:(0,j.jsx)(V,{})}),(0,j.jsx)(s,{name:`CompactActiveExpired`,source:U,children:(0,j.jsx)(H,{})})]}),(0,j.jsxs)(a,{title:`API`,id:`api`,children:[(0,j.jsx)(t.h4,{children:`GiftcardCard`}),(0,j.jsx)(h,{component:`GiftcardCard`}),(0,j.jsx)(t.h4,{children:`GiftcardCompact`}),(0,j.jsx)(h,{component:`GiftcardCompact`}),(0,j.jsx)(t.h4,{children:`GiftcardCardMinimal`}),(0,j.jsx)(h,{component:`GiftcardCardMinimal`}),(0,j.jsx)(t.h4,{children:`GiftcardCardDark`}),(0,j.jsx)(h,{component:`GiftcardCardDark`}),(0,j.jsx)(t.h4,{children:`GiftcardCardIllustrated`}),(0,j.jsx)(h,{component:`GiftcardCardIllustrated`})]})]})}function G(e={}){let{wrapper:t}=e.components||{};return t?(0,j.jsx)(t,{...e,children:(0,j.jsx)(W,{...e})}):W(e)}function K(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{G as default};

package/dist/showcase/assets/git-branch-D9jt-u1q.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`git-branch`,[[`path`,{d:`M15 6a9 9 0 0 0-9 9V3`,key:`1cii5b`}],[`circle`,{cx:`18`,cy:`6`,r:`3`,key:`1h7g24`}],[`circle`,{cx:`6`,cy:`18`,r:`3`,key:`fqmcym`}]]);export{t};

package/dist/showcase/assets/global-search-C2R_3Pb3.js

@@ -0,0 +1,215 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{hr as r,mr as i,t as a}from"./example-BIrQab7K.js";import{t as o}from"./briefcase-B_Uti-Iu.js";import{t as s}from"./clock-DuBsP5t3.js";import{t as c}from"./file-text-D3AE37vP.js";import{n as l,t as u}from"./global-search-D9XJ747r.js";import{t as d}from"./user-Bqmz8M16.js";import{a as f,s as p}from"./index-Cz4UGUT2.js";import{t as m}from"./props-table-BR-KjRNe.js";import{r as h}from"./fetchers-DHuMQ6PN.js";var g=f(`package-search`,[[`path`,{d:`M12 22V12`,key:`d0xqtd`}],[`path`,{d:`M20.27 18.27 22 20`,key:`er2am`}],[`path`,{d:`M21 10.498V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l.98-.559`,key:`tok1h1`}],[`path`,{d:`M3.29 7 12 12l8.71-5`,key:`19ckod`}],[`path`,{d:`m7.5 4.27 8.997 5.148`,key:`9yrvtv`}],[`circle`,{cx:`18.5`,cy:`16.5`,r:`2.5`,key:`ke13xx`}]]),_=e({Default:()=>E,EmptyState:()=>A,IdleSuggestions:()=>D,LoadingState:()=>k,PopulatedResults:()=>O}),v=t(n(),1),y=p(),b={customer:`Customers`,order:`Orders`,voucher:`Vouchers`,team:`Team`},x={customer:d,order:c,voucher:l,team:o},S={customer:`primary`,order:`info`,voucher:`success`,team:`warning`},C=[{id:`customer-sarah`,title:`Sarah Smitha`,subtitle:`sarah@example.com`,group:`customer`,avatar:{initials:`SS`,tone:`primary`},badge:{label:`VIP`,tone:`success`},timestamp:`2m ago`},{id:`order-392`,title:`ORD-2026-0392`,subtitle:`Balsamic tasting set`,group:`order`,thumbnail:{icon:c,tone:`info`},rightValue:`320 USD`,rightLabel:`Total`},{id:`voucher-spring`,title:`SPRING-2026`,subtitle:`Campaign voucher`,group:`voucher`,thumbnail:{icon:l,tone:`success`},badge:{label:`Active`,tone:`success`}},{id:`team-daniel`,title:`Daniel Smith`,subtitle:`Operations manager`,group:`team`,avatar:{initials:`DS`,tone:`warning`},tags:[`Orders`,`Fulfillment`]}],w=[{id:`recent`,label:`Recent searches`,icon:s,items:[{id:`recent-1`,label:`ORD-2026-0392`,icon:c},{id:`recent-2`,label:`Sarah Smitha`,icon:d}]},{id:`suggested`,label:`Suggested`,icon:g,items:[{id:`suggested-1`,label:`Open vouchers`,icon:l},{id:`suggested-2`,label:`Fulfillment team`,icon:o}]}];function T(e){return{id:e.id,title:e.title,subtitle:e.subtitle,group:e.type,thumbnail:{icon:x[e.type],tone:S[e.type]}}}function E(){let[e,t]=(0,v.useState)(``),[n,r]=(0,v.useState)([]),[i,a]=(0,v.useState)(!1);return(0,v.useEffect)(()=>{let t=e.trim();if(t.length<=1){r([]),a(!1);return}let n=!1;return a(!0),h(t).then(e=>{n||(r(e.map(T)),a(!1))}),()=>{n=!0}},[e]),(0,y.jsx)(`div`,{className:`w-full`,children:(0,y.jsx)(u,{query:e,onQueryChange:t,results:n,loading:i,groupLabels:(0,v.useMemo)(()=>b,[]),onResultSelect:e=>{},onClose:()=>t(``)})})}function D(){let[e,t]=(0,v.useState)(``);return(0,y.jsx)(`div`,{className:`w-full`,children:(0,y.jsx)(u,{query:e,onQueryChange:t,results:[],idleSections:w,groupLabels:(0,v.useMemo)(()=>b,[])})})}function O(){let[e,t]=(0,v.useState)(`sa`);return(0,y.jsx)(`div`,{className:`w-full`,children:(0,y.jsx)(u,{query:e,onQueryChange:t,results:C,groupLabels:(0,v.useMemo)(()=>b,[])})})}function k(){let[e,t]=(0,v.useState)(`order`);return(0,y.jsx)(`div`,{className:`w-full`,children:(0,y.jsx)(u,{query:e,onQueryChange:t,results:[],loading:!0,groupLabels:(0,v.useMemo)(()=>b,[])})})}function A(){let[e,t]=(0,v.useState)(`zzzz`);return(0,y.jsx)(`div`,{className:`w-full`,children:(0,y.jsx)(u,{query:e,onQueryChange:t,results:[],groupLabels:(0,v.useMemo)(()=>b,[])})})}var j=`import { Briefcase, Clock, FileText, PackageSearch, Ticket, User } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+
+import {
+	GlobalSearch,
+	type GlobalSearchIdleSection,
+	type GlobalSearchResult,
+} from '@/components/features/global-search';
+import { mockSearch, type MockSearchResult } from '@/preview/_mocks';
+
+type ResultGroup = MockSearchResult['type'];
+
+const GROUP_LABEL: Record<ResultGroup, string> = {
+	customer: 'Customers',
+	order: 'Orders',
+	voucher: 'Vouchers',
+	team: 'Team',
+};
+
+const GROUP_ICON = {
+	customer: User,
+	order: FileText,
+	voucher: Ticket,
+	team: Briefcase,
+} as const;
+
+const GROUP_TONE = {
+	customer: 'primary',
+	order: 'info',
+	voucher: 'success',
+	team: 'warning',
+} as const;
+
+const PREVIEW_RESULTS: Array<GlobalSearchResult<ResultGroup>> = [
+	{
+		id: 'customer-sarah',
+		title: 'Sarah Smitha',
+		subtitle: 'sarah@example.com',
+		group: 'customer',
+		avatar: { initials: 'SS', tone: 'primary' },
+		badge: { label: 'VIP', tone: 'success' },
+		timestamp: '2m ago',
+	},
+	{
+		id: 'order-392',
+		title: 'ORD-2026-0392',
+		subtitle: 'Balsamic tasting set',
+		group: 'order',
+		thumbnail: { icon: FileText, tone: 'info' },
+		rightValue: '320 USD',
+		rightLabel: 'Total',
+	},
+	{
+		id: 'voucher-spring',
+		title: 'SPRING-2026',
+		subtitle: 'Campaign voucher',
+		group: 'voucher',
+		thumbnail: { icon: Ticket, tone: 'success' },
+		badge: { label: 'Active', tone: 'success' },
+	},
+	{
+		id: 'team-daniel',
+		title: 'Daniel Smith',
+		subtitle: 'Operations manager',
+		group: 'team',
+		avatar: { initials: 'DS', tone: 'warning' },
+		tags: ['Orders', 'Fulfillment'],
+	},
+];
+
+const IDLE_SECTIONS: GlobalSearchIdleSection[] = [
+	{
+		id: 'recent',
+		label: 'Recent searches',
+		icon: Clock,
+		items: [
+			{ id: 'recent-1', label: 'ORD-2026-0392', icon: FileText },
+			{ id: 'recent-2', label: 'Sarah Smitha', icon: User },
+		],
+	},
+	{
+		id: 'suggested',
+		label: 'Suggested',
+		icon: PackageSearch,
+		items: [
+			{ id: 'suggested-1', label: 'Open vouchers', icon: Ticket },
+			{ id: 'suggested-2', label: 'Fulfillment team', icon: Briefcase },
+		],
+	},
+];
+
+function toResult(r: MockSearchResult): GlobalSearchResult<ResultGroup> {
+	return {
+		id: r.id,
+		title: r.title,
+		subtitle: r.subtitle,
+		group: r.type,
+		thumbnail: { icon: GROUP_ICON[r.type], tone: GROUP_TONE[r.type] },
+	};
+}
+
+export function Default() {
+	const [query, setQuery] = useState('');
+	const [results, setResults] = useState<Array<GlobalSearchResult<ResultGroup>>>([]);
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		const q = query.trim();
+		if (q.length <= 1) {
+			setResults([]);
+			setLoading(false);
+			return;
+		}
+		let cancelled = false;
+		setLoading(true);
+		mockSearch(q).then((rows) => {
+			if (cancelled) return;
+			setResults(rows.map(toResult));
+			setLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [query]);
+
+	const groupLabels = useMemo(() => GROUP_LABEL, []);
+
+	return (
+		<div className="w-full">
+			<GlobalSearch<ResultGroup>
+				query={query}
+				onQueryChange={setQuery}
+				results={results}
+				loading={loading}
+				groupLabels={groupLabels}
+				onResultSelect={(result) => {
+					if (import.meta.env?.DEV) {
+						console.info('selected', result);
+					}
+				}}
+				onClose={() => setQuery('')}
+			/>
+		</div>
+	);
+}
+
+export function IdleSuggestions() {
+	const [query, setQuery] = useState('');
+	const groupLabels = useMemo(() => GROUP_LABEL, []);
+
+	return (
+		<div className="w-full">
+			<GlobalSearch<ResultGroup>
+				query={query}
+				onQueryChange={setQuery}
+				results={[]}
+				idleSections={IDLE_SECTIONS}
+				groupLabels={groupLabels}
+			/>
+		</div>
+	);
+}
+
+export function PopulatedResults() {
+	const [query, setQuery] = useState('sa');
+	const groupLabels = useMemo(() => GROUP_LABEL, []);
+
+	return (
+		<div className="w-full">
+			<GlobalSearch<ResultGroup>
+				query={query}
+				onQueryChange={setQuery}
+				results={PREVIEW_RESULTS}
+				groupLabels={groupLabels}
+			/>
+		</div>
+	);
+}
+
+export function LoadingState() {
+	const [query, setQuery] = useState('order');
+	const groupLabels = useMemo(() => GROUP_LABEL, []);
+
+	return (
+		<div className="w-full">
+			<GlobalSearch<ResultGroup>
+				query={query}
+				onQueryChange={setQuery}
+				results={[]}
+				loading
+				groupLabels={groupLabels}
+			/>
+		</div>
+	);
+}
+
+export function EmptyState() {
+	const [query, setQuery] = useState('zzzz');
+	const groupLabels = useMemo(() => GROUP_LABEL, []);
+
+	return (
+		<div className="w-full">
+			<GlobalSearch<ResultGroup>
+				query={query}
+				onQueryChange={setQuery}
+				results={[]}
+				groupLabels={groupLabels}
+			/>
+		</div>
+	);
+}
+`;function M(e){let t={code:`code`,p:`p`,...e.components};return _||P(`Examples`,!1),E||P(`Examples.Default`,!0),A||P(`Examples.EmptyState`,!0),D||P(`Examples.IdleSuggestions`,!0),k||P(`Examples.LoadingState`,!0),O||P(`Examples.PopulatedResults`,!0),(0,y.jsxs)(r,{title:`GlobalSearch`,description:`Async search palette with slots, render-props, and a headless useGlobalSearch hook.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/global-search`,children:[(0,y.jsx)(i,{title:`Default`,id:`default`,children:(0,y.jsx)(a,{name:`Default`,source:j,children:(0,y.jsx)(E,{})})}),(0,y.jsxs)(i,{title:`States`,id:`states`,children:[(0,y.jsx)(a,{name:`IdleSuggestions`,source:j,children:(0,y.jsx)(D,{})}),(0,y.jsx)(a,{name:`PopulatedResults`,source:j,children:(0,y.jsx)(O,{})}),(0,y.jsx)(a,{name:`LoadingState`,source:j,children:(0,y.jsx)(k,{})}),(0,y.jsx)(a,{name:`EmptyState`,source:j,children:(0,y.jsx)(A,{})})]}),(0,y.jsx)(i,{title:`Usage notes`,id:`usage-notes`,children:(0,y.jsxs)(t.p,{children:[(0,y.jsx)(t.code,{children:`GlobalSearch`}),` is a controlled search palette. The library does not fetch
+anything — the consumer owns the `,(0,y.jsx)(t.code,{children:`query`}),` state and supplies the `,(0,y.jsx)(t.code,{children:`results`}),`
+array. The default example wires `,(0,y.jsx)(t.code,{children:`query`}),` to the in-repo mock fetcher in
+`,(0,y.jsx)(t.code,{children:`src/preview/_mocks/fetchers.ts`}),`, which simulates an API delay.`]})}),(0,y.jsx)(i,{title:`API`,id:`api`,children:(0,y.jsx)(m,{component:`GlobalSearch`})})]})}function N(e={}){let{wrapper:t}=e.components||{};return t?(0,y.jsx)(t,{...e,children:(0,y.jsx)(M,{...e})}):M(e)}function P(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{N as default};

package/dist/showcase/assets/global-search-D9XJ747r.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Er as n,kr as r,r as i,yr as a}from"./example-BIrQab7K.js";import{t as o}from"./arrow-right-Bf1Tl6D5.js";import{t as s}from"./clock-DuBsP5t3.js";import{t as c}from"./sparkles-DFJmoAFP.js";import{t as l}from"./x-BqJnRkKw.js";import{a as u,i as d,k as f,n as p,s as m}from"./index-Cz4UGUT2.js";import{o as h,r as g,t as _}from"./avatar-5EFTnHEG.js";import{t as v}from"./input-BPDdWrB1.js";import{i as y,r as b,t as x}from"./tabs-ePpje8sU.js";var S=u(`ticket`,[[`path`,{d:`M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z`,key:`qn84l0`}],[`path`,{d:`M13 5v2`,key:`dyzc3o`}],[`path`,{d:`M13 17v2`,key:`1ont0d`}],[`path`,{d:`M13 11v2`,key:`1wjjxi`}]]),C=e(t(),1),w=m(),T={placeholder:`Search…`,clear:`Clear search`,loading:`Searching…`,emptyTitle:`No results for "{{query}}"`,emptyHint:`Try a shorter keyword or check the spelling.`,idleRecent:`Recent`,idleSuggestions:`Suggestions`,tabAll:`All`,footerNavigate:`navigate`,footerOpen:`open`,footerClose:`close`,resultsCount:`{{count}} results`,seeAll:`See all`};function E(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}function D({results:e,query:t,onResultSelect:n,onClose:r}){let[i,a]=(0,C.useState)(`all`),[o,s]=(0,C.useState)(0);(0,C.useEffect)(()=>{a(`all`),s(0)},[t]);let c=(0,C.useMemo)(()=>{let t={};for(let n of e)(t[n.group]??=[]).push(n);return t},[e]),l=(0,C.useMemo)(()=>{let t={all:e.length};for(let[e,n]of Object.entries(c))t[e]=n.length;return t},[e.length,c]),u=(0,C.useMemo)(()=>{if(i===`all`)return c;let e=c[i];return e?{[i]:e}:{}},[c,i]),d=(0,C.useMemo)(()=>i===`all`?e.slice():c[i]??[],[i,c,e]),f=(0,C.useRef)(o);f.current=o;let p=(0,C.useRef)(d);return p.current=d,{grouped:c,tabCounts:l,activeTab:i,setActiveTab:e=>{a(e),s(0)},visibleGrouped:u,flat:d,activeIdx:o,setActiveIdx:s,setActiveById:e=>{let t=p.current.findIndex(t=>t.id===e);t>=0&&s(t)},onKeyDown:e=>{if(e.key===`ArrowDown`)e.preventDefault(),s(e=>Math.min(e+1,p.current.length-1));else if(e.key===`ArrowUp`)e.preventDefault(),s(e=>Math.max(e-1,0));else if(e.key===`Enter`){let t=p.current[f.current];t&&(e.preventDefault(),n?.(t))}else e.key===`Escape`&&r?.()},selectActive:()=>{let e=p.current[f.current];e&&n?.(e)}}}function O({title:e,hint:t}){return(0,w.jsxs)(`div`,{className:`px-6 py-12 text-center`,children:[(0,w.jsx)(`div`,{className:`mx-auto mb-3 inline-flex size-10 items-center justify-center rounded-full bg-muted/60`,children:(0,w.jsx)(d,{className:`size-4 text-muted-foreground`,"aria-hidden":`true`})}),(0,w.jsx)(n,{weight:`medium`,children:e}),(0,w.jsx)(n,{size:`xs`,type:`secondary`,className:`mt-1`,children:t})]})}var k=`rounded border border-border bg-muted/40 px-1.5 py-0.5 font-mono text-xs leading-none text-muted-foreground`;function A({navigateLabel:e,openLabel:t,closeLabel:r,trailing:i,className:a}){return(0,w.jsxs)(`div`,{className:p(`flex items-center justify-between border-t border-border/60 px-4 py-2`,a),children:[(0,w.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,w.jsx)(`kbd`,{className:k,children:`↑↓`}),(0,w.jsx)(n,{tag:`span`,size:`xxs`,type:`secondary`,children:e}),(0,w.jsx)(`kbd`,{className:k,children:`↵`}),(0,w.jsx)(n,{tag:`span`,size:`xxs`,type:`secondary`,children:t}),(0,w.jsx)(`kbd`,{className:k,children:`esc`}),(0,w.jsx)(n,{tag:`span`,size:`xxs`,type:`secondary`,children:r})]}),i]})}function j({sections:e,fallbackIcons:t}){return(0,w.jsx)(`div`,{className:`space-y-4 px-2 py-3`,children:e.map((e,r)=>(0,w.jsxs)(`div`,{children:[(0,w.jsxs)(`div`,{className:`flex items-center gap-2 px-3 pb-1.5`,children:[(0,w.jsx)(e.icon??(r===0?t?.recent??s:t?.suggestions??c),{className:`size-3.5 text-muted-foreground`,"aria-hidden":`true`}),(0,w.jsx)(n,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label})]}),(0,w.jsx)(`ul`,{className:`m-0 list-none space-y-0.5 p-0`,children:e.items.map(e=>{let t=e.icon??d;return(0,w.jsx)(`li`,{children:(0,w.jsxs)(i,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`sm`,onClick:e.onSelect,className:p(`h-auto w-full justify-start gap-3 rounded-md px-3 py-1.5 text-left transition-colors`,`hover:bg-muted/50 focus-visible:bg-muted/50`),children:[(0,w.jsx)(t,{className:`size-3.5 text-muted-foreground`,"aria-hidden":`true`}),(0,w.jsx)(n,{className:`flex-1 truncate`,children:e.label})]})},e.id)})})]},e.id))})}var M=C.forwardRef(function({value:e,onChange:t,onKeyDown:n,placeholder:a,clearLabel:o=`Clear search`,loading:s=!1,autoFocus:c=!1},u){let f=C.useRef(null);return C.useImperativeHandle(u,()=>f.current),C.useEffect(()=>{c&&f.current?.focus()},[c]),(0,w.jsxs)(`div`,{className:`flex items-center gap-3 border-b border-border px-4 py-3`,children:[(0,w.jsx)(d,{className:`size-4 shrink-0 text-muted-foreground`,"aria-hidden":`true`}),(0,w.jsx)(`div`,{className:`min-w-0 flex-1`,children:(0,w.jsx)(v,{ref:f,type:`text`,value:e,onChange:e=>t(e.target.value),onKeyDown:n,placeholder:a,"aria-label":a,autoComplete:`off`,spellCheck:!1,size:`sm`,className:`h-auto border-0 bg-transparent px-0 py-0 text-sm shadow-none focus-visible:border-transparent focus-visible:ring-0`})}),s&&(0,w.jsx)(r,{className:`size-4 shrink-0 animate-spin text-muted-foreground`,"aria-hidden":`true`}),!s&&!!e&&(0,w.jsx)(i,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,onClick:()=>t(``),"aria-label":o,className:`size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground`,children:(0,w.jsx)(l,{className:`size-3.5`})})]})}),N={primary:`bg-primary/5 text-primary`,success:`bg-success/10 text-success`,warning:`bg-warning/20 text-warning-foreground`,info:`bg-info/10 text-info`,destructive:`bg-destructive/10 text-destructive`,default:`bg-muted text-muted-foreground`},P={primary:`bg-primary/10 text-primary`,success:`bg-success/10 text-success`,warning:`bg-warning/20 text-warning-foreground`,info:`bg-info/10 text-info`,destructive:`bg-destructive/10 text-destructive`,default:`bg-muted text-muted-foreground`};function F(e,t){let n=(t??``).trim();if(!n)return e;let r=e.toLowerCase(),i=n.toLowerCase(),a=r.indexOf(i);return a<0?e:(0,w.jsxs)(w.Fragment,{children:[e.slice(0,a),(0,w.jsx)(`mark`,{className:`rounded-sm bg-warning/40 px-0.5 text-foreground`,children:e.slice(a,a+n.length)}),e.slice(a+n.length)]})}function I({result:e,isActive:t=!1,query:r=``,onSelect:s,onMouseEnter:c,toneBg:l,toneAvatar:u,className:d}){let f=e.thumbnail?.icon,m={...N,...l},v={...P,...u};return(0,w.jsxs)(i,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`sm`,onMouseEnter:c,onClick:s,className:p(`group/row relative h-auto w-full justify-start gap-3 rounded-lg px-3 py-(--row-py) text-left transition-colors`,t?`bg-muted/60`:`hover:bg-muted/40`,d),children:[(0,w.jsx)(`div`,{className:`flex shrink-0 items-center`,children:e.avatar?(0,w.jsxs)(_,{className:p(`size-8`,v[e.avatar.tone??`default`]),children:[e.avatar.src&&(0,w.jsx)(h,{src:e.avatar.src,alt:e.title}),(0,w.jsx)(g,{className:p(`text-xs font-semibold`,v[e.avatar.tone??`default`]),children:e.avatar.initials})]}):f?(0,w.jsx)(`span`,{className:p(`inline-flex size-8 items-center justify-center rounded-md`,m[e.thumbnail?.tone??`default`]),children:(0,w.jsx)(f,{className:`size-4`,"aria-hidden":`true`})}):null}),(0,w.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,w.jsxs)(`div`,{className:`flex items-center gap-2 leading-tight`,children:[(0,w.jsx)(n,{tag:`span`,weight:`semibold`,className:`truncate`,children:F(e.title,r)}),!!e.badge&&(0,w.jsx)(a,{variant:e.badge.tone===`destructive`?`error`:e.badge.tone,children:e.badge.label})]}),(()=>{let t=[];return e.subtitle&&t.push({key:`subtitle`,node:(0,w.jsx)(`span`,{children:F(e.subtitle,r)})}),e.meta?.forEach((e,n)=>{let r=e.icon;t.push({key:`m-${n}`,node:(0,w.jsxs)(`span`,{className:p(`inline-flex items-center gap-1`,e.mono&&`font-mono tabular-nums`),children:[!!r&&(0,w.jsx)(r,{className:`size-3 shrink-0`,"aria-hidden":`true`}),e.label]})})}),e.timestamp&&t.push({key:`ts`,node:(0,w.jsx)(`span`,{className:`tabular-nums`,children:e.timestamp})}),e.tags?.forEach(e=>t.push({key:`t-${e}`,node:(0,w.jsx)(`span`,{children:e})})),e.rightValue&&t.push({key:`rv`,node:(0,w.jsxs)(`span`,{className:`font-medium tabular-nums text-foreground`,children:[e.rightValue,!!e.rightLabel&&(0,w.jsx)(`span`,{className:`ml-1 font-normal text-muted-foreground`,children:e.rightLabel.toLowerCase()})]})}),t.length===0?null:(0,w.jsx)(n,{size:`xs`,type:`secondary`,className:`mt-0.5 truncate`,children:t.map((e,t)=>(0,w.jsxs)(`span`,{children:[t>0&&(0,w.jsx)(`span`,{"aria-hidden":`true`,className:`mx-1.5 text-muted-foreground/60`,children:`·`}),e.node]},e.key))})})()]}),!!(e.rightValue||e.rightLabel)&&(0,w.jsx)(`div`,{className:`hidden shrink-0 items-center self-stretch border-l border-border/60 pl-3 md:flex`,children:(0,w.jsxs)(`div`,{className:`flex flex-col items-end gap-0 text-right leading-tight`,children:[!!e.rightValue&&(0,w.jsx)(n,{tag:`span`,weight:`semibold`,className:`whitespace-nowrap tabular-nums`,children:e.rightValue}),!!e.rightLabel&&(0,w.jsx)(n,{tag:`span`,size:`xxs`,type:`secondary`,className:`mt-0.5 whitespace-nowrap`,children:e.rightLabel})]})}),(0,w.jsx)(`span`,{"aria-hidden":`true`,className:p(`inline-flex size-7 shrink-0 items-center justify-center rounded-md transition-all`,t?`bg-foreground text-background opacity-100`:`text-muted-foreground opacity-0 group-hover/row:opacity-100`),children:(0,w.jsx)(o,{className:`size-3.5`})})]})}function L({value:e,onValueChange:t,tabs:r,counts:i}){return(0,w.jsx)(`div`,{className:`global-search-tabs--component border-b border-border/60 px-3 py-2`,children:(0,w.jsx)(`div`,{className:`global-search-tabs--scroller -mx-1 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,children:(0,w.jsx)(x,{value:e,onValueChange:e=>t(e),className:`min-w-max`,children:(0,w.jsx)(b,{className:`global-search-tabs--list h-8 w-max min-w-max`,children:r.map(t=>{let r=e===t.value,a=i[t.value]??0;return(0,w.jsxs)(y,{value:t.value,className:`global-search-tabs--trigger shrink-0 gap-1.5 px-2.5 text-xs`,children:[(0,w.jsx)(`span`,{children:t.label}),(0,w.jsx)(n,{tag:`span`,size:`xxs`,weight:`medium`,className:p(`global-search-tabs--count rounded px-1 py-0 tabular-nums`,r?`bg-muted text-muted-foreground`:`bg-transparent text-muted-foreground/70`),children:a})]},t.value)})})})})})}function R({results:e=[],query:t,onQueryChange:r,onResultSelect:a,onClose:o,loading:s=!1,idleSections:c,groupLabels:l,autoFocus:u=!1,strings:d,slots:m,tabs:h,className:g}){let _=f(T,d),v=D({results:e,query:t,onResultSelect:a,onClose:o}),y=!s&&t.trim().length>1&&e.length===0,b=!s&&t.trim().length<=1,x=C.useMemo(()=>{if(h)return h;let e=Object.keys(v.grouped);return[{value:`all`,label:_.tabAll},...e.map(e=>({value:e,label:l?.[e]??e}))]},[h,v.grouped,_.tabAll,l]);return(0,w.jsxs)(`div`,{className:p(`global-search--component`,`overflow-hidden rounded-xl border border-border bg-card shadow-2xl`,g),children:[m?.input??(0,w.jsx)(M,{value:t,onChange:r,onKeyDown:v.onKeyDown,placeholder:_.placeholder,clearLabel:_.clear,loading:s,autoFocus:u}),!s&&e.length>0&&(m?.tabs??(0,w.jsx)(L,{value:v.activeTab,onValueChange:v.setActiveTab,tabs:x,counts:v.tabCounts})),(0,w.jsxs)(`div`,{className:`max-h-[520px] overflow-y-auto`,children:[!!b&&(m?.idle??(c&&c.length>0?(0,w.jsx)(j,{sections:c}):null)),!!s&&(m?.loading??(0,w.jsx)(`div`,{className:`flex items-center justify-center px-6 py-12`,children:(0,w.jsx)(n,{type:`secondary`,children:_.loading})})),!!y&&(m?.empty??(0,w.jsx)(O,{title:E(_.emptyTitle,{query:t}),hint:_.emptyHint})),!s&&e.length>0&&(0,w.jsx)(`div`,{className:`px-2 py-2`,children:Object.entries(v.visibleGrouped).map(([e,r],o)=>(0,w.jsxs)(`div`,{className:p(`pb-2 last:pb-0`,o>0&&`mt-3 pt-2`),children:[(0,w.jsxs)(`div`,{className:`flex items-center justify-between px-3 pb-1`,children:[(0,w.jsx)(n,{size:`xs`,type:`secondary`,weight:`medium`,children:l?.[e]??e}),v.activeTab===`all`&&r.length>0&&(0,w.jsx)(i,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,onClick:()=>v.setActiveTab(e),className:`h-auto rounded px-1 py-0 text-primary transition-colors hover:underline`,children:(0,w.jsx)(n,{tag:`span`,size:`xxs`,weight:`medium`,className:`text-primary`,children:_.seeAll})})]}),(0,w.jsx)(`ul`,{className:`m-0 list-none space-y-0.5 p-0`,children:r.map(e=>{let n=v.flat[v.activeIdx]?.id===e.id,r={isActive:n,query:t,onSelect:()=>a?.(e)};return(0,w.jsx)(`li`,{children:m?.renderResult?m.renderResult(e,r):(0,w.jsx)(I,{result:e,isActive:n,query:t,onSelect:r.onSelect,onMouseEnter:()=>v.setActiveById(e.id),toneBg:m?.toneBg,toneAvatar:m?.toneAvatar})},e.id)})})]},e))})]}),m?.footer??(0,w.jsx)(A,{navigateLabel:_.footerNavigate,openLabel:_.footerOpen,closeLabel:_.footerClose,trailing:!b&&!y&&e.length>0?(0,w.jsx)(n,{tag:`span`,size:`xxs`,type:`secondary`,className:`tabular-nums`,children:E(_.resultsCount,{count:e.length})}):void 0})]})}export{S as n,R as t};

package/dist/showcase/assets/globe-BJHI134i.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`globe`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20`,key:`13o1zl`}],[`path`,{d:`M2 12h20`,key:`9i4pu4`}]]);export{t};