@new-black/lyra 0.0.13 → 0.0.14

package/dist/lyra145.js

@@ -1,7 +1,260 @@
-const r = /* @__PURE__ */ new Set();
-function w(c, n, o) {
-  c || r.has(n) || (console.warn(n), o && console.warn(o), r.add(n));
+import { frame as c, cancelFrame as f } from "./lyra146.js";
+import { warning as b, invariant as S } from "./lyra123.js";
+import { createBox as P } from "./lyra147.js";
+import { isRefObject as T } from "./lyra148.js";
+import { initPrefersReducedMotion as y } from "./lyra149.js";
+import { hasReducedMotionListener as F, prefersReducedMotion as R } from "./lyra150.js";
+import { SubscriptionManager as j } from "./lyra151.js";
+import { motionValue as w } from "./lyra152.js";
+import { isWillChangeMotionValue as N } from "./lyra153.js";
+import { isMotionValue as m } from "./lyra126.js";
+import { transformProps as E } from "./lyra154.js";
+import { isControllingVariants as x, isVariantNode as B } from "./lyra155.js";
+import { isVariantLabel as L } from "./lyra156.js";
+import { updateMotionValuesFromProps as I } from "./lyra157.js";
+import { resolveVariantFromProps as O } from "./lyra158.js";
+import { warnOnce as A } from "./lyra159.js";
+import { featureDefinitions as g } from "./lyra160.js";
+import { variantProps as M } from "./lyra161.js";
+import { visualElementStore as V } from "./lyra162.js";
+const C = Object.keys(g), U = C.length, v = [
+  "AnimationStart",
+  "AnimationComplete",
+  "Update",
+  "BeforeLayoutMeasure",
+  "LayoutMeasure",
+  "LayoutAnimationStart",
+  "LayoutAnimationComplete"
+], D = M.length;
+class ot {
+  constructor({ parent: t, props: e, presenceContext: i, reducedMotionConfig: s, visualState: r }, u = {}) {
+    this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
+      this.current && (this.triggerBuild(), this.renderInstance(this.current, this.renderState, this.props.style, this.projection));
+    }, this.scheduleRender = () => c.render(this.render, !1, !0);
+    const { latestValues: h, renderState: n } = r;
+    this.latestValues = h, this.baseTarget = { ...h }, this.initialValues = e.initial ? { ...h } : {}, this.renderState = n, this.parent = t, this.props = e, this.presenceContext = i, this.depth = t ? t.depth + 1 : 0, this.reducedMotionConfig = s, this.options = u, this.isControllingVariants = x(e), this.isVariantNode = B(e), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(t && t.current);
+    const { willChange: o, ...p } = this.scrapeMotionValuesFromProps(e, {});
+    for (const a in p) {
+      const l = p[a];
+      h[a] !== void 0 && m(l) && (l.set(h[a], !1), N(o) && o.add(a));
+    }
+  }
+  /**
+   * This method takes React props and returns found MotionValues. For example, HTML
+   * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
+   *
+   * This isn't an abstract method as it needs calling in the constructor, but it is
+   * intended to be one.
+   */
+  scrapeMotionValuesFromProps(t, e) {
+    return {};
+  }
+  mount(t) {
+    this.current = t, V.set(t, this), this.projection && !this.projection.instance && this.projection.mount(t), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((e, i) => this.bindToMotionValue(i, e)), F.current || y(), this.shouldReduceMotion = this.reducedMotionConfig === "never" ? !1 : this.reducedMotionConfig === "always" ? !0 : R.current, process.env.NODE_ENV !== "production" && A(this.shouldReduceMotion !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected."), this.parent && this.parent.children.add(this), this.update(this.props, this.presenceContext);
+  }
+  unmount() {
+    V.delete(this.current), this.projection && this.projection.unmount(), f(this.notifyUpdate), f(this.render), this.valueSubscriptions.forEach((t) => t()), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
+    for (const t in this.events)
+      this.events[t].clear();
+    for (const t in this.features)
+      this.features[t].unmount();
+    this.current = null;
+  }
+  bindToMotionValue(t, e) {
+    const i = E.has(t), s = e.on("change", (u) => {
+      this.latestValues[t] = u, this.props.onUpdate && c.update(this.notifyUpdate, !1, !0), i && this.projection && (this.projection.isTransformDirty = !0);
+    }), r = e.on("renderRequest", this.scheduleRender);
+    this.valueSubscriptions.set(t, () => {
+      s(), r();
+    });
+  }
+  sortNodePosition(t) {
+    return !this.current || !this.sortInstanceNodePosition || this.type !== t.type ? 0 : this.sortInstanceNodePosition(this.current, t.current);
+  }
+  loadFeatures({ children: t, ...e }, i, s, r) {
+    let u, h;
+    if (process.env.NODE_ENV !== "production" && s && i) {
+      const n = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+      e.ignoreStrict ? b(!1, n) : S(!1, n);
+    }
+    for (let n = 0; n < U; n++) {
+      const o = C[n], { isEnabled: p, Feature: a, ProjectionNode: l, MeasureLayout: d } = g[o];
+      l && (u = l), p(e) && (!this.features[o] && a && (this.features[o] = new a(this)), d && (h = d));
+    }
+    if (!this.projection && u) {
+      this.projection = new u(this.latestValues, this.parent && this.parent.projection);
+      const { layoutId: n, layout: o, drag: p, dragConstraints: a, layoutScroll: l, layoutRoot: d } = e;
+      this.projection.setOptions({
+        layoutId: n,
+        layout: o,
+        alwaysMeasureLayout: !!p || a && T(a),
+        visualElement: this,
+        scheduleRender: () => this.scheduleRender(),
+        /**
+         * TODO: Update options in an effect. This could be tricky as it'll be too late
+         * to update by the time layout animations run.
+         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+         * ensuring it gets called if there's no potential layout animations.
+         *
+         */
+        animationType: typeof o == "string" ? o : "both",
+        initialPromotionConfig: r,
+        layoutScroll: l,
+        layoutRoot: d
+      });
+    }
+    return h;
+  }
+  updateFeatures() {
+    for (const t in this.features) {
+      const e = this.features[t];
+      e.isMounted ? e.update() : (e.mount(), e.isMounted = !0);
+    }
+  }
+  triggerBuild() {
+    this.build(this.renderState, this.latestValues, this.options, this.props);
+  }
+  /**
+   * Measure the current viewport box with or without transforms.
+   * Only measures axis-aligned boxes, rotate and skew must be manually
+   * removed with a re-render to work.
+   */
+  measureViewportBox() {
+    return this.current ? this.measureInstanceViewportBox(this.current, this.props) : P();
+  }
+  getStaticValue(t) {
+    return this.latestValues[t];
+  }
+  setStaticValue(t, e) {
+    this.latestValues[t] = e;
+  }
+  /**
+   * Make a target animatable by Popmotion. For instance, if we're
+   * trying to animate width from 100px to 100vw we need to measure 100vw
+   * in pixels to determine what we really need to animate to. This is also
+   * pluggable to support Framer's custom value types like Color,
+   * and CSS variables.
+   */
+  makeTargetAnimatable(t, e = !0) {
+    return this.makeTargetAnimatableFromInstance(t, this.props, e);
+  }
+  /**
+   * Update the provided props. Ensure any newly-added motion values are
+   * added to our map, old ones removed, and listeners updated.
+   */
+  update(t, e) {
+    (t.transformTemplate || this.props.transformTemplate) && this.scheduleRender(), this.prevProps = this.props, this.props = t, this.prevPresenceContext = this.presenceContext, this.presenceContext = e;
+    for (let i = 0; i < v.length; i++) {
+      const s = v[i];
+      this.propEventSubscriptions[s] && (this.propEventSubscriptions[s](), delete this.propEventSubscriptions[s]);
+      const r = t["on" + s];
+      r && (this.propEventSubscriptions[s] = this.on(s, r));
+    }
+    this.prevMotionValues = I(this, this.scrapeMotionValuesFromProps(t, this.prevProps), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
+  }
+  getProps() {
+    return this.props;
+  }
+  /**
+   * Returns the variant definition with a given name.
+   */
+  getVariant(t) {
+    return this.props.variants ? this.props.variants[t] : void 0;
+  }
+  /**
+   * Returns the defined default transition on this component.
+   */
+  getDefaultTransition() {
+    return this.props.transition;
+  }
+  getTransformPagePoint() {
+    return this.props.transformPagePoint;
+  }
+  getClosestVariantNode() {
+    return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
+  }
+  getVariantContext(t = !1) {
+    if (t)
+      return this.parent ? this.parent.getVariantContext() : void 0;
+    if (!this.isControllingVariants) {
+      const i = this.parent ? this.parent.getVariantContext() || {} : {};
+      return this.props.initial !== void 0 && (i.initial = this.props.initial), i;
+    }
+    const e = {};
+    for (let i = 0; i < D; i++) {
+      const s = M[i], r = this.props[s];
+      (L(r) || r === !1) && (e[s] = r);
+    }
+    return e;
+  }
+  /**
+   * Add a child visual element to our set of children.
+   */
+  addVariantChild(t) {
+    const e = this.getClosestVariantNode();
+    if (e)
+      return e.variantChildren && e.variantChildren.add(t), () => e.variantChildren.delete(t);
+  }
+  /**
+   * Add a motion value and bind it to this visual element.
+   */
+  addValue(t, e) {
+    e !== this.values.get(t) && (this.removeValue(t), this.bindToMotionValue(t, e)), this.values.set(t, e), this.latestValues[t] = e.get();
+  }
+  /**
+   * Remove a motion value and unbind any active subscriptions.
+   */
+  removeValue(t) {
+    this.values.delete(t);
+    const e = this.valueSubscriptions.get(t);
+    e && (e(), this.valueSubscriptions.delete(t)), delete this.latestValues[t], this.removeValueFromRenderState(t, this.renderState);
+  }
+  /**
+   * Check whether we have a motion value for this key
+   */
+  hasValue(t) {
+    return this.values.has(t);
+  }
+  getValue(t, e) {
+    if (this.props.values && this.props.values[t])
+      return this.props.values[t];
+    let i = this.values.get(t);
+    return i === void 0 && e !== void 0 && (i = w(e, { owner: this }), this.addValue(t, i)), i;
+  }
+  /**
+   * If we're trying to animate to a previously unencountered value,
+   * we need to check for it in our state and as a last resort read it
+   * directly from the instance (which might have performance implications).
+   */
+  readValue(t) {
+    return this.latestValues[t] !== void 0 || !this.current ? this.latestValues[t] : this.readValueFromInstance(this.current, t, this.options);
+  }
+  /**
+   * Set the base target to later animate back to. This is currently
+   * only hydrated on creation and when we first read a value.
+   */
+  setBaseTarget(t, e) {
+    this.baseTarget[t] = e;
+  }
+  /**
+   * Find the base target for a value thats been removed from all animation
+   * props.
+   */
+  getBaseTarget(t) {
+    var e;
+    const { initial: i } = this.props, s = typeof i == "string" || typeof i == "object" ? (e = O(this.props, i)) === null || e === void 0 ? void 0 : e[t] : void 0;
+    if (i && s !== void 0)
+      return s;
+    const r = this.getBaseTargetFromProps(this.props, t);
+    return r !== void 0 && !m(r) ? r : this.initialValues[t] !== void 0 && s === void 0 ? void 0 : this.baseTarget[t];
+  }
+  on(t, e) {
+    return this.events[t] || (this.events[t] = new j()), this.events[t].add(e);
+  }
+  notify(t, ...e) {
+    this.events[t] && this.events[t].notify(...e);
+  }
 }
 export {
-  w as warnOnce
+  ot as VisualElement
 };

package/dist/lyra146.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]},o={};for(const e in n)o[e]={isEnabled:a=>n[e].some(t=>!!a[t])};exports.featureDefinitions=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./lyra207.cjs"),r=require("./lyra191.cjs"),p=40;let c=!0,a=!1;const s=["read","update","preRender","render","postRender"],n=s.reduce((e,t)=>(e[t]=l.createRenderStep(()=>a=!0),e),{}),d=e=>n[e].process(r.frameData),o=e=>{a=!1,r.frameData.delta=c?1e3/60:Math.max(Math.min(e-r.frameData.timestamp,p),1),r.frameData.timestamp=e,r.frameData.isProcessing=!0,s.forEach(d),r.frameData.isProcessing=!1,a&&(c=!1,requestAnimationFrame(o))},D=()=>{a=!0,c=!0,r.frameData.isProcessing||requestAnimationFrame(o)},F=s.reduce((e,t)=>{const f=n[t];return e[t]=(m,u=!1,i=!1)=>(a||D(),f.schedule(m,u,i)),e},{});function g(e){s.forEach(t=>n[t].cancel(e))}exports.cancelFrame=g;exports.frame=F;exports.steps=n;exports.stepsOrder=s;

package/dist/lyra146.js

@@ -1,27 +1,27 @@
-const n = {
-  animation: [
-    "animate",
-    "variants",
-    "whileHover",
-    "whileTap",
-    "exit",
-    "whileInView",
-    "whileFocus",
-    "whileDrag"
-  ],
-  exit: ["exit"],
-  drag: ["drag", "dragControls"],
-  focus: ["whileFocus"],
-  hover: ["whileHover", "onHoverStart", "onHoverEnd"],
-  tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
-  pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
-  inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
-  layout: ["layout", "layoutId"]
-}, t = {};
-for (const e in n)
-  t[e] = {
-    isEnabled: (o) => n[e].some((a) => !!o[a])
-  };
+import { createRenderStep as f } from "./lyra207.js";
+import { frameData as r } from "./lyra191.js";
+const l = 40;
+let n = !0, s = !1;
+const a = [
+  "read",
+  "update",
+  "preRender",
+  "render",
+  "postRender"
+], o = a.reduce((e, t) => (e[t] = f(() => s = !0), e), {}), d = (e) => o[e].process(r), c = (e) => {
+  s = !1, r.delta = n ? 1e3 / 60 : Math.max(Math.min(e - r.timestamp, l), 1), r.timestamp = e, r.isProcessing = !0, a.forEach(d), r.isProcessing = !1, s && (n = !1, requestAnimationFrame(c));
+}, h = () => {
+  s = !0, n = !0, r.isProcessing || requestAnimationFrame(c);
+}, E = a.reduce((e, t) => {
+  const i = o[t];
+  return e[t] = (m, p = !1, u = !1) => (s || h(), i.schedule(m, p, u)), e;
+}, {});
+function g(e) {
+  a.forEach((t) => o[t].cancel(e));
+}
 export {
-  t as featureDefinitions
+  g as cancelFrame,
+  E as frame,
+  o as steps,
+  a as stepsOrder
 };

package/dist/lyra147.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"],r=["initial",...i];exports.variantPriorityOrder=i;exports.variantProps=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=()=>({translate:0,scale:1,origin:0,originPoint:0}),a=()=>({x:e(),y:e()}),t=()=>({min:0,max:0}),c=()=>({x:t(),y:t()});exports.createAxis=t;exports.createAxisDelta=e;exports.createBox=c;exports.createDelta=a;

package/dist/lyra147.js

@@ -1,13 +1,18 @@
-const i = [
-  "animate",
-  "whileInView",
-  "whileFocus",
-  "whileHover",
-  "whileTap",
-  "whileDrag",
-  "exit"
-], e = ["initial", ...i];
+const t = () => ({
+  translate: 0,
+  scale: 1,
+  origin: 0,
+  originPoint: 0
+}), a = () => ({
+  x: t(),
+  y: t()
+}), e = () => ({ min: 0, max: 0 }), c = () => ({
+  x: e(),
+  y: e()
+});
 export {
-  i as variantPriorityOrder,
-  e as variantProps
+  e as createAxis,
+  t as createAxisDelta,
+  c as createBox,
+  a as createDelta
 };

package/dist/lyra148.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=new WeakMap;exports.visualElementStore=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function t(e){return typeof e=="object"&&Object.prototype.hasOwnProperty.call(e,"current")}exports.isRefObject=t;

package/dist/lyra148.js

@@ -1,4 +1,6 @@
-const e = /* @__PURE__ */ new WeakMap();
+function e(t) {
+  return typeof t == "object" && Object.prototype.hasOwnProperty.call(t, "current");
+}
 export {
-  e as visualElementStore
+  e as isRefObject
 };

package/dist/lyra149.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={};function o(r){Object.assign(e,r)}exports.addScaleCorrector=o;exports.scaleCorrectors=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./lyra141.cjs"),e=require("./lyra150.cjs");function o(){if(e.hasReducedMotionListener.current=!0,!!i.isBrowser)if(window.matchMedia){const r=window.matchMedia("(prefers-reduced-motion)"),t=()=>e.prefersReducedMotion.current=r.matches;r.addListener(t),t()}else e.prefersReducedMotion.current=!1}exports.initPrefersReducedMotion=o;

package/dist/lyra149.js

@@ -1,8 +1,13 @@
-const o = {};
-function r(c) {
-  Object.assign(o, c);
+import { isBrowser as o } from "./lyra141.js";
+import { hasReducedMotionListener as i, prefersReducedMotion as t } from "./lyra150.js";
+function c() {
+  if (i.current = !0, !!o)
+    if (window.matchMedia) {
+      const e = window.matchMedia("(prefers-reduced-motion)"), r = () => t.current = e.matches;
+      e.addListener(r), r();
+    } else
+      t.current = !1;
 }
 export {
-  r as addScaleCorrector,
-  o as scaleCorrectors
+  c as initPrefersReducedMotion
 };

package/dist/lyra15.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./lyra35.cjs"),e=t.cva(["w-[--trigger-width]"],{variants:{isEntering:{true:["animate-in","fade-in","data-[placement=bottom]:slide-in-from-top-1","data-[placement=top]:slide-in-from-bottom-1","ease-out","duration-200","fill-mode-forwards"]},isExiting:{true:["animate-out","fade-out","data-[placement=bottom]:slide-out-to-top-1","data-[placement=top]:slide-out-to-bottom-1","ease-in","duration-150","fill-mode-forwards"]}}}),o=t.cva(["rounded-base","drop-shadow-sm","ring-1","ring-inset","ring-neutral-3","bg-surface-1","outline-none","w-full"]);exports.popoverDialogStyles=o;exports.popoverStyles=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./lyra43.cjs");require("./lyra55.cjs");const t=e.cva(["flex","flex-col"],{variants:{fullWidth:{true:"w-full",false:"w-fit"}}}),i=e.cva(["flex","items-center","outline-none","border","border-solid","rounded-[--input-radius]","font-sans","text-base","transition-all","ease-out","duration-150","placeholder:text-[--input-placeholder-color]"],{variants:{fullWidth:{true:"w-full",false:"w-fit"},isDisabled:{true:"bg-[--input-disabled-bg-color] text-[--input-text-disabled-color] cursor-not-allowed",false:"bg-[--input-background-color] text-[--input-text-color]"},size:{small:["px-[--input-padding-x-small]","py-[--input-padding-y-small]","text-[length:var(--input-text-size-small)]"],medium:["px-[--input-padding-x-medium]","py-[--input-padding-y-medium]","text-[length:var(--input-text-size-medium)]"],large:["px-[--input-padding-x-large]","py-[--input-padding-y-large]","text-[length:var(--input-text-size-large)]"]},validationState:{valid:"border-[--input-border-valid-color]",invalid:"border-[--input-border-invalid-color]"},isHovered:{true:""},isFocused:{true:""}},compoundVariants:[{validationState:void 0,isFocused:!1,isDisabled:!1,className:"border-[--input-border-default-color]"},{isDisabled:!1,isFocused:!1,validationState:void 0,isHovered:!0,className:"border-[--input-border-default-hover-color]"},{isFocused:!0,isDisabled:!1,validationState:void 0,className:"border-[--input-border-focused-color] ring ring-[--input-ring-focused-color]"},{isDisabled:!1,validationState:"valid",isFocused:!0,className:"ring !ring-[--input-ring-valid-color]"},{isDisabled:!1,isFocused:!0,validationState:"invalid",className:"ring !ring-[--input-ring-invalid-color]"}],defaultVariants:{isDisabled:!1}}),a=e.cva(["text-[--input-label-color]","text-[length:--input-label-size]","mb-[--input-label-margin-bottom]","transition-all","ease-out","duration-150"]),l=e.cva(["font-[--input-hint-weight]","text-[--input-hint-color]","mb-[--input-hint-margin-bottom]"],{variants:{size:{small:["text-[--input-hint-size-small]"],medium:["text-[--input-hint-size-medium]"],large:["text-[--input-hint-size-large]"]}}}),n=e.cva(["w-full","flex-grow","bg-transparent","outline-none","disabled:cursor-not-allowed"],{variants:{size:{small:["px-[--input-padding-x-small]","py-[--input-padding-y-small]","text-[length:var(--input-text-size-small)]"],medium:["px-[--input-padding-x-medium]","py-[--input-padding-y-medium]","text-[length:var(--input-text-size-medium)]"],large:["px-[--input-padding-x-large]","py-[--input-padding-y-large]","text-[length:var(--input-text-size-large)]"]}},defaultVariants:{size:"medium"}});exports.sharedInputFieldStyles=i;exports.sharedInputFieldWrapperStyles=t;exports.sharedInputHintStyles=l;exports.sharedInputStyles=n;exports.sharedInputlabelStyles=a;

package/dist/lyra15.js

@@ -1,42 +1,161 @@
-import { cva as t } from "./lyra35.js";
-const e = t(["w-[--trigger-width]"], {
+import { cva as t } from "./lyra43.js";
+import "./lyra55.js";
+const a = t(["flex", "flex-col"], {
   variants: {
-    isEntering: {
-      true: [
-        "animate-in",
-        "fade-in",
-        "data-[placement=bottom]:slide-in-from-top-1",
-        "data-[placement=top]:slide-in-from-bottom-1",
-        "ease-out",
-        "duration-200",
-        "fill-mode-forwards"
-      ]
+    fullWidth: {
+      true: "w-full",
+      false: "w-fit"
+    }
+  }
+}), l = t(
+  [
+    "flex",
+    "items-center",
+    "outline-none",
+    "border",
+    "border-solid",
+    "rounded-[--input-radius]",
+    "font-sans",
+    "text-base",
+    "transition-all",
+    "ease-out",
+    "duration-150",
+    "placeholder:text-[--input-placeholder-color]"
+  ],
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      isDisabled: {
+        true: "bg-[--input-disabled-bg-color] text-[--input-text-disabled-color] cursor-not-allowed",
+        false: "bg-[--input-background-color] text-[--input-text-color]"
+      },
+      size: {
+        small: [
+          "px-[--input-padding-x-small]",
+          "py-[--input-padding-y-small]",
+          "text-[length:var(--input-text-size-small)]"
+        ],
+        medium: [
+          "px-[--input-padding-x-medium]",
+          "py-[--input-padding-y-medium]",
+          "text-[length:var(--input-text-size-medium)]"
+        ],
+        large: [
+          "px-[--input-padding-x-large]",
+          "py-[--input-padding-y-large]",
+          "text-[length:var(--input-text-size-large)]"
+        ]
+      },
+      validationState: {
+        valid: "border-[--input-border-valid-color]",
+        invalid: "border-[--input-border-invalid-color]"
+      },
+      isHovered: {
+        true: ""
+      },
+      isFocused: {
+        true: ""
+      }
+    },
+    compoundVariants: [
+      {
+        validationState: void 0,
+        isFocused: !1,
+        isDisabled: !1,
+        className: "border-[--input-border-default-color]"
+      },
+      {
+        isDisabled: !1,
+        isFocused: !1,
+        validationState: void 0,
+        isHovered: !0,
+        className: "border-[--input-border-default-hover-color]"
+      },
+      {
+        isFocused: !0,
+        isDisabled: !1,
+        validationState: void 0,
+        className: "border-[--input-border-focused-color] ring ring-[--input-ring-focused-color]"
+      },
+      {
+        isDisabled: !1,
+        validationState: "valid",
+        isFocused: !0,
+        className: "ring !ring-[--input-ring-valid-color]"
+      },
+      {
+        isDisabled: !1,
+        isFocused: !0,
+        validationState: "invalid",
+        className: "ring !ring-[--input-ring-invalid-color]"
+      }
+    ],
+    defaultVariants: {
+      isDisabled: !1
+    }
+  }
+), n = t([
+  "text-[--input-label-color]",
+  "text-[length:--input-label-size]",
+  "mb-[--input-label-margin-bottom]",
+  "transition-all",
+  "ease-out",
+  "duration-150"
+]), r = t(
+  [
+    "font-[--input-hint-weight]",
+    "text-[--input-hint-color]",
+    "mb-[--input-hint-margin-bottom]"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["text-[--input-hint-size-small]"],
+        medium: ["text-[--input-hint-size-medium]"],
+        large: ["text-[--input-hint-size-large]"]
+      }
+    }
+  }
+), s = t(
+  [
+    "w-full",
+    "flex-grow",
+    "bg-transparent",
+    "outline-none",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        small: [
+          "px-[--input-padding-x-small]",
+          "py-[--input-padding-y-small]",
+          "text-[length:var(--input-text-size-small)]"
+        ],
+        medium: [
+          "px-[--input-padding-x-medium]",
+          "py-[--input-padding-y-medium]",
+          "text-[length:var(--input-text-size-medium)]"
+        ],
+        large: [
+          "px-[--input-padding-x-large]",
+          "py-[--input-padding-y-large]",
+          "text-[length:var(--input-text-size-large)]"
+        ]
+      }
     },
-    isExiting: {
-      true: [
-        "animate-out",
-        "fade-out",
-        "data-[placement=bottom]:slide-out-to-top-1",
-        "data-[placement=top]:slide-out-to-bottom-1",
-        "ease-in",
-        "duration-150",
-        "fill-mode-forwards"
-      ]
+    defaultVariants: {
+      size: "medium"
     }
   }
-}), a = t([
-  "rounded-base",
-  "drop-shadow-sm",
-  "ring-1",
-  "ring-inset",
-  "ring-neutral-3",
-  "bg-surface-1",
-  "outline-none",
-  "w-full"
-  //   "w-fit",
-  //   "w-[--trigger-width]",
-]);
+);
 export {
-  a as popoverDialogStyles,
-  e as popoverStyles
+  l as sharedInputFieldStyles,
+  a as sharedInputFieldWrapperStyles,
+  r as sharedInputHintStyles,
+  s as sharedInputStyles,
+  n as sharedInputlabelStyles
 };

package/dist/lyra150.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./lyra140.cjs"),u={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},c=o.transformPropOrder.length;function d(e,{enableHardwareAcceleration:a=!0,allowTransformNone:l=!0},s,i){let r="";for(let n=0;n<c;n++){const t=o.transformPropOrder[n];if(e[t]!==void 0){const f=u[t]||t;r+=`${f}(${e[t]}) `}}return a&&!e.z&&(r+="translateZ(0)"),r=r.trim(),i?r=i(e,s?"":r):l&&s&&(r="none"),r}exports.buildTransform=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={current:null},t={current:!1};exports.hasReducedMotionListener=t;exports.prefersReducedMotion=e;

package/dist/lyra150.js

@@ -1,21 +1,5 @@
-import { transformPropOrder as o } from "./lyra140.js";
-const c = {
-  x: "translateX",
-  y: "translateY",
-  z: "translateZ",
-  transformPerspective: "perspective"
-}, u = o.length;
-function p(e, { enableHardwareAcceleration: a = !0, allowTransformNone: l = !0 }, i, s) {
-  let t = "";
-  for (let n = 0; n < u; n++) {
-    const r = o[n];
-    if (e[r] !== void 0) {
-      const f = c[r] || r;
-      t += `${f}(${e[r]}) `;
-    }
-  }
-  return a && !e.z && (t += "translateZ(0)"), t = t.trim(), s ? t = s(e, i ? "" : t) : l && i && (t = "none"), t;
-}
+const e = { current: null }, n = { current: !1 };
 export {
-  p as buildTransform
+  n as hasReducedMotionListener,
+  e as prefersReducedMotion
 };

package/dist/lyra151.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("./lyra152.cjs"),ee=require("./lyra153.cjs"),Q=require("./lyra154.cjs"),te=require("./lyra155.cjs"),ne=require("./lyra156.cjs"),ie=require("./lyra157.cjs"),D=require("./lyra158.cjs"),R=require("./lyra159.cjs"),re={decay:Q.inertia,inertia:Q.inertia,tween:q.keyframes,keyframes:q.keyframes,spring:ee.spring};function le({autoplay:X=!0,delay:Y=0,driver:Z=te.frameloopDriver,keyframes:u,type:_="keyframes",repeat:d=0,repeatDelay:m=0,repeatType:h="loop",onPlay:x,onStop:T,onComplete:A,onUpdate:O,...k}){let o=1,V=!1,F,j;const M=()=>{F&&F(),j=new Promise(e=>{F=e})};M();let r;const P=re[_]||q.keyframes;let I;P!==q.keyframes&&typeof u[0]!="number"&&(I=ne.interpolate([0,100],u,{clamp:!1}),u=[0,100]);const s=P({...k,keyframes:u});let B;h==="mirror"&&(B=P({...k,keyframes:[...u].reverse(),velocity:-(k.velocity||0)}));let n="idle",l=null,i=null,v=null;s.calculatedDuration===null&&d&&(s.calculatedDuration=R.calcGeneratorDuration(s));const{calculatedDuration:S}=s;let c=1/0,g=1/0;S!==null&&(c=S+m,g=c*(d+1)-m);let t=0;const b=e=>{if(i===null)return;o>0&&(i=Math.min(i,e)),l!==null?t=l:t=(e-i)*o;const p=t-Y,z=p<0;t=Math.max(p,0),n==="finished"&&l===null&&(t=g);let C=t,E=s;if(d){const G=t/c;let y=Math.floor(G),a=G%1;!a&&G>=1&&(a=1),a===1&&y--,y=Math.min(y,d+1);const J=!!(y%2);J&&(h==="reverse"?(a=1-a,m&&(a-=m/c)):h==="mirror"&&(E=B));let L=ie.clamp(0,1,a);t>g&&(L=h==="reverse"&&J?1:0),C=L*c}const f=z?{done:!1,value:u[0]}:E.next(C);I&&(f.value=I(f.value));let{done:H}=f;!z&&S!==null&&(H=t>=g);const $=l===null&&(n==="finished"||n==="running"&&H||o<0&&t<=0);return O&&O(f.value),$&&U(),f},K=()=>{r&&r.stop(),r=void 0},N=()=>{n="idle",K(),M(),i=v=null},U=()=>{n="finished",A&&A(),K(),M()},W=()=>{if(V)return;r||(r=Z(b));const e=r.now();x&&x(),l!==null?i=e-l:(!i||n==="finished")&&(i=e),v=i,l=null,n="running",r.start()};X&&W();const w={then(e,p){return j.then(e,p)},get time(){return D.millisecondsToSeconds(t)},set time(e){e=D.secondsToMilliseconds(e),t=e,l!==null||!r||o===0?l=e:i=r.now()-e/o},get duration(){const e=s.calculatedDuration===null?R.calcGeneratorDuration(s):s.calculatedDuration;return D.millisecondsToSeconds(e)},get speed(){return o},set speed(e){e===o||!r||(o=e,w.time=D.millisecondsToSeconds(t))},get state(){return n},play:W,pause:()=>{n="paused",l=t},stop:()=>{V=!0,n!=="idle"&&(n="idle",T&&T(),N())},cancel:()=>{v!==null&&b(v),N()},complete:()=>{n="finished"},sample:e=>(i=0,b(e))};return w}exports.animateValue=le;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./lyra189.cjs");class u{constructor(){this.subscriptions=[]}add(s){return o.addUniqueItem(this.subscriptions,s),()=>o.removeItem(this.subscriptions,s)}notify(s,r,e){const t=this.subscriptions.length;if(t)if(t===1)this.subscriptions[0](s,r,e);else for(let i=0;i<t;i++){const n=this.subscriptions[i];n&&n(s,r,e)}}getSize(){return this.subscriptions.length}clear(){this.subscriptions.length=0}}exports.SubscriptionManager=u;