admin-ui-starter-kit 0.6.9 → 0.7.0

package/dist/showcase/assets/rich-text-editor-CdklzzLj.js

@@ -0,0 +1,124 @@
+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-DLqBJGPH.js";import{t as o}from"./example-DDhaO2UY.js";import{t as s}from"./rich-text-editor-BCTbpMcY.js";import{d as c}from"./index-DSBghWdd.js";import{t as l}from"./props-table-CzpevabQ.js";var u=e({CompactSmallerInlineNote:()=>g,Default:()=>h,Disabled:()=>v,EmptyPlaceholder:()=>_,ProductionWiring:()=>m,StringsOverride:()=>y}),d=t(n(),1),f=c(),p=`<h3>Spa cleaning checklist</h3>
+<p>Before each session:</p>
+<ul>
+  <li>Refill towels and bath products</li>
+  <li>Wipe down all surfaces</li>
+  <li>Top up the candles</li>
+</ul>
+<p>After each session:</p>
+<ol>
+  <li>Sanitise the tubs</li>
+  <li>Restock guest amenities</li>
+  <li>Reset the music</li>
+</ol>`;function m(){return(0,f.jsx)(f.Fragment,{children:(0,f.jsxs)(i,{type:`secondary`,children:[`Use `,(0,f.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`<RichTextEditor value={html} onChange={setHtml} showCounts maxLength={500} />`})," on any page that needs structured rich text input. The editor handles paste, undo/redo, and exposes a `strings` prop for toolbar i18n; consumers persist the resulting HTML string."]})})}function h(){let[e,t]=(0,d.useState)(p);return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(s,{value:e,onChange:t,showCounts:!0,maxLength:500})})}function g(){let[e,t]=(0,d.useState)(`<p>A short note about today's bookings.</p>`);return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(s,{value:e,onChange:t,compact:!0,showCounts:!0,maxLength:140})})}function _(){let[e,t]=(0,d.useState)(``);return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(s,{value:e,onChange:t,placeholder:`Write something…`,hideSourceToggle:!0})})}function v(){return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(s,{value:p,onChange:()=>{},disabled:!0,hideSourceToggle:!0})})}function y(){let[e,t]=(0,d.useState)(`<p>A short note about today's bookings.</p>`);return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(s,{value:e,onChange:t,compact:!0,strings:{toolbar:{bold:`Gras`,italic:`Italique`,strike:`Barré`,bulletList:`Liste`,orderedList:`Numérotée`,blockquote:`Citation`,undo:`Annuler`,redo:`Rétablir`,sourceCode:`Source`}}})})}var b=`import { useState } from 'react';
+import { RichTextEditor } from '@/components/features/rich-text-editor';
+import { Text } from '@/components/typography';
+
+const SAMPLE_HTML = \`
+<h3>Spa cleaning checklist</h3>
+<p>Before each session:</p>
+<ul>
+  <li>Refill towels and bath products</li>
+  <li>Wipe down all surfaces</li>
+  <li>Top up the candles</li>
+</ul>
+<p>After each session:</p>
+<ol>
+  <li>Sanitise the tubs</li>
+  <li>Restock guest amenities</li>
+  <li>Reset the music</li>
+</ol>
+\`.trim();
+
+export function ProductionWiring() {
+	return (
+		<>
+			<Text type="secondary">
+								{'Use '}<code className="rounded bg-muted px-1 py-0.5 text-xs">{'<RichTextEditor value={html} onChange={setHtml} showCounts maxLength={500} />'}</code>{' on any page that needs structured rich text input. The editor handles paste, undo/redo, and exposes a \`strings\` prop for toolbar i18n; consumers persist the resulting HTML string.'}
+							</Text>
+		</>
+	);
+}
+
+export function Default() {
+	const [defaultValue, setDefaultValue] = useState<string>(SAMPLE_HTML);
+	return (
+		<>
+			<RichTextEditor
+								value={defaultValue}
+								onChange={setDefaultValue}
+								showCounts
+								maxLength={500}
+							/>
+		</>
+	);
+}
+
+export function CompactSmallerInlineNote() {
+	const [compactValue, setCompactValue] = useState<string>("<p>A short note about today's bookings.</p>");
+	return (
+		<>
+			<RichTextEditor
+								value={compactValue}
+								onChange={setCompactValue}
+								compact
+								showCounts
+								maxLength={140}
+							/>
+		</>
+	);
+}
+
+export function EmptyPlaceholder() {
+	const [emptyValue, setEmptyValue] = useState<string>('');
+	return (
+		<>
+			<RichTextEditor
+								value={emptyValue}
+								onChange={setEmptyValue}
+								placeholder="Write something…"
+								hideSourceToggle
+							/>
+		</>
+	);
+}
+
+export function Disabled() {
+	return (
+		<>
+			<RichTextEditor
+								value={SAMPLE_HTML}
+								onChange={() => {}}
+								disabled
+								hideSourceToggle
+							/>
+		</>
+	);
+}
+
+export function StringsOverride() {
+	const [compactValue, setCompactValue] = useState<string>("<p>A short note about today's bookings.</p>");
+	return (
+		<>
+			<RichTextEditor
+								value={compactValue}
+								onChange={setCompactValue}
+								compact
+								strings={{
+									toolbar: {
+										bold: 'Gras',
+										italic: 'Italique',
+										strike: 'Barré',
+										bulletList: 'Liste',
+										orderedList: 'Numérotée',
+										blockquote: 'Citation',
+										undo: 'Annuler',
+										redo: 'Rétablir',
+										sourceCode: 'Source',
+									},
+								}}
+							/>
+		</>
+	);
+}
+`;function x(e){let t={h4:`h4`,...e.components};return u||C(`Examples`,!1),g||C(`Examples.CompactSmallerInlineNote`,!0),h||C(`Examples.Default`,!0),v||C(`Examples.Disabled`,!0),_||C(`Examples.EmptyPlaceholder`,!0),m||C(`Examples.ProductionWiring`,!0),y||C(`Examples.StringsOverride`,!0),(0,f.jsxs)(r,{title:`Features · Rich text editor`,description:"Tiptap-backed editor with bold / italic / strike / lists / quote / undo-redo. Falls back to a non-editable preview when @tiptap/react is not bundled. Strings overridable via the `strings` prop.",layer:`features`,status:`ready`,children:[(0,f.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,f.jsx)(o,{name:`ProductionWiring`,source:b,children:(0,f.jsx)(m,{})}),(0,f.jsx)(o,{name:`Default`,source:b,children:(0,f.jsx)(h,{})}),(0,f.jsx)(o,{name:`CompactSmallerInlineNote`,source:b,children:(0,f.jsx)(g,{})}),(0,f.jsx)(o,{name:`EmptyPlaceholder`,source:b,children:(0,f.jsx)(_,{})}),(0,f.jsx)(o,{name:`Disabled`,source:b,children:(0,f.jsx)(v,{})}),(0,f.jsx)(o,{name:`StringsOverride`,source:b,children:(0,f.jsx)(y,{})})]}),(0,f.jsxs)(a,{title:`API`,id:`api`,children:[(0,f.jsx)(t.h4,{children:`RichTextEditor`}),(0,f.jsx)(l,{component:`RichTextEditor`})]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,f.jsx)(t,{...e,children:(0,f.jsx)(x,{...e})}):x(e)}function C(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{S as default};

package/dist/showcase/assets/rotate-ccw-CCPhnEPA.js

@@ -0,0 +1 @@
+import{l as e}from"./index-DSBghWdd.js";var t=e(`rotate-ccw`,[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`,key:`1357e3`}],[`path`,{d:`M3 3v5h5`,key:`1xhq8a`}]]);export{t};

package/dist/showcase/assets/route-CODe9_7c.js

@@ -0,0 +1 @@
+import{l as e}from"./index-DSBghWdd.js";var t=e(`route`,[[`circle`,{cx:`6`,cy:`19`,r:`3`,key:`1kj8tv`}],[`path`,{d:`M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15`,key:`1d8sl`}],[`circle`,{cx:`18`,cy:`5`,r:`3`,key:`gq8acd`}]]);export{t};

package/dist/showcase/assets/save-B_ze9MC9.js

@@ -0,0 +1 @@
+import{l as e}from"./index-DSBghWdd.js";var t=e(`save`,[[`path`,{d:`M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z`,key:`1c8476`}],[`path`,{d:`M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7`,key:`1ydtos`}],[`path`,{d:`M7 3v4a1 1 0 0 0 1 1h7`,key:`t51u73`}]]);export{t};

package/dist/showcase/assets/schema-form-CEmpu59s.js

@@ -0,0 +1,327 @@
+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-DLqBJGPH.js";import{t as o}from"./bell-B-bFEx5I.js";import{r as s,t as c}from"./example-DDhaO2UY.js";import{t as l}from"./earth-CzKdl3sr.js";import{t as u}from"./lock-keyhole-BHaFzps8.js";import{t as d}from"./mail-DFoR3rHO.js";import{t as f}from"./package-check-UP9srP8w.js";import{t as p}from"./shield-check-CkqmRaJd.js";import{t as m}from"./sparkles-a2TsduRv.js";import{N as h,d as g,i as _,l as v,n as y}from"./index-DSBghWdd.js";import{t as b}from"./props-table-CzpevabQ.js";import{t as ee}from"./smart-card-BA097ZGN.js";import{t as x}from"./input-Bq9vs-9_.js";import{t as S}from"./textarea-DAV6cQCw.js";import{t as C}from"./select-BrPUZL6Z.js";import{n as te,r as ne,t as w}from"./tags-input-Cp-ikGn_.js";import{t as T}from"./switch-card-C-Q3eon2.js";import{t as E}from"./card-radio-group-DaiWsziy.js";import{t as D}from"./card-checkbox-group-DN7Ui724.js";import{n as O}from"./form-field-CpRcKtwS.js";var re=v(`brush`,[[`path`,{d:`m11 10 3 3`,key:`fzmg1i`}],[`path`,{d:`M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z`,key:`p4q2r7`}],[`path`,{d:`M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031`,key:`wy6l02`}]]),k=v(`webhook`,[[`path`,{d:`M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2`,key:`q3hayz`}],[`path`,{d:`m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06`,key:`1go1hn`}],[`path`,{d:`m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8`,key:`qlwsc0`}]]),ie={1:`grid grid-cols-1 gap-4`,2:`grid grid-cols-1 gap-4 md:grid-cols-2`,3:`grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3`},ae={auto:``,half:`md:col-span-1`,third:`xl:col-span-1`,full:`md:col-span-full xl:col-span-full`};function A(e,t,n){if(typeof e.hidden==`function`)try{return e.hidden(t)}catch(e){return n?.(e),!1}return e.hidden??!1}function oe(e,t,n){if(typeof e.disabled==`function`)try{return e.disabled(t)}catch(e){return n?.(e),!0}return e.disabled??!1}function j(e,t,n){return e.filter(e=>!A(e,t,n))}function se(e,t,n,r,i){let a=j(e.fields,t,i),o=new Map(a.map(e=>[e.key,e])),s=new Set,c=[];for(let t of e.sections??[]){let e=t.fields?t.fields.map(e=>o.get(e)).filter(e=>e!==void 0):a.filter(e=>e.sectionId===t.id);for(let t of e)s.add(t.key);c.push({id:t.id,title:t.title,description:t.description,icon:t.icon,fields:e,columns:t.columns??r,footerSlot:t.footerSlot,className:t.className})}let l=a.filter(e=>!s.has(e.key));return(l.length>0||c.length===0)&&c.unshift({id:`default`,title:e.sections?.length?n:void 0,fields:l,columns:r}),c.filter(e=>e.fields.length>0)}function M(e){return e==null?``:typeof e==`string`?e:typeof e==`number`||typeof e==`boolean`?String(e):JSON.stringify(e)}function N(e){return Array.isArray(e)?e.map(e=>String(e)):[]}function P(e){return e===!0||e===`true`||e===1}function F(e,t=!1){let n=e.trim();if(n.length===0)return null;let r=t?Number.parseInt(n,10):Number.parseFloat(n);return Number.isNaN(r)?null:r}function I(e,t=2){if(e==null)return``;if(typeof e==`string`)return e;try{return JSON.stringify(e,null,t)}catch{return String(e)}}function L(e){let t=e.trim();if(t.length===0)return{value:null,valid:!0};try{return{value:JSON.parse(t),valid:!0}}catch{return{value:e,valid:!1}}}var R=t(n(),1);function z(e,t){let n={...t??{}};for(let t of e)t.defaultValue!==void 0&&n[t.key]===void 0&&(n[t.key]=t.defaultValue);return n}function B(e){return e==null?!0:typeof e==`string`?e.trim().length===0:Array.isArray(e)?e.length===0:!1}function ce(e){let t={};for(let[n,r]of Object.entries(e??{}))r&&(t[n]=r);return t}function le({fields:e,value:t,defaultValue:n,errors:r,onValueChange:i,onFieldChange:a,formatRequiredError:o,validationError:s,onError:c}){let l=t!==void 0,u=(0,R.useMemo)(()=>z(e,n),[n,e]),[d,f]=(0,R.useState)(()=>u),[p,m]=(0,R.useState)({}),h=(0,R.useMemo)(()=>l?{...u,...t??{}}:d,[u,d,l,t]),g=(0,R.useMemo)(()=>({...p,...ce(r)}),[r,p]),_=(0,R.useCallback)(e=>{l||f(e),i?.(e)},[l,i]),v=(0,R.useCallback)((e,t)=>{let n={...h,[e]:t};l||f(n),m(t=>{if(!t[e])return t;let n={...t};return delete n[e],n}),a?.(e,t,n),i?.(n)},[l,a,i,h]),y=(0,R.useCallback)(()=>{let t=z(e,n);return l||f(t),m({}),i?.(t),t},[n,e,l,i]),b=(0,R.useCallback)(()=>{let t={};for(let n of e){if(A(n,h,c))continue;let e=h[n.key];if(n.required&&B(e)){t[n.key]=o(n.label);continue}let r=Array.isArray(n.validate)?n.validate:n.validate?[n.validate]:[];for(let i of r)try{let r=i(e,h,n);if(typeof r==`string`&&r.length>0){t[n.key]=r;break}}catch(e){c?.(e),t[n.key]=s;break}}return m(t),Object.keys(t).length===0},[e,o,c,s,h]);return{values:h,errors:g,getFieldError:(0,R.useCallback)(e=>g[e],[g]),getFieldValue:(0,R.useCallback)(e=>h[e],[h]),setFieldValue:v,setValues:_,reset:y,validate:b}}var V=g();function ue({submitLabel:e,resetLabel:t,showReset:n=!1,disabled:r=!1,submitDisabled:i=!1,resetDisabled:a=!1,isSubmitting:o=!1,onReset:c,className:l}){return(0,V.jsxs)(`div`,{className:y(`schema-form-actions--component flex items-center justify-end gap-2`,l),children:[!!n&&(0,V.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`outline`,disabled:r||a||o,onClick:c,children:t}),(0,V.jsx)(s,{type:`submit`,variant:`primary`,loading:o,disabled:r||i,children:e})]})}ue.displayName=`SchemaFormActions`;function de({title:e,description:t,className:n}){return(0,V.jsxs)(`div`,{className:y(`schema-form-empty--component rounded-md border border-dashed border-border bg-muted/20 p-6 text-center`,n),children:[(0,V.jsx)(i,{weight:`semibold`,children:e}),(0,V.jsx)(i,{size:`xs`,type:`secondary`,className:`mt-1`,children:t})]})}de.displayName=`SchemaFormEmpty`;function H(e){return e.hint??e.description}function U(e,t,n,r){if(e.formatValue)try{return e.formatValue(t,n)}catch(e){r?.(e)}return M(t)}function W(e,t,n,r){if(e.parseValue)try{return e.parseValue(t,n)}catch(e){r?.(e)}return t}function G(e,t,n,r,i){if(e.parseValue)try{return e.parseValue(t,n)}catch(e){i?.(e)}return F(t,r)}function K(e,t,n,r){if(e.type===`json`&&e.parseValue)try{return{value:e.parseValue(t,n),valid:!0}}catch(e){return r?.(e),{value:t,valid:!1}}return L(t)}function fe(e){if(!e.icon)return;let t=e.icon;return(0,V.jsx)(t,{className:`size-4`,"aria-hidden":`true`})}function q({field:e,value:t,values:n,error:r,disabled:i,fieldId:a,onValueChange:o,onError:s,strings:c}){let l=e.type===`json`?e.jsonIndent??2:2,[u,d]=(0,R.useState)(()=>I(t,l)),[f,p]=(0,R.useState)(),[m,h]=(0,R.useState)(!1);if((0,R.useEffect)(()=>{m||d(I(t,l))},[l,m,t]),e.type!==`json`)return null;let g=t=>{let r=K(e,t,n,s);return p(r.valid?void 0:c.jsonParseError),o(r.value),r};return(0,V.jsx)(O,{label:e.label,required:e.required,hint:H(e),helperText:e.helperText,error:r??f,htmlFor:a,className:`schema-form-field--component schema-form-field--json`,children:(0,V.jsx)(S,{id:a,name:e.key,value:u,rows:e.rows??6,disabled:i,invalid:!!(r??f),placeholder:e.placeholder,spellCheck:!1,className:y(`font-mono`,e.controlClassName),onFocus:()=>h(!0),onChange:t=>{let r=t.target.value;d(r);let i=K(e,r,n,s);p(i.valid?void 0:c.jsonParseError),o(i.value)},onBlur:()=>{h(!1);let e=g(u);e.valid&&d(I(e.value,l))},...e.textareaProps})})}function pe({field:e,value:t,values:n,error:r,disabled:i,required:a,fieldId:o,onValueChange:s,onError:c,strings:l,className:u}){let d=e.type??`text`,f={label:e.label,required:a,hint:H(e),helperText:e.helperText,error:r,htmlFor:o,className:y(`schema-form-field--component`,u)},p=e.controlClassName;if(d===`custom`&&e.type===`custom`)return(0,V.jsx)(`div`,{className:y(`schema-form-field--component schema-form-field--custom`,u),children:e.render({field:e,value:t,values:n,error:r,disabled:i,required:a,fieldId:o,onValueChange:s,onError:c})});if(d===`switch`&&e.type===`switch`){let n=P(t);return e.switchStyle===`card`?(0,V.jsx)(O,{error:r,className:y(`schema-form-field--component schema-form-field--switch-card`,u),children:(0,V.jsx)(T,{label:e.label,description:e.description,hint:e.hint,name:e.key,value:n,disabled:i,invalid:!!r,className:p,onChange:e=>s(e),...e.switchCardProps})}):(0,V.jsx)(O,{error:r,className:y(`schema-form-field--component schema-form-field--switch`,u),children:(0,V.jsx)(te,{label:e.label,description:e.description??e.hint,name:e.key,value:n,disabled:i,invalid:!!r,className:p,onChange:e=>s(e),...e.switchProps})})}if(d===`json`)return(0,V.jsx)(q,{field:e,value:t,values:n,error:r,disabled:i,required:a,fieldId:o,onValueChange:s,onError:c,strings:l});if(d===`textarea`&&e.type===`textarea`){let l=U(e,t,n,c);return(0,V.jsx)(O,{...f,children:(0,V.jsx)(S,{id:o,name:e.key,value:l,rows:e.rows,disabled:i,required:a,invalid:!!r,placeholder:e.placeholder,className:p,onChange:t=>s(W(e,t.target.value,n,c)),...e.textareaProps})})}if((d===`number`||d===`integer`||d===`decimal`)&&(e.type===`number`||e.type===`integer`||e.type===`decimal`)){let l=U(e,t,n,c),u=e.type===`integer`,d=u?0:e.decimalPlaces??(e.type===`decimal`?2:4);return(0,V.jsx)(O,{...f,children:(0,V.jsx)(ne,{id:o,name:e.key,value:l,min:e.min,max:e.max,step:e.step,decimalPlaces:d,disabled:i,required:a,invalid:!!r,placeholder:e.placeholder,className:p,onChange:t=>{let r=t.target.value;s(G(e,r,n,u,c))},...e.numberProps})})}if(d===`select`&&e.type===`select`){let n=e.options.map(e=>({value:e.value,label:e.label,disabled:e.disabled,icon:fe(e)}));return(0,V.jsx)(O,{...f,children:(0,V.jsx)(C,{name:e.key,value:M(t),options:n,allowClear:e.allowClear,disabled:i,required:a,invalid:!!r,placeholder:e.placeholder,"aria-label":e.label,className:p,onChange:e=>s(e??null),...e.selectProps})})}if(d===`radio-cards`&&e.type===`radio-cards`)return(0,V.jsx)(O,{...f,children:(0,V.jsx)(E,{name:e.key,value:M(t),options:e.options,columns:e.columns,disabled:i,invalid:!!r,className:p,onChange:e=>s(e),...e.radioProps})});if(d===`checkbox-cards`&&e.type===`checkbox-cards`)return(0,V.jsx)(O,{...f,children:(0,V.jsx)(D,{name:e.key,value:N(t),options:e.options,columns:e.columns,disabled:i,invalid:!!r,className:p,onChange:e=>s(e),...e.checkboxProps})});if(d===`tags`&&e.type===`tags`)return(0,V.jsx)(O,{...f,children:(0,V.jsx)(w,{value:N(t),recommendations:e.recommendations,maxTags:e.maxTags,disabled:i,invalid:!!r,placeholder:e.placeholder,className:p,onChange:e=>s(e),...e.tagsProps})});let m=d===`text`?`text`:d,h=U(e,t,n,c);return(0,V.jsx)(O,{...f,children:(0,V.jsx)(x,{id:o,name:e.key,type:m,value:h,disabled:i,required:a,invalid:!!r,placeholder:e.placeholder,className:p,onChange:t=>s(W(e,t.target.value,n,c)),...e.type===void 0||e.type===`text`||e.type===`email`||e.type===`password`||e.type===`url`||e.type===`tel`||e.type===`search`?e.inputProps:{}})})}pe.displayName=`SchemaFormFieldRenderer`;var me={submitLabel:`Save changes`,resetLabel:`Reset`,defaultSectionTitle:`General`,emptyTitle:`No fields configured`,emptyDescription:`Add fields to the schema to render a form.`,jsonParseError:`Enter valid JSON.`,validationError:`Invalid value.`,formatRequiredError:e=>`${e} is required.`};function he(e){return e.replace(/[^a-zA-Z0-9_-]/g,`-`)}function ge({section:e}){return!e.title&&!e.description?null:(0,V.jsxs)(`div`,{className:`schema-form--section-heading mb-3 space-y-1`,children:[!!e.title&&(0,V.jsx)(i,{weight:`semibold`,className:`schema-form--section-title`,children:e.title}),!!e.description&&(0,V.jsx)(i,{size:`xs`,type:`secondary`,className:`schema-form--section-description`,children:e.description})]})}function J({schema:e,value:t,defaultValue:n,errors:r,disabled:a=!1,layout:o=`form`,columns:s=2,id:c,name:l,title:u,description:d,headerSlot:f,footerSlot:p,actionsSlot:m,emptySlot:g,showActions:_,submitLabel:v,resetLabel:b,submitDisabled:x=!1,resetDisabled:S=!1,isSubmitting:C=!1,onValueChange:te,onFieldChange:ne,onSubmit:w,onReset:T,onError:E,renderField:D,renderSection:O,strings:re,className:k,contentClassName:A,sectionClassName:j,fieldClassName:M}){let N=(0,R.useId)(),P=c??`schema-form-${N}`,F=h(me,re),I=le({fields:e.fields,value:t,defaultValue:n,errors:r,onValueChange:te,onFieldChange:ne,formatRequiredError:F.formatRequiredError,validationError:F.validationError,onError:E}),L=(0,R.useMemo)(()=>se(e,I.values,F.defaultSectionTitle,s,E),[s,I.values,E,e,F.defaultSectionTitle]),z=L.some(e=>e.fields.length>0),B={setFieldValue:I.setFieldValue,setValues:I.setValues,reset:I.reset,validate:I.validate},ce=_??!!(w||T||m),H=v??F.submitLabel,U=b??F.resetLabel,W=e=>{let t=`${P}-${he(e.key)}`,n=a||oe(e,I.values,E),r={field:e,value:I.getFieldValue(e.key),values:I.values,error:I.getFieldError(e.key),disabled:n,required:!!e.required,fieldId:t,onValueChange:t=>I.setFieldValue(e.key,t),onError:E},i=(0,V.jsx)(pe,{...r,strings:F});return(0,V.jsx)(`div`,{className:y(`schema-form--field`,ae[e.width??`auto`],e.className,M),children:D?.({...r,defaultField:i})??i},e.key)},G=e=>(0,V.jsx)(`div`,{className:y(`schema-form--section-fields`,ie[e.columns]),children:e.fields.map(W)}),K=e=>{let t=G(e),n=O?.({section:e,fields:t,values:I.values});return n==null?(0,V.jsxs)(`section`,{className:y(`schema-form--section`,e.className,j),children:[(0,V.jsx)(ge,{section:e}),t,!!e.footerSlot&&(0,V.jsx)(`div`,{className:`schema-form--section-footer mt-3`,children:e.footerSlot})]},e.id):(0,V.jsx)(R.Fragment,{children:n},e.id)},fe=e=>{let t=G(e),n=O?.({section:e,fields:t,values:I.values});return n==null?(0,V.jsx)(ee,{className:y(`schema-form--section-card`,e.className,j),icon:e.icon,title:e.title,description:e.description,footerSlot:e.footerSlot,headerDivider:!0,children:t},e.id):(0,V.jsx)(R.Fragment,{children:n},e.id)},q=m??(ce?(0,V.jsx)(ue,{submitLabel:H,resetLabel:U,showReset:!!T,disabled:a,submitDisabled:x,resetDisabled:S,isSubmitting:C,onReset:()=>{let e=I.reset();T?.(e,B)}}):null),J=g??(0,V.jsx)(de,{title:F.emptyTitle,description:F.emptyDescription});return(0,V.jsx)(`form`,{id:P,name:l,noValidate:!0,className:y(`schema-form--component`,k),onSubmit:async e=>{if(e.preventDefault(),!(a||x||C)&&I.validate())try{await w?.(I.values,B,e)}catch(e){E?.(e)}},children:o===`cards`?(0,V.jsxs)(`div`,{className:y(`schema-form--cards space-y-4`,A),children:[!!(u??e.title??d??e.description??f)&&(0,V.jsxs)(`div`,{className:`schema-form--header flex items-start justify-between gap-4`,children:[(0,V.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[!!(u??e.title)&&(0,V.jsx)(i,{weight:`semibold`,className:`schema-form--title`,children:u??e.title}),!!(d??e.description)&&(0,V.jsx)(i,{size:`xs`,type:`secondary`,className:`schema-form--description`,children:d??e.description})]}),f]}),z?L.map(fe):J,p,q]}):(0,V.jsx)(ee,{className:`schema-form--surface`,title:u??e.title,description:d??e.description,headerEnd:f,footerSlot:p||q?(0,V.jsxs)(`div`,{className:`schema-form--footer flex flex-col gap-3`,children:[p,q]}):void 0,headerDivider:!!(u??e.title??d??e.description??f),footerDivider:!!(p||q),children:(0,V.jsx)(`div`,{className:y(`schema-form--content space-y-6`,A),children:z?L.map(K):J})})})}J.displayName=`SchemaForm`;var _e=e({CohesiveForm:()=>Y,RenderPropField:()=>Z,SectionCards:()=>X}),ve={title:`Workspace settings`,description:`Operational defaults for orders, notifications, and storefront behaviour.`,sections:[{id:`general`,title:`General`,description:`Core workspace identity and regional defaults.`,icon:(0,V.jsx)(_,{className:`size-4`}),fields:[`workspaceName`,`supportEmail`,`region`,`timezone`]},{id:`orders`,title:`Orders`,description:`Controls that affect fulfilment and customer updates.`,icon:(0,V.jsx)(f,{className:`size-4`}),fields:[`orderPrefix`,`autoCapture`,`riskThreshold`]}],fields:[{key:`workspaceName`,label:`Workspace name`,required:!0,placeholder:`Acme Retail`,defaultValue:`Northwind Admin`},{key:`supportEmail`,type:`email`,label:`Support email`,required:!0,placeholder:`support@example.com`,defaultValue:`support@northwind.test`,validate:e=>String(e??``).includes(`@`)||`Use a valid email address.`},{key:`region`,type:`select`,label:`Primary region`,placeholder:`Choose region`,defaultValue:`eu`,options:[{value:`eu`,label:`Europe`},{value:`us`,label:`United States`},{value:`apac`,label:`Asia Pacific`}]},{key:`timezone`,type:`select`,label:`Timezone`,defaultValue:`Europe/Sofia`,options:[{value:`Europe/Sofia`,label:`Europe/Sofia`},{value:`Europe/London`,label:`Europe/London`},{value:`America/New_York`,label:`America/New_York`}]},{key:`orderPrefix`,label:`Order prefix`,placeholder:`ORD`,defaultValue:`ORD`},{key:`autoCapture`,type:`switch`,label:`Auto-capture payments`,description:`Capture payment automatically once an order passes risk checks.`,defaultValue:!0},{key:`riskThreshold`,type:`integer`,label:`Risk review threshold`,hint:`Orders above this score require manual approval.`,min:0,max:100,defaultValue:70}]},ye={title:`Automation controls`,description:`Each section can stand alone as a card while sharing the same value model.`,sections:[{id:`notifications`,title:`Notifications`,description:`Team-visible events and customer messaging.`,icon:(0,V.jsx)(o,{className:`size-4`}),fields:[`channels`,`digest`,`quietHours`]},{id:`security`,title:`Security`,description:`Access controls and audit behaviour.`,icon:(0,V.jsx)(p,{className:`size-4`}),fields:[`mfa`,`sessionTimeout`,`allowedDomains`]},{id:`integrations`,title:`Integrations`,description:`Webhook and enrichment settings.`,icon:(0,V.jsx)(k,{className:`size-4`}),fields:[`webhookMode`,`payloadTemplate`]}],fields:[{key:`channels`,type:`checkbox-cards`,label:`Notification channels`,defaultValue:[`email`,`slack`],columns:2,options:[{value:`email`,label:`Email`,description:`Send operational updates.`,icon:d},{value:`slack`,label:`Slack`,description:`Post to the admin channel.`,icon:o},{value:`webhook`,label:`Webhook`,description:`Forward to an external listener.`,icon:k},{value:`portal`,label:`Portal`,description:`Show inside the admin shell.`,icon:l}]},{key:`digest`,type:`switch`,switchStyle:`card`,label:`Daily digest`,description:`Bundle low-priority events into one daily summary.`,defaultValue:!0},{key:`quietHours`,type:`textarea`,label:`Quiet hours note`,rows:3,defaultValue:`Suppress non-critical notifications from 22:00 to 07:00.`},{key:`mfa`,type:`switch`,switchStyle:`card`,label:`Require MFA`,description:`Ask admins to verify sign-in with a second factor.`,defaultValue:!0},{key:`sessionTimeout`,type:`integer`,label:`Session timeout`,hint:`Minutes before inactive admins are signed out.`,min:5,max:240,defaultValue:45},{key:`allowedDomains`,type:`tags`,label:`Allowed email domains`,placeholder:`Add a domain`,defaultValue:[`northwind.test`,`partners.test`],recommendations:[`northwind.test`,`partners.test`,`vendors.test`]},{key:`webhookMode`,type:`radio-cards`,label:`Webhook mode`,defaultValue:`signed`,columns:2,options:[{value:`off`,label:`Off`,description:`Do not send webhook events.`,icon:u},{value:`signed`,label:`Signed`,description:`Send signed payloads to the endpoint.`,icon:p}]},{key:`payloadTemplate`,type:`json`,label:`Payload template`,defaultValue:{version:2,include:[`order`,`customer`,`risk`]},width:`full`}]},be={title:`Branding`,description:`Render-props let a consumer replace one field without forking the schema renderer.`,fields:[{key:`displayName`,label:`Display name`,defaultValue:`Northwind`,required:!0},{key:`accent`,label:`Accent colour`,hint:`This field is rendered by the consumer through renderField.`,defaultValue:`success`},{key:`launchTags`,type:`tags`,label:`Launch tags`,defaultValue:[`vip`,`spring`]}]},xe=[{value:`primary`,label:`Primary`},{value:`success`,label:`Success`},{value:`info`,label:`Info`},{value:`warning`,label:`Warning`}];function Y(){let[e,t]=(0,R.useState)({}),[n,r]=(0,R.useState)(null);return(0,V.jsx)(`div`,{className:`max-h-[38rem] max-w-3xl overflow-auto pr-2 md:max-h-none md:overflow-visible md:pr-0`,children:(0,V.jsx)(J,{schema:ve,value:e,onValueChange:t,onSubmit:e=>r(e),onReset:()=>{t({}),r(null)},footerSlot:n?(0,V.jsxs)(i,{size:`xs`,type:`secondary`,children:[`Last saved workspace: `,String(n.workspaceName??`Untitled`)]}):null})})}function X(){let[e,t]=(0,R.useState)({});return(0,V.jsx)(`div`,{className:`max-h-[38rem] overflow-auto pr-2 md:max-h-[42rem]`,children:(0,V.jsx)(J,{schema:ye,layout:`cards`,columns:2,value:e,onValueChange:t,onSubmit:()=>{},headerSlot:(0,V.jsx)(s,{variant:`secondary`,buttonStyle:`outline`,icon:m,children:`Apply preset`})})})}function Z(){let[e,t]=(0,R.useState)({});return(0,V.jsx)(`div`,{className:`max-w-2xl`,children:(0,V.jsx)(J,{schema:be,value:e,onValueChange:t,onSubmit:()=>{},renderField:({field:e,value:t,error:n,fieldId:r,onValueChange:i,defaultField:a})=>e.key===`accent`?(0,V.jsx)(O,{label:e.label,hint:e.hint,error:n,htmlFor:r,children:(0,V.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:xe.map(e=>{let n=t===e.value;return(0,V.jsx)(s,{id:e.value===`primary`?r:void 0,type:`button`,variant:n?`primary`:`secondary`,buttonStyle:n?`solid`:`outline`,icon:re,onClick:()=>i(e.value),children:e.label},e.value)})})}):a})})}var Q=`import { useState } from 'react';
+import {
+	Bell,
+	Brush,
+	Globe2,
+	LockKeyhole,
+	Mail,
+	PackageCheck,
+	ShieldCheck,
+	SlidersHorizontal,
+	Sparkles,
+	Webhook,
+} from 'lucide-react';
+
+import { Button } from '@/components/base/buttons';
+import { FormField } from '@/components/base/forms';
+import { SchemaForm, type SchemaFormSchema, type SchemaFormValues } from '@/components/features/schema-form';
+import { Text } from '@/components/typography';
+
+const workspaceSchema: SchemaFormSchema = {
+	title: 'Workspace settings',
+	description: 'Operational defaults for orders, notifications, and storefront behaviour.',
+	sections: [
+		{
+			id: 'general',
+			title: 'General',
+			description: 'Core workspace identity and regional defaults.',
+			icon: <SlidersHorizontal className="size-4" />,
+			fields: ['workspaceName', 'supportEmail', 'region', 'timezone'],
+		},
+		{
+			id: 'orders',
+			title: 'Orders',
+			description: 'Controls that affect fulfilment and customer updates.',
+			icon: <PackageCheck className="size-4" />,
+			fields: ['orderPrefix', 'autoCapture', 'riskThreshold'],
+		},
+	],
+	fields: [
+		{
+			key: 'workspaceName',
+			label: 'Workspace name',
+			required: true,
+			placeholder: 'Acme Retail',
+			defaultValue: 'Northwind Admin',
+		},
+		{
+			key: 'supportEmail',
+			type: 'email',
+			label: 'Support email',
+			required: true,
+			placeholder: 'support@example.com',
+			defaultValue: 'support@northwind.test',
+			validate: (value) => String(value ?? '').includes('@') || 'Use a valid email address.',
+		},
+		{
+			key: 'region',
+			type: 'select',
+			label: 'Primary region',
+			placeholder: 'Choose region',
+			defaultValue: 'eu',
+			options: [
+				{ value: 'eu', label: 'Europe' },
+				{ value: 'us', label: 'United States' },
+				{ value: 'apac', label: 'Asia Pacific' },
+			],
+		},
+		{
+			key: 'timezone',
+			type: 'select',
+			label: 'Timezone',
+			defaultValue: 'Europe/Sofia',
+			options: [
+				{ value: 'Europe/Sofia', label: 'Europe/Sofia' },
+				{ value: 'Europe/London', label: 'Europe/London' },
+				{ value: 'America/New_York', label: 'America/New_York' },
+			],
+		},
+		{
+			key: 'orderPrefix',
+			label: 'Order prefix',
+			placeholder: 'ORD',
+			defaultValue: 'ORD',
+		},
+		{
+			key: 'autoCapture',
+			type: 'switch',
+			label: 'Auto-capture payments',
+			description: 'Capture payment automatically once an order passes risk checks.',
+			defaultValue: true,
+		},
+		{
+			key: 'riskThreshold',
+			type: 'integer',
+			label: 'Risk review threshold',
+			hint: 'Orders above this score require manual approval.',
+			min: 0,
+			max: 100,
+			defaultValue: 70,
+		},
+	],
+};
+
+const automationSchema: SchemaFormSchema = {
+	title: 'Automation controls',
+	description: 'Each section can stand alone as a card while sharing the same value model.',
+	sections: [
+		{
+			id: 'notifications',
+			title: 'Notifications',
+			description: 'Team-visible events and customer messaging.',
+			icon: <Bell className="size-4" />,
+			fields: ['channels', 'digest', 'quietHours'],
+		},
+		{
+			id: 'security',
+			title: 'Security',
+			description: 'Access controls and audit behaviour.',
+			icon: <ShieldCheck className="size-4" />,
+			fields: ['mfa', 'sessionTimeout', 'allowedDomains'],
+		},
+		{
+			id: 'integrations',
+			title: 'Integrations',
+			description: 'Webhook and enrichment settings.',
+			icon: <Webhook className="size-4" />,
+			fields: ['webhookMode', 'payloadTemplate'],
+		},
+	],
+	fields: [
+		{
+			key: 'channels',
+			type: 'checkbox-cards',
+			label: 'Notification channels',
+			defaultValue: ['email', 'slack'],
+			columns: 2,
+			options: [
+				{ value: 'email', label: 'Email', description: 'Send operational updates.', icon: Mail },
+				{ value: 'slack', label: 'Slack', description: 'Post to the admin channel.', icon: Bell },
+				{ value: 'webhook', label: 'Webhook', description: 'Forward to an external listener.', icon: Webhook },
+				{ value: 'portal', label: 'Portal', description: 'Show inside the admin shell.', icon: Globe2 },
+			],
+		},
+		{
+			key: 'digest',
+			type: 'switch',
+			switchStyle: 'card',
+			label: 'Daily digest',
+			description: 'Bundle low-priority events into one daily summary.',
+			defaultValue: true,
+		},
+		{
+			key: 'quietHours',
+			type: 'textarea',
+			label: 'Quiet hours note',
+			rows: 3,
+			defaultValue: 'Suppress non-critical notifications from 22:00 to 07:00.',
+		},
+		{
+			key: 'mfa',
+			type: 'switch',
+			switchStyle: 'card',
+			label: 'Require MFA',
+			description: 'Ask admins to verify sign-in with a second factor.',
+			defaultValue: true,
+		},
+		{
+			key: 'sessionTimeout',
+			type: 'integer',
+			label: 'Session timeout',
+			hint: 'Minutes before inactive admins are signed out.',
+			min: 5,
+			max: 240,
+			defaultValue: 45,
+		},
+		{
+			key: 'allowedDomains',
+			type: 'tags',
+			label: 'Allowed email domains',
+			placeholder: 'Add a domain',
+			defaultValue: ['northwind.test', 'partners.test'],
+			recommendations: ['northwind.test', 'partners.test', 'vendors.test'],
+		},
+		{
+			key: 'webhookMode',
+			type: 'radio-cards',
+			label: 'Webhook mode',
+			defaultValue: 'signed',
+			columns: 2,
+			options: [
+				{ value: 'off', label: 'Off', description: 'Do not send webhook events.', icon: LockKeyhole },
+				{ value: 'signed', label: 'Signed', description: 'Send signed payloads to the endpoint.', icon: ShieldCheck },
+			],
+		},
+		{
+			key: 'payloadTemplate',
+			type: 'json',
+			label: 'Payload template',
+			defaultValue: { version: 2, include: ['order', 'customer', 'risk'] },
+			width: 'full',
+		},
+	],
+};
+
+const brandingSchema: SchemaFormSchema = {
+	title: 'Branding',
+	description: 'Render-props let a consumer replace one field without forking the schema renderer.',
+	fields: [
+		{
+			key: 'displayName',
+			label: 'Display name',
+			defaultValue: 'Northwind',
+			required: true,
+		},
+		{
+			key: 'accent',
+			label: 'Accent colour',
+			hint: 'This field is rendered by the consumer through renderField.',
+			defaultValue: 'success',
+		},
+		{
+			key: 'launchTags',
+			type: 'tags',
+			label: 'Launch tags',
+			defaultValue: ['vip', 'spring'],
+		},
+	],
+};
+
+const accentOptions = [
+	{ value: 'primary', label: 'Primary' },
+	{ value: 'success', label: 'Success' },
+	{ value: 'info', label: 'Info' },
+	{ value: 'warning', label: 'Warning' },
+];
+
+export function CohesiveForm() {
+	const [values, setValues] = useState<SchemaFormValues>({});
+	const [saved, setSaved] = useState<SchemaFormValues | null>(null);
+
+	return (
+		<div className="max-h-[38rem] max-w-3xl overflow-auto pr-2 md:max-h-none md:overflow-visible md:pr-0">
+			<SchemaForm
+				schema={workspaceSchema}
+				value={values}
+				onValueChange={setValues}
+				onSubmit={(next) => setSaved(next)}
+				onReset={() => {
+					setValues({});
+					setSaved(null);
+				}}
+				footerSlot={
+					saved ? (
+						<Text size="xs" type="secondary">
+							Last saved workspace: {String(saved.workspaceName ?? 'Untitled')}
+						</Text>
+					) : null
+				}
+			/>
+		</div>
+	);
+}
+
+export function SectionCards() {
+	const [values, setValues] = useState<SchemaFormValues>({});
+
+	return (
+		<div className="max-h-[38rem] overflow-auto pr-2 md:max-h-[42rem]">
+			<SchemaForm
+				schema={automationSchema}
+				layout="cards"
+				columns={2}
+				value={values}
+				onValueChange={setValues}
+				onSubmit={() => {}}
+				headerSlot={<Button variant="secondary" buttonStyle="outline" icon={Sparkles}>Apply preset</Button>}
+			/>
+		</div>
+	);
+}
+
+export function RenderPropField() {
+	const [values, setValues] = useState<SchemaFormValues>({});
+
+	return (
+		<div className="max-w-2xl">
+			<SchemaForm
+				schema={brandingSchema}
+				value={values}
+				onValueChange={setValues}
+				onSubmit={() => {}}
+				renderField={({ field, value, error, fieldId, onValueChange, defaultField }) => {
+					if (field.key !== 'accent') return defaultField;
+
+					return (
+						<FormField
+							label={field.label}
+							hint={field.hint}
+							error={error}
+							htmlFor={fieldId}
+						>
+							<div className="flex flex-wrap gap-2">
+								{accentOptions.map((option) => {
+									const selected = value === option.value;
+									return (
+										<Button
+											key={option.value}
+											id={option.value === 'primary' ? fieldId : undefined}
+											type="button"
+											variant={selected ? 'primary' : 'secondary'}
+											buttonStyle={selected ? 'solid' : 'outline'}
+											icon={Brush}
+											onClick={() => onValueChange(option.value)}
+										>
+											{option.label}
+										</Button>
+									);
+								})}
+							</div>
+						</FormField>
+					);
+				}}
+			/>
+		</div>
+	);
+}
+`;function Se(e){let t={h4:`h4`,...e.components};return _e||$(`Examples`,!1),Y||$(`Examples.CohesiveForm`,!0),Z||$(`Examples.RenderPropField`,!0),X||$(`Examples.SectionCards`,!0),(0,V.jsxs)(r,{title:`Features · Schema form`,description:`Schema-driven form renderer built from the package form fields. Supports one cohesive form, section cards, controlled values, validation callbacks, and render-prop overrides.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/schema-form`,children:[(0,V.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,V.jsx)(c,{name:`CohesiveForm`,source:Q,children:(0,V.jsx)(Y,{})}),(0,V.jsx)(c,{name:`SectionCards`,source:Q,children:(0,V.jsx)(X,{})}),(0,V.jsx)(c,{name:`RenderPropField`,source:Q,children:(0,V.jsx)(Z,{})})]}),(0,V.jsxs)(a,{title:`API`,id:`api`,children:[(0,V.jsx)(t.h4,{children:`SchemaForm`}),(0,V.jsx)(b,{component:`SchemaForm`})]})]})}function Ce(e={}){let{wrapper:t}=e.components||{};return t?(0,V.jsx)(t,{...e,children:(0,V.jsx)(Se,{...e})}):Se(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Ce as default};

package/dist/showcase/assets/scroll-area-BM0asGLD.js

@@ -0,0 +1,32 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,t as n}from"./section-DLqBJGPH.js";import{t as r}from"./example-DDhaO2UY.js";import{d as i,n as a}from"./index-DSBghWdd.js";import{a as o,i as s,n as c,r as l,t as u}from"./ScrollAreaCorner-CilamsvS.js";var d=i();function f({className:e,children:t,...n}){return(0,d.jsxs)(o,{"data-slot":`scroll-area`,className:a(`relative`,e),...n,children:[(0,d.jsx)(s,{"data-slot":`scroll-area-viewport`,"data-overflow-y-end":!0,className:`focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1`,children:t}),(0,d.jsx)(p,{}),(0,d.jsx)(u,{})]})}function p({className:e,orientation:t=`vertical`,...n}){return(0,d.jsx)(l,{"data-slot":`scroll-area-scrollbar`,"data-orientation":t,orientation:t,className:a({"h-2.5 flex-col border-t border-t-transparent":t===`horizontal`,"h-full w-[7px] border-l border-l-transparent":t===`vertical`},`data-hovering:opacity-100 transition-opacity data-hovering:pointer-events-none opacity-0`,`flex touch-none p-px transition-colors select-none rounded-3xl`,e),...n,children:(0,d.jsx)(c,{"data-slot":`scroll-area-thumb`,className:`rounded-full bg-border relative flex-1`})})}var m=e({Horizontal:()=>g,Vertical:()=>h});function h(){return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)(f,{className:`h-48 w-full rounded-md border border-border p-3`,children:(0,d.jsx)(`ul`,{className:`space-y-2 text-sm`,children:Array.from({length:30}).map((e,t)=>(0,d.jsxs)(`li`,{children:[`List item `,t+1]},t))})})})}function g(){return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)(f,{className:`w-full rounded-md border border-border p-3`,children:(0,d.jsx)(`div`,{className:`flex gap-3`,children:Array.from({length:20}).map((e,t)=>(0,d.jsxs)(`div`,{className:`flex size-24 shrink-0 items-center justify-center rounded-md bg-muted text-sm`,children:[`Box `,t+1]},t))})})})}var _=`import { ScrollArea } from '@/components/ui/scroll-area';
+
+export function Vertical() {
+	return (
+		<>
+			<ScrollArea className="h-48 w-full rounded-md border border-border p-3">
+								<ul className="space-y-2 text-sm">
+									{Array.from({ length: 30 }).map((_, i) => (
+										<li key={i}>List item {i + 1}</li>
+									))}
+								</ul>
+							</ScrollArea>
+		</>
+	);
+}
+
+export function Horizontal() {
+	return (
+		<>
+			<ScrollArea className="w-full rounded-md border border-border p-3">
+								<div className="flex gap-3">
+									{Array.from({ length: 20 }).map((_, i) => (
+										<div key={i} className="flex size-24 shrink-0 items-center justify-center rounded-md bg-muted text-sm">
+											Box {i + 1}
+										</div>
+									))}
+								</div>
+							</ScrollArea>
+		</>
+	);
+}
+`;function v(e){return m||b(`Examples`,!1),g||b(`Examples.Horizontal`,!0),h||b(`Examples.Vertical`,!0),(0,d.jsx)(t,{title:`UI · Scroll area`,description:`Custom-styled scroll viewport.`,layer:`ui`,status:`ready`,children:(0,d.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,d.jsx)(r,{name:`Vertical`,source:_,children:(0,d.jsx)(h,{})}),(0,d.jsx)(r,{name:`Horizontal`,source:_,children:(0,d.jsx)(g,{})})]})})}function y(e={}){let{wrapper:t}=e.components||{};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(v,{...e})}):v(e)}function b(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{y as default};

package/dist/showcase/assets/scroll-area-zRw8lSrA.js

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{t as e}from"./react-sKtkuLrH.js";import{d as t,n}from"./index-DSBghWdd.js";import{a as r,i,n as a,r as o,t as s}from"./ScrollAreaCorner-CilamsvS.js";e();var c=t();function l({className:e,viewportClassName:t,scrollbarClassName:a,viewportRef:o,children:l,...d}){return(0,c.jsxs)(r,{"data-slot":`scroll-area`,className:n(`scroll-area--component relative overflow-hidden`,e),...d,children:[(0,c.jsx)(i,{ref:o,"data-slot":`scroll-area-viewport`,"data-overflow-y-end":!0,className:n(`size-full rounded-[inherit] outline-none transition-[color,box-shadow]`,`focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50`,t),children:l}),(0,c.jsx)(u,{className:a}),(0,c.jsx)(s,{})]})}function u({className:e,orientation:t=`vertical`,...r}){return(0,c.jsx)(o,{"data-slot":`scroll-area-scrollbar`,"data-orientation":t,orientation:t,className:n({"h-2.5 flex-col border-t border-t-transparent":t===`horizontal`,"h-full w-2 border-l border-l-transparent":t===`vertical`},`flex touch-none select-none rounded-3xl p-px opacity-0 transition-opacity`,`data-hovering:pointer-events-none data-hovering:opacity-100`,e),...r,children:(0,c.jsx)(a,{"data-slot":`scroll-area-thumb`,className:`relative flex-1 rounded-full bg-border`})})}export{l as t};

package/dist/showcase/assets/section-DLqBJGPH.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{d as n,f as r,l as i,n as a,r as o}from"./index-DSBghWdd.js";var s=()=>r(e=>e.money),c=()=>r(e=>e.dates),l=()=>r(e=>e.comments),u=()=>r(e=>e.filters),d=()=>r(e=>e.forms),f=()=>r(e=>e.table),p=()=>r(e=>e.typography),m=()=>r(e=>e.item),h=()=>r(e=>e.button),g=()=>r(e=>e.card),_=()=>r(e=>e.toast),v=()=>r(e=>e.spinner),ee=()=>r(e=>e.media),y=i(`triangle-alert`,[[`path`,{d:`m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3`,key:`wmoenq`}],[`path`,{d:`M12 9v4`,key:`juzpu7`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]]),b=e(t(),1),x=n(),S={"&":`&amp;`,"<":`&lt;`,">":`&gt;`,'"':`&quot;`,"'":`&#39;`};function C(e){return e?e.replace(/[&<>"']/g,e=>S[e]??e):``}var w={inherit:``,xxs:`text-xxs`,xs:`text-xs`,pxs:`text-pxs`,sm:`text-sm`,base:`text-base`,lg:`text-lg`,xl:`text-xl`},T={main:`text-foreground`,inverse:`text-background`,secondary:`text-muted-foreground`,discrete:`text-muted-foreground`,error:`text-destructive`,success:`text-success`,primary:`text-primary`},E={normal:`leading-normal`,relaxed:`leading-relaxed`,loose:`leading-loose`,tight:`leading-tight`,snug:`leading-snug`,none:`leading-none`},te={regular:`font-normal`,medium:`font-medium`,semibold:`font-semibold`,bold:`font-bold`},ne={center:`text-center`,right:`text-right`,left:`text-left`};function D({content:e,type:t=`main`,size:n,align:r=`left`,lineHeight:i=`normal`,weight:o=`regular`,className:s=``,children:c,asHTML:l=!1,numeric:u=!1,tag:d=`p`,...f}){let{defaultTextSize:m}=p(),h=n??m??`sm`,g=a(T[t],w[h],ne[r],E[i],te[o],u&&`font-mono tabular-nums`,s),_=(0,b.useMemo)(()=>typeof e==`string`&&e.length>0?e:typeof c==`string`||typeof c==`number`?String(c):``,[c,e]);return l?(0,b.createElement)(d,{className:g,"data-typography":`text`,dangerouslySetInnerHTML:{__html:C(_)},...f}):e&&e.length>0?(0,x.jsx)(d,{className:g,"data-typography":`text`,...f,children:e}):c==null?null:(0,x.jsx)(d,{className:g,"data-typography":`text`,...f,children:c})}D.displayName=`Text`;var O={h1:`scroll-m-20 text-base font-semibold leading-snug text-balance`,h2:`scroll-m-20 text-base font-semibold leading-snug first:mt-0`,h3:`scroll-m-20 text-base font-semibold leading-snug`,h4:`scroll-m-20 text-base font-semibold leading-snug`,h5:`text-base font-semibold leading-snug`,h6:`text-base font-semibold leading-snug`},k={left:`text-left`,center:`text-center`,right:`text-right`};function A({tag:e=`h3`,className:t,children:n,subHeading:r,subHeadingClassName:i,subHeadingSize:o,containerClassName:s,align:c=`left`,divider:l=!1,...u}){let d=a(`text-foreground antialiased`,O[e],l&&`border-b border-border pb-2`,k[c],t);return(0,x.jsxs)(`div`,{className:a(`space-y-1`,k[c],s),children:[!!n&&(0,x.jsx)(e,{className:d,"data-typography":`heading`,...u,children:n}),!!r&&(0,x.jsx)(D,{size:o??`xs`,type:`secondary`,align:c,className:i,children:r})]})}A.displayName=`Heading`;function j(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function M(...e){return t=>{let n=!1,r=e.map(e=>{let r=j(e,t);return!n&&typeof r==`function`&&(n=!0),r});if(n)return()=>{for(let t=0;t<r.length;t++){let n=r[t];typeof n==`function`?n():j(e[t],null)}}}}function re(...e){return b.useCallback(M(...e),e)}var ie=Symbol.for(`react.lazy`),N=b.use;function ae(e){return typeof e==`object`&&!!e&&`then`in e}function P(e){return typeof e==`object`&&!!e&&`$$typeof`in e&&e.$$typeof===ie&&`_payload`in e&&ae(e._payload)}function F(e){let t=L(e),n=b.forwardRef((e,n)=>{let{children:r,...i}=e;P(r)&&typeof N==`function`&&(r=N(r._payload));let a=b.Children.toArray(r),o=a.find(z);if(o){let e=o.props.children,r=a.map(t=>t===o?b.Children.count(e)>1?b.Children.only(null):b.isValidElement(e)?e.props.children:null:t);return(0,x.jsx)(t,{...i,ref:n,children:b.isValidElement(e)?b.cloneElement(e,void 0,r):null})}return(0,x.jsx)(t,{...i,ref:n,children:r})});return n.displayName=`${e}.Slot`,n}var I=F(`Slot`);function L(e){let t=b.forwardRef((e,t)=>{let{children:n,...r}=e;if(P(n)&&typeof N==`function`&&(n=N(n._payload)),b.isValidElement(n)){let e=V(n),i=B(r,n.props);return n.type!==b.Fragment&&(i.ref=t?M(t,e):e),b.cloneElement(n,i)}return b.Children.count(n)>1?b.Children.only(null):null});return t.displayName=`${e}.SlotClone`,t}var R=Symbol(`radix.slottable`);function z(e){return b.isValidElement(e)&&typeof e.type==`function`&&`__radixId`in e.type&&e.type.__radixId===R}function B(e,t){let n={...t};for(let r in t){let i=e[r],a=t[r];/^on[A-Z]/.test(r)?i&&a?n[r]=(...e)=>{let t=a(...e);return i(...e),t}:i&&(n[r]=i):r===`style`?n[r]={...i,...a}:r===`className`&&(n[r]=[i,a].filter(Boolean).join(` `))}return{...e,...n}}function V(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}var H=e=>typeof e==`boolean`?`${e}`:e===0?`0`:e,U=o,W=(e,t)=>n=>{if(t?.variants==null)return U(e,n?.class,n?.className);let{variants:r,defaultVariants:i}=t,a=Object.keys(r).map(e=>{let t=n?.[e],a=i?.[e];if(t===null)return null;let o=H(t)||H(a);return r[e][o]}),o=n&&Object.entries(n).reduce((e,t)=>{let[n,r]=t;return r===void 0||(e[n]=r),e},{});return U(e,a,t?.compoundVariants?.reduce((e,t)=>{let{class:n,className:r,...a}=t;return Object.entries(a).every(e=>{let[t,n]=e;return Array.isArray(n)?n.includes({...i,...o}[t]):{...i,...o}[t]===n})?[...e,n,r]:e},[]),n?.class,n?.className)},G=W(`inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto`,{variants:{variant:{default:`border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90`,secondary:`border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90`,destructive:`border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60`,outline:`text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground`}},defaultVariants:{variant:`default`}});function K({className:e,variant:t,asChild:n=!1,...r}){return(0,x.jsx)(n?I:`span`,{"data-slot":`badge`,className:a(G({variant:t}),e),...r})}var q={small:`h-action-xs gap-space-sm px-control-sm py-space-2xs text-pxs leading-none`,default:`h-action-xs gap-space-md px-control-sm py-space-2xs text-pxs leading-none`};function oe(e){return e===`small`||e==="default"?e:e===`xs`?`small`:e===`sm`||e===`md`?`default`:`small`}var J={primary:{color:`text-primary-foreground`,background:`bg-primary`,border:`border-primary-foreground/40`,dot:`bg-primary-foreground`},secondary:{color:`text-foreground`,background:`bg-foreground/8`,border:`border-foreground/15`,dot:`bg-muted-foreground`},success:{color:`text-success`,background:`bg-success/15`,border:`border-success/50`,dot:`bg-success`},info:{color:`text-info`,background:`bg-info/10`,border:`border-info/50`,dot:`bg-info`},warning:{color:`text-warning-foreground`,background:`bg-warning/40`,border:`border-warning/60`,dot:`bg-warning`},error:{color:`text-destructive`,background:`bg-destructive/10`,border:`border-destructive/50`,dot:`bg-destructive`},destructive:{color:`text-destructive`,background:`bg-destructive/10`,border:`border-destructive/50`,dot:`bg-destructive`},main:{color:`text-main-foreground`,background:`bg-main`,border:`border-main-foreground/40`,dot:`bg-main-foreground`}};function Y({variant:e=`primary`,className:t,size:n,inline:r=!1,dot:i=!1,pending:o=!1,pulse:s=!1,important:c=!1,children:l,...u}){let d=a(q[oe(n)],`font-medium`),f=r?`inline-flex h-auto min-h-0 w-auto shrink-0 align-middle rounded-full px-space-sm py-space-2xs text-pxs leading-none font-medium`:null,p=J[e]??J.primary;return(0,x.jsxs)(K,{variant:`secondary`,className:a(`badge--component`,`font-sans`,`max-w-full overflow-visible`,d,f,p.color,p.background,t),...u,children:[!!i&&(0,x.jsx)(X,{filled:!o,pulse:s,variant:p}),!!c&&!i&&(0,x.jsx)(y,{className:a(p.color,`size-icon-lg`)}),(0,x.jsx)(`span`,{className:`inline-flex min-w-0 max-w-full items-center gap-space-sm overflow-hidden text-ellipsis whitespace-nowrap [&>svg]:inline-block [&>svg]:shrink-0`,children:l})]})}function X({filled:e=!1,variant:t,pulse:n=!1}){return(0,x.jsx)(`span`,{className:a(`size-space-md rounded-full shrink-0 border-[2px]`,t.border,{"animate-pulse":n},[e?t.dot:`bg-transparent`])})}Y.displayName=`Badge`;var Z=(0,b.createContext)(null);function se({children:e}){let[t,n]=(0,b.useState)([]),r=(0,b.useCallback)(e=>{n(t=>{let n=[...t.filter(t=>t.id!==e.id),{...e,level:e.level??1}];return typeof document>`u`?n:n.sort((e,t)=>{let n=document.getElementById(e.id),r=document.getElementById(t.id);return!n||!r||n===r?0:n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1})})},[]),i=(0,b.useMemo)(()=>({entries:t,register:r}),[t,r]);return(0,x.jsx)(Z.Provider,{value:i,children:e})}function Q(){return(0,b.useContext)(Z)||{entries:[],register:()=>{}}}function ce(e,t){return`${e}-${t.trim().replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-+|-+$/g,``)||`section`}`}var le={ai:`AI`,api:`API`,id:`ID`,kpi:`KPI`,pos:`POS`,qr:`QR`,seo:`SEO`,sku:`SKU`,ui:`UI`,url:`URL`},ue=new Set([`a`,`an`,`and`,`as`,`at`,`by`,`for`,`from`,`in`,`of`,`on`,`or`,`to`,`with`]);function $(e,t){let n=t?.stripExampleSuffix??!0,r=e.trim().replace(/[-_]+/g,` `).replace(/([A-Z]+)([A-Z][a-z])/g,`$1 $2`).replace(/([a-z0-9])([A-Z])/g,`$1 $2`).replace(/([A-Za-z])([0-9]+)/g,`$1 $2`).replace(/([0-9]+)([A-Z][a-z])/g,`$1 $2`).replace(/\s+/g,` `).trim();return n&&(r=r.replace(/\bExamples?\b$/i,``).trim()),r.split(` `).filter(Boolean).map((e,t,n)=>{let r=e.toLowerCase();return t>0&&t<n.length-1&&ue.has(r)?r:le[r]??e.charAt(0).toUpperCase()+e.slice(1)}).join(` `)}function de(){let{entries:e}=Q();return e.length===0?null:(0,x.jsxs)(`aside`,{className:`toc-rail--component sticky top-[88px] hidden h-dvh max-h-[calc(100vh-88px-2rem)] w-48 shrink-0 overflow-y-auto pl-4 xl:block`,children:[(0,x.jsx)(D,{size:`sm`,type:`secondary`,className:`font-semibold uppercase tracking-wide`,children:`On this page`}),(0,x.jsx)(`ul`,{className:`toc-rail--list mt-3 space-y-1.5 border-l border-border`,children:e.map(e=>(0,x.jsx)(`li`,{className:`toc-rail--item`,children:(0,x.jsx)(`a`,{href:`#${e.id}`,title:e.title,className:a(`block -ml-px truncate border-l border-transparent py-0.5 text-sm text-muted-foreground transition-colors hover:border-foreground hover:text-foreground`,e.level===2?`pl-5 text-xs`:`pl-3`),children:e.title})},e.id))})]})}function fe(e){return/[a-z0-9][A-Z]/.test(e)?$(e,{stripExampleSuffix:!1}):e}function pe({title:e,description:t,layer:n,status:r,sourcePath:i,children:o}){let s=fe(e);return(0,x.jsx)(se,{children:(0,x.jsxs)(`article`,{className:`docs-page--component w-full min-w-0 pb-20`,children:[(0,x.jsxs)(`header`,{className:a(`docs-page--header border-b border-border pb-5`),children:[(0,x.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[!!n&&(0,x.jsx)(Y,{variant:`secondary`,children:n}),r===`wip`&&(0,x.jsx)(Y,{variant:`warning`,children:`WIP`}),r===`broken`&&(0,x.jsx)(Y,{variant:`destructive`,children:`Broken`}),r!==`wip`&&r!==`broken`&&(0,x.jsx)(Y,{variant:`success`,children:`Ready`})]}),(0,x.jsxs)(`div`,{className:`mt-2 max-w-4xl`,children:[(0,x.jsx)(A,{tag:`h1`,children:s}),!!t&&(0,x.jsx)(D,{type:`secondary`,className:`mt-1 max-w-3xl`,children:t}),!!i&&(0,x.jsx)(D,{size:`xs`,type:`discrete`,className:`mt-3 break-all font-mono`,children:i})]})]}),(0,x.jsxs)(`div`,{className:`docs-page--layout mt-6 grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1fr)_11rem]`,children:[(0,x.jsx)(`div`,{className:`docs-page--body min-w-0 space-y-10`,children:o}),(0,x.jsx)(de,{})]})]})})}function me({title:e,id:t,description:n,children:r}){let{register:i}=Q(),o=$(e,{stripExampleSuffix:!1}),s=t===`overview`&&o.toLowerCase()===`overview`,c=s?void 0:o;return(0,b.useEffect)(()=>{c&&i({id:t,title:c,level:1})},[t,i,c]),(0,x.jsxs)(`section`,{id:t,className:a(`section--component scroll-mt-24 space-y-4`),children:[!s&&(0,x.jsxs)(`div`,{className:`section--header`,children:[(0,x.jsx)(A,{tag:`h2`,children:o}),!!n&&(0,x.jsx)(D,{size:`xs`,type:`secondary`,className:`mt-1`,children:n})]}),(0,x.jsx)(`div`,{className:a(`section--body min-w-0 space-y-4 text-sm leading-6 text-foreground`,`[&>p]:m-0 [&>p]:max-w-4xl [&>p]:text-sm [&>p]:leading-6 [&>p]:text-foreground`,`[&>ul]:list-disc [&>ul]:space-y-1 [&>ul]:pl-5 [&>ol]:list-decimal [&>ol]:space-y-1 [&>ol]:pl-5 [&>ul>li]:text-sm [&>ul>li]:leading-6 [&>ul>li]:text-foreground [&>ol>li]:text-sm [&>ol>li]:leading-6 [&>ol>li]:text-foreground`,`[&>p_a]:font-medium [&>p_a]:text-foreground [&>p_a]:underline-offset-4 hover:[&>p_a]:underline [&>ul>li_a]:font-medium [&>ul>li_a]:text-foreground [&>ul>li_a]:underline-offset-4 hover:[&>ul>li_a]:underline [&>ol>li_a]:font-medium [&>ol>li_a]:text-foreground [&>ol>li_a]:underline-offset-4 hover:[&>ol>li_a]:underline`,`[&>p_code]:rounded-sm [&>p_code]:bg-muted/60 [&>p_code]:px-1 [&>p_code]:py-0.5 [&>p_code]:text-sm`,`[&>ul>li_code]:rounded-sm [&>ul>li_code]:bg-muted/60 [&>ul>li_code]:px-1 [&>ul>li_code]:py-0.5 [&>ul>li_code]:text-sm [&>ol>li_code]:rounded-sm [&>ol>li_code]:bg-muted/60 [&>ol>li_code]:px-1 [&>ol>li_code]:py-0.5 [&>ol>li_code]:text-sm`,`[&>pre]:max-w-full [&>pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:border [&>pre]:border-border [&>pre]:bg-muted/40 [&>pre]:px-4 [&>pre]:py-3 [&>pre]:text-xs [&>pre]:leading-5`,`[&>pre_code]:bg-transparent [&>pre_code]:p-0 [&>pre_code]:text-xs`,`[&>p_code]:font-mono [&>ul>li_code]:font-mono [&>ol>li_code]:font-mono [&>pre_code]:font-mono`),children:r})]})}export{ee as C,_ as D,f as E,p as O,m as S,v as T,g as _,Q as a,u as b,W as c,re as d,A as f,h as g,y as h,$ as i,F as l,C as m,pe as n,Y as o,D as p,ce as r,K as s,me as t,M as u,l as v,s as w,d as x,c as y};