@g4rcez/components 3.0.1 → 4.0.0

package/dist/skeleton-D75GFBV6.js

@@ -0,0 +1,10 @@
+import { jsx as s } from "react/jsx-runtime";
+import "react";
+import { c as e } from "./dom-Dl8XH0CK.js";
+import { P as m } from "./polymorph-B5n9fs_K.js";
+const r = /* @__PURE__ */ s("div", { className: "h-6 w-10/12 animate-pulse rounded bg-muted" }), c = (a) => /* @__PURE__ */ s(m, { ...a, as: a.as || "span", className: e("block h-8 w-32 animate-pulse rounded bg-muted", a.className) });
+export {
+  r as S,
+  c as a
+};
+//# sourceMappingURL=skeleton-D75GFBV6.js.map

package/dist/skeleton-D75GFBV6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-D75GFBV6.js","sources":["../src/components/display/skeleton.tsx"],"sourcesContent":["import React, { CSSProperties, useRef, type ElementType } from \"react\";\nimport { css } from \"../../lib/dom\";\nimport { Polymorph } from \"../core/polymorph\";\n\nexport const SkeletonCell = <div className=\"h-6 w-10/12 animate-pulse rounded bg-muted\" />;\n\nexport const Skeleton = (props: { className?: string; as?: ElementType; style?: CSSProperties }) => (\n    <Polymorph {...props} as={props.as || \"span\"} className={css(\"block h-8 w-32 animate-pulse rounded bg-muted\", props.className)} />\n);\n\nexport const SkeletonList = (props: { className?: string; rows: number }) => {\n    const items = useRef(\n        Array.from({ length: props.rows }).map((_, i) => {\n            const rand = Math.max(100, Math.random() * 99);\n            return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as=\"li\" />;\n        })\n    );\n    return <ul className={css(\"flex flex-col gap-6\", props.className)}>{items.current}</ul>;\n};\n"],"names":["SkeletonCell","jsx","Skeleton","props","Polymorph","css"],"mappings":";;;;AAIO,MAAMA,IAAe,gBAAAC,EAAC,OAAA,EAAI,WAAU,6CAAA,CAA6C,GAE3EC,IAAW,CAACC,MACrB,gBAAAF,EAACG,GAAA,EAAW,GAAGD,GAAO,IAAIA,EAAM,MAAM,QAAQ,WAAWE,EAAI,iDAAiDF,EAAM,SAAS,EAAA,CAAG;"}

package/dist/slot-CRyweuj0.js

@@ -0,0 +1,79 @@
+import { jsx as y } from "react/jsx-runtime";
+import * as l from "react";
+const g = /* @__PURE__ */ Symbol.for("react.lazy");
+function d(n, e) {
+  if (typeof n == "function")
+    return n(e);
+  n != null && (n.current = e);
+}
+function C(...n) {
+  return (e) => {
+    let o = !1;
+    const i = n.map((t) => {
+      const r = d(t, e);
+      return !o && typeof r == "function" && (o = !0), r;
+    });
+    if (o)
+      return () => {
+        for (let t = 0; t < i.length; t++) {
+          const r = i[t];
+          typeof r == "function" ? r() : d(n[t], null);
+        }
+      };
+  };
+}
+const a = l[" use ".trim().toString()];
+function E(n) {
+  return typeof n == "object" && n !== null && "then" in n;
+}
+function m(n) {
+  return n != null && typeof n == "object" && "$$typeof" in n && n.$$typeof === g && "_payload" in n && E(n._payload);
+}
+function h(n) {
+  const e = _(n), o = l.forwardRef((i, t) => {
+    let { children: r, ...c } = i;
+    m(r) && typeof a == "function" && (r = a(r._payload));
+    const s = l.Children.toArray(r), f = s.find(b);
+    if (f) {
+      const u = f.props.children, S = s.map((p) => p === f ? l.Children.count(u) > 1 ? l.Children.only(null) : l.isValidElement(u) ? u.props.children : null : p);
+      return /* @__PURE__ */ y(e, { ...c, ref: t, children: l.isValidElement(u) ? l.cloneElement(u, void 0, S) : null });
+    }
+    return /* @__PURE__ */ y(e, { ...c, ref: t, children: r });
+  });
+  return o.displayName = `${n}.Slot`, o;
+}
+const V = h("Slot");
+function _(n) {
+  const e = l.forwardRef((o, i) => {
+    let { children: t, ...r } = o;
+    if (m(t) && typeof a == "function" && (t = a(t._payload)), l.isValidElement(t)) {
+      const c = j(t), s = P(r, t.props);
+      return t.type !== l.Fragment && (s.ref = i ? C(i, c) : c), l.cloneElement(t, s);
+    }
+    return l.Children.count(t) > 1 ? l.Children.only(null) : null;
+  });
+  return e.displayName = `${n}.SlotClone`, e;
+}
+const R = /* @__PURE__ */ Symbol("radix.slottable");
+function b(n) {
+  return l.isValidElement(n) && typeof n.type == "function" && "__radixId" in n.type && n.type.__radixId === R;
+}
+function P(n, e) {
+  const o = { ...e };
+  for (const i in e) {
+    const t = n[i], r = e[i];
+    /^on[A-Z]/.test(i) ? t && r ? o[i] = (...s) => {
+      const f = r(...s);
+      return t(...s), f;
+    } : t && (o[i] = t) : i === "style" ? o[i] = { ...t, ...r } : i === "className" && (o[i] = [t, r].filter(Boolean).join(" "));
+  }
+  return { ...n, ...o };
+}
+function j(n) {
+  let e = Object.getOwnPropertyDescriptor(n.props, "ref")?.get, o = e && "isReactWarning" in e && e.isReactWarning;
+  return o ? n.ref : (e = Object.getOwnPropertyDescriptor(n, "ref")?.get, o = e && "isReactWarning" in e && e.isReactWarning, o ? n.props.ref : n.props.ref || n.ref);
+}
+export {
+  V as S
+};
+//# sourceMappingURL=slot-CRyweuj0.js.map

package/dist/slot-CRyweuj0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-CRyweuj0.js","sources":["../src/components/core/slot.tsx"],"sourcesContent":["import * as React from \"react\";\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\nconst REACT_LAZY_TYPE = Symbol.for(\"react.lazy\");\n\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n    if (typeof ref === \"function\") {\n        return ref(value);\n    } else if (ref !== null && ref !== undefined) {\n        ref.current = value;\n    }\n}\n\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n    return (node) => {\n        let hasCleanup = false;\n        const cleanups = refs.map((ref) => {\n            const cleanup = setRef(ref, node);\n            if (!hasCleanup && typeof cleanup == \"function\") {\n                hasCleanup = true;\n            }\n            return cleanup;\n        });\n        if (hasCleanup) {\n            return () => {\n                for (let i = 0; i < cleanups.length; i++) {\n                    const cleanup = cleanups[i];\n                    if (typeof cleanup == \"function\") {\n                        cleanup();\n                    } else {\n                        setRef(refs[i], null);\n                    }\n                }\n            };\n        }\n    };\n}\n\ninterface LazyReactElement extends React.ReactElement {\n    $$typeof: typeof REACT_LAZY_TYPE;\n    _payload: PromiseLike<Exclude<React.ReactNode, PromiseLike<any>>>;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type Usable<T> = PromiseLike<T> | React.Context<T>;\n\nconst use: typeof React.use | undefined = (React as any)[\" use \".trim().toString()];\n\ninterface SlotProps extends React.HTMLAttributes<HTMLElement> {\n    children?: React.ReactNode;\n}\n\nfunction isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n    return typeof value === \"object\" && value !== null && \"then\" in value;\n}\n\nfunction isLazyComponent(element: React.ReactNode): element is LazyReactElement {\n    return (\n        element != null &&\n        typeof element === \"object\" &&\n        \"$$typeof\" in element &&\n        element.$$typeof === REACT_LAZY_TYPE &&\n        \"_payload\" in element &&\n        isPromiseLike(element._payload)\n    );\n}\n\nexport function createSlot(ownerName: string) {\n    const SlotClone = createSlotClone(ownerName);\n    const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n        let { children, ...slotProps } = props;\n        if (isLazyComponent(children) && typeof use === \"function\") {\n            children = use(children._payload);\n        }\n        const childrenArray = React.Children.toArray(children);\n        const slottable = childrenArray.find(isSlottable);\n\n        if (slottable) {\n            // the new element to render is the one passed as a child of `Slottable`\n            const newElement = slottable.props.children;\n\n            const newChildren = childrenArray.map((child) => {\n                if (child === slottable) {\n                    // because the new element will be the one rendered, we are only interested\n                    // in grabbing its children (`newElement.props.children`)\n                    if (React.Children.count(newElement) > 1) return React.Children.only(null);\n                    return React.isValidElement(newElement) ? (newElement.props as { children: React.ReactNode }).children : null;\n                } else {\n                    return child;\n                }\n            });\n\n            return (\n                <SlotClone {...slotProps} ref={forwardedRef}>\n                    {React.isValidElement(newElement) ? React.cloneElement(newElement, undefined, newChildren) : null}\n                </SlotClone>\n            );\n        }\n\n        return (\n            <SlotClone {...slotProps} ref={forwardedRef}>\n                {children}\n            </SlotClone>\n        );\n    });\n\n    Slot.displayName = `${ownerName}.Slot`;\n    return Slot;\n}\n\nexport const Slot = createSlot(\"Slot\");\n\ninterface SlotCloneProps {\n    children: React.ReactNode;\n}\n\nfunction createSlotClone(ownerName: string) {\n    const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n        let { children, ...slotProps } = props;\n        if (isLazyComponent(children) && typeof use === \"function\") {\n            children = use(children._payload);\n        }\n\n        if (React.isValidElement(children)) {\n            const childrenRef = getElementRef(children);\n            const props = mergeProps(slotProps, children.props as AnyProps);\n            // do not pass ref to React.Fragment for React 19 compatibility\n            if (children.type !== React.Fragment) {\n                props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;\n            }\n            return React.cloneElement(children, props);\n        }\n\n        return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n    });\n\n    SlotClone.displayName = `${ownerName}.SlotClone`;\n    return SlotClone;\n}\n\nconst SLOTTABLE_IDENTIFIER = Symbol(\"radix.slottable\");\n\ninterface SlottableProps {\n    children: React.ReactNode;\n}\n\ninterface SlottableComponent extends React.FC<SlottableProps> {\n    __radixId: symbol;\n}\n\nexport function createSlottable(ownerName: string) {\n    const Slottable: SlottableComponent = ({ children }) => {\n        return <>{children}</>;\n    };\n    Slottable.displayName = `${ownerName}.Slottable`;\n    Slottable.__radixId = SLOTTABLE_IDENTIFIER;\n    return Slottable;\n}\n\nconst Slottable = createSlottable(\"Slottable\");\n\ntype AnyProps = Record<string, any>;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement<SlottableProps, typeof Slottable> {\n    return (\n        React.isValidElement(child) && typeof child.type === \"function\" && \"__radixId\" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER\n    );\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n    const overrideProps = { ...childProps };\n    for (const propName in childProps) {\n        const slotPropValue = slotProps[propName];\n        const childPropValue = childProps[propName];\n\n        const isHandler = /^on[A-Z]/.test(propName);\n        if (isHandler) {\n            if (slotPropValue && childPropValue) {\n                overrideProps[propName] = (...args: unknown[]) => {\n                    const result = childPropValue(...args);\n                    slotPropValue(...args);\n                    return result;\n                };\n            } else if (slotPropValue) {\n                overrideProps[propName] = slotPropValue;\n            }\n        } else if (propName === \"style\") {\n            overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n        } else if (propName === \"className\") {\n            overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(\" \");\n        }\n    }\n\n    return { ...slotProps, ...overrideProps };\n}\n\nfunction getElementRef(element: React.ReactElement) {\n    let getter = Object.getOwnPropertyDescriptor(element.props, \"ref\")?.get;\n    let mayWarn = getter && \"isReactWarning\" in getter && getter.isReactWarning;\n    if (mayWarn) {\n        return (element as any).ref;\n    }\n    getter = Object.getOwnPropertyDescriptor(element, \"ref\")?.get;\n    mayWarn = getter && \"isReactWarning\" in getter && getter.isReactWarning;\n    if (mayWarn) {\n        return (element.props as { ref?: React.Ref<unknown> }).ref;\n    }\n    return (element.props as { ref?: React.Ref<unknown> }).ref || (element as any).ref;\n}\n"],"names":["REACT_LAZY_TYPE","setRef","ref","value","composeRefs","refs","node","hasCleanup","cleanups","cleanup","i","use","React","isPromiseLike","isLazyComponent","element","createSlot","ownerName","SlotClone","createSlotClone","Slot","props","forwardedRef","children","slotProps","childrenArray","slottable","isSlottable","newElement","newChildren","child","childrenRef","getElementRef","mergeProps","SLOTTABLE_IDENTIFIER","childProps","overrideProps","propName","slotPropValue","childPropValue","args","result","getter","mayWarn"],"mappings":"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"}

package/dist/styles/common.js

@@ -0,0 +1,29 @@
+export var rounded = {
+    button: "0.55rem",
+    pill: "2rem",
+    card: "0.75rem",
+    full: "9999px",
+};
+export var spacing = {
+    base: "1rem",
+    hairline: "0.0625rem",
+    lg: "1.125rem",
+    sm: "0.75rem",
+    dialog: "20rem",
+    "field-height": "1.5rem",
+    "field-label": "0.875rem",
+    "input-height": "2.5rem",
+    "input-x": "0.5rem",
+    "input-y": "0.25rem",
+    "input-inline": "0.25rem",
+    "input-gap": "0.3rem",
+};
+export var zIndex = {
+    wizard: "50",
+    normal: "1",
+    navbar: "22",
+    calendar: "2",
+    overlay: "21",
+    tooltip: "20",
+    floating: "22",
+};

package/dist/styles/dark.js

@@ -0,0 +1,214 @@
+import { rounded, spacing, zIndex } from "./common";
+export var DARK_THEME = {
+    name: "dark",
+    zIndex: zIndex,
+    rounded: rounded,
+    spacing: spacing,
+    shadow: {
+        "shadow-notification": "1px 2px 2px 2px hsla(210, 15%, 20%,  0.15)",
+        "shadow-floating": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        "shadow-card": "0px 1px 1px 1px hsla(210, 25%, 20%,  0.1)",
+        "shadow-table": "0px 1px 1px 1px hsla(210, 25%, 20%,  0.1)",
+    },
+    colors: {
+        foreground: "hsla(240, 5%, 96%)",
+        background: "hsla(240, 10%, 8%)",
+        border: "hsla(240, 4%, 16%)",
+        disabled: "hsla(240, 4%, 16%)",
+        muted: {
+            DEFAULT: "hsla(240, 4%, 16%)",
+            foreground: "hsla(240, 5%, 65%)",
+            subtle: "hsla(240, 5%, 65%)",
+            hover: "hsla(240, 4%, 20%)",
+        },
+        emphasis: {
+            foreground: "hsla(199, 89%, 48%)",
+            DEFAULT: "hsla(199, 89%, 10%)",
+            subtle: "hsla(199, 89%, 15%)",
+            hover: "hsla(199, 89%, 40%)",
+        },
+        primary: {
+            foreground: "hsla(240, 6%, 10%)",
+            DEFAULT: "hsla(201,49%,54%)",
+            subtle: "hsla(201,49%,36%)",
+            hover: "hsla(201,49%,22%)",
+        },
+        secondary: {
+            DEFAULT: "hsla(240, 5%, 96%)",
+            background: "hsla(240, 4%, 16%)",
+            subtle: "hsla(240, 4%, 20%)",
+            hover: "hsla(240, 4%, 25%)",
+            foreground: "hsla(240, 5%, 96%)",
+        },
+        info: {
+            DEFAULT: "hsla(199, 89%, 48%)",
+            subtle: "hsla(199, 89%, 15%)",
+            hover: "hsla(199, 89%, 40%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(199, 89%, 48%)",
+        },
+        danger: {
+            DEFAULT: "hsla(0, 84%, 60%)",
+            subtle: "hsla(0, 84%, 15%)",
+            hover: "hsla(0, 84%, 50%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(0, 84%, 60%)",
+        },
+        warn: {
+            DEFAULT: "hsla(38, 92%, 50%)",
+            subtle: "hsla(38, 92%, 15%)",
+            hover: "hsla(38, 92%, 45%)",
+            foreground: "hsla(240, 10%, 4%)",
+            notification: "hsla(38, 92%, 50%)",
+        },
+        success: {
+            DEFAULT: "hsla(142, 71%, 45%)",
+            subtle: "hsla(142, 71%, 15%)",
+            hover: "hsla(142, 71%, 40%)",
+            foreground: "hsla(240, 10%, 4%)",
+            notification: "hsla(142, 71%, 45%)",
+        },
+        input: {
+            border: "hsla(240, 4%, 16%)",
+            placeholder: "hsla(240, 5%, 65%)",
+            "mask-error": "hsla(0, 84%, 20%)",
+            "switch-bg": "hsla(240, 4%, 16%)",
+            switch: "hsla(0, 0%, 100%)",
+            slider: "hsla(0, 0%, 100%)",
+        },
+        card: {
+            muted: "hsla(240, 4%, 10%)",
+            border: "hsla(240, 4%, 11%)",
+            background: "hsla(221, 16%, 9%)",
+        },
+        floating: {
+            foreground: "hsla(240, 5%, 96%)",
+            background: "hsla(240, 10%, 8%)",
+            hover: "hsla(240, 4%, 16%)",
+            border: "hsla(240, 4%, 16%)",
+            overlay: "hsla(0, 0%, 0%)",
+        },
+        tooltip: {
+            foreground: "hsla(240, 10%, 4%)",
+            background: "hsla(0, 0%, 100%)",
+            hover: "hsla(0, 0%, 100%)",
+            border: "hsla(0, 0%, 100%)",
+            overlay: "hsla(0, 0%, 0%)",
+        },
+        table: {
+            header: "hsla(240, 4%, 10%)",
+            border: "hsla(240, 4%, 16%)",
+            background: "hsla(240, 10%, 4%)",
+        },
+        button: {
+            primary: {
+                text: "hsla(221, 52%, 100%)",
+                bg: "hsla(201,49%,42%)",
+            },
+            warn: {
+                text: "hsla(240, 10%, 4%)",
+                bg: "hsla(38, 92%, 50%)",
+            },
+            info: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(199, 89%, 48%)",
+            },
+            success: {
+                text: "hsla(240, 10%, 4%)",
+                bg: "hsla(142, 71%, 45%)",
+            },
+            danger: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(0, 84%, 60%)",
+            },
+            muted: {
+                text: "hsla(240, 5%, 96%)",
+                bg: "hsla(240, 4%, 16%)",
+            },
+            neutral: {
+                text: "hsla(240, 5%, 96%)",
+                bg: "hsla(240, 4%, 16%)",
+            },
+            secondary: {
+                text: "hsla(240, 10%, 4%)",
+                bg: "hsla(0, 0%, 100%)",
+            },
+        },
+        tag: {
+            primary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(240, 4%, 20%)",
+            },
+            warn: {
+                text: "hsla(38, 92%, 70%)",
+                bg: "hsla(38, 92%, 15%)",
+            },
+            info: {
+                text: "hsla(199, 89%, 70%)",
+                bg: "hsla(199, 89%, 15%)",
+            },
+            success: {
+                text: "hsla(142, 71%, 70%)",
+                bg: "hsla(142, 71%, 15%)",
+            },
+            danger: {
+                text: "hsla(0, 84%, 70%)",
+                bg: "hsla(0, 84%, 15%)",
+            },
+            neutral: {
+                text: "hsla(240, 5%, 96%)",
+                bg: "hsla(240, 4%, 16%)",
+            },
+            secondary: {
+                text: "hsla(240, 10%, 4%)",
+                bg: "hsla(0, 0%, 100%)",
+            },
+            muted: {
+                text: "hsla(240, 5%, 96%)",
+                bg: "hsla(240, 4%, 16%)",
+            },
+        },
+        alert: {
+            primary: {
+                text: "hsla(199, 89%, 80%)",
+                border: "hsla(199, 89%, 25%)",
+                bg: "hsla(199, 89%, 12%)",
+            },
+            warn: {
+                bg: "hsla(38, 92%, 12%)",
+                border: "hsla(38, 92%, 25%)",
+                text: "hsla(38, 92%, 80%)",
+            },
+            info: {
+                text: "hsla(199, 89%, 80%)",
+                bg: "hsla(199, 89%, 12%)",
+                border: "hsla(199, 89%, 25%)",
+            },
+            success: {
+                text: "hsla(142, 71%, 80%)",
+                bg: "hsla(142, 71%, 12%)",
+                border: "hsla(142, 71%, 25%)",
+            },
+            danger: {
+                text: "hsla(0, 84%, 80%)",
+                bg: "hsla(0, 84%, 12%)",
+                border: "hsla(0, 84%, 25%)",
+            },
+            neutral: {
+                text: "hsla(240, 5%, 96%)",
+                bg: "hsla(240, 4%, 16%)",
+                border: "hsla(240, 4%, 20%)",
+            },
+            secondary: {
+                text: "hsla(240, 10%, 4%)",
+                bg: "hsla(0, 0%, 100%)",
+                border: "hsla(0, 0%, 100%)",
+            },
+            muted: {
+                bg: "hsla(240, 4%, 16%)",
+                border: "hsla(240, 4%, 20%)",
+                text: "hsla(240, 5%, 96%)",
+            },
+        },
+    },
+};

package/dist/styles/design-tokens.js

@@ -0,0 +1,98 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export var parsers = {
+    hex: function (v) { return v; },
+    raw: function (v) { return v; },
+    hsl: function (v) { return "hsl(".concat(v, ")"); },
+    rgb: function (v) { return "rgb(".concat(v, ")"); },
+    z: function (_, __, k) { return "var(--z-".concat(k, ")"); },
+    hsla: function (v) { return "hsla(".concat(v, ")"); },
+    rgba: function (v) { return "rgba(".concat(v, ")"); },
+    cssVariable: function (_, __, k) { return "var(--".concat(k, ")"); },
+    formatWithVar: function (format) { return function (_, __, v) { return "".concat(format, "(var(--").concat(v, "), <alpha-value>)"); }; },
+};
+export var reduceTokens = function (colors, parse, prefix, append) {
+    if (prefix === void 0) { prefix = ""; }
+    if (append === void 0) { append = ""; }
+    return Object.entries(colors).reduce(function (acc, _a) {
+        var key = _a[0], value = _a[1];
+        var combine = append === "" ? "".concat(prefix).concat(key) : "".concat(append, "-").concat(key);
+        if (typeof value === "string") {
+            var k = append === "" ? "".concat(prefix).concat(key) : key;
+            return acc.concat(parse(value, k, combine));
+        }
+        return acc.concat(reduceTokens(value, parse, prefix, combine));
+    }, []);
+};
+export var createDesignTokens = function (colors, parse, prefix, append) {
+    if (prefix === void 0) { prefix = ""; }
+    if (append === void 0) { append = ""; }
+    return Object.entries(colors).reduce(function (acc, _a) {
+        var _b, _c;
+        var key = _a[0], value = _a[1];
+        var combine = append === "" ? "".concat(prefix).concat(key) : "".concat(append, "-").concat(key);
+        if (typeof value === "string") {
+            var k = append === "" ? "".concat(prefix).concat(key) : key;
+            return __assign(__assign({}, acc), (_b = {}, _b[k] = parse(value, key, combine), _b));
+        }
+        return __assign(__assign({}, acc), (_c = {}, _c[key] = createDesignTokens(value, parse, prefix, combine), _c));
+    }, {});
+};
+var modifiers = {
+    default: function (variables) { return ":root { ".concat(variables, " }"); },
+    dark: function (variables) { return "html.dark {".concat(variables, "}"); },
+};
+var createStyleContent = function (tokens, modifiers) {
+    var v = modifiers.value || (function (_, s) { return s; });
+    var content = tokens.map(function (token) { return "".concat(token.key, ": ").concat(v(token.key, token.value)); }).join(";");
+    return modifiers.result(content);
+};
+export var createStyles = {
+    default: function (tokens) { return createStyleContent(tokens, { result: modifiers.default }); },
+    dark: function (tokens) { return createStyleContent(tokens, { result: modifiers.dark }); },
+};
+var fn = function (p) {
+    return function (value, _, key) {
+        var r = { key: "--".concat(key), value: "".concat(value) };
+        return p ? p(r) : r;
+    };
+};
+var zIndexParser = function (t) { return ({ key: t.key.replace(/^--/, "--z-"), value: t.value }); };
+var createTokens = function (theme, map) {
+    var _a;
+    var colors = reduceTokens(theme.colors, fn(map === null || map === void 0 ? void 0 : map.colors));
+    var spacing = reduceTokens(theme.spacing, fn(map === null || map === void 0 ? void 0 : map.spacing));
+    var rounded = reduceTokens(theme.rounded, fn(map === null || map === void 0 ? void 0 : map.rounded));
+    var shadow = reduceTokens(theme.shadow, fn(map === null || map === void 0 ? void 0 : map.rounded));
+    var zIndex = reduceTokens(theme.zIndex, fn((_a = map === null || map === void 0 ? void 0 : map.zIndex) !== null && _a !== void 0 ? _a : zIndexParser));
+    var customTokens = theme.custom ? reduceTokens(theme.custom, fn(map === null || map === void 0 ? void 0 : map.customTokens)) : [];
+    return colors.concat(spacing, rounded, customTokens, zIndex, shadow);
+};
+export var createTheme = function (theme, name) {
+    return createStyleContent(createTokens(theme), {
+        result: function (variables) { return "html".concat(name ? ".".concat(name) : "", " {").concat(variables, "}"); },
+        value: function (_, v) { return v.replace("hsla(", "").replace(")", ""); },
+    });
+};
+export var createCssProperties = function (theme, map) {
+    var tokens = createTokens(theme, map);
+    return tokens.reduce(function (acc, el) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[el.key] = el.value, _a)));
+    }, {});
+};
+export var createTokenStyles = function (theme, map) {
+    return createStyleContent(createTokens(theme, map), {
+        result: function (variables) { return "html".concat((map === null || map === void 0 ? void 0 : map.name) ? ".".concat(map.name) : "", " {").concat(variables, "}"); },
+        value: function (_, v) { return v; },
+    });
+};

package/dist/styles/light.js

@@ -0,0 +1,214 @@
+import { rounded, spacing, zIndex } from "./common";
+export var LIGHT_THEME = {
+    rounded: rounded,
+    spacing: spacing,
+    name: "light",
+    shadow: {
+        "shadow-notification": "1px 2px 2px 2px hsla(210, 25%, 40%, 0.15)",
+        "shadow-floating": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        "shadow-card": "0px 1px 2px 1px hsla(210, 25%, 20%, 0.1)",
+        "shadow-table": "0px 1px 1px 1px hsla(210, 0%, 0%,  0.1)",
+    },
+    zIndex: zIndex,
+    colors: {
+        foreground: "hsla(221, 15%, 23%)",
+        background: "hsla(0, 0%, 100%)",
+        border: "hsla(240, 6%, 90%)",
+        muted: {
+            DEFAULT: "hsla(240, 5%, 96%)",
+            foreground: "hsla(240, 4%, 46%)",
+            subtle: "hsla(240, 4%, 46%)",
+            hover: "hsla(240, 5%, 96%)",
+        },
+        disabled: "hsla(240, 5%, 96%)",
+        emphasis: {
+            foreground: "hsla(199, 89%, 48%)",
+            DEFAULT: "hsla(199, 89%, 96%)",
+            subtle: "hsla(199, 89%, 92%)",
+            hover: "hsla(199, 89%, 40%)",
+        },
+        primary: {
+            foreground: "hsla(240, 6%, 10%)",
+            DEFAULT: "hsla(201,49%,54%)",
+            subtle: "hsla(201,49%,36%)",
+            hover: "hsla(201,49%,22%)",
+        },
+        secondary: {
+            background: "hsla(240, 5%, 96%)",
+            DEFAULT: "hsla(240, 6%, 10%)",
+            subtle: "hsla(240, 5%, 96%)",
+            hover: "hsla(240, 6%, 15%)",
+            foreground: "hsla(0, 0%, 100%)",
+        },
+        info: {
+            DEFAULT: "hsla(199, 89%, 48%)",
+            subtle: "hsla(199, 89%, 96%)",
+            hover: "hsla(199, 89%, 40%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(199, 89%, 48%)",
+        },
+        danger: {
+            DEFAULT: "hsla(0, 84%, 60%)",
+            subtle: "hsla(0, 84%, 96%)",
+            hover: "hsla(0, 84%, 50%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(0, 84%, 60%)",
+        },
+        warn: {
+            DEFAULT: "hsla(38, 92%, 50%)",
+            subtle: "hsla(38, 92%, 96%)",
+            hover: "hsla(38, 92%, 45%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(38, 92%, 50%)",
+        },
+        success: {
+            DEFAULT: "hsla(142, 71%, 45%)",
+            subtle: "hsla(142, 71%, 96%)",
+            hover: "hsla(142, 71%, 40%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(142, 71%, 45%)",
+        },
+        input: {
+            border: "hsla(240, 6%, 90%)",
+            placeholder: "hsla(240, 4%, 46%)",
+            "mask-error": "hsla(0, 84%, 96%)",
+            "switch-bg": "hsla(240, 6%, 90%)",
+            switch: "hsla(0, 0%, 100%)",
+            slider: "hsla(199, 89%, 48%)",
+        },
+        card: {
+            muted: "hsla(240, 5%, 96%)",
+            border: "hsla(240, 6%, 90%)",
+            background: "hsla(0, 0%, 100%)",
+        },
+        floating: {
+            foreground: "hsla(240, 10%, 4%)",
+            background: "hsla(0, 0%, 100%)",
+            hover: "hsla(240, 5%, 96%)",
+            border: "hsla(240, 6%, 90%)",
+            overlay: "hsla(240, 10%, 4%)",
+        },
+        tooltip: {
+            foreground: "hsla(0, 0%, 100%)",
+            background: "hsla(240, 10%, 4%)",
+            hover: "hsla(240, 10%, 4%)",
+            border: "hsla(240, 10%, 4%)",
+            overlay: "hsla(0, 0%, 0%)",
+        },
+        table: {
+            header: "hsla(240, 5%, 96%)",
+            background: "hsla(0, 0%, 100%)",
+            border: "hsla(240, 6%, 90%)",
+        },
+        button: {
+            muted: {
+                bg: "hsla(240, 5%, 96%)",
+                text: "hsla(240, 6%, 10%)",
+            },
+            primary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(201,49%,54%)",
+            },
+            warn: {
+                bg: "hsla(38, 92%, 50%)",
+                text: "hsla(0, 0%, 100%)",
+            },
+            info: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(199, 89%, 48%)",
+            },
+            success: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(142, 71%, 45%)",
+            },
+            danger: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(0, 84%, 60%)",
+            },
+            neutral: {
+                text: "hsla(240, 6%, 10%)",
+                bg: "hsla(240, 5%, 96%)",
+            },
+            secondary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(240, 6%, 10%)",
+            },
+        },
+        tag: {
+            muted: {
+                bg: "hsla(240, 5%, 96%)",
+                text: "hsla(240, 4%, 46%)",
+            },
+            primary: {
+                text: "hsla(199, 89%, 48%)",
+                bg: "hsla(199, 89%, 96%)",
+            },
+            warn: {
+                bg: "hsla(38, 92%, 96%)",
+                text: "hsla(38, 92%, 40%)",
+            },
+            info: {
+                text: "hsla(199, 89%, 40%)",
+                bg: "hsla(199, 89%, 96%)",
+            },
+            success: {
+                text: "hsla(142, 71%, 35%)",
+                bg: "hsla(142, 71%, 96%)",
+            },
+            danger: {
+                text: "hsla(0, 84%, 45%)",
+                bg: "hsla(0, 84%, 96%)",
+            },
+            neutral: {
+                text: "hsla(240, 6%, 10%)",
+                bg: "hsla(240, 5%, 96%)",
+            },
+            secondary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(240, 6%, 10%)",
+            },
+        },
+        alert: {
+            muted: {
+                bg: "hsla(240, 5%, 96%)",
+                text: "hsla(240, 6%, 10%)",
+                border: "hsla(240, 6%, 90%)",
+            },
+            primary: {
+                text: "hsla(199, 89%, 40%)",
+                border: "hsla(199, 89%, 90%)",
+                bg: "hsla(199, 89%, 98%)",
+            },
+            warn: {
+                bg: "hsla(38, 92%, 98%)",
+                text: "hsla(38, 92%, 35%)",
+                border: "hsla(38, 92%, 90%)",
+            },
+            info: {
+                text: "hsla(199, 89%, 35%)",
+                bg: "hsla(199, 89%, 98%)",
+                border: "hsla(199, 89%, 90%)",
+            },
+            success: {
+                text: "hsla(142, 71%, 30%)",
+                bg: "hsla(142, 71%, 98%)",
+                border: "hsla(142, 71%, 90%)",
+            },
+            danger: {
+                text: "hsla(0, 84%, 40%)",
+                bg: "hsla(0, 84%, 98%)",
+                border: "hsla(0, 84%, 90%)",
+            },
+            neutral: {
+                text: "hsla(240, 6%, 10%)",
+                bg: "hsla(240, 5%, 96%)",
+                border: "hsla(240, 6%, 90%)",
+            },
+            secondary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(240, 6%, 10%)",
+                border: "hsla(240, 6%, 10%)",
+            },
+        },
+    },
+};