@openorgus/react 0.0.1

package/dist/components/Button.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, DesignSystem, GlobalConfig, GranularStyles } from '../types';
+import * as React from 'react';
+interface ButtonProps {
+    designSystem: DesignSystem;
+    componentProps: ComponentProps;
+    globalConfig: GlobalConfig;
+    granularStyles: GranularStyles;
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './components/Button';
+export type { ComponentProps, DesignSystem, GlobalConfig, GranularStyles } from './types';

package/dist/opengrid-react.es.js

@@ -0,0 +1,420 @@
+import oe, { forwardRef as B, createElement as C } from "react";
+var P = { exports: {} }, g = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var D;
+function ne() {
+  if (D) return g;
+  D = 1;
+  var r = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function l(c, i, d) {
+    var b = null;
+    if (d !== void 0 && (b = "" + d), i.key !== void 0 && (b = "" + i.key), "key" in i) {
+      d = {};
+      for (var p in i)
+        p !== "key" && (d[p] = i[p]);
+    } else d = i;
+    return i = d.ref, {
+      $$typeof: r,
+      type: c,
+      key: b,
+      ref: i !== void 0 ? i : null,
+      props: d
+    };
+  }
+  return g.Fragment = n, g.jsx = l, g.jsxs = l, g;
+}
+var E = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var F;
+function ie() {
+  return F || (F = 1, process.env.NODE_ENV !== "production" && function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === ee ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case $:
+          return "Fragment";
+        case X:
+          return "Profiler";
+        case V:
+          return "StrictMode";
+        case H:
+          return "Suspense";
+        case Z:
+          return "SuspenseList";
+        case K:
+          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 S:
+            return "Portal";
+          case q:
+            return e.displayName || "Context";
+          case G:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case J:
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Q:
+            return o = e.displayName || null, o !== null ? o : r(e.type) || "Memo";
+          case k:
+            o = e._payload, e = e._init;
+            try {
+              return r(e(o));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function n(e) {
+      return "" + e;
+    }
+    function l(e) {
+      try {
+        n(e);
+        var o = !1;
+      } catch {
+        o = !0;
+      }
+      if (o) {
+        o = console;
+        var s = o.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return s.call(
+          o,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          u
+        ), n(e);
+      }
+    }
+    function c(e) {
+      if (e === $) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
+        return "<...>";
+      try {
+        var o = r(e);
+        return o ? "<" + o + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function i() {
+      var e = w.A;
+      return e === null ? null : e.getOwner();
+    }
+    function d() {
+      return Error("react-stack-top-frame");
+    }
+    function b(e) {
+      if (W.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, o) {
+      function s() {
+        y || (y = !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)",
+          o
+        ));
+      }
+      s.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: s,
+        configurable: !0
+      });
+    }
+    function v() {
+      var e = r(this.type);
+      return L[e] || (L[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 x(e, o, s, u, _, A) {
+      var f = s.ref;
+      return e = {
+        $$typeof: N,
+        type: e,
+        key: o,
+        props: s,
+        _owner: u
+      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: v
+      }) : 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: _
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: A
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function m(e, o, s, u, _, A) {
+      var f = o.children;
+      if (f !== void 0)
+        if (u)
+          if (re(f)) {
+            for (u = 0; u < f.length; u++)
+              R(f[u]);
+            Object.freeze && Object.freeze(f);
+          } 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 R(f);
+      if (W.call(o, "key")) {
+        f = r(e);
+        var h = Object.keys(o).filter(function(te) {
+          return te !== "key";
+        });
+        u = 0 < h.length ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}", M[f + u] || (h = 0 < h.length ? "{" + h.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} />`,
+          u,
+          f,
+          h,
+          f
+        ), M[f + u] = !0);
+      }
+      if (f = null, s !== void 0 && (l(s), f = "" + s), b(o) && (l(o.key), f = "" + o.key), "key" in o) {
+        s = {};
+        for (var O in o)
+          O !== "key" && (s[O] = o[O]);
+      } else s = o;
+      return f && p(
+        s,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), x(
+        e,
+        f,
+        s,
+        i(),
+        _,
+        A
+      );
+    }
+    function R(e) {
+      t(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? t(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function t(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === N;
+    }
+    var a = oe, N = Symbol.for("react.transitional.element"), S = Symbol.for("react.portal"), $ = Symbol.for("react.fragment"), V = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), q = Symbol.for("react.context"), J = Symbol.for("react.forward_ref"), H = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), w = a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, re = Array.isArray, T = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    a = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var y, L = {}, Y = a.react_stack_bottom_frame.bind(
+      a,
+      d
+    )(), I = T(c(d)), M = {};
+    E.Fragment = $, E.jsx = function(e, o, s) {
+      var u = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        o,
+        s,
+        !1,
+        u ? Error("react-stack-top-frame") : Y,
+        u ? T(c(e)) : I
+      );
+    }, E.jsxs = function(e, o, s) {
+      var u = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        o,
+        s,
+        !0,
+        u ? Error("react-stack-top-frame") : Y,
+        u ? T(c(e)) : I
+      );
+    };
+  }()), E;
+}
+process.env.NODE_ENV === "production" ? P.exports = ne() : P.exports = ie();
+var j = P.exports;
+/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ae = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), z = (...r) => r.filter((n, l, c) => !!n && n.trim() !== "" && c.indexOf(n) === l).join(" ").trim();
+/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var se = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const de = B(
+  ({
+    color: r = "currentColor",
+    size: n = 24,
+    strokeWidth: l = 2,
+    absoluteStrokeWidth: c,
+    className: i = "",
+    children: d,
+    iconNode: b,
+    ...p
+  }, v) => C(
+    "svg",
+    {
+      ref: v,
+      ...se,
+      width: n,
+      height: n,
+      stroke: r,
+      strokeWidth: c ? Number(l) * 24 / Number(n) : l,
+      className: z("lucide", i),
+      ...p
+    },
+    [
+      ...b.map(([x, m]) => C(x, m)),
+      ...Array.isArray(d) ? d : [d]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const U = (r, n) => {
+  const l = B(
+    ({ className: c, ...i }, d) => C(de, {
+      ref: d,
+      iconNode: n,
+      className: z(`lucide-${ae(r)}`, c),
+      ...i
+    })
+  );
+  return l.displayName = `${r}`, l;
+};
+/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ce = U("LoaderCircle", [
+  ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
+]);
+/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ue = U("MousePointer2", [
+  [
+    "path",
+    {
+      d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z",
+      key: "edeuup"
+    }
+  ]
+]), fe = (r, n, l, c = "button") => {
+  const { variant: i, isHovered: d, isFocused: b, isActive: p, isTouched: v, isError: x, isDisabled: m } = n, { primaryColor: R } = l, t = R;
+  let a = "";
+  return d && (a += " brightness-95 transform -translate-y-0.5 shadow-md "), b && (a += ` ring-2 ring-offset-2 ring-${t}-500 dark:ring-${t}-400 z-10 `), p && (a += " transform scale-95 brightness-90 shadow-inner "), v && (a += " opacity-70 "), m && (a += " opacity-50 cursor-not-allowed grayscale pointer-events-none "), i === "primary" ? ((c === "button" || c === "surface") && (a += ` bg-${t}-600 text-white border border-transparent shadow-sm`, r === "MUI" && (a += " shadow-md hover:shadow-lg uppercase tracking-wider font-medium"), r === "Apple" && (a += " shadow-sm bg-gradient-to-b from-blue-500 to-blue-600 border-blue-400")), c === "input" && (a += ` bg-gray-100 dark:bg-gray-800 border-b-2 border-${t}-600 rounded-t-md px-4 py-2`)) : i === "secondary" ? c === "button" && (a += ` bg-white dark:bg-gray-800 text-${t}-700 dark:text-${t}-300 border border-gray-200 dark:border-gray-700`, r === "MUI" && (a += ` border-2 border-${t}-600 text-${t}-600 font-medium uppercase`)) : i === "tertiary" ? a += " text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" : i === "outline" ? a += ` bg-transparent border-2 border-${t}-500 text-${t}-600 dark:text-${t}-400` : i === "ghost" ? a += ` bg-transparent text-${t}-600 dark:text-${t}-400 hover:bg-${t}-50 dark:hover:bg-${t}-900/20` : i === "soft" ? a += ` bg-${t}-100 dark:bg-${t}-900/40 text-${t}-800 dark:text-${t}-200 border border-${t}-200 dark:border-${t}-800` : i === "link" ? a += ` bg-transparent text-${t}-600 dark:text-${t}-400 underline underline-offset-4 hover:text-${t}-800 p-0 shadow-none border-none h-auto` : i === "danger" ? a += ` bg-${t}-700 text-white hover:bg-${t}-800 border border-${t}-700` : i === "success" ? a += ` bg-${t}-600 text-white hover:bg-${t}-700 border border-${t}-600` : i === "warning" && (a += ` bg-${t}-500 text-white hover:bg-${t}-600 border border-${t}-500`), x && (c === "input" ? a += ` border-${t}-600 focus:ring-${t}-500 text-${t}-900 dark:text-${t}-100` : a += ` ring-2 ring-${t}-500 ring-offset-1`), a;
+}, le = (r, n) => r.borderRadius && r.borderRadius !== n.baseRadius ? `${r.borderRadius}px` : `${n.baseRadius}px`, be = (r, n) => ({
+  width: r.width === "auto" ? void 0 : r.width,
+  height: r.height === "auto" ? void 0 : r.height,
+  paddingTop: r.paddingY ? `${r.paddingY}px` : void 0,
+  paddingBottom: r.paddingY ? `${r.paddingY}px` : void 0,
+  paddingLeft: r.paddingX ? `${r.paddingX}px` : void 0,
+  paddingRight: r.paddingX ? `${r.paddingX}px` : void 0,
+  marginTop: r.marginTop ? `${r.marginTop}px` : void 0,
+  marginBottom: r.marginBottom ? `${r.marginBottom}px` : void 0,
+  borderTopWidth: r.borderTopWidth ? `${r.borderTopWidth}px` : void 0,
+  borderRightWidth: r.borderRightWidth ? `${r.borderRightWidth}px` : void 0,
+  borderBottomWidth: r.borderBottomWidth ? `${r.borderBottomWidth}px` : void 0,
+  borderLeftWidth: r.borderLeftWidth ? `${r.borderLeftWidth}px` : void 0,
+  borderColor: r.borderColor !== "transparent" ? r.borderColor : void 0,
+  borderRadius: le(r, n),
+  opacity: r.opacity / 100,
+  boxShadow: r.boxShadow !== "none" ? r.boxShadow : void 0,
+  animation: r.animation !== "none" ? r.animation : void 0,
+  fontWeight: r.fontWeight !== "normal" ? r.fontWeight : void 0,
+  letterSpacing: r.letterSpacing !== "normal" ? r.letterSpacing : void 0
+}), me = ({ designSystem: r, componentProps: n, globalConfig: l, granularStyles: c }) => {
+  const i = be(c, l), d = fe(r, n, l, "button");
+  return /* @__PURE__ */ j.jsxs(
+    "button",
+    {
+      style: i,
+      disabled: n.isDisabled || n.isLoading,
+      className: `
+          flex items-center gap-2 transition-all duration-200 font-medium select-none
+          ${n.size === "SM" ? "px-4 py-2 text-xs" : n.size === "LG" ? "px-8 py-4 text-lg" : "px-6 py-2 text-sm"}
+          ${d}
+        `,
+      children: [
+        n.isLoading ? /* @__PURE__ */ j.jsx(ce, { className: "animate-spin", size: 16 }) : /* @__PURE__ */ j.jsx(ue, { size: 16 }),
+        n.text || "Button"
+      ]
+    }
+  );
+};
+export {
+  me as Button
+};

package/dist/opengrid-react.umd.js

@@ -0,0 +1,56 @@
+(function(h,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],b):(h=typeof globalThis<"u"?globalThis:h||self,b(h.OpenGridReact={},h.React))})(this,function(h,b){"use strict";var T={exports:{}},g={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var y;function S(){if(y)return g;y=1;var r=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function l(c,i,d){var p=null;if(d!==void 0&&(p=""+d),i.key!==void 0&&(p=""+i.key),"key"in i){d={};for(var m in i)m!=="key"&&(d[m]=i[m])}else d=i;return i=d.ref,{$$typeof:r,type:c,key:p,ref:i!==void 0?i:null,props:d}}return g.Fragment=n,g.jsx=l,g.jsxs=l,g}var E={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var W;function V(){return W||(W=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===fe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case A:return"Fragment";case oe:return"Profiler";case te:return"StrictMode";case se:return"Suspense";case de:return"SuspenseList";case ue: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 re:return"Portal";case ie:return e.displayName||"Context";case ne:return(e._context.displayName||"Context")+".Consumer";case ae:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ce:return o=e.displayName||null,o!==null?o:r(e.type)||"Memo";case O:o=e._payload,e=e._init;try{return r(e(o))}catch{}}return null}function n(e){return""+e}function l(e){try{n(e);var o=!1}catch{o=!0}if(o){o=console;var s=o.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return s.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),n(e)}}function c(e){if(e===A)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var o=r(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function i(){var e=j.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function p(e){if(M.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function m(e,o){function s(){B||(B=!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)",o))}s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0})}function R(){var e=r(this.type);return D[e]||(D[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 _(e,o,s,u,w,P){var f=s.ref;return e={$$typeof:I,type:e,key:o,props:s,_owner:u},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):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:w}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function v(e,o,s,u,w,P){var f=o.children;if(f!==void 0)if(u)if(le(f)){for(u=0;u<f.length;u++)k(f[u]);Object.freeze&&Object.freeze(f)}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 k(f);if(M.call(o,"key")){f=r(e);var x=Object.keys(o).filter(function(be){return be!=="key"});u=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",U[f+u]||(x=0<x.length?"{"+x.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} />`,u,f,x,f),U[f+u]=!0)}if(f=null,s!==void 0&&(l(s),f=""+s),p(o)&&(l(o.key),f=""+o.key),"key"in o){s={};for(var N in o)N!=="key"&&(s[N]=o[N])}else s=o;return f&&m(s,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,f,s,i(),w,P)}function k(e){t(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?t(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function t(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var a=b,I=Symbol.for("react.transitional.element"),re=Symbol.for("react.portal"),A=Symbol.for("react.fragment"),te=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),ne=Symbol.for("react.consumer"),ie=Symbol.for("react.context"),ae=Symbol.for("react.forward_ref"),se=Symbol.for("react.suspense"),de=Symbol.for("react.suspense_list"),ce=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),fe=Symbol.for("react.client.reference"),j=a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,le=Array.isArray,C=console.createTask?console.createTask:function(){return null};a={react_stack_bottom_frame:function(e){return e()}};var B,D={},F=a.react_stack_bottom_frame.bind(a,d)(),z=C(c(d)),U={};E.Fragment=A,E.jsx=function(e,o,s){var u=1e4>j.recentlyCreatedOwnerStacks++;return v(e,o,s,!1,u?Error("react-stack-top-frame"):F,u?C(c(e)):z)},E.jsxs=function(e,o,s){var u=1e4>j.recentlyCreatedOwnerStacks++;return v(e,o,s,!0,u?Error("react-stack-top-frame"):F,u?C(c(e)):z)}}()),E}process.env.NODE_ENV==="production"?T.exports=S():T.exports=V();var $=T.exports;/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X=r=>r.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),L=(...r)=>r.filter((n,l,c)=>!!n&&n.trim()!==""&&c.indexOf(n)===l).join(" ").trim();/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */var G={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J=b.forwardRef(({color:r="currentColor",size:n=24,strokeWidth:l=2,absoluteStrokeWidth:c,className:i="",children:d,iconNode:p,...m},R)=>b.createElement("svg",{ref:R,...G,width:n,height:n,stroke:r,strokeWidth:c?Number(l)*24/Number(n):l,className:L("lucide",i),...m},[...p.map(([_,v])=>b.createElement(_,v)),...Array.isArray(d)?d:[d]]));/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y=(r,n)=>{const l=b.forwardRef(({className:c,...i},d)=>b.createElement(J,{ref:d,iconNode:n,className:L(`lucide-${X(r)}`,c),...i}));return l.displayName=`${r}`,l};/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H=Y("LoaderCircle",[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]]);/**
+ * @license lucide-react v0.469.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z=Y("MousePointer2",[["path",{d:"M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z",key:"edeuup"}]]),q=(r,n,l,c="button")=>{const{variant:i,isHovered:d,isFocused:p,isActive:m,isTouched:R,isError:_,isDisabled:v}=n,{primaryColor:k}=l,t=k;let a="";return d&&(a+=" brightness-95 transform -translate-y-0.5 shadow-md "),p&&(a+=` ring-2 ring-offset-2 ring-${t}-500 dark:ring-${t}-400 z-10 `),m&&(a+=" transform scale-95 brightness-90 shadow-inner "),R&&(a+=" opacity-70 "),v&&(a+=" opacity-50 cursor-not-allowed grayscale pointer-events-none "),i==="primary"?((c==="button"||c==="surface")&&(a+=` bg-${t}-600 text-white border border-transparent shadow-sm`,r==="MUI"&&(a+=" shadow-md hover:shadow-lg uppercase tracking-wider font-medium"),r==="Apple"&&(a+=" shadow-sm bg-gradient-to-b from-blue-500 to-blue-600 border-blue-400")),c==="input"&&(a+=` bg-gray-100 dark:bg-gray-800 border-b-2 border-${t}-600 rounded-t-md px-4 py-2`)):i==="secondary"?c==="button"&&(a+=` bg-white dark:bg-gray-800 text-${t}-700 dark:text-${t}-300 border border-gray-200 dark:border-gray-700`,r==="MUI"&&(a+=` border-2 border-${t}-600 text-${t}-600 font-medium uppercase`)):i==="tertiary"?a+=" text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800":i==="outline"?a+=` bg-transparent border-2 border-${t}-500 text-${t}-600 dark:text-${t}-400`:i==="ghost"?a+=` bg-transparent text-${t}-600 dark:text-${t}-400 hover:bg-${t}-50 dark:hover:bg-${t}-900/20`:i==="soft"?a+=` bg-${t}-100 dark:bg-${t}-900/40 text-${t}-800 dark:text-${t}-200 border border-${t}-200 dark:border-${t}-800`:i==="link"?a+=` bg-transparent text-${t}-600 dark:text-${t}-400 underline underline-offset-4 hover:text-${t}-800 p-0 shadow-none border-none h-auto`:i==="danger"?a+=` bg-${t}-700 text-white hover:bg-${t}-800 border border-${t}-700`:i==="success"?a+=` bg-${t}-600 text-white hover:bg-${t}-700 border border-${t}-600`:i==="warning"&&(a+=` bg-${t}-500 text-white hover:bg-${t}-600 border border-${t}-500`),_&&(c==="input"?a+=` border-${t}-600 focus:ring-${t}-500 text-${t}-900 dark:text-${t}-100`:a+=` ring-2 ring-${t}-500 ring-offset-1`),a},Q=(r,n)=>r.borderRadius&&r.borderRadius!==n.baseRadius?`${r.borderRadius}px`:`${n.baseRadius}px`,K=(r,n)=>({width:r.width==="auto"?void 0:r.width,height:r.height==="auto"?void 0:r.height,paddingTop:r.paddingY?`${r.paddingY}px`:void 0,paddingBottom:r.paddingY?`${r.paddingY}px`:void 0,paddingLeft:r.paddingX?`${r.paddingX}px`:void 0,paddingRight:r.paddingX?`${r.paddingX}px`:void 0,marginTop:r.marginTop?`${r.marginTop}px`:void 0,marginBottom:r.marginBottom?`${r.marginBottom}px`:void 0,borderTopWidth:r.borderTopWidth?`${r.borderTopWidth}px`:void 0,borderRightWidth:r.borderRightWidth?`${r.borderRightWidth}px`:void 0,borderBottomWidth:r.borderBottomWidth?`${r.borderBottomWidth}px`:void 0,borderLeftWidth:r.borderLeftWidth?`${r.borderLeftWidth}px`:void 0,borderColor:r.borderColor!=="transparent"?r.borderColor:void 0,borderRadius:Q(r,n),opacity:r.opacity/100,boxShadow:r.boxShadow!=="none"?r.boxShadow:void 0,animation:r.animation!=="none"?r.animation:void 0,fontWeight:r.fontWeight!=="normal"?r.fontWeight:void 0,letterSpacing:r.letterSpacing!=="normal"?r.letterSpacing:void 0}),ee=({designSystem:r,componentProps:n,globalConfig:l,granularStyles:c})=>{const i=K(c,l),d=q(r,n,l,"button");return $.jsxs("button",{style:i,disabled:n.isDisabled||n.isLoading,className:`
+          flex items-center gap-2 transition-all duration-200 font-medium select-none
+          ${n.size==="SM"?"px-4 py-2 text-xs":n.size==="LG"?"px-8 py-4 text-lg":"px-6 py-2 text-sm"}
+          ${d}
+        `,children:[n.isLoading?$.jsx(H,{className:"animate-spin",size:16}):$.jsx(Z,{size:16}),n.text||"Button"]})};h.Button=ee,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -0,0 +1,88 @@
+export type ComponentStatus = 'Draft' | 'Ready' | 'Deprecated';
+export interface ComponentItem {
+    id: string;
+    name: string;
+    category: string;
+    status: ComponentStatus;
+    description: string;
+}
+export interface Category {
+    id: string;
+    name: string;
+    items: ComponentItem[];
+}
+export type TabId = 'about' | 'usage' | 'tokens' | 'ada' | 'animations' | 'html' | 'css' | 'tailwind' | 'react' | 'react-native' | 'swift' | 'kotlin';
+export interface TabOption {
+    id: TabId;
+    label: string;
+}
+export type ViewportId = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface ViewportDefinition {
+    id: ViewportId;
+    label: string;
+    width: number;
+    icon: string;
+}
+export type DesignSystem = 'Custom' | 'MUI' | 'Apple';
+export interface ComponentProps {
+    variant: string;
+    size: string;
+    orientation: 'horizontal' | 'vertical';
+    textAlign: 'left' | 'center' | 'right';
+    iconStyle: 'filled' | 'outlined' | 'rounded' | 'sharp' | 'two-tone';
+    isDisabled: boolean;
+    isLoading: boolean;
+    isError: boolean;
+    isChecked: boolean;
+    isIndeterminate: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isActive: boolean;
+    isTouched: boolean;
+    text: string;
+}
+export interface GranularStyles {
+    width: string;
+    height: string;
+    paddingX: number;
+    paddingY: number;
+    marginTop: number;
+    marginBottom: number;
+    borderTopWidth: number;
+    borderRightWidth: number;
+    borderBottomWidth: number;
+    borderLeftWidth: number;
+    borderColor: string;
+    borderRadius: number;
+    opacity: number;
+    boxShadow: string;
+    animation: string;
+    fontWeight: string;
+    letterSpacing: string;
+}
+export interface GlobalConfig {
+    primaryColor: string;
+    secondaryColor?: string;
+    tertiaryColor?: string;
+    baseRadius: number;
+    activeFont?: string;
+    iconSize?: number;
+    iconColor?: 'default' | 'primary' | 'secondary' | 'custom';
+    iconCustomColor?: string;
+    illustrationSize?: number;
+    illustrationColor?: 'default' | 'primary' | 'secondary' | 'custom';
+    illustrationCustomColor?: string;
+    cursorEffect?: string;
+    cursorColor?: string;
+    cursorSecondaryColor?: string;
+    cursorTertiaryColor?: string;
+}
+export interface AnimationConfig {
+    type: 'spring' | 'easing' | 'steps';
+    preset: string;
+    duration: number;
+    stiffness: number;
+    damping: number;
+    mass: number;
+    velocity: number;
+}

package/dist/utils/styleUtils.d.ts

@@ -0,0 +1,17 @@
+import { GlobalConfig, GranularStyles, ComponentProps, DesignSystem } from '../types';
+
+import * as React from 'react';
+export declare const getRadiusClass: (globalConfig: GlobalConfig) => "rounded-none" | "rounded-sm" | "rounded-md" | "rounded-lg" | "rounded-xl" | "rounded-2xl";
+export declare const getColorClass: (globalConfig: GlobalConfig, type: "bg" | "text" | "border" | "ring", role?: "primary" | "secondary" | "tertiary" | "success" | "danger" | "warning" | "info") => string;
+export declare const getColorShade: (globalConfig: GlobalConfig, type: "bg" | "text" | "border", shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, role?: "primary" | "secondary" | "tertiary") => string;
+export declare const getColorValue: (globalConfig: GlobalConfig, role?: "primary" | "secondary" | "tertiary", shade?: number) => string;
+/**
+ * Generates the specific tailwind classes for the combination of Variant + State + Design System
+ */
+export declare const getComponentVariantClasses: (designSystem: DesignSystem, componentProps: ComponentProps, globalConfig: GlobalConfig, baseType?: "button" | "input" | "surface") => string;
+export declare const getThemeClasses: (_globalConfig: GlobalConfig, _variant?: "container" | "input" | "panel") => string;
+/**
+ * Get border radius value - uses granularStyles if explicitly set, otherwise falls back to globalConfig.baseRadius
+ */
+export declare const getBorderRadius: (granularStyles: GranularStyles, globalConfig: GlobalConfig) => string;
+export declare const getAppliedStyles: (granularStyles: GranularStyles, globalConfig: GlobalConfig) => React.CSSProperties;

package/package.json

@@ -0,0 +1,40 @@
+{
+     "name": "@openorgus/react",
+  "version": "0.0.1",
+    "type": "module",
+    "main": "dist/opengrid-react.umd.js",
+    "module": "dist/opengrid-react.es.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/opengrid-react.es.js",
+            "require": "./dist/opengrid-react.umd.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0"
+    },
+    "dependencies": {
+        "lucide-react": "^0.469.0"
+    }
+}