admin-ui-starter-kit 0.6.9 → 0.7.1

package/dist/showcase/assets/variant-details-BJ0OtpeL.js

@@ -0,0 +1,50 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-C_rLy6Zn.js";import{t as s}from"./arrow-left-DBxsWbzL.js";import{r as c,t as l}from"./example-BsDQngs7.js";import{t as u}from"./list-checks-CUXbiTmk.js";import{t as d}from"./pencil-DdCEPDLe.js";import{t as f}from"./save-j-PKUm-B.js";import{D as p,O as m,f as h,i as g,l as _,n as v,o as y,p as b,r as x,u as S}from"./fixtures-ClOCQD2a.js";import{t as C}from"./trash-2-C-6T17-B.js";import{t as w}from"./x-C5_SzMQM.js";import{N as T,d as E,n as D}from"./index-B4sKWDcN.js";import{t as O}from"./props-table-aynAz90t.js";import{t as k}from"./smart-card-CwDYx0xj.js";import{o as A}from"./item-WOhHNpnr.js";import{t as j}from"./input-CLQIEOQ4.js";import{t as M}from"./textarea-DcCHHuP-.js";import{t as N}from"./select-J0hPSc5B.js";import{n as P}from"./form-field-D5kwgD4P.js";import{t as F}from"./metadata-list-C6CF85o9.js";import{t as I}from"./product-empty-state-CKylTX_h.js";import{i as L}from"./product-rows-CWy63Dk5.js";import{t as R}from"./product-variant-action-menu-CnRJscP3.js";var z=E(),B=e=>e!=null&&e!==!1&&e!==``;function V(e,t){return[{label:t.price,value:e.price},{label:t.inventory,value:e.inventory},{label:t.sku,value:e.sku},{label:t.channels,value:e.channels},{label:t.updated,value:e.updatedAt}].filter(e=>B(e.value))}function H({variant:e,metadata:t,optionItems:n=[],media:r,onBack:o,onSelectVariant:l,onEditVariant:d,onDuplicateVariant:f,onDeleteVariant:m,onSelectOption:h,actions:g,headerEnd:_,footerSlot:v,empty:y,renderActions:b,renderMetadata:x,renderOption:S,className:C,strings:w}){let E=T(p,w),O=e?t??V(e,E.metadata):[],j=!!(e&&(l||d||f||m||b)),M=(0,z.jsxs)(`div`,{className:`product-variant-details--header-actions flex items-center gap-2`,children:[!!o&&(0,z.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:o,icon:s,children:E.backLabel}),!!j&&e&&(0,z.jsx)(R,{variant:e,onSelectVariant:l,onEditVariant:d,onDuplicateVariant:f,onDeleteVariant:m,renderVariantActions:b})]}),N=e?.options??[];return(0,z.jsx)(k,{icon:(0,z.jsx)(u,{className:`size-4`}),title:e?.name??E.title,titleSuffix:e?.status?(0,z.jsx)(i,{variant:e.statusVariant??`secondary`,children:e.status}):void 0,description:e?.description??E.description,actions:g,headerAction:o||j?M:void 0,headerEnd:_,footerSlot:v,contentClassName:`mt-1`,className:D(`product-variant-details--component w-full`,C),children:e?(0,z.jsxs)(`div`,{className:`product-variant-details--body grid gap-5`,children:[!!r&&(0,z.jsx)(`div`,{className:`product-variant-details--media overflow-hidden rounded-md border border-border bg-muted/30`,children:r}),x?x(e):(0,z.jsx)(F,{title:E.factsTitle,items:O,columns:3,dense:!0,className:`product-variant-details--metadata`}),!!N.length&&(0,z.jsxs)(`div`,{className:`product-variant-details--selected-options space-y-2`,children:[(0,z.jsx)(a,{weight:`semibold`,children:E.selectedOptionsTitle}),(0,z.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:N.map((e,t)=>(0,z.jsx)(i,{variant:`secondary`,children:e},t))})]}),!!n.length&&(0,z.jsxs)(`div`,{className:`product-variant-details--related-options space-y-2`,children:[(0,z.jsx)(a,{weight:`semibold`,children:E.relatedOptionsTitle}),(0,z.jsx)(A,{children:n.map((e,t)=>S?(0,z.jsx)(`div`,{children:S(e,t)},e.id):(0,z.jsx)(L,{item:e,actionLabel:E.viewOptionLabel,onSelect:h?()=>h(e):void 0},e.id))})]})]}):y??(0,z.jsx)(I,{title:E.emptyTitle,description:E.emptyDescription})})}H.displayName=`ProductVariantDetails`;var U=t(n(),1),W=e=>e.map(e=>({value:e.value,label:e.label,disabled:e.disabled}));function G({value:e,defaultValue:t,optionFields:n=[],statusOptions:r=[],onValueChange:i,onSubmit:o,onCancel:s,onDelete:l,actions:u,headerEnd:p,footerSlot:h,disabled:g=!1,isSubmitting:_=!1,className:v,strings:y}){let b=T(m,y),x=(0,U.useId)(),S=e!==void 0,[E,O]=(0,U.useState)(t??{}),A=(S?e:E)??{},F=g||_,I=e=>{S||O(e),i?.(e)},L=(e,t)=>{I({...A,[e]:t})},R=(e,t)=>{I({...A,options:{...A.options??{},[e.id]:t}})},B=e=>{e.preventDefault(),o?.(A)},V=(0,z.jsxs)(`div`,{className:`product-variant-editor--footer flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between`,children:[(0,z.jsx)(`div`,{children:!!l&&(0,z.jsx)(c,{type:`button`,variant:`error`,buttonStyle:`ghost`,onClick:()=>l(A),disabled:F,icon:C,children:b.deleteLabel})}),(0,z.jsxs)(`div`,{className:`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,children:[!!s&&(0,z.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:s,disabled:F,icon:w,children:b.cancelLabel}),!!o&&(0,z.jsx)(c,{type:`submit`,form:x,disabled:F,icon:f,children:_?b.savingLabel:b.saveLabel})]})]}),H=!!(l||s||o);return(0,z.jsx)(k,{icon:(0,z.jsx)(d,{className:`size-4`}),title:b.title,description:b.description,actions:u,headerEnd:p,footerSlot:h??(H?V:void 0),footerDivider:!0,contentClassName:`mt-1`,className:D(`product-variant-editor--component w-full`,v),children:(0,z.jsxs)(`form`,{id:x,className:`product-variant-editor--form grid gap-5`,onSubmit:B,children:[(0,z.jsxs)(`section`,{className:`product-variant-editor--section grid gap-3`,children:[(0,z.jsx)(a,{weight:`semibold`,children:b.identityTitle}),(0,z.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:[(0,z.jsx)(P,{label:b.fields.name,required:!0,children:(0,z.jsx)(j,{value:A.name??``,onChange:e=>L(`name`,e.target.value),placeholder:b.placeholders.name,disabled:F})}),(0,z.jsx)(P,{label:b.fields.sku,children:(0,z.jsx)(j,{value:A.sku??``,onChange:e=>L(`sku`,e.target.value),placeholder:b.placeholders.sku,disabled:F})}),(0,z.jsx)(P,{label:b.fields.description,className:`md:col-span-2`,children:(0,z.jsx)(M,{value:A.description??``,onChange:e=>L(`description`,e.target.value),placeholder:b.placeholders.description,disabled:F,autoResize:!0,minRows:2})})]})]}),(0,z.jsxs)(`section`,{className:`product-variant-editor--section grid gap-3`,children:[(0,z.jsx)(a,{weight:`semibold`,children:b.commercialTitle}),(0,z.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:[(0,z.jsx)(P,{label:b.fields.price,children:(0,z.jsx)(j,{value:A.price??``,onChange:e=>L(`price`,e.target.value),placeholder:b.placeholders.price,disabled:F})}),(0,z.jsx)(P,{label:b.fields.inventory,children:(0,z.jsx)(j,{value:A.inventory??``,onChange:e=>L(`inventory`,e.target.value),placeholder:b.placeholders.inventory,disabled:F,inputMode:`numeric`})}),(0,z.jsx)(P,{label:b.fields.status,children:r.length>0?(0,z.jsx)(N,{options:W(r),value:A.status??null,onChange:e=>L(`status`,e??``),placeholder:b.statusPlaceholder,disabled:F,"aria-label":b.fields.status}):(0,z.jsx)(j,{value:A.status??``,onChange:e=>L(`status`,e.target.value),placeholder:b.placeholders.status,disabled:F})}),(0,z.jsx)(P,{label:b.fields.channels,children:(0,z.jsx)(j,{value:A.channels??``,onChange:e=>L(`channels`,e.target.value),placeholder:b.placeholders.channels,disabled:F})})]})]}),!!n.length&&(0,z.jsxs)(`section`,{className:`product-variant-editor--section grid gap-3`,children:[(0,z.jsx)(a,{weight:`semibold`,children:b.optionsTitle}),(0,z.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:n.map(e=>{let t=e.value??A.options?.[e.id]??``,n=!!e.choices?.length;return(0,z.jsx)(P,{label:e.label,helperText:e.helperText,children:n?(0,z.jsx)(N,{options:W(e.choices??[]),value:t||null,onChange:t=>R(e,t),placeholder:e.placeholder??b.optionPlaceholder,disabled:F,"aria-label":e.label}):(0,z.jsx)(j,{value:t,onChange:t=>R(e,t.target.value),placeholder:e.placeholder??b.optionPlaceholder,disabled:F})},e.id)})})]})]})})}G.displayName=`ProductVariantEditor`;var K=e({VariantDetailsAndEditor:()=>q});function q(){let[e,t]=(0,U.useState)(_);return(0,z.jsx)(x,{children:(0,z.jsxs)(`div`,{className:`grid w-full gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]`,children:[(0,z.jsx)(H,{variant:b[0],optionItems:y.slice(0,2),media:(0,z.jsx)(v,{frame:`wide`}),onBack:g,onSelectVariant:g,onEditVariant:g,onDuplicateVariant:g,onDeleteVariant:g,onSelectOption:g}),(0,z.jsx)(G,{value:e,optionFields:S,statusOptions:h,onValueChange:t,onSubmit:g,onCancel:g,onDelete:g})]})})}var J=`import { useState } from 'react';
+
+import {
+	ProductVariantDetails,
+	ProductVariantEditor,
+	type ProductVariantEditorValues,
+} from '@/components/features/products';
+
+import {
+	ProductMediaPreview,
+	ProductPreviewViewport,
+	noop,
+	options,
+	variantEditorValue,
+	variantOptionFields,
+	variantStatusOptions,
+	variants,
+} from './fixtures';
+
+export function VariantDetailsAndEditor() {
+	const [value, setValue] = useState<ProductVariantEditorValues>(variantEditorValue);
+
+	return (
+		<ProductPreviewViewport>
+			<div className="grid w-full gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+				<ProductVariantDetails
+					variant={variants[0]}
+					optionItems={options.slice(0, 2)}
+					media={<ProductMediaPreview frame="wide" />}
+					onBack={noop}
+					onSelectVariant={noop}
+					onEditVariant={noop}
+					onDuplicateVariant={noop}
+					onDeleteVariant={noop}
+					onSelectOption={noop}
+				/>
+				<ProductVariantEditor
+					value={value}
+					optionFields={variantOptionFields}
+					statusOptions={variantStatusOptions}
+					onValueChange={setValue}
+					onSubmit={noop}
+					onCancel={noop}
+					onDelete={noop}
+				/>
+			</div>
+		</ProductPreviewViewport>
+	);
+}
+`;function Y(e){let t={h4:`h4`,...e.components};return K||Z(`Examples`,!1),q||Z(`Examples.VariantDetailsAndEditor`,!0),(0,z.jsxs)(r,{title:`Features · Products · Variant Details`,description:`Variant detail and editor surfaces for product-specific edit flows. Persistence, validation, and routing stay callback-owned by the consumer.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/products`,children:[(0,z.jsx)(o,{title:`Details and editor`,id:`details-editor`,children:(0,z.jsx)(l,{name:`VariantDetailsAndEditor`,source:J,children:(0,z.jsx)(q,{})})}),(0,z.jsxs)(o,{title:`API`,id:`api`,children:[(0,z.jsx)(t.h4,{children:`ProductVariantDetails`}),(0,z.jsx)(O,{component:`ProductVariantDetails`}),(0,z.jsx)(t.h4,{children:`ProductVariantEditor`}),(0,z.jsx)(O,{component:`ProductVariantEditor`})]})]})}function X(e={}){let{wrapper:t}=e.components||{};return t?(0,z.jsx)(t,{...e,children:(0,z.jsx)(Y,{...e})}):Y(e)}function Z(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{X as default};

package/dist/showcase/assets/variant-management-pTZ83MM_.js

@@ -0,0 +1,209 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-C_rLy6Zn.js";import{Dr as s,r as c,t as l}from"./example-BsDQngs7.js";import{t as ee}from"./chevron-down-mjLUdP6b.js";import{t as u}from"./eye-CAeo-GNe.js";import{t as te}from"./grip-vertical-qqe2NqfZ.js";import{t as ne}from"./list-checks-CUXbiTmk.js";import{t as d}from"./pencil-DdCEPDLe.js";import{t as re}from"./plus-Dp_nZNjk.js";import{t as f}from"./refresh-cw-DpfoVhbc.js";import{A as p,a as m,d as h,k as g,m as ie,y as _}from"./fixtures-ClOCQD2a.js";import{t as ae}from"./trash-2-C-6T17-B.js";import{t as oe}from"./x-C5_SzMQM.js";import{N as v,a as se,d as y,l as b,n as x}from"./index-B4sKWDcN.js";import{t as S}from"./props-table-aynAz90t.js";import{t as C}from"./smart-card-CwDYx0xj.js";import{t as ce}from"./checkbox-BBxn_hxI.js";import{t as w}from"./input-CLQIEOQ4.js";import{t as T}from"./select-J0hPSc5B.js";import{n as E}from"./switch-BOlIXIn9.js";import{t as le}from"./product-empty-state-CKylTX_h.js";var D=b(`circle-plus`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M8 12h8`,key:`1wcyev`}],[`path`,{d:`M12 8v8`,key:`napkw2`}]]),ue=b(`list-filter`,[[`path`,{d:`M2 5h20`,key:`1fs1ex`}],[`path`,{d:`M6 12h12`,key:`8npq4p`}],[`path`,{d:`M9 19h6`,key:`456am0`}]]),O=t(n(),1),k=y();function A(e){return typeof e==`string`||typeof e==`number`?String(e):``}function de(e){return e.label}function fe(e,t){let n=A(t.name);return n?`${e}: ${n}`:e}function pe(e){return{name:A(e.name),values:(e.values??[]).map(e=>({...e,label:A(e.label)}))}}function j({optionGroups:e=[],surface:t=`card`,collapsedOptionIds:n,defaultCollapsedOptionIds:r=[],onCollapsedOptionIdsChange:i,editingOptionId:o,defaultEditingOptionId:s,onEditingOptionIdChange:l,onCreateOption:u,onEditOption:ne,onDeleteOption:d,onAddValue:f,onDeleteValue:p,onOptionNameChange:m,onValueLabelChange:h,onDoneEditingOption:g,onSaveEditingOption:se,onCancelEditingOption:y,onToggleUsedForVariants:b,renderOptionActions:S,renderValue:ce,showHeader:T,showCollapseControls:ue=!0,showInlineActions:j=!0,showVariantToggle:M=!0,actions:N,headerEnd:P,footerSlot:me,empty:F,className:I,strings:he}){let L=v(_,he),ge=n!==void 0,[_e,ve]=(0,O.useState)(r),R=ge?n:_e,ye=(0,O.useMemo)(()=>new Set(R),[R]),z=o!==void 0||s!==void 0||!!l||!!m||!!h||!!g||!!se||!!y,B=o!==void 0,[be,xe]=(0,O.useState)(s??null),[Se,V]=(0,O.useState)({}),Ce=z?B?o:be:null,H=e.length>0,U=t===`embedded`&&T!==!1,W=H&&!!u,we=(0,O.useCallback)(t=>{ge||ve(t),i?.(t,e.filter(e=>t.includes(e.id)))},[ge,i,e]),G=(0,O.useCallback)(e=>{we(ye.has(e.id)?R.filter(t=>t!==e.id):[...R,e.id])},[ye,R,we]),K=(0,O.useCallback)((e,t)=>{z&&(B||xe(e),l?.(e,t))},[B,l,z]),q=(0,O.useCallback)(e=>{V(t=>({...t,[e.id]:pe(e)})),K(e.id,e),ne?.(e)},[ne,K]),J=(0,O.useCallback)(e=>Se[e.id]??pe(e),[Se]),Y=(0,O.useCallback)((e,t)=>{V(n=>({...n,[e.id]:t(n[e.id]??pe(e))}))},[]),Te=(0,O.useCallback)(e=>{let t=J(e);V(t=>{let{[e.id]:n,...r}=t;return r}),K(null,e),y?.(e,t)},[J,y,K]),X=(0,O.useCallback)(e=>{let t=J(e),n=e.values??[],r=new Set(n.map(e=>e.id)),i=new Set(t.values.map(e=>e.id));se?.(e,t),m?.(e,t.name),n.forEach(n=>{let r=t.values.find(e=>e.id===n.id);r&&A(n.label)!==A(r.label)&&h?.(e,n,A(r.label))}),t.values.forEach(t=>{r.has(t.id)||f?.(e)}),n.forEach(t=>{i.has(t.id)||p?.(e,t)}),V(t=>{let{[e.id]:n,...r}=t;return r}),K(null,e),g?.(e)},[J,f,p,g,m,se,h,K]),Z=(0,O.useCallback)(e=>{Ce===e.id&&(V(t=>{let{[e.id]:n,...r}=t;return r}),K(null,e)),d?.(e)},[d,Ce,K]),Q=u?(0,k.jsx)(c,{type:`button`,variant:`dark`,onClick:u,icon:re,children:L.createLabel}):void 0,Ee=(0,k.jsx)(`div`,{className:`product-options-matrix--body min-w-0`,children:(0,k.jsxs)(`div`,{className:`product-options-matrix--panel overflow-hidden rounded-radius-lg border border-border bg-background`,children:[U?(0,k.jsxs)(`div`,{className:`product-options-matrix--panel-header flex min-w-0 flex-wrap items-center justify-between gap-space-md p-surface`,children:[(0,k.jsx)(a,{weight:`semibold`,children:L.title}),Q]}):null,H?(0,k.jsxs)(`div`,{className:x(`product-options-matrix--list`,U&&`border-t border-border/70`),children:[e.map((e,t)=>{let n=e.values??[],r=ye.has(e.id),i=Ce===e.id,o=!!ne||z,s=!!d,l=!!f,u=J(e),m=S?.(e,{index:t,onEdit:o?()=>q(e):void 0,onDelete:d?()=>Z(e):void 0,onAddValue:f?()=>f(e):void 0,onToggleCollapsed:()=>G(e),collapsed:r}),h=[...l?[{id:`add-value`,label:L.addValueLabel,icon:(0,k.jsx)(re,{className:`size-3.5`}),onClick:()=>f?.(e),variant:`ghost`}]:[],...s?[{id:`delete`,label:L.deleteLabel,icon:(0,k.jsx)(ae,{className:`size-3.5`}),onClick:()=>Z(e),variant:`destructive`}]:[]],g=j?(0,k.jsxs)(k.Fragment,{children:[!!o&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>q(e),children:L.editLabel}),(0,k.jsx)(ie,{item:e,actions:h,menuLabel:L.actionsLabel})]}):null,_=m===void 0?g:m;if(i)return(0,k.jsx)(`div`,{className:`product-options-matrix--item product-options-matrix--item-editing border-b border-border/70 p-surface last:border-b-0`,children:(0,k.jsxs)(`div`,{className:`grid min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-space-md gap-y-space-lg`,children:[(0,k.jsx)(`span`,{className:`product-options-matrix--drag-handle mt-[2.625rem] flex size-icon-lg items-center justify-center text-muted-foreground`,"aria-hidden":`true`,children:(0,k.jsx)(te,{className:`size-icon-sm`})}),(0,k.jsxs)(`div`,{className:`product-options-matrix--editor grid min-w-0 gap-space-lg`,children:[(0,k.jsxs)(`div`,{className:`product-options-matrix--editor-field grid min-w-0 gap-space-sm`,children:[(0,k.jsx)(a,{weight:`medium`,children:L.optionNameLabel}),(0,k.jsx)(w,{value:u.name,onChange:t=>{let n=t.currentTarget.value;Y(e,e=>({...e,name:n}))},"aria-label":L.optionNameLabel,className:`bg-background`})]}),(0,k.jsxs)(`div`,{className:`product-options-matrix--editor-field grid min-w-0 gap-space-sm`,children:[(0,k.jsx)(a,{weight:`medium`,children:L.optionValuesLabel}),(0,k.jsxs)(`div`,{className:`product-options-matrix--editor-values grid min-w-0 gap-space-xs`,children:[u.values.length===0&&(0,k.jsx)(a,{size:`xs`,type:`secondary`,children:L.noValuesLabel}),u.values.map(t=>(0,k.jsxs)(`div`,{className:`product-options-matrix--editor-value grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-space-sm`,children:[(0,k.jsx)(`span`,{className:`flex size-icon-lg items-center justify-center text-muted-foreground`,"aria-hidden":`true`,children:(0,k.jsx)(te,{className:`size-icon-sm`})}),(0,k.jsx)(w,{value:A(t.label),onChange:n=>{let r=n.currentTarget.value;Y(e,e=>({...e,values:e.values.map(e=>e.id===t.id?{...e,label:r}:e)}))},"aria-label":`${L.optionValuesLabel}: ${A(t.label)}`,className:`bg-background`}),(0,k.jsxs)(c,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>Y(e,e=>({...e,values:e.values.filter(e=>e.id!==t.id)})),"aria-label":L.deleteValueLabel,className:`text-muted-foreground hover:text-destructive`,children:[(0,k.jsx)(ae,{className:`size-icon-sm`,"aria-hidden":`true`}),(0,k.jsx)(`span`,{className:`sr-only`,children:L.deleteValueLabel})]})]},t.id)),(0,k.jsxs)(`div`,{className:`product-options-matrix--editor-add-value grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-space-sm`,children:[(0,k.jsx)(`span`,{className:`size-icon-lg`,"aria-hidden":`true`}),(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:()=>Y(e,t=>{let n=t.values.length+1;return{...t,values:[...t.values,{id:`${e.id}-draft-value-${n}`,label:``}]}}),fullWidth:!0,className:`justify-start border-input bg-background text-muted-foreground hover:bg-muted/60`,children:L.addAnotherValueLabel}),(0,k.jsx)(`span`,{className:`size-control-sm`,"aria-hidden":`true`})]})]})]}),(0,k.jsxs)(`div`,{className:`product-options-matrix--editor-actions flex min-w-0 items-center justify-between gap-space-md`,children:[(0,k.jsx)(`div`,{children:!!d&&(0,k.jsx)(c,{type:`button`,variant:`error`,buttonStyle:`outline`,onClick:()=>Z(e),children:L.deleteLabel})}),(0,k.jsxs)(`div`,{className:`flex items-center justify-end gap-space-sm`,children:[(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>Te(e),children:L.cancelLabel}),(0,k.jsx)(c,{type:`button`,variant:`dark`,onClick:()=>X(e),children:L.saveLabel??L.doneLabel})]})]})]})]})},e.id);let v=(0,k.jsxs)(`span`,{className:`grid min-w-0 gap-space-sm`,children:[(0,k.jsxs)(`span`,{className:`flex min-w-0 flex-wrap items-center gap-space-sm`,children:[(0,k.jsx)(a,{tag:`span`,weight:`semibold`,className:`min-w-0 whitespace-normal break-words`,children:e.name}),e.badge]}),!!e.description&&(0,k.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,className:`max-w-prose`,children:e.description}),!r&&(0,k.jsx)(`span`,{className:`product-options-matrix--values grid gap-space-sm`,children:n.length===0?(0,k.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,children:L.noValuesLabel}):(0,k.jsx)(`span`,{className:`flex flex-wrap gap-space-xs`,children:n.map((n,r)=>{let i=p?()=>p(e,n):void 0,a=ce?.(n,{option:e,optionIndex:t,valueIndex:r,onDelete:i});return a?(0,k.jsx)(`span`,{children:a},n.id):(0,k.jsxs)(`span`,{className:x(`product-options-matrix--value inline-flex max-w-full items-center gap-space-xs rounded-radius-sm bg-muted px-space-sm py-space-xs text-pxs font-medium leading-none text-muted-foreground`,n.disabled&&`opacity-60`),children:[(0,k.jsx)(`span`,{className:`min-w-0 whitespace-normal break-words`,children:de(n)}),n.badge,!!i&&j&&(0,k.jsxs)(c,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:i,"aria-label":L.deleteValueLabel,className:`size-icon-sm shrink-0 rounded-radius-sm text-muted-foreground/70 hover:text-destructive`,children:[(0,k.jsx)(oe,{className:`size-3`,"aria-hidden":`true`}),(0,k.jsx)(`span`,{className:`sr-only`,children:L.deleteValueLabel})]})]},n.id)})})})]});return(0,k.jsx)(`div`,{className:`product-options-matrix--item border-b border-border/70 last:border-b-0`,children:(0,k.jsxs)(`div`,{className:`grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-space-md gap-y-space-md p-surface lg:grid-cols-[auto_minmax(0,1fr)_auto]`,children:[ue?(0,k.jsxs)(c,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>G(e),"aria-expanded":!r,"aria-label":r?L.expandOptionLabel:L.collapseOptionLabel,className:`product-options-matrix--collapse-trigger mt-space-2xs shrink-0 text-muted-foreground`,children:[(0,k.jsx)(ee,{className:x(`size-icon-sm transition-transform`,r&&`-rotate-90`),"aria-hidden":`true`}),(0,k.jsx)(`span`,{className:`sr-only`,children:r?L.expandOptionLabel:L.collapseOptionLabel})]}):(0,k.jsx)(`span`,{className:`product-options-matrix--drag-handle flex size-icon-lg items-center justify-center text-muted-foreground`,"aria-hidden":`true`,children:(0,k.jsx)(te,{className:`size-icon-sm`})}),(0,k.jsx)(`div`,{className:`product-options-matrix--item-main min-w-0`,children:o&&!j?(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>q(e),"aria-label":fe(L.editLabel,e),className:`h-auto min-h-0 w-full justify-start rounded-radius-sm p-0 text-left hover:bg-transparent focus-visible:ring-offset-2`,children:v}):v}),(M||!!_)&&(0,k.jsxs)(`div`,{className:`product-options-matrix--item-actions col-start-2 flex min-w-fit flex-wrap items-center justify-start gap-space-md lg:col-start-auto lg:justify-end`,children:[!!b&&M&&(0,k.jsxs)(`div`,{className:`inline-flex items-center gap-space-sm text-pxs font-medium text-muted-foreground`,children:[(0,k.jsx)(`span`,{id:`product-option-${e.id}-variant-toggle-label`,children:L.useForVariantsLabel}),(0,k.jsx)(E,{checked:!!e.usedForVariants,onCheckedChange:t=>b(e,t),"aria-labelledby":`product-option-${e.id}-variant-toggle-label`})]}),_]})]})},e.id)}),!!W&&(0,k.jsx)(`div`,{className:`product-options-matrix--create-row border-t border-border/70`,children:(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:u,icon:D,className:`h-auto min-h-control-sm w-full justify-start rounded-none px-surface py-space-sm text-foreground hover:bg-muted/60`,children:L.addAnotherOptionLabel})})]}):(0,k.jsx)(`div`,{className:x(U&&`border-t border-border/70`),children:F??(0,k.jsx)(le,{title:L.emptyTitle,description:L.emptyDescription,action:u&&!U?(0,k.jsx)(c,{type:`button`,onClick:u,icon:re,children:L.createLabel}):void 0})})]})});return t===`embedded`?(0,k.jsx)(`section`,{"aria-label":L.title,className:x(`product-options-matrix--component min-w-0`,I),children:Ee}):(0,k.jsx)(C,{title:L.title,description:L.description,actions:N,headerAction:Q,headerEnd:P,footerSlot:me,contentClassName:`mt-1`,className:x(`product-options-matrix--component w-full`,I),children:Ee})}j.displayName=`ProductOptionsMatrix`;var M=[`variant`,`sku`,`price`,`inventory`,`status`],N=`text`,P=`text`,me=`multiple`;function F(e){return typeof e==`string`||typeof e==`number`?String(e):``}function I(e,t){let n=e.optionValues?.[t.id];if(n!=null&&n!==!1&&n!==``)return n;let r=e.optionValueIds?.[t.id];return t.values?.find(e=>e.id===r)?.label??void 0}function he(e,t){return e.name!==void 0&&e.name!==null&&e.name!==``?e.name:t.filter(e=>e.usedForVariants!==!1).map(t=>I(e,t)).filter(e=>e!=null&&e!==``).map(e=>F(e)).filter(Boolean).join(` / `)||`-`}function L(e,t){return t.filter(e=>e.usedForVariants!==!1).map(t=>I(e,t)).filter(e=>e!=null&&e!==``)}function ge(e){return e.map(F).filter(Boolean).join(` / `)}function _e(e,t){return F(I(e,t))||`-`}function ve(e,t){return e.map(e=>t.get(e)).filter(e=>!!e)}function R(e){return e==null||e===``?`-`:e}function ye(e){return e!=null&&e!==``}function z(e){return e===`sku`||e===`price`||e===`inventory`}function B(e,t){return e===`text`||e===`field`?e:e[t]??P}function be(e,t,n,r){return{index:e,field:t,previousValue:n,value:r}}function xe(e,t,n,r,i){let o=F(e);if(n===`field`){let e=!!r;return(0,k.jsx)(w,{readOnly:!e,value:o,onChange:e?e=>r(e.currentTarget.value):void 0,onBlur:i?e=>i(e.currentTarget.value):void 0,"aria-label":t,className:x(`h-10 w-full min-w-36 bg-background px-space-md shadow-xs`,!e&&`text-muted-foreground`)})}return(0,k.jsx)(a,{className:`min-w-0 whitespace-normal break-words tabular-nums`,type:ye(e)?`main`:`secondary`,children:R(e)})}function Se({variants:e=[],optionGroups:t=[],groupByOptionId:n,visibleColumns:r=M,optionCombinationDisplay:o=N,cellDisplay:l=P,selectionMode:ee,renderOptionCombination:te,renderCell:p,selectedVariantIds:m,defaultSelectedVariantIds:h=[],onSelectedVariantIdsChange:_,onVariantFieldChange:oe,onVariantFieldBlur:se,onCreateVariant:y,onGenerateVariants:b,onSelectVariant:S,onEditVariant:w,onDuplicateVariant:T,onDeleteVariant:E,onBulkEdit:D,onBulkApply:ue,onBulkDelete:A,renderVariantActions:de,renderBulkActions:fe,actions:pe,headerEnd:j,footerSlot:I,empty:ye,surface:Se=`card`,className:V,strings:Ce}){let H=v(g,Ce),U=m!==void 0,[W,we]=(0,O.useState)(h),G=!!(fe||D||ue||A),K=(ee??(G||U||_?me:`none`))===`multiple`,q=(0,O.useMemo)(()=>K?U?m:W:[],[W,K,U,m]),J=(0,O.useMemo)(()=>new Map(e.map(e=>[e.id,e])),[e]),Y=(0,O.useMemo)(()=>ve(q,J),[J,q]),Te=(0,O.useMemo)(()=>new Set(q),[q]),X=(0,O.useMemo)(()=>new Set(r),[r]),Z=(0,O.useMemo)(()=>t.find(e=>e.id===n),[t,n]),Q=(0,O.useMemo)(()=>new Map(e.map((e,t)=>[e.id,t])),[e]),Ee=(0,O.useMemo)(()=>{if(!Z)return e;let t=new Map((Z.values??[]).map((e,t)=>[e.id,t]));return[...e].sort((e,n)=>{let r=e.optionValueIds?.[Z.id],i=n.optionValueIds?.[Z.id],a=r===void 0?void 0:t.get(r),o=i===void 0?void 0:t.get(i),s=a??2**53-1,c=o??2**53-1;return s===c?(Q.get(e.id)??0)-(Q.get(n.id)??0):s-c})},[Z,Q,e]),De=(0,O.useMemo)(()=>{if(!Z)return new Map;let t=new Map;return e.forEach(e=>{let n=_e(e,Z);t.set(n,(t.get(n)??0)+1)}),t},[Z,e]),Oe=K&&G,ke=e.length>0,Ae=K&&ke&&e.every(e=>Te.has(e.id)),je=!!(S||w||T||E||de),Me=r.filter(e=>X.has(e)).length+ +!!K+ +!!je,$=(0,O.useCallback)(e=>{let t=ve(e,J);U||we(e),_?.(e,t)},[U,_,J]),Ne=(0,O.useCallback)(()=>$([]),[$]),Pe=(0,O.useCallback)((e,t)=>{K&&$(t===!0?Array.from(new Set([...q,e.id])):q.filter(t=>t!==e.id))},[K,q,$]),Fe=(0,O.useCallback)(t=>{K&&$(t===!0?e.map(e=>e.id):[])},[K,$,e]),Ie={selectedRows:Y,selectedIds:q,allRows:e,selectedCount:Y.length,totalCount:e.length,allRowsSelected:Ae,clearSelection:Ne,setSelectedIds:$},Le=y||b?(0,k.jsxs)(`div`,{className:`product-variants-bulk-table--header-actions flex flex-wrap items-center justify-end gap-space-sm`,children:[!!b&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:b,icon:f,children:H.generateLabel}),!!y&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:y,icon:re,children:H.createLabel})]}):void 0,Re=Oe?(0,k.jsxs)(`div`,{className:`product-variants-bulk-table--bulk-toolbar flex min-w-0 flex-wrap items-center justify-between gap-space-md rounded-radius-lg bg-muted/45 px-space-lg py-space-md`,children:[(0,k.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center gap-space-md`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,children:H.selectedLabel(Y.length,e.length)}),!!Y.length&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:Ne,children:H.clearSelectionLabel})]}),(0,k.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center justify-end gap-space-md`,children:[!!D&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`solid`,disabled:!Y.length,onClick:()=>D(Y),className:`bg-background text-foreground hover:bg-background/80 disabled:opacity-70`,children:H.bulkEditLabel}),!!A&&(0,k.jsxs)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,disabled:!Y.length,onClick:()=>A(Y),icon:ae,className:`text-muted-foreground hover:text-destructive disabled:text-muted-foreground/55`,children:[H.bulkDeleteLabel,` (`,Y.length,`)`]}),!!ue&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,disabled:!Y.length,onClick:()=>ue(Y),className:`text-muted-foreground disabled:text-muted-foreground/55`,children:H.bulkApplyLabel}),fe?.(Ie)]})]}):null,ze=e.length===0?ye??(0,k.jsx)(le,{title:H.emptyTitle,description:H.emptyDescription,action:b?(0,k.jsx)(c,{type:`button`,onClick:b,icon:f,children:H.generateLabel}):void 0}):(0,k.jsxs)(`div`,{className:`product-variants-bulk-table--body grid min-w-0 gap-space-md`,children:[Re,(0,k.jsx)(`div`,{className:`product-variants-bulk-table--table overflow-hidden rounded-radius-lg border border-border bg-background`,children:(0,k.jsx)(`div`,{className:`overflow-x-auto [scrollbar-gutter:stable] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-track]:bg-muted/40`,children:(0,k.jsxs)(`table`,{className:`w-full min-w-max border-collapse`,children:[(0,k.jsxs)(`colgroup`,{children:[K&&(0,k.jsx)(`col`,{className:`w-14 min-w-14 max-w-14`,style:{width:`3.5rem`}}),X.has(`variant`)&&(0,k.jsx)(`col`,{}),X.has(`sku`)&&(0,k.jsx)(`col`,{}),X.has(`price`)&&(0,k.jsx)(`col`,{}),X.has(`inventory`)&&(0,k.jsx)(`col`,{}),X.has(`status`)&&(0,k.jsx)(`col`,{}),X.has(`updated`)&&(0,k.jsx)(`col`,{}),je&&(0,k.jsx)(`col`,{style:{width:`4.5rem`}})]}),(0,k.jsx)(`thead`,{children:(0,k.jsxs)(`tr`,{className:`h-12 border-b border-border/70 bg-muted/45`,children:[K&&(0,k.jsx)(`th`,{className:`w-14 min-w-14 max-w-14 px-0 py-space-md text-center align-middle`,style:{width:`3.5rem`},children:(0,k.jsx)(ce,{checked:Ae,onCheckedChange:Fe,"aria-label":H.selectAllLabel,className:`mx-auto`})}),X.has(`variant`)&&(0,k.jsx)(`th`,{className:`px-space-lg py-space-md text-left align-middle`,children:(0,k.jsx)(a,{tag:`span`,size:`pxs`,type:`secondary`,weight:`medium`,className:`whitespace-normal uppercase tracking-wider`,children:H.headers.variant})}),X.has(`sku`)&&(0,k.jsx)(`th`,{className:`px-space-lg py-space-md text-left align-middle`,children:(0,k.jsx)(a,{tag:`span`,size:`pxs`,type:`secondary`,weight:`medium`,className:`whitespace-normal uppercase tracking-wider`,children:H.headers.sku})}),X.has(`price`)&&(0,k.jsx)(`th`,{className:`px-space-lg py-space-md text-left align-middle`,children:(0,k.jsx)(a,{tag:`span`,size:`pxs`,type:`secondary`,weight:`medium`,className:`whitespace-normal uppercase tracking-wider`,children:H.headers.price})}),X.has(`inventory`)&&(0,k.jsx)(`th`,{className:`px-space-lg py-space-md text-left align-middle`,children:(0,k.jsx)(a,{tag:`span`,size:`pxs`,type:`secondary`,weight:`medium`,className:`whitespace-normal uppercase tracking-wider`,children:H.headers.inventory})}),X.has(`status`)&&(0,k.jsx)(`th`,{className:`px-space-lg py-space-md text-left align-middle`,children:(0,k.jsx)(a,{tag:`span`,size:`pxs`,type:`secondary`,weight:`medium`,className:`whitespace-normal uppercase tracking-wider`,children:H.headers.status})}),X.has(`updated`)&&(0,k.jsx)(`th`,{className:`px-space-lg py-space-md text-left align-middle`,children:(0,k.jsx)(a,{tag:`span`,size:`pxs`,type:`secondary`,weight:`medium`,className:`whitespace-normal uppercase tracking-wider`,children:H.headers.updated})}),je&&(0,k.jsx)(`th`,{className:`px-space-lg py-space-md text-right align-middle`,children:(0,k.jsx)(a,{tag:`span`,size:`pxs`,type:`secondary`,weight:`medium`,className:`whitespace-normal uppercase tracking-wider`,children:H.headers.actions})})]})}),(0,k.jsx)(`tbody`,{children:Ee.map((e,n)=>{let r=Q.get(e.id)??n,c=Z?_e(e,Z):null,ee=n>0?Ee[n-1]:void 0,ne=Z&&ee?_e(ee,Z):null,re=!!Z&&c!==ne,f=Te.has(e.id),m={index:r,onSelect:S?()=>S(e):void 0,onEdit:w?()=>w(e):void 0,onDuplicate:T?()=>T(e):void 0,onDelete:E?()=>E(e):void 0,isSelected:f,onToggleSelected:K?t=>Pe(e,t):void 0},h=Z?t.filter(e=>e.id!==Z.id):t,g=L(e,h),_=Z?he({...e,name:void 0},h):he(e,t),v=_===`-`&&Z?he(e,t):_,y=ge(g),b=y===F(v),x=(t,n,i=P)=>({index:r,column:t,value:n,variantName:v,optionValues:g,optionLabel:y,cellDisplay:i,onChange:z(t)&&oe?i=>oe(e,t,i,be(r,t,n,i)):void 0,onBlur:z(t)&&se?i=>se(e,t,i,be(r,t,n,i)):void 0}),C=(t,n,r,i)=>{let a=x(t,n,r),o=p?.(e,a);return o===void 0?i(a):o},le=o!==`none`&&g.length>0&&(Z?!b:o===`tags`||!b),D=o===`none`?null:te?.(e,{optionGroups:t,optionValues:g,optionLabel:y,display:o}),ue=[...S?[{id:`view`,label:H.viewLabel,icon:(0,k.jsx)(u,{className:`size-3.5`}),onClick:()=>S(e),variant:`ghost`}]:[],...w?[{id:`edit`,label:H.editLabel,icon:(0,k.jsx)(d,{className:`size-3.5`}),onClick:()=>w(e),variant:`ghost`}]:[],...T?[{id:`duplicate`,label:H.duplicateLabel,icon:(0,k.jsx)(s,{className:`size-3.5`}),onClick:()=>T(e),variant:`ghost`}]:[],...E?[{id:`delete`,label:H.deleteLabel,icon:(0,k.jsx)(ae,{className:`size-3.5`}),onClick:()=>E(e),variant:`destructive`}]:[]];return(0,k.jsxs)(O.Fragment,{children:[re&&(0,k.jsx)(`tr`,{className:`product-variants-bulk-table--group-row border-b border-border/70 bg-muted/30`,children:(0,k.jsx)(`td`,{colSpan:Me,className:`px-space-lg py-space-md align-middle`,children:(0,k.jsxs)(`div`,{className:`flex min-w-0 items-center gap-space-sm`,children:[(0,k.jsx)(a,{tag:`span`,weight:`semibold`,className:`min-w-0 whitespace-normal break-words`,children:c}),(0,k.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,className:`whitespace-nowrap`,children:H.groupCountLabel(De.get(c??``)??0)})]})})}),(0,k.jsxs)(`tr`,{className:`h-20 border-b border-border/70 last:border-b-0`,children:[K&&(0,k.jsx)(`td`,{className:`w-14 min-w-14 max-w-14 px-0 py-space-lg text-center align-middle`,style:{width:`3.5rem`},children:(0,k.jsx)(ce,{checked:f,onCheckedChange:t=>Pe(e,t),"aria-label":H.selectRowLabel(r),className:`mx-auto`})}),X.has(`variant`)&&(0,k.jsx)(`td`,{className:`px-space-lg py-space-lg align-middle`,children:C(`variant`,v,P,()=>(0,k.jsxs)(`div`,{className:`grid min-w-0 gap-space-xs`,children:[(0,k.jsx)(a,{weight:`medium`,className:`min-w-0 whitespace-normal break-words`,children:v}),D,!D&&le&&o===`text`&&(0,k.jsx)(a,{size:`xs`,type:`secondary`,className:`min-w-0 whitespace-normal break-words`,children:g.map((t,n)=>(0,k.jsxs)(`span`,{children:[n>0?` / `:null,t]},`${e.id}-option-text-${n}`))}),!D&&le&&o===`tags`&&(0,k.jsx)(`div`,{className:`flex min-w-0 flex-wrap gap-space-xs`,children:g.map((t,n)=>(0,k.jsx)(`span`,{className:`max-w-full rounded-radius-sm bg-muted px-space-sm py-space-2xs text-pxs font-medium text-muted-foreground`,children:t},`${e.id}-option-${n}`))})]}))}),X.has(`sku`)&&(0,k.jsx)(`td`,{className:`px-space-lg py-space-md align-middle`,children:C(`sku`,e.sku,B(l,`sku`),t=>xe(e.sku,`${H.headers.sku}: ${F(v)}`,t.cellDisplay,t.onChange,t.onBlur))}),X.has(`price`)&&(0,k.jsx)(`td`,{className:`px-space-lg py-space-md align-middle`,children:C(`price`,e.price,B(l,`price`),t=>xe(e.price,`${H.headers.price}: ${F(v)}`,t.cellDisplay,t.onChange,t.onBlur))}),X.has(`inventory`)&&(0,k.jsx)(`td`,{className:`px-space-lg py-space-md align-middle`,children:C(`inventory`,e.inventory,B(l,`inventory`),t=>xe(e.inventory,`${H.headers.inventory}: ${F(v)}`,t.cellDisplay,t.onChange,t.onBlur))}),X.has(`status`)&&(0,k.jsx)(`td`,{className:`px-space-lg py-space-lg align-middle`,children:C(`status`,e.status,P,()=>e.status?(0,k.jsx)(i,{variant:e.statusVariant??`secondary`,children:e.status}):(0,k.jsx)(a,{type:`secondary`,children:`-`}))}),X.has(`updated`)&&(0,k.jsx)(`td`,{className:`px-space-lg py-space-lg align-middle`,children:C(`updated`,e.updatedAt,P,()=>(0,k.jsx)(a,{size:`xs`,type:`secondary`,children:R(e.updatedAt)}))}),je&&(0,k.jsx)(`td`,{className:`px-space-lg py-space-lg text-right align-middle`,children:de?de(e,m):(0,k.jsx)(ie,{item:e,actions:ue,menuLabel:H.headers.actions})})]})]},e.id)})})]})})})]});return Se===`embedded`?(0,k.jsx)(`section`,{"aria-label":H.title,className:x(`product-variants-bulk-table--component min-w-0`,V),children:ze}):(0,k.jsx)(C,{icon:(0,k.jsx)(ne,{className:`size-4`}),title:H.title,description:H.description,actions:pe,headerAction:Le,headerEnd:j,footerSlot:I,contentClassName:`mt-1`,className:x(`product-variants-bulk-table--component w-full`,V),children:ze})}Se.displayName=`ProductVariantsBulkTable`;function V({optionGroups:e=[],variants:t=[],visibleColumns:n,optionCombinationDisplay:r,cellDisplay:i,selectionMode:o,renderOptionCombination:s,renderCell:l,selectedVariantIds:ee,defaultSelectedVariantIds:u,onSelectedVariantIdsChange:te,onVariantFieldChange:ne,onVariantFieldBlur:d,collapsedOptionIds:m,defaultCollapsedOptionIds:h,onCollapsedOptionIdsChange:g,editingOptionId:ie,defaultEditingOptionId:_,onEditingOptionIdChange:ae,onCreateOption:oe,onEditOption:y,onDeleteOption:b,onAddValue:S,onDeleteValue:ce,onOptionNameChange:w,onValueLabelChange:E,onDoneEditingOption:le,onSaveEditingOption:D,onCancelEditingOption:A,onToggleUsedForVariants:de,renderOptionActions:fe,renderValue:pe,onCreateVariant:M,onGenerateVariants:N,onSelectVariant:P,onEditVariant:me,onDuplicateVariant:F,onDeleteVariant:I,onBulkEdit:he,onBulkApply:L,onBulkDelete:ge,renderVariantActions:_e,renderBulkActions:ve,groupByOptionId:R,defaultGroupByOptionId:ye,onGroupByOptionIdChange:z,onSearchVariants:B,onFilterVariants:be,controlsEnd:xe,actions:V,headerEnd:Ce,footerSlot:H,className:U,strings:W,optionsStrings:we,variantsStrings:G}){let K=v(p,W),q=(0,O.useMemo)(()=>e.filter(e=>e.usedForVariants!==!1),[e]),J=q[0]?.id??null,Y=R!==void 0,[Te,X]=(0,O.useState)(ye??J),Z=R??Te??J,Q=(0,O.useMemo)(()=>q.map(e=>({value:e.id,label:String(typeof e.name==`string`||typeof e.name==`number`?e.name:e.id)})),[q]),Ee=(0,O.useCallback)(t=>{let n=e.find(e=>e.id===t);Y||X(t??null),z?.(t,n)},[Y,z,e]),De=N||M?(0,k.jsxs)(`div`,{className:`product-variants-manager--header-actions flex min-w-0 flex-wrap items-center justify-end gap-space-sm`,children:[!!N&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:N,icon:f,children:K.generateLabel}),!!M&&(0,k.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:M,icon:re,children:K.createVariantLabel})]}):void 0;return(0,k.jsx)(C,{title:K.title,description:K.description,actions:V,actionsLabel:K.actionsLabel,headerAction:De,headerEnd:Ce,footerSlot:H,contentClassName:`mt-1 px-0 pb-0`,className:x(`product-variants-manager--component w-full`,U),children:(0,k.jsxs)(`div`,{className:`product-variants-manager--body grid min-w-0 gap-0`,children:[(0,k.jsx)(`section`,{className:`product-variants-manager--options min-w-0 px-surface pb-space-lg`,children:(0,k.jsx)(j,{optionGroups:e,collapsedOptionIds:m,defaultCollapsedOptionIds:h,onCollapsedOptionIdsChange:g,editingOptionId:ie,defaultEditingOptionId:_,onEditingOptionIdChange:ae,surface:`embedded`,onCreateOption:oe,onEditOption:y,onDeleteOption:b,onAddValue:S,onDeleteValue:ce,onOptionNameChange:w,onValueLabelChange:E,onDoneEditingOption:le,onSaveEditingOption:D,onCancelEditingOption:A,onToggleUsedForVariants:de,renderOptionActions:fe,renderValue:pe,showHeader:!1,showCollapseControls:!1,showInlineActions:!1,showVariantToggle:!1,strings:{title:K.optionsTitle,...we}})}),(0,k.jsxs)(`div`,{className:`product-variants-manager--controls flex min-w-0 flex-wrap items-center justify-between gap-space-md border-t border-border/70 px-surface py-space-md`,children:[(0,k.jsxs)(`div`,{className:`product-variants-manager--group-by flex min-w-0 items-center gap-space-sm`,children:[(0,k.jsx)(a,{type:`secondary`,className:`whitespace-nowrap`,children:K.groupByLabel}),Q.length>0&&(0,k.jsx)(T,{options:Q,value:Z,onChange:Ee,"aria-label":K.groupByLabel,className:`min-w-32 bg-background`})]}),(0,k.jsxs)(`div`,{className:`product-variants-manager--controls-end flex min-w-0 items-center justify-end gap-space-sm`,children:[(0,k.jsxs)(`div`,{className:`product-variants-manager--tool-buttons inline-flex overflow-hidden rounded-radius border border-border bg-background shadow-xs`,children:[(0,k.jsxs)(c,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:B,"aria-label":K.searchLabel,className:`rounded-none border-r border-border text-muted-foreground hover:text-foreground`,children:[(0,k.jsx)(se,{className:`size-icon-sm`,"aria-hidden":`true`}),(0,k.jsx)(`span`,{className:`sr-only`,children:K.searchLabel})]}),(0,k.jsxs)(c,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:be,"aria-label":K.filterLabel,className:`rounded-none text-muted-foreground hover:text-foreground`,children:[(0,k.jsx)(ue,{className:`size-icon-sm`,"aria-hidden":`true`}),(0,k.jsx)(`span`,{className:`sr-only`,children:K.filterLabel})]})]}),xe]})]}),(0,k.jsx)(`section`,{className:`product-variants-manager--variants min-w-0 px-surface pb-surface pt-space-md`,children:(0,k.jsx)(Se,{variants:t,optionGroups:e,groupByOptionId:Z,visibleColumns:n,optionCombinationDisplay:r,cellDisplay:i,selectionMode:o,renderOptionCombination:s,renderCell:l,surface:`embedded`,selectedVariantIds:ee,defaultSelectedVariantIds:u,onSelectedVariantIdsChange:te,onVariantFieldChange:ne,onVariantFieldBlur:d,onCreateVariant:M,onGenerateVariants:N,onSelectVariant:P,onEditVariant:me,onDuplicateVariant:F,onDeleteVariant:I,onBulkEdit:he,onBulkApply:L,onBulkDelete:ge,renderVariantActions:_e,renderBulkActions:ve,strings:{title:K.variantsTitle,generateLabel:K.generateLabel,...G}})})]})})}V.displayName=`ProductVariantsManager`;var Ce=e({VariantManagement:()=>U,VariantTableControls:()=>W});function H(e,t,n,r){return e.map(e=>e.id===t?{...e,[n]:r}:e)}function U(){let[e,t]=(0,O.useState)([]),[n,r]=(0,O.useState)(m),[i,a]=(0,O.useState)(h),[o,s]=(0,O.useState)([]),[c,l]=(0,O.useState)(null);return(0,k.jsx)(V,{optionGroups:n,variants:i,optionCombinationDisplay:`tags`,cellDisplay:{sku:`field`,price:`field`,inventory:`field`},visibleColumns:[`variant`,`price`,`inventory`,`status`],collapsedOptionIds:o,onCollapsedOptionIdsChange:e=>s(e),editingOptionId:c,onEditingOptionIdChange:e=>l(e),selectedVariantIds:e,onSelectedVariantIdsChange:e=>t(e),onCreateOption:()=>{let e=n.length+1,t=`custom-option-${e}`;r(n=>[...n,{id:t,name:`Custom option ${e}`,description:`Consumer-owned option added from the preview.`,usedForVariants:!1,values:[{id:`${t}-value-1`,label:`New value`}]}]),l(t)},onEditOption:e=>l(e.id),onDeleteOption:e=>{r(t=>t.filter(t=>t.id!==e.id)),c===e.id&&l(null)},onSaveEditingOption:(e,t)=>{r(n=>n.map(n=>n.id===e.id?{...n,name:t.name.trim()||n.name,values:t.values.map((e,t)=>({...e,id:e.id||`${n.id}-value-${t+1}`,label:String(e.label).trim()||`Value ${t+1}`}))}:n)),l(null)},onCancelEditingOption:()=>l(null),onToggleUsedForVariants:(e,t)=>{r(n=>n.map(n=>n.id===e.id?{...n,usedForVariants:t}:n))},onVariantFieldChange:(e,t,n)=>{a(r=>H(r,e.id,t,n))},onVariantFieldBlur:(e,t,n)=>{a(r=>H(r,e.id,t,n.trim()))},onSelectVariant:e=>t([e.id]),onEditVariant:e=>t([e.id]),onCreateVariant:()=>{let e=i.length+1;a(t=>[...t,{id:`custom-variant-${e}`,name:`Custom variant ${e}`,sku:`CUSTOM-${e}`,price:`0.00`,inventory:`0`,status:`Draft`,statusVariant:`secondary`,optionValueIds:{"guest-count":`one`,format:`online`,"voucher-type":`online`}}])},onDuplicateVariant:e=>{let t=i.length+1;a(n=>[...n,{...e,id:`${e.id}-copy-${t}`,sku:`${e.sku??`SKU`}-COPY`,status:`Draft`,statusVariant:`secondary`}])},onDeleteVariant:e=>{a(t=>t.filter(t=>t.id!==e.id)),t(t=>t.filter(t=>t!==e.id))},onBulkEdit:e=>{let t=new Set(e.map(e=>e.id));a(e=>e.map(e=>t.has(e.id)?{...e,status:`Review`,statusVariant:`warning`}:e))},onBulkApply:e=>{let t=new Set(e.map(e=>e.id));a(e=>e.map(e=>t.has(e.id)?{...e,status:`Active`,statusVariant:`success`}:e))},onBulkDelete:e=>{let n=new Set(e.map(e=>e.id));a(e=>e.filter(e=>!n.has(e.id))),t([])},strings:{title:`Variants`,description:``},variantsStrings:{bulkApplyLabel:`Mark active`}})}function W(){let[e,t]=(0,O.useState)(h.slice(0,5));return(0,k.jsx)(Se,{variants:e,optionGroups:m,optionCombinationDisplay:`tags`,selectionMode:`none`,cellDisplay:{sku:`field`,price:`field`},visibleColumns:[`variant`,`sku`,`price`,`inventory`,`status`,`updated`],onVariantFieldChange:(e,n,r)=>{t(t=>H(t,e.id,n,r))},onVariantFieldBlur:(e,n,r)=>{t(t=>H(t,e.id,n,r.trim()))},renderCell:(e,t)=>{if(t.column===`status`)return(0,k.jsx)(i,{variant:e.statusVariant??`secondary`,children:e.status??`Draft`})},strings:{title:`Variant table controls`,description:`Use table-level props for read-only, editable, tag-based, or custom-rendered variant cells.`}})}var we=`import { useState } from 'react';
+
+import { Badge } from '@/components/base/badge';
+import {
+	ProductVariantsBulkTable,
+	ProductVariantsManager,
+	type ProductOptionEditDraft,
+	type ProductOptionGroup,
+	type ProductVariantEditableField,
+	type ProductVariantRow,
+} from '@/components/features/products';
+
+import {
+	optionGroups,
+	variantRows,
+} from './fixtures';
+
+function updateVariantField(
+	rows: ProductVariantRow[],
+	variantId: string,
+	field: ProductVariantEditableField,
+	value: string,
+) {
+	return rows.map((row) => (
+		row.id === variantId ? { ...row, [field]: value } : row
+	));
+}
+
+export function VariantManagement() {
+	const [selectedIds, setSelectedIds] = useState<string[]>([]);
+	const [optionState, setOptionState] = useState<ProductOptionGroup[]>(optionGroups);
+	const [variantState, setVariantState] = useState<ProductVariantRow[]>(variantRows);
+	const [collapsedOptionIds, setCollapsedOptionIds] = useState<string[]>([]);
+	const [configuredOptionId, setConfiguredOptionId] = useState<string | null>(null);
+
+	return (
+		<ProductVariantsManager
+			optionGroups={optionState}
+			variants={variantState}
+			optionCombinationDisplay="tags"
+			cellDisplay={{ sku: 'field', price: 'field', inventory: 'field' }}
+			visibleColumns={['variant', 'price', 'inventory', 'status']}
+			collapsedOptionIds={collapsedOptionIds}
+			onCollapsedOptionIdsChange={(ids) => setCollapsedOptionIds(ids)}
+			editingOptionId={configuredOptionId}
+			onEditingOptionIdChange={(id) => setConfiguredOptionId(id)}
+			selectedVariantIds={selectedIds}
+			onSelectedVariantIdsChange={(ids) => setSelectedIds(ids)}
+			onCreateOption={() => {
+				const nextIndex = optionState.length + 1;
+				const nextId = \`custom-option-\${nextIndex}\`;
+				setOptionState((current) => [
+					...current,
+					{
+						id: nextId,
+						name: \`Custom option \${nextIndex}\`,
+						description: 'Consumer-owned option added from the preview.',
+						usedForVariants: false,
+						values: [{ id: \`\${nextId}-value-1\`, label: 'New value' }],
+					},
+				]);
+				setConfiguredOptionId(nextId);
+			}}
+			onEditOption={(option) => setConfiguredOptionId(option.id)}
+			onDeleteOption={(option) => {
+				setOptionState((current) => current.filter((item) => item.id !== option.id));
+				if (configuredOptionId === option.id) {
+					setConfiguredOptionId(null);
+				}
+			}}
+			onSaveEditingOption={(option, draft: ProductOptionEditDraft) => {
+				setOptionState((current) => current.map((item) => (
+					item.id === option.id
+						? {
+							...item,
+							name: draft.name.trim() || item.name,
+							values: draft.values.map((value, index) => ({
+								...value,
+								id: value.id || \`\${item.id}-value-\${index + 1}\`,
+								label: String(value.label).trim() || \`Value \${index + 1}\`,
+							})),
+						}
+						: item
+				)));
+				setConfiguredOptionId(null);
+			}}
+			onCancelEditingOption={() => setConfiguredOptionId(null)}
+			onToggleUsedForVariants={(option, used) => {
+				setOptionState((current) => current.map((item) => (
+					item.id === option.id ? { ...item, usedForVariants: used } : item
+				)));
+			}}
+			onVariantFieldChange={(variant, field, value) => {
+				setVariantState((current) => updateVariantField(current, variant.id, field, value));
+			}}
+			onVariantFieldBlur={(variant, field, value) => {
+				setVariantState((current) => updateVariantField(current, variant.id, field, value.trim()));
+			}}
+			onSelectVariant={(variant) => setSelectedIds([variant.id])}
+			onEditVariant={(variant) => setSelectedIds([variant.id])}
+			onCreateVariant={() => {
+				const nextIndex = variantState.length + 1;
+				setVariantState((current) => [
+					...current,
+					{
+						id: \`custom-variant-\${nextIndex}\`,
+						name: \`Custom variant \${nextIndex}\`,
+						sku: \`CUSTOM-\${nextIndex}\`,
+						price: '0.00',
+						inventory: '0',
+						status: 'Draft',
+						statusVariant: 'secondary',
+						optionValueIds: {
+							'guest-count': 'one',
+							format: 'online',
+							'voucher-type': 'online',
+						},
+					},
+				]);
+			}}
+			onDuplicateVariant={(variant) => {
+				const nextIndex = variantState.length + 1;
+				setVariantState((current) => [
+					...current,
+					{
+						...variant,
+						id: \`\${variant.id}-copy-\${nextIndex}\`,
+						sku: \`\${variant.sku ?? 'SKU'}-COPY\`,
+						status: 'Draft',
+						statusVariant: 'secondary',
+					},
+				]);
+			}}
+			onDeleteVariant={(variant) => {
+				setVariantState((current) => current.filter((item) => item.id !== variant.id));
+				setSelectedIds((current) => current.filter((id) => id !== variant.id));
+			}}
+			onBulkEdit={(selected) => {
+				const selectedSet = new Set(selected.map((variant) => variant.id));
+				setVariantState((current) => current.map((variant) => (
+					selectedSet.has(variant.id)
+						? { ...variant, status: 'Review', statusVariant: 'warning' }
+						: variant
+				)));
+			}}
+			onBulkApply={(selected) => {
+				const selectedSet = new Set(selected.map((variant) => variant.id));
+				setVariantState((current) => current.map((variant) => (
+					selectedSet.has(variant.id)
+						? { ...variant, status: 'Active', statusVariant: 'success' }
+						: variant
+				)));
+			}}
+			onBulkDelete={(selected) => {
+				const selectedSet = new Set(selected.map((variant) => variant.id));
+				setVariantState((current) => current.filter((variant) => !selectedSet.has(variant.id)));
+				setSelectedIds([]);
+			}}
+			strings={{
+				title: 'Variants',
+				description: '',
+			}}
+			variantsStrings={{
+				bulkApplyLabel: 'Mark active',
+			}}
+		/>
+	);
+}
+
+export function VariantTableControls() {
+	const [rows, setRows] = useState<ProductVariantRow[]>(variantRows.slice(0, 5));
+
+	return (
+		<ProductVariantsBulkTable
+			variants={rows}
+			optionGroups={optionGroups}
+			optionCombinationDisplay="tags"
+			selectionMode="none"
+			cellDisplay={{ sku: 'field', price: 'field' }}
+			visibleColumns={['variant', 'sku', 'price', 'inventory', 'status', 'updated']}
+			onVariantFieldChange={(variant, field, value) => {
+				setRows((current) => updateVariantField(current, variant.id, field, value));
+			}}
+			onVariantFieldBlur={(variant, field, value) => {
+				setRows((current) => updateVariantField(current, variant.id, field, value.trim()));
+			}}
+			renderCell={(variant, context) => {
+				if (context.column === 'status') {
+					return (
+						<Badge variant={variant.statusVariant ?? 'secondary'}>
+							{variant.status ?? 'Draft'}
+						</Badge>
+					);
+				}
+
+				return undefined;
+			}}
+			strings={{
+				title: 'Variant table controls',
+				description: 'Use table-level props for read-only, editable, tag-based, or custom-rendered variant cells.',
+			}}
+		/>
+	);
+}
+`;function G(e){let t={h4:`h4`,p:`p`,...e.components};return Ce||q(`Examples`,!1),U||q(`Examples.VariantManagement`,!0),W||q(`Examples.VariantTableControls`,!0),(0,k.jsxs)(r,{title:`Features · Products · Variant Management`,description:`Option matrix and generated variants table with controlled collapse, selection, editable cells, render-props, and bulk callbacks.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/products`,children:[(0,k.jsxs)(o,{title:`Manager`,id:`manager`,children:[(0,k.jsx)(t.p,{children:`The manager example shows the production layout: options stay editable above
+the grouped variants table, while the variant table uses an inset frame,
+selection toolbar, and horizontal overflow instead of squeezing editable fields.`}),(0,k.jsx)(l,{name:`VariantManagement`,source:we,children:(0,k.jsx)(U,{})})]}),(0,k.jsxs)(o,{title:`Table controls`,id:`table-controls`,children:[(0,k.jsx)(t.p,{children:`Use the table directly when consumers need to own the surrounding card or
+toolbar, while still keeping variant cells configurable as text, tags, fields,
+or custom render-props.`}),(0,k.jsx)(l,{name:`VariantTableControls`,source:we,children:(0,k.jsx)(W,{})})]}),(0,k.jsxs)(o,{title:`API`,id:`api`,children:[(0,k.jsx)(t.h4,{children:`ProductOptionsMatrix`}),(0,k.jsx)(S,{component:`ProductOptionsMatrix`}),(0,k.jsx)(t.h4,{children:`ProductVariantsBulkTable`}),(0,k.jsx)(S,{component:`ProductVariantsBulkTable`}),(0,k.jsx)(t.h4,{children:`ProductVariantsManager`}),(0,k.jsx)(S,{component:`ProductVariantsManager`}),(0,k.jsx)(t.h4,{children:`ProductVariantsTable`}),(0,k.jsx)(S,{component:`ProductVariantsTable`})]})]})}function K(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.jsx)(G,{...e})}):G(e)}function q(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{K as default};

package/dist/showcase/assets/vendor-profile-F2EP-AGx.js

@@ -0,0 +1,37 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,p as i,t as a}from"./section-C_rLy6Zn.js";import{Or as o,r as s,t as c}from"./example-BsDQngs7.js";import{t as l}from"./message-square-Cjuladix.js";import{N as u,c as d,d as f,n as p}from"./index-B4sKWDcN.js";import{t as m}from"./props-table-aynAz90t.js";import{t as h}from"./icon-badge-ruuI6tt0.js";import{c as g,i as _,r as v,t as y,u as b}from"./item-WOhHNpnr.js";import{t as x}from"./inline-stat-C9Syz6in.js";var S={tabOverview:`Overview`,tabStats:`Stats`,totalEarnings:`Total Earnings`,message:`Message`,hire:`Hire Me`,verifiedAriaLabel:`Verified`},C=t(n(),1),w=f();function T({name:e,initials:t,avatarUrl:n,role:r,verified:a=!1,earnings:c,earningsChange:f,metrics:m=[],stats:T=[],onMessage:E,onHire:D,className:O,strings:k}){let A=u(S,k),[j,M]=(0,C.useState)(`overview`),N=t??e.split(` `).map(e=>e[0]).join(``).slice(0,2).toUpperCase(),P={overview:A.tabOverview,stats:A.tabStats},F=!!c||m.length>0,I=T.length>0,L=[[`overview`,F],[`stats`,I]].filter(([,e])=>e).map(([e])=>e),R=j===`overview`&&!F&&I?`stats`:j;return(0,w.jsxs)(`div`,{className:p(`vendor-profile--component`,`flex flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-sm`,O),children:[(0,w.jsxs)(y,{className:`items-start`,children:[(0,w.jsx)(g,{variant:n?`avatar`:`default`,children:n?(0,w.jsx)(`img`,{src:n,alt:e,className:`size-10 rounded-full object-cover ring-1 ring-border`}):(0,w.jsx)(h,{tone:`primary`,size:`default`,className:`font-semibold ring-1 ring-primary/15`,children:N})}),(0,w.jsxs)(v,{children:[(0,w.jsx)(b,{children:(0,w.jsxs)(`span`,{className:`inline-flex items-center gap-1.5`,children:[e,!!a&&(0,w.jsx)(h,{tone:`success`,solid:!0,size:`small`,"aria-label":A.verifiedAriaLabel,className:`size-4 shrink-0`,children:(0,w.jsx)(o,{className:`size-2.5`,strokeWidth:3})})]})}),!!r&&(0,w.jsx)(_,{clamp:2,children:r})]})]}),L.length>1&&(0,w.jsx)(`div`,{className:`flex gap-1 rounded-md bg-muted/60 p-0.5`,children:L.map(e=>(0,w.jsx)(s,{type:`button`,"aria-pressed":R===e,onClick:()=>M(e),variant:`secondary`,buttonStyle:`ghost`,size:`small`,className:p(`h-auto flex-1 rounded-sm px-3 py-1.5 text-xs font-medium transition-colors`,R===e?`bg-card text-foreground shadow-sm`:`text-muted-foreground hover:text-foreground`),children:P[e]},e))}),R===`overview`&&F&&(0,w.jsxs)(`div`,{className:`space-y-3`,children:[!!c&&(0,w.jsxs)(`div`,{children:[(0,w.jsx)(i,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:A.totalEarnings}),(0,w.jsxs)(`div`,{className:`mt-0.5 flex items-baseline gap-2`,children:[(0,w.jsx)(i,{weight:`semibold`,className:`tabular-nums tracking-tight`,children:c}),!!f&&(0,w.jsx)(i,{tag:`span`,size:`xs`,weight:`semibold`,className:`rounded-full bg-success/15 px-1.5 py-0.5 text-success tabular-nums`,children:f})]})]}),m.length>0&&(0,w.jsx)(`div`,{className:`space-y-1.5`,children:m.map(e=>(0,w.jsx)(x,{className:`border-b border-border/50 pb-1.5 last:border-0`,label:e.label,value:e.value,mono:!0,labelClassName:`text-sm`,valueClassName:`text-sm font-semibold`},e.label))})]}),R===`stats`&&I&&(0,w.jsx)(`div`,{className:`grid grid-cols-2 gap-1.5`,children:T.map(e=>(0,w.jsxs)(`div`,{className:`rounded-lg border border-border/60 bg-muted/20 px-3 py-2`,children:[(0,w.jsx)(i,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label}),(0,w.jsxs)(`div`,{className:`mt-1 flex items-baseline gap-1.5`,children:[(0,w.jsx)(i,{weight:`semibold`,className:`tabular-nums`,children:e.value}),!!e.change&&(0,w.jsx)(i,{tag:`span`,size:`xs`,weight:`semibold`,className:p(`rounded-full px-1.5 py-0.5 tabular-nums`,e.change.startsWith(`+`)?`bg-success/15 text-success`:`bg-destructive/15 text-destructive`),children:e.change})]})]},e.label))}),(0,w.jsxs)(`div`,{className:`flex gap-1.5`,children:[(0,w.jsxs)(s,{variant:`light`,buttonStyle:`outline`,className:`flex-1 rounded-md`,onClick:E,children:[(0,w.jsx)(l,{className:`mr-1.5 size-3.5`}),A.message]}),(0,w.jsxs)(s,{variant:`dark`,className:`flex-1 rounded-md`,onClick:D,children:[A.hire,(0,w.jsx)(d,{className:`ml-1 size-3.5`})]})]})]})}T.displayName=`VendorProfileCard`;var E=e({Minimal:()=>O,WithEverything:()=>D});function D(){return(0,w.jsx)(w.Fragment,{children:(0,w.jsx)(T,{name:`Dimitar Kostadinov`,role:`Experience Vendor`,verified:!0,earnings:`8,420 USD`,earningsChange:`+12.5%`,metrics:[{label:`Experiences hosted`,value:`47`},{label:`Avg. rating`,value:`4.8 / 5.0`},{label:`Repeat customers`,value:`68%`}],stats:[{label:`This month`,value:`1,240 USD`,change:`+8%`},{label:`Bookings`,value:`23`,change:`+3`},{label:`Conversion`,value:`74%`,change:`+5%`},{label:`Avg. order`,value:`54 USD`,change:`-2%`}],onMessage:()=>{},onHire:()=>{}})})}function O(){return(0,w.jsx)(w.Fragment,{children:(0,w.jsx)(T,{name:`Emma Garcia`,role:`New vendor`})})}var k=`import { VendorProfileCard } from '@/components/composed/cards/vendor-profile';
+
+export function WithEverything() {
+	return (
+		<>
+			<VendorProfileCard
+								name="Dimitar Kostadinov"
+								role="Experience Vendor"
+								verified
+								earnings="8,420 USD"
+								earningsChange="+12.5%"
+								metrics={[
+									{ label: 'Experiences hosted', value: '47' },
+									{ label: 'Avg. rating', value: '4.8 / 5.0' },
+									{ label: 'Repeat customers', value: '68%' },
+								]}
+								stats={[
+									{ label: 'This month', value: '1,240 USD', change: '+8%' },
+									{ label: 'Bookings', value: '23', change: '+3' },
+									{ label: 'Conversion', value: '74%', change: '+5%' },
+									{ label: 'Avg. order', value: '54 USD', change: '-2%' },
+								]}
+								onMessage={() => {}}
+								onHire={() => {}}
+							/>
+		</>
+	);
+}
+
+export function Minimal() {
+	return (
+		<>
+			<VendorProfileCard name="Emma Garcia" role="New vendor" />
+		</>
+	);
+}
+`;function A(e){let t={h4:`h4`,...e.components};return E||M(`Examples`,!1),O||M(`Examples.Minimal`,!0),D||M(`Examples.WithEverything`,!0),(0,w.jsxs)(r,{title:`Composed · Vendor profile`,description:`VendorProfileCard with metrics, stats and actions.`,layer:`composed`,status:`ready`,children:[(0,w.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,w.jsx)(c,{name:`WithEverything`,source:k,children:(0,w.jsx)(D,{})}),(0,w.jsx)(c,{name:`Minimal`,source:k,children:(0,w.jsx)(O,{})})]}),(0,w.jsxs)(a,{title:`API`,id:`api`,children:[(0,w.jsx)(t.h4,{children:`VendorProfileCard`}),(0,w.jsx)(m,{component:`VendorProfileCard`})]})]})}function j(e={}){let{wrapper:t}=e.components||{};return t?(0,w.jsx)(t,{...e,children:(0,w.jsx)(A,{...e})}):A(e)}function M(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{j as default};

package/dist/showcase/assets/video-fYZEPex_.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`video`,[[`path`,{d:`m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5`,key:`ftymec`}],[`rect`,{x:`2`,y:`6`,width:`14`,height:`12`,rx:`2`,key:`158x01`}]]);export{t};

package/dist/showcase/assets/visually-hidden-C1KAHG63.js

@@ -0,0 +1 @@
+import{n as e,t}from"./section-C_rLy6Zn.js";import{t as n}from"./example-BsDQngs7.js";import{t as r,v as i,y as a}from"./display-utilities.examples-ez3DfdgN.js";import{d as o}from"./index-B4sKWDcN.js";import{t as s}from"./props-table-aynAz90t.js";var c=o();function l(o){return a||d(`Examples`,!1),i||d(`Examples.VisuallyHiddenExample`,!0),(0,c.jsxs)(e,{title:`Visually hidden`,description:`Accessible hidden text helper for icon-only controls and nonvisual labels.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/display/visually-hidden`,children:[(0,c.jsx)(t,{title:`Example`,id:`example`,children:(0,c.jsx)(n,{name:`VisuallyHiddenExample`,source:r,children:(0,c.jsx)(i,{})})}),(0,c.jsx)(t,{title:`API`,id:`api`,children:(0,c.jsx)(s,{component:`VisuallyHidden`})})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}function d(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{u as default};

package/dist/showcase/assets/weight-input-_wl5mPGA.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{x as n}from"./section-C_rLy6Zn.js";import{N as r,d as i,n as a}from"./index-B4sKWDcN.js";import{a as o,i as s,n as c,o as l,r as u,t as d}from"./select-BRC14Sd3.js";import{t as f}from"./label-BZzl85ev.js";import{f as p,u as m}from"./form-sizing-Bv0A0Oi0.js";import{r as h}from"./tags-input-BOemEMZS.js";var g=e(t(),1),_=i(),v={unitLabel:``,unitPlaceholder:``},y=[{value:`g`,label:`g`},{value:`kg`,label:`kg`},{value:`lb`,label:`lb`},{value:`oz`,label:`oz`}];function b({value:e,defaultValue:t,unit:i,defaultUnit:b=`g`,onChange:x,onUnitChange:S,decimalPlaces:C=2,min:w=0,max:T,showUnitSelector:E=!0,disableUnitSelector:D=!1,unitLabel:O,unitPlaceholder:k,unitWidth:A=`w-24`,strings:j,invalid:M,disabled:N=!1,size:P,className:F}){let{defaultControlSize:I}=n(),L=p(P,I),R=r(r(v,O!==void 0||k!==void 0?{unitLabel:O,unitPlaceholder:k}:void 0),j),z=e!==void 0,B=i!==void 0,[V,H]=(0,g.useState)(t??``),[U,W]=(0,g.useState)(i??b),G=z?e??``:V,K=B?i??b:U,q=(0,g.useCallback)(e=>{z||H(e.target.value),x?.({target:{value:e.target.value}})},[z,x]),J=(0,g.useCallback)(e=>{if(e===null)return;let t=e;B||W(t),S?.(t)},[B,S]),Y=(0,g.useMemo)(()=>y,[]),X=R.unitLabel!==``;return(0,_.jsxs)(`div`,{className:a(`weight-input--component`,`flex items-start gap-2`,F),children:[(0,_.jsx)(`div`,{className:`flex-1`,children:(0,_.jsx)(h,{size:L,value:G,onChange:q,decimalPlaces:C,allowNegative:!1,min:w,max:T,disabled:N,invalid:M})}),!!E&&(0,_.jsxs)(`div`,{className:`space-y-2`,children:[!!X&&(0,_.jsx)(f,{className:`leading-6`,children:R.unitLabel}),(0,_.jsxs)(d,{value:K,onValueChange:e=>J(e),disabled:N||D,children:[(0,_.jsx)(o,{"aria-invalid":M||void 0,className:a(`border-input bg-transparent !shadow-none`,m[L],`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`,(N||D)&&`opacity-50 cursor-not-allowed`,A),children:(0,_.jsx)(l,{placeholder:R.unitPlaceholder||void 0})}),(0,_.jsx)(c,{children:(0,_.jsx)(u,{children:Y.map(e=>(0,_.jsx)(s,{value:e.value,children:e.label},e.value))})})]})]})]})}b.displayName=`WeightInput`;export{b as t};

package/dist/showcase/assets/wrench-BzqNpztP.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`wrench`,[[`path`,{d:`M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z`,key:`1ngwbx`}]]);export{t};

package/dist/showcase/assets/x-C5_SzMQM.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`x`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]);export{t};

package/dist/showcase/assets/zap-DdInHaAD.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`zap`,[[`path`,{d:`M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z`,key:`1xq2db`}]]);export{t};

package/dist/showcase/index.html

@@ -5,10 +5,10 @@
     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Admin UI Starter Kit — Component Showcase</title>
-    <script type="module" crossorigin src="./assets/index-BjjNfnhP.js"></script>
+    <script type="module" crossorigin src="./assets/index-B4sKWDcN.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/chunk-QTnfLwEv.js">
     <link rel="modulepreload" crossorigin href="./assets/react-sKtkuLrH.js">
-    <link rel="stylesheet" crossorigin href="./assets/index-BPUtPJjB.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-Dy3INIq2.css">
   </head>
   <body>
     <div id="root"></div>