@frontfriend/sdk 1.2.8 → 1.3.1

package/dist/lib/core/component-recipes.js

@@ -1,8 +1,557 @@
-var h=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports);var g=h((D,y)=>{function f(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)}function p(e,n){if(!f(e)||!f(n))return n===void 0?e:n;let o={...e};for(let[r,a]of Object.entries(n))o[r]=r in o?p(o[r],a):a;return o}function u(e,n,o=[],r=[]){if(e===void 0||n===void 0)return r;if(!f(e)||!f(n))return r.push(o.join(".")),r;for(let a of Object.keys(e))a in n&&u(e[a],n[a],[...o,a],r);return r}function m(e){return f(e)&&("styles"in e||"behavior"in e)}function b(e,n="component"){if(!m(e)||!f(e.styles)||e.behavior!==void 0&&!f(e.behavior)||Object.keys(e).some(r=>!["styles","behavior"].includes(r)))throw new TypeError(`Component ${n} must use the styles/behavior envelope`);let o=u(e.styles,e.behavior,[n]);if(o.length>0)throw new Error(`Component config styles/behavior conflict at ${o.join(", ")}`);return p(e.styles||{},e.behavior||{})}function E(e){if(!f(e))return e;let n=!1,o={};for(let[r,a]of Object.entries(e))o[r]=b(a,r),o[r]!==a&&(n=!0);return n?o:e}y.exports={isPlainObject:f,deepMerge:p,findTreeConflicts:u,isComponentEnvelope:m,toRuntimeComponentConfig:b,toRuntimeComponentsConfig:E}});var C=h((Z,j)=>{var w=["open","closed","checked","unchecked","indeterminate","active"],A={open:['[data-expanded]:not([data-expanded="false"])','[data-popup-open]:not([data-popup-open="false"])','[data-panel-open]:not([data-panel-open="false"])']},S="on",T=["/* Dark mode follows the root class the theme picker toggles. */","@custom-variant dark {","  &:is(.dark, .dark *) {","    @slot;","  }","}",""],d=[...T,"/* Cross-primitive state variants (Radix `data-state=x`, Base UI `data-x`). */",...w.flatMap(e=>{let n=[`[data-state="${e}"]`,`[data-${e}]:not([data-${e}="false"])`,...A[e]||[]];return[`@custom-variant data-${e} {`,...n.map((o,r)=>`  &:where(${o})${r===n.length-1?" {":","}`),"    @slot;","  }","}",""]}),`@custom-variant data-${S} {`,'  &:where([data-state="on"]),','  &:where([aria-pressed="true"]) {',"    @slot;","  }","}","","@custom-variant data-selected {",'  &:where([data-selected="true"]) {',"    @slot;","  }","}","","@custom-variant data-disabled {",'  &:where([data-disabled="true"]),','  &:where([data-disabled]:not([data-disabled="false"])) {',"    @slot;","  }","}","",...["horizontal","vertical"].flatMap(e=>[`@custom-variant data-${e} {`,`  &:where([data-orientation="${e}"]) {`,"    @slot;","  }","}",""])],$=d.filter(e=>e.startsWith("@custom-variant ")).map(e=>e.slice(16).replace(" {",""));function R(){return d.join(`
-`)}j.exports={CROSS_PRIMITIVE_STATES:w,DARK_VARIANT_CSS:T,EXTRA_STATE_MATCHERS:A,PRESSED_STATE:S,STATE_VARIANT_CSS:d,STATE_VARIANT_NAMES:$,stateVariantCss:R}});var{findTreeConflicts:v}=g();function k(e){return String(e).replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/[^a-zA-Z0-9]+/g,"-").replace(/^-+|-+$/g,"").toLowerCase()}function _(e,n){let o=e.length-1,r=e.filter((a,l)=>(l===o||!["styles","slots","variants"].includes(a))&&a!=="root");return[n,...r.map(k)].filter(Boolean).join("-")}function M(e){let n=[],o=[];for(let r of e.trim().split(/\s+/))/^(group|peer)(?:\/[^\s]+)?$/.test(r)?n.push(r):o.push(r);return{passthrough:n,recipe:o}}function O(e,n={}){let o=n.prefix||"ff",r=new Map;function a(i,t){if(typeof i=="string"){let s=_(t,o),c=M(i);return r.set(s,{className:c.recipe.join(" "),depth:t.length,base:t[t.length-1]==="root"}),[s,...c.passthrough].join(" ")}if(Array.isArray(i))return i.map((s,c)=>a(s,[...t,String(c)]));if(!i||typeof i!="object")throw new Error(`Style value at ${t.join(".")} must be a string or object`);return Object.fromEntries(Object.entries(i).map(([s,c])=>[s,a(c,[...t,s])]))}let l={};for(let[i,t]of Object.entries(e||{})){if(!t||typeof t!="object"||!("styles"in t))throw new Error(`Component ${i} must use the styles/behavior envelope`);let s=v(t.styles,t.behavior,[i]);if(s.length>0)throw new Error(`Component config styles/behavior conflict at ${s.join(", ")}`);l[i]={styles:a(t.styles,[i,"styles"]),...t.behavior===void 0?{}:{behavior:t.behavior}}}return{config:l,classes:Object.fromEntries([...r.entries()].sort(([,i],[,t])=>i.depth-t.depth||Number(t.base)-Number(i.base)).map(([i,t])=>[i,t.className]))}}function x(e,n=[]){let o=new Map(e.map(([t],s)=>[t,s])),r=new Map(e.map(([t])=>[t,0])),a=new Map(e.map(([t])=>[t,[]]));for(let t of n){let s=t.filter(c=>o.has(c));for(let c=1;c<s.length;c+=1)a.get(s[c-1]).push(s[c]),r.set(s[c],r.get(s[c])+1)}let l=e.map(([t])=>t).filter(t=>r.get(t)===0),i=[];for(;l.length>0;){l.sort((s,c)=>o.get(s)-o.get(c));let t=l.shift();i.push(e[o.get(t)]);for(let s of a.get(t))r.set(s,r.get(s)-1),r.get(s)===0&&l.push(s)}if(i.length!==e.length){let t=e.map(([s])=>s).filter(s=>r.get(s)>0);throw new Error(`Recipe order has a cycle between ${t.join(", ")}`)}return i}function N(e,n={}){let o=n.scope||"default";if(!/^[a-zA-Z0-9_-]+$/.test(o))throw new Error("Recipe scope may only contain letters, numbers, dashes, and underscores");return`@layer base {
-${x(Object.entries(e).filter(([,a])=>typeof a=="string"&&a.trim()),n.order).map(([a,l])=>`  :where([data-ff-recipe="${o}"]) .${a} {
-    @apply ${l.trim()};
+var d=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports);var h=d((L,k)=>{function m(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)}function f(e,r){if(!m(e)||!m(r))return r===void 0?e:r;let s={...e};for(let[l,i]of Object.entries(r))s[l]=l in s?f(s[l],i):i;return s}function p(e,r,s=[],l=[]){if(e===void 0||r===void 0)return l;if(!m(e)||!m(r))return l.push(s.join(".")),l;for(let i of Object.keys(e))i in r&&p(e[i],r[i],[...s,i],l);return l}function u(e){return m(e)&&("styles"in e||"behavior"in e)}function g(e,r="component"){if(!u(e)||!m(e.styles)||e.behavior!==void 0&&!m(e.behavior)||Object.keys(e).some(l=>!["styles","behavior"].includes(l)))throw new TypeError(`Component ${r} must use the styles/behavior envelope`);let s=p(e.styles,e.behavior,[r]);if(s.length>0)throw new Error(`Component config styles/behavior conflict at ${s.join(", ")}`);return f(e.styles||{},e.behavior||{})}function T(e){if(!m(e))return e;let r=!1,s={};for(let[l,i]of Object.entries(e))s[l]=g(i,l),s[l]!==i&&(r=!0);return r?s:e}k.exports={isPlainObject:m,deepMerge:f,findTreeConflicts:p,isComponentEnvelope:u,toRuntimeComponentConfig:g,toRuntimeComponentsConfig:T}});var x=d((F,w)=>{var b=["open","closed","checked","unchecked","indeterminate","active"],y={open:['[data-expanded]:not([data-expanded="false"])','[data-popup-open]:not([data-popup-open="false"])','[data-panel-open]:not([data-panel-open="false"])']},_="on",z=["/* Dark mode follows the root class the theme picker toggles. */","@custom-variant dark {","  &:is(.dark, .dark *) {","    @slot;","  }","}",""],v=[...z,"/* Cross-primitive state variants (Radix `data-state=x`, Base UI `data-x`). */",...b.flatMap(e=>{let r=[`[data-state="${e}"]`,`[data-${e}]:not([data-${e}="false"])`,...y[e]||[]];return[`@custom-variant data-${e} {`,...r.map((s,l)=>`  &:where(${s})${l===r.length-1?" {":","}`),"    @slot;","  }","}",""]}),`@custom-variant data-${_} {`,'  &:where([data-state="on"]),','  &:where([aria-pressed="true"]) {',"    @slot;","  }","}","","@custom-variant data-selected {",'  &:where([data-selected="true"]) {',"    @slot;","  }","}","","@custom-variant data-disabled {",'  &:where([data-disabled="true"]),','  &:where([data-disabled]:not([data-disabled="false"])) {',"    @slot;","  }","}","",...["horizontal","vertical"].flatMap(e=>[`@custom-variant data-${e} {`,`  &:where([data-orientation="${e}"]) {`,"    @slot;","  }","}",""])],S=v.filter(e=>e.startsWith("@custom-variant ")).map(e=>e.slice(16).replace(" {",""));function j(){return v.join(`
+`)}w.exports={CROSS_PRIMITIVE_STATES:b,DARK_VARIANT_CSS:z,EXTRA_STATE_MATCHERS:y,PRESSED_STATE:_,STATE_VARIANT_CSS:v,STATE_VARIANT_NAMES:S,stateVariantCss:j}});var A=d((H,C)=>{var E=`
+@property --scroll-fade-t {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-mask {
+  syntax: "*";
+  inherits: false;
+}
+
+@layer theme {
+  @keyframes scroll-fade-reveal-t {
+    from {
+      --scroll-fade-t: 0px;
+    }
+    to {
+      --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+  }
+  @keyframes scroll-fade-reveal-b {
+    from {
+      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-b: 0px;
+    }
+  }
+  @keyframes scroll-fade-reveal-s {
+    from {
+      --scroll-fade-s: 0px;
+    }
+    to {
+      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+  }
+  @keyframes scroll-fade-reveal-e {
+    from {
+      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-e: 0px;
+    }
+  }
+}
+
+@utility scroll-fade {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self y), scroll(self y);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-y {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self y), scroll(self y);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-x {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-inline: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-inline: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-s 1ms ease-in-out,
+      scroll-fade-reveal-e 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self inline), scroll(self inline);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-t {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-t 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self y);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+  }
+}
+
+@utility scroll-fade-b {
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-b 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self y);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-l {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self x);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-r {
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self x);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-s {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self inline);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-e {
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      #000 0,
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    --_scroll-fade-timeline: scroll(self inline);
+    animation-timeline: var(--_scroll-fade-timeline);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-* {
+  --scroll-fade-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-t-* {
+  --scroll-fade-t-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-t-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-b-* {
+  --scroll-fade-b-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-b-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-s-* {
+  --scroll-fade-s-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-s-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-e-* {
+  --scroll-fade-e-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-e-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-none {
+  --scroll-fade-mask: none;
+}
+
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+@property --shimmer-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --shimmer-text-fill {
+  syntax: "*";
+  inherits: false;
+}
+
+@layer theme {
+  @keyframes tw-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}
+
+@utility shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(
+    --shimmer-color,
+    oklch(from currentColor l c h / calc(alpha* 0.2))
+  );
+
+  background-image: var(
+    --shimmer-image,
+    linear-gradient(
+      calc(90deg + var(--shimmer-angle)),
+      var(--_base) calc(50% - var(--_spread)),
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+        calc(50% - var(--_spread) * 0.5),
+      var(--_highlight) 50%,
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+        calc(50% + var(--_spread) * 0.5),
+      var(--_base) calc(50% + var(--_spread))
+    )
+  );
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+  @variant dark {
+    --_highlight: var(
+      --shimmer-color,
+      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
+    );
+  }
+
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    animation-direction: reverse;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@utility shimmer-once {
+  animation-iteration-count: 1;
+}
+
+@utility shimmer-reverse {
+  animation-direction: reverse;
+}
+
+@utility shimmer-none {
+  --shimmer-image: none;
+  --shimmer-text-fill: currentColor;
+}
+
+@utility shimmer-color-* {
+  --shimmer-color: --value(--color, [color]);
+  --shimmer-color: color-mix(
+    in oklch,
+    --value(--color, [color]) calc(--modifier(integer) * 1%),
+    transparent
+  );
+}
+
+@utility shimmer-duration-* {
+  --shimmer-duration: calc(--value(integer) * 1ms);
+}
+
+@utility shimmer-spread-* {
+  --shimmer-spread: calc(var(--spacing) * --value(integer));
+  --shimmer-spread: --value([length], [percentage]);
+}
+
+@utility shimmer-angle-* {
+  --shimmer-angle: calc(--value(integer) * 1deg);
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+`;function $(){return E}C.exports={motionUtilityCss:$}});var{findTreeConflicts:R}=h();function M(e){return String(e).replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/[^a-zA-Z0-9]+/g,"-").replace(/^-+|-+$/g,"").toLowerCase()}function O(e,r){let s=e.length-1,l=e.filter((i,c)=>(c===s||!["styles","slots","variants"].includes(i))&&i!=="root");return[r,...l.map(M)].filter(Boolean).join("-")}function I(e){let r=[],s=[];for(let l of e.trim().split(/\s+/))/^(group|peer)(?:\/[^\s]+)?$/.test(l)?r.push(l):s.push(l);return{passthrough:r,recipe:s}}function N(e,r={}){let s=r.prefix||"ff",l=new Map;function i(o,a){if(typeof o=="string"){let t=O(a,s),n=I(o);return l.set(t,{className:n.recipe.join(" "),depth:a.length,base:a[a.length-1]==="root"}),[t,...n.passthrough].join(" ")}if(Array.isArray(o))return o.map((t,n)=>i(t,[...a,String(n)]));if(!o||typeof o!="object")throw new Error(`Style value at ${a.join(".")} must be a string or object`);return Object.fromEntries(Object.entries(o).map(([t,n])=>[t,i(n,[...a,t])]))}let c={};for(let[o,a]of Object.entries(e||{})){if(!a||typeof a!="object"||!("styles"in a))throw new Error(`Component ${o} must use the styles/behavior envelope`);let t=R(a.styles,a.behavior,[o]);if(t.length>0)throw new Error(`Component config styles/behavior conflict at ${t.join(", ")}`);c[o]={styles:i(a.styles,[o,"styles"]),...a.behavior===void 0?{}:{behavior:a.behavior}}}return{config:c,classes:Object.fromEntries([...l.entries()].sort(([,o],[,a])=>o.depth-a.depth||Number(a.base)-Number(o.base)).map(([o,a])=>[o,a.className]))}}function V(e,r=[]){let s=new Map(e.map(([a],t)=>[a,t])),l=new Map(e.map(([a])=>[a,0])),i=new Map(e.map(([a])=>[a,[]]));for(let a of r){let t=a.filter(n=>s.has(n));for(let n=1;n<t.length;n+=1)i.get(t[n-1]).push(t[n]),l.set(t[n],l.get(t[n])+1)}let c=e.map(([a])=>a).filter(a=>l.get(a)===0),o=[];for(;c.length>0;){c.sort((t,n)=>s.get(t)-s.get(n));let a=c.shift();o.push(e[s.get(a)]);for(let t of i.get(a))l.set(t,l.get(t)-1),l.get(t)===0&&c.push(t)}if(o.length!==e.length){let a=e.map(([t])=>t).filter(t=>l.get(t)>0);throw new Error(`Recipe order has a cycle between ${a.join(", ")}`)}return o}function P(e,r={}){let s=r.scope||"default";if(!/^[a-zA-Z0-9_-]+$/.test(s))throw new Error("Recipe scope may only contain letters, numbers, dashes, and underscores");return`@layer base {
+${V(Object.entries(e).filter(([,i])=>typeof i=="string"&&i.trim()),r.order).map(([i,c])=>`  :where([data-ff-recipe="${s}"]) .${i} {
+    @apply ${c.trim()};
   }`).join(`
 `)}
 }
-`}var{STATE_VARIANT_CSS:I,STATE_VARIANT_NAMES:V,stateVariantCss:P}=C();module.exports={STATE_VARIANT_CSS:I,STATE_VARIANT_NAMES:V,stateVariantCss:P,createComponentRecipe:O,emitComponentRecipeCss:N};
+`}var{STATE_VARIANT_CSS:U,STATE_VARIANT_NAMES:q,stateVariantCss:D}=x(),{motionUtilityCss:Z}=A();module.exports={STATE_VARIANT_CSS:U,STATE_VARIANT_NAMES:q,stateVariantCss:D,motionUtilityCss:Z,createComponentRecipe:N,emitComponentRecipeCss:P};