@lifeonlars/prime-yggdrasil 0.2.0 → 0.2.2

package/dist/components/button.css

@@ -388,6 +388,22 @@
   .p-splitbutton {
     border-radius: var(--radius-md);
   }
+
+  /* SplitButton border radius overrides for grouped buttons */
+  .p-splitbutton > .p-button {
+    border-radius: 0;
+  }
+
+  .p-splitbutton > .p-button:first-child {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  .p-splitbutton > .p-button:last-child {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
   .p-splitbutton.p-button-outlined > .p-button {
     background-color: transparent;
     color: var(--text-state-interactive);

package/dist/components/form.css

@@ -195,16 +195,30 @@
     display: inline-flex;
     user-select: none;
     vertical-align: bottom;
-  }
-  .p-checkbox {
     width: 22px;
     height: 22px;
   }
+
   .p-checkbox .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
     border: 2px solid var(--border-neutral-default);
     border-radius: var(--radius-md);
   }
+
   .p-checkbox .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     border: 2px solid var(--border-neutral-default);
     background: var(--surface-neutral-primary);
     width: 22px;
@@ -214,30 +228,13 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     outline-color: transparent;
   }
+
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
     color: var(--text-onsurface-onbrand);
     font-size: 14px;
   }
-  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
-    width: 14px;
-    height: 14px;
-  }
-  .p-checkbox .p-checkbox-box {
-    border: 2px solid var(--border-neutral-default);
-    background: var(--surface-neutral-primary);
-    width: 22px;
-    height: 22px;
-    color: var(--text-neutral-default);
-    border-radius: var(--radius-md);
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    outline-color: transparent;
-  }
-  .p-checkbox .p-checkbox-box .p-checkbox-icon {
-    transition-duration: 0.2s;
-    color: var(--text-onsurface-onbrand);
-    font-size: 14px;
-  }
+
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
     width: 14px;
     height: 14px;
@@ -275,23 +272,13 @@
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: var(--surface-brand-secondary);
   }
-  .p-checkbox {
-    position: relative;
-    display: inline-flex;
-    user-select: none;
-    vertical-align: bottom;
-  }
+
+  /* Radio Button */
   .p-radiobutton {
     position: relative;
     display: inline-flex;
     user-select: none;
     vertical-align: bottom;
-  }
-  .p-radiobutton.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1, 1);
-    visibility: visible;
-  }
-  .p-radiobutton {
     width: 22px;
     height: 22px;
   }
@@ -311,6 +298,9 @@
     border-radius: var(--radius-full);
   }
   .p-radiobutton .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     border: 2px solid var(--border-neutral-default);
     background: var(--surface-neutral-primary);
     width: 22px;
@@ -323,6 +313,7 @@
   .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
     width: 12px;
     height: 12px;
+    border-radius: 50%;
     transition-duration: 0.2s;
     background-color: var(--surface-neutral-primary);
   }
@@ -475,6 +466,22 @@
   .p-selectbutton.p-invalid > .p-button {
     border-color: var(--severity-danger-text);
   }
+
+  /* SelectButton border radius overrides for grouped buttons */
+  .p-selectbutton .p-button {
+    border-radius: 0;
+  }
+
+  .p-selectbutton .p-button:first-child {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  .p-selectbutton .p-button:last-child {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
   .p-selectbutton > .p-button,
   .p-dropdown {
     display: inline-flex;
@@ -747,6 +754,116 @@
   .p-multiselect.p-invalid.p-component {
     border-color: var(--severity-danger-text);
   }
+
+  /* MultiSelect Panel */
+  .p-multiselect-panel {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  }
+
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid var(--border-neutral-subdued);
+    color: var(--text-neutral-loud);
+    background: var(--surface-neutral-secondary);
+    margin: 0;
+    border-top-right-radius: var(--radius-md);
+    border-top-left-radius: var(--radius-md);
+  }
+
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.75rem;
+  }
+
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.75rem;
+    color: var(--text-neutral-subdued);
+  }
+
+  .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5rem;
+  }
+
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    margin-left: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: var(--text-neutral-subdued);
+    border: 0 none;
+    background: transparent;
+    border-radius: var(--radius-full);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: var(--text-neutral-loud);
+    border-color: transparent;
+    background: var(--surface-state-hover);
+  }
+
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
+  }
+
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: var(--text-neutral-default);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: var(--text-state-interactive);
+    background: var(--surface-state-selected);
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: color-mix(in srgb, var(--surface-brand-primary) 24%, transparent);
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight, .p-disabled).p-focus {
+    color: var(--text-neutral-default);
+    background: var(--surface-state-hover);
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
+    margin-right: 0.5rem;
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: var(--text-neutral-loud);
+    background: var(--surface-neutral-primary);
+    font-weight: 700;
+  }
+
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: var(--text-neutral-default);
+    background: transparent;
+  }
+
   .p-treeselect {
     background: var(--text-onsurface-onbrand);
     border: 1px solid var(--border-neutral-subdued);

package/dist/index.cjs

@@ -1 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.1.0",o={name:"Yggdrasil",version:"0.1.0",tokens:727,coverage:"96%",modes:["light","dark"]};exports.theme=o;exports.version=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react"),ee=require("primereact/api");var b={exports:{}},_={};var $;function re(){if($)return _;$=1;var u=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function l(c,o,s){var d=null;if(s!==void 0&&(d=""+s),o.key!==void 0&&(d=""+o.key),"key"in o){s={};for(var m in o)m!=="key"&&(s[m]=o[m])}else s=o;return o=s.ref,{$$typeof:u,type:c,key:d,ref:o!==void 0?o:null,props:s}}return _.Fragment=i,_.jsx=l,_.jsxs=l,_}var E={};var I;function te(){return I||(I=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===H?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case p:return"Fragment";case q:return"Profiler";case W:return"StrictMode";case z:return"Suspense";case G:return"SuspenseList";case B:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case L:return"Portal";case J:return e.displayName||"Context";case U:return(e._context.displayName||"Context")+".Consumer";case V:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case X:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case T:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function i(e){return""+e}function l(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),i(e)}}function c(e){if(e===p)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===T)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=k.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function d(e){if(w.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function m(e,r){function t(){h||(h=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function D(){var e=u(this.type);return x[e]||(x[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function M(e,r,t,n,R,O){var a=t.ref;return e={$$typeof:j,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:D}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:R}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function S(e,r,t,n,R,O){var a=r.children;if(a!==void 0)if(n)if(Z(a)){for(n=0;n<a.length;n++)A(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(a);if(w.call(r,"key")){a=u(e);var f=Object.keys(r).filter(function(Q){return Q!=="key"});n=0<f.length?"{key: someKey, "+f.join(": ..., ")+": ...}":"{key: someKey}",Y[a+n]||(f=0<f.length?"{"+f.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,a,f,a),Y[a+n]=!0)}if(a=null,t!==void 0&&(l(t),a=""+t),d(r)&&(l(r.key),a=""+r.key),"key"in r){t={};for(var P in r)P!=="key"&&(t[P]=r[P])}else t=r;return a&&m(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),M(e,a,t,o(),R,O)}function A(e){y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===T&&(e._payload.status==="fulfilled"?y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function y(e){return typeof e=="object"&&e!==null&&e.$$typeof===j}var v=K,j=Symbol.for("react.transitional.element"),L=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),q=Symbol.for("react.profiler"),U=Symbol.for("react.consumer"),J=Symbol.for("react.context"),V=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),G=Symbol.for("react.suspense_list"),X=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),B=Symbol.for("react.activity"),H=Symbol.for("react.client.reference"),k=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,w=Object.prototype.hasOwnProperty,Z=Array.isArray,g=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var h,x={},N=v.react_stack_bottom_frame.bind(v,s)(),C=g(c(s)),Y={};E.Fragment=p,E.jsx=function(e,r,t){var n=1e4>k.recentlyCreatedOwnerStacks++;return S(e,r,t,!1,n?Error("react-stack-top-frame"):N,n?g(c(e)):C)},E.jsxs=function(e,r,t){var n=1e4>k.recentlyCreatedOwnerStacks++;return S(e,r,t,!0,n?Error("react-stack-top-frame"):N,n?g(c(e)):C)}})()),E}var F;function ne(){return F||(F=1,process.env.NODE_ENV==="production"?b.exports=re():b.exports=te()),b.exports}var ae=ne();function oe({children:u,ripple:i=!0,primeConfig:l={}}){const c={ripple:i,inputStyle:"outlined",...l};return ae.jsx(ee.PrimeReactProvider,{value:c,children:u})}const se="0.2.1",ue={name:"Yggdrasil",version:"0.2.1",tokens:727,coverage:"100%",modes:["light","dark"]};exports.YggdrasilProvider=oe;exports.theme=ue;exports.version=se;

package/dist/index.js

@@ -1,11 +1,286 @@
-const e = "0.1.0", o = {
+import K from "react";
+import { PrimeReactProvider as ee } from "primereact/api";
+var b = { exports: {} }, _ = {};
+var $;
+function re() {
+  if ($) return _;
+  $ = 1;
+  var u = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.fragment");
+  function l(c, o, s) {
+    var d = null;
+    if (s !== void 0 && (d = "" + s), o.key !== void 0 && (d = "" + o.key), "key" in o) {
+      s = {};
+      for (var m in o)
+        m !== "key" && (s[m] = o[m]);
+    } else s = o;
+    return o = s.ref, {
+      $$typeof: u,
+      type: c,
+      key: d,
+      ref: o !== void 0 ? o : null,
+      props: s
+    };
+  }
+  return _.Fragment = i, _.jsx = l, _.jsxs = l, _;
+}
+var E = {};
+var I;
+function te() {
+  return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
+    function u(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === H ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case p:
+          return "Fragment";
+        case U:
+          return "Profiler";
+        case W:
+          return "StrictMode";
+        case z:
+          return "Suspense";
+        case G:
+          return "SuspenseList";
+        case B:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case M:
+            return "Portal";
+          case J:
+            return e.displayName || "Context";
+          case q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case V:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case X:
+            return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
+          case T:
+            r = e._payload, e = e._init;
+            try {
+              return u(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function i(e) {
+      return "" + e;
+    }
+    function l(e) {
+      try {
+        i(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), i(e);
+      }
+    }
+    function c(e) {
+      if (e === p) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
+        return "<...>";
+      try {
+        var r = u(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = k.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (x.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function m(e, r) {
+      function t() {
+        j || (j = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function D() {
+      var e = u(this.type);
+      return h[e] || (h[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function L(e, r, t, n, R, P) {
+      var a = t.ref;
+      return e = {
+        $$typeof: w,
+        type: e,
+        key: r,
+        props: t,
+        _owner: n
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: D
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: R
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: P
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function S(e, r, t, n, R, P) {
+      var a = r.children;
+      if (a !== void 0)
+        if (n)
+          if (Z(a)) {
+            for (n = 0; n < a.length; n++)
+              g(a[n]);
+            Object.freeze && Object.freeze(a);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else g(a);
+      if (x.call(r, "key")) {
+        a = u(e);
+        var f = Object.keys(r).filter(function(Q) {
+          return Q !== "key";
+        });
+        n = 0 < f.length ? "{key: someKey, " + f.join(": ..., ") + ": ...}" : "{key: someKey}", Y[a + n] || (f = 0 < f.length ? "{" + f.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          n,
+          a,
+          f,
+          a
+        ), Y[a + n] = !0);
+      }
+      if (a = null, t !== void 0 && (l(t), a = "" + t), d(r) && (l(r.key), a = "" + r.key), "key" in r) {
+        t = {};
+        for (var A in r)
+          A !== "key" && (t[A] = r[A]);
+      } else t = r;
+      return a && m(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), L(
+        e,
+        a,
+        t,
+        o(),
+        R,
+        P
+      );
+    }
+    function g(e) {
+      y(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? y(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function y(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === w;
+    }
+    var v = K, w = /* @__PURE__ */ Symbol.for("react.transitional.element"), M = /* @__PURE__ */ Symbol.for("react.portal"), p = /* @__PURE__ */ Symbol.for("react.fragment"), W = /* @__PURE__ */ Symbol.for("react.strict_mode"), U = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), V = /* @__PURE__ */ Symbol.for("react.forward_ref"), z = /* @__PURE__ */ Symbol.for("react.suspense"), G = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), B = /* @__PURE__ */ Symbol.for("react.activity"), H = /* @__PURE__ */ Symbol.for("react.client.reference"), k = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, Z = Array.isArray, O = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    v = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var j, h = {}, N = v.react_stack_bottom_frame.bind(
+      v,
+      s
+    )(), C = O(c(s)), Y = {};
+    E.Fragment = p, E.jsx = function(e, r, t) {
+      var n = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !1,
+        n ? Error("react-stack-top-frame") : N,
+        n ? O(c(e)) : C
+      );
+    }, E.jsxs = function(e, r, t) {
+      var n = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !0,
+        n ? Error("react-stack-top-frame") : N,
+        n ? O(c(e)) : C
+      );
+    };
+  })()), E;
+}
+var F;
+function ne() {
+  return F || (F = 1, process.env.NODE_ENV === "production" ? b.exports = re() : b.exports = te()), b.exports;
+}
+var ae = ne();
+function ue({
+  children: u,
+  ripple: i = !0,
+  primeConfig: l = {}
+}) {
+  const c = {
+    ripple: i,
+    inputStyle: "outlined",
+    ...l
+  };
+  return /* @__PURE__ */ ae.jsx(ee, { value: c, children: u });
+}
+const le = "0.2.1", ce = {
   name: "Yggdrasil",
-  version: "0.1.0",
+  version: "0.2.1",
   tokens: 727,
-  coverage: "96%",
+  coverage: "100%",
   modes: ["light", "dark"]
 };
 export {
-  o as theme,
-  e as version
+  ue as YggdrasilProvider,
+  ce as theme,
+  le as version
 };

package/dist/typography.css

@@ -0,0 +1,73 @@
+/**
+ * Typography Utilities (Optional)
+ *
+ * This file provides optional typography variables based on Yggdrasil design tokens.
+ * PrimeReact components use hardcoded sizing and don't consume these variables.
+ *
+ * Use these variables in your application code for consistent typography:
+ * - Body text: var(--Body-medium-font-size), var(--Body-medium-line-height)
+ * - Headings: var(--Heading-large-font-size), var(--Heading-large-line-height)
+ * - Titles: var(--Title-medium-font-size), var(--Title-medium-line-height)
+ *
+ * Font weights available:
+ * - 400 (Regular)
+ * - 500 (Medium)
+ * - 700 (Bold)
+ */
+
+:root {
+  /* Body Text */
+  --Body-family: 'Roboto', arial, sans-serif;
+  --Body-large-font-size: 16px;
+  --Body-large-line-height: 28px;
+  --Body-medium-font-size: 14px;
+  --Body-medium-line-height: 24px;
+  --Body-small-font-size: 12px;
+  --Body-small-line-height: 20px;
+  --Body-weight-regular: 400;
+  --Body-weight-medium: 500;
+  --Body-weight-bold: 700;
+
+  /* Button Text */
+  --Button-family: 'Roboto', arial, sans-serif;
+  --Button-large-font-size: 18px;
+  --Button-large-line-height: 24px;
+  --Button-medium-font-size: 14px;
+  --Button-medium-line-height: 16px;
+  --Button-small-font-size: 12px;
+  --Button-small-line-height: 16px;
+  --Button-weight: 500;
+
+  /* Headings */
+  --Heading-family: 'Roboto', arial, sans-serif;
+  --Heading-large-font-size: 24px;
+  --Heading-large-line-height: 32px;
+  --Heading-medium-font-size: 20px;
+  --Heading-medium-line-height: 28px;
+  --Heading-small-font-size: 18px;
+  --Heading-small-line-height: 24px;
+  --Heading-weight: 500;
+
+  /* Titles */
+  --Title-family: 'Roboto', arial, sans-serif;
+  --Title-large-font-size: 36px;
+  --Title-large-line-height: 40px;
+  --Title-medium-font-size: 28px;
+  --Title-medium-line-height: 36px;
+  --Title-small-font-size: 22px;
+  --Title-small-line-height: 30px;
+  --Title-weight: 700;
+
+  /* Labels */
+  --Label-family: 'Roboto', arial, sans-serif;
+  --Label-large-font-size: 16px;
+  --Label-large-line-height: 24px;
+  --Label-medium-font-size: 14px;
+  --Label-medium-line-height: 20px;
+  --Label-small-font-size: 12px;
+  --Label-small-line-height: 16px;
+  --Label-x-small-font-size: 10px;
+  --Label-x-small-line-height: 12px;
+  --Label-weight-regular: 400;
+  --Label-weight-bold: 700;
+}

package/dist/yggdrasil-dark.css

@@ -5,7 +5,7 @@
  * For runtime switching, use yggdrasil-adaptive.css
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 @import "./foundations.css";
 @import "./radius.css";
 @import "./semantic-dark.css";

package/dist/yggdrasil-light.css

@@ -5,7 +5,7 @@
  * For runtime switching, use yggdrasil-adaptive.css
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 @import "./foundations.css";
 @import "./radius.css";
 @import "./semantic-light.css";

package/docs/CONSUMPTION-GUIDE.md

@@ -45,7 +45,7 @@ cp -r path/to/prime-yggdrasil/src/theme ./src/design-system
 
 ## 🚀 Integration
 
-### 1. Import Theme in Your App
+### 1. Import Theme and Provider in Your App
 
 ```tsx
 // src/main.tsx or src/App.tsx
@@ -54,15 +54,73 @@ import 'prime-yggdrasil/yggdrasil-light.css';  // Light theme
 import 'prime-yggdrasil/yggdrasil-dark.css';   // Dark theme
 
 import 'primeicons/primeicons.css';
+import { YggdrasilProvider } from 'prime-yggdrasil';
 
 // Your app code
 import { Button } from 'primereact/button';
 
 function App() {
-  return <Button label="Hello Yggdrasil" />;
+  return (
+    <YggdrasilProvider ripple={true}>
+      <Button label="Hello Yggdrasil" />
+    </YggdrasilProvider>
+  );
+}
+```
+
+**YggdrasilProvider Configuration:**
+- `ripple` (default: `true`) - Enable ripple effect on interactive components (buttons, checkboxes, etc.)
+- `primeConfig` - Additional PrimeReact configuration options
+
+```tsx
+<YggdrasilProvider
+  ripple={true}
+  primeConfig={{
+    inputStyle: 'outlined', // or 'filled'
+    // other PrimeReact config...
+  }}
+>
+  <App />
+</YggdrasilProvider>
+```
+
+### Typography (Optional)
+
+Prime Yggdrasil loads Roboto font family by default. If you want to use the Yggdrasil typography system in your custom components:
+
+```tsx
+// Import optional typography utilities
+import '@lifeonlars/prime-yggdrasil/typography.css';
+
+// Use in your custom components
+function MyComponent() {
+  return (
+    <div style={{
+      fontFamily: 'var(--Body-family)',
+      fontSize: 'var(--Body-medium-font-size)',
+      lineHeight: 'var(--Body-medium-line-height)',
+      fontWeight: 'var(--Body-weight-regular)'
+    }}>
+      Custom content with Yggdrasil typography
+    </div>
+  );
 }
 ```
 
+**Note:** PrimeReact components have their own typography sizing and don't consume these variables. Use these tokens only for custom application code outside of PrimeReact components.
+
+**Available font weights:**
+- 400 (Regular)
+- 500 (Medium)
+- 700 (Bold)
+
+**Available typography categories:**
+- `--Body-*` - Body text styles (small, medium, large)
+- `--Heading-*` - Heading styles (small, medium, large)
+- `--Title-*` - Title styles (small, medium, large)
+- `--Button-*` - Button text styles (small, medium, large)
+- `--Label-*` - Label styles (x-small, small, medium, large)
+
 ### 2. Configure Your Build Tool
 
 #### Vite (Recommended)

package/docs/STORYBOOK-TESTING.md

@@ -0,0 +1,352 @@
+# Storybook Testing Guide
+
+This guide explains how to test components in Prime Yggdrasil using Storybook's Vitest addon.
+
+## Overview
+
+Prime Yggdrasil uses `@storybook/addon-vitest` for component testing. This allows you to:
+- Write tests alongside your stories
+- Test components in a real browser environment
+- Use Vitest's familiar testing API
+- Run tests in watch mode for development
+
+## Setup
+
+The testing infrastructure is already configured:
+
+### Files
+- `.storybook/vitest.config.ts` - Vitest configuration for Storybook
+- `.storybook/vitest.setup.ts` - Test setup and Storybook project annotations
+- `package.json` - Test scripts
+
+### Scripts
+```bash
+# Run all Storybook tests once
+npm run test:storybook
+
+# Run tests in watch mode (auto-rerun on changes)
+npm run test:storybook:watch
+```
+
+## Writing Tests
+
+### Basic Test Structure
+
+Tests are written using Vitest's `expect` API inside your story files:
+
+```tsx
+import { test, expect } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from 'primereact/button';
+
+const meta = {
+  title: 'Button/Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Click me',
+  },
+};
+
+// Test the Primary story
+test('Primary button renders correctly', async ({ mount }) => {
+  const component = await mount(<Primary.component {...Primary.args} />);
+  const button = await component.getByRole('button');
+
+  await expect(button).toBeInTheDocument();
+  await expect(button).toHaveTextContent('Click me');
+});
+```
+
+### Testing Interactive Components
+
+For components with state (like Checkbox, RadioButton, etc.):
+
+```tsx
+import { test, expect } from '@storybook/test';
+import { userEvent } from '@storybook/test';
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Checkbox checked={checked} onChange={(e) => setChecked(e.checked)} />
+    );
+  },
+};
+
+test('Checkbox toggles on click', async ({ mount, page }) => {
+  await mount(<Default.component />);
+
+  const checkbox = page.getByRole('checkbox');
+
+  // Initially unchecked
+  await expect(checkbox).not.toBeChecked();
+
+  // Click to check
+  await userEvent.click(checkbox);
+  await expect(checkbox).toBeChecked();
+
+  // Click again to uncheck
+  await userEvent.click(checkbox);
+  await expect(checkbox).not.toBeChecked();
+});
+```
+
+### Testing Theme Switching
+
+Test components in both light and dark modes:
+
+```tsx
+test('Button renders in dark mode', async ({ mount, page }) => {
+  // Set dark mode
+  await page.evaluate(() => {
+    document.documentElement.setAttribute('data-theme', 'dark');
+  });
+
+  await mount(<Primary.component {...Primary.args} />);
+
+  const button = page.getByRole('button');
+  const bgColor = await button.evaluate((el) =>
+    getComputedStyle(el).backgroundColor
+  );
+
+  // Dark mode should have darker background
+  await expect(bgColor).toBeTruthy();
+});
+```
+
+### Testing Accessibility
+
+Use built-in a11y assertions:
+
+```tsx
+import { test, expect } from '@storybook/test';
+
+test('Button is accessible', async ({ mount, page }) => {
+  await mount(<Primary.component {...Primary.args} />);
+
+  const button = page.getByRole('button');
+
+  // Check ARIA attributes
+  await expect(button).toBeEnabled();
+  await expect(button).toBeVisible();
+  await expect(button).toHaveAccessibleName('Click me');
+});
+```
+
+## Best Practices
+
+### 1. Test One Concern Per Test
+```tsx
+// Good
+test('renders with label', async ({ mount }) => { /* ... */ });
+test('responds to click', async ({ mount }) => { /* ... */ });
+
+// Avoid
+test('renders and clicks', async ({ mount }) => { /* ... */ });
+```
+
+### 2. Use Semantic Queries
+```tsx
+// Good - semantic and accessible
+const button = page.getByRole('button', { name: 'Submit' });
+const heading = page.getByRole('heading', { level: 1 });
+
+// Avoid - fragile
+const button = page.locator('.p-button');
+```
+
+### 3. Test User Behavior, Not Implementation
+```tsx
+// Good - tests what user sees/does
+test('shows error message on invalid input', async ({ mount, page }) => {
+  await mount(<Form />);
+  await page.getByRole('button', { name: 'Submit' }).click();
+  await expect(page.getByText('Required field')).toBeVisible();
+});
+
+// Avoid - tests implementation details
+test('sets error state to true', async ({ mount }) => {
+  const { rerender } = await mount(<Form />);
+  // Don't test internal state
+});
+```
+
+### 4. Keep Tests Fast
+- Use `mount` instead of full page loads
+- Mock external API calls
+- Avoid unnecessary `waitFor` delays
+
+### 5. Test Across Themes
+```tsx
+test.each(['light', 'dark'])('renders in %s mode', async (theme, { mount, page }) => {
+  await page.evaluate((t) => {
+    document.documentElement.setAttribute('data-theme', t);
+  }, theme);
+
+  await mount(<Component />);
+  // Test rendering...
+});
+```
+
+## Common Patterns
+
+### Testing Forms
+
+```tsx
+test('form submission', async ({ mount, page }) => {
+  await mount(<FormStory />);
+
+  // Fill in fields
+  await page.getByLabel('Email').fill('user@example.com');
+  await page.getByLabel('Password').fill('password123');
+
+  // Submit
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Verify result
+  await expect(page.getByText('Welcome!')).toBeVisible();
+});
+```
+
+### Testing Dropdowns
+
+```tsx
+test('dropdown selection', async ({ mount, page }) => {
+  await mount(<DropdownStory />);
+
+  const dropdown = page.getByRole('combobox');
+  await dropdown.click();
+
+  // Select option
+  await page.getByRole('option', { name: 'New York' }).click();
+
+  // Verify selection
+  await expect(dropdown).toHaveValue('NY');
+});
+```
+
+### Testing Modals/Dialogs
+
+```tsx
+test('dialog opens and closes', async ({ mount, page }) => {
+  await mount(<DialogStory />);
+
+  // Open dialog
+  await page.getByRole('button', { name: 'Open' }).click();
+
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+
+  // Close dialog
+  await dialog.getByRole('button', { name: 'Close' }).click();
+  await expect(dialog).not.toBeVisible();
+});
+```
+
+## Debugging Tests
+
+### Run in headed mode
+```bash
+# See the browser while tests run
+npm run test:storybook:watch
+# Then in the Vitest UI, enable "headed" mode
+```
+
+### Use page.pause()
+```tsx
+test('debug test', async ({ mount, page }) => {
+  await mount(<Component />);
+
+  await page.pause(); // Opens Playwright Inspector
+
+  // Test continues...
+});
+```
+
+### Screenshot on failure
+```tsx
+test('visual test', async ({ mount, page }) => {
+  await mount(<Component />);
+
+  try {
+    await expect(page.getByRole('button')).toBeVisible();
+  } catch (error) {
+    await page.screenshot({ path: 'test-failure.png' });
+    throw error;
+  }
+});
+```
+
+## Continuous Integration
+
+For CI/CD pipelines:
+
+```yaml
+# .github/workflows/test.yml
+- name: Install dependencies
+  run: npm ci
+
+- name: Install Playwright browsers
+  run: npx playwright install --with-deps chromium
+
+- name: Run Storybook tests
+  run: npm run test:storybook
+```
+
+## Troubleshooting
+
+### "Failed to start test runner process"
+
+This usually means:
+1. Playwright browsers aren't installed: `npx playwright install chromium`
+2. Port conflict: Close other Storybook instances
+3. Timeout: Increase timeout in vitest.config.ts
+
+### Tests timing out
+
+Increase test timeout:
+```ts
+// .storybook/vitest.config.ts
+export default defineConfig({
+  test: {
+    testTimeout: 30000, // 30 seconds
+  },
+});
+```
+
+### Theme styles not applying
+
+Ensure YggdrasilProvider is wrapping your component:
+```tsx
+// In your story
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <YggdrasilProvider ripple={true}>
+        <Story />
+      </YggdrasilProvider>
+    ),
+  ],
+};
+```
+
+## Resources
+
+- [Storybook Test Addon Docs](https://storybook.js.org/docs/writing-tests/test-addon)
+- [Vitest API](https://vitest.dev/api/)
+- [Playwright Test API](https://playwright.dev/docs/api/class-test)
+- [Testing Library Queries](https://testing-library.com/docs/queries/about)
+
+## Next Steps
+
+1. Add tests to existing stories
+2. Set up CI pipeline to run tests
+3. Add visual regression testing with Chromatic
+4. Configure test coverage reporting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifeonlars/prime-yggdrasil",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "AI-agent-friendly PrimeReact design system for component-driven development with semantic tokens and dark mode support",
   "keywords": [
@@ -36,6 +36,7 @@
     "./yggdrasil-dark.css": "./dist/yggdrasil-dark.css",
     "./theme.css": "./dist/prime-yggdrasil.css",
     "./foundations.css": "./dist/foundations.css",
+    "./typography.css": "./dist/typography.css",
     "./docs/*": "./docs/*"
   },
   "files": [
@@ -53,6 +54,8 @@
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:storybook": "test-storybook",
+    "test:storybook:watch": "test-storybook --watch",
     "test:contrast": "node scripts/test-contrast.js",
     "test:contrast:vitest": "vitest run tests/contrast.test.ts",
     "test:contrast:watch": "vitest tests/contrast.test.ts",
@@ -75,11 +78,15 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.39.1",
-    "@storybook/addon-a11y": "^10.1.9",
-    "@storybook/addon-docs": "^10.1.9",
-    "@storybook/addon-onboarding": "^10.1.9",
-    "@storybook/addon-vitest": "^10.1.9",
-    "@storybook/react-vite": "^10.1.9",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@storybook/test-runner": "^0.24.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
@@ -93,8 +100,9 @@
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.1.9",
+    "eslint-plugin-storybook": "^10.1.11",
     "globals": "^16.5.0",
+    "jsdom": "^27.4.0",
     "playwright": "^1.57.0",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
@@ -102,7 +110,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "sass": "^1.97.0",
-    "storybook": "^10.1.9",
+    "storybook": "^10.1.11",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^39.0.1",
     "typescript": "~5.9.3",