@kimdw-rtk/ui 0.0.8 → 0.0.11

package/dist/components/Button/Button.css.cjs

@@ -0,0 +1,194 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _css = require('@vanilla-extract/css');
+var _styleUtils = require('#styleUtils');
+var _themes = require('#themes');
+var _tokens = require('#tokens');
+var _color = require('../../tokens/scale/color');
+const backgroundVar = _css.createVar.call(void 0, );
+const foregroundVar = _css.createVar.call(void 0, );
+const semanticColors = _tokens.semanticColor.reduce(
+  (prev, color) => ({
+    ...prev,
+    [color]: _styleUtils.styleWithLayer.call(void 0, {
+      vars: {
+        [backgroundVar]: _themes.theme.color[color],
+        [foregroundVar]: _themes.theme.color[`${color}-foreground`]
+      }
+    })
+  }),
+  {}
+);
+const scaleColors = _color.SCALE_COLOR.reduce(
+  (prev, value) => ({
+    ...prev,
+    [value]: _styleUtils.styleWithLayer.call(void 0, {
+      vars: {
+        [backgroundVar]: _themes.theme.color[value][500],
+        [foregroundVar]: _themes.theme.color.background
+      }
+    })
+  }),
+  {}
+);
+const pulse = _css.keyframes.call(void 0, {
+  "0%": {
+    backgroundPosition: "-300% 0"
+  },
+  "100%": {
+    backgroundPosition: "300% 0"
+  }
+});
+const span = _styleUtils.recipeWithLayer.call(void 0, {
+  base: {
+    lineHeight: "0"
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: "0.875em"
+      },
+      md: {
+        fontSize: "1em"
+      },
+      lg: {
+        fontSize: "1.125em"
+      },
+      "icon-sm": {
+        fontSize: "1em"
+      },
+      "icon-md": {
+        fontSize: "1.25em"
+      },
+      "icon-lg": {
+        fontSize: "1.5em"
+      }
+    }
+  }
+});
+const button = _styleUtils.recipeWithLayer.call(void 0, {
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+    border: "0",
+    borderRadius: _themes.theme.borderRadius,
+    fontSize: "1em",
+    transition: "background-color 0.2s ease, color 0.2s ease",
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  variants: {
+    hasIcon: {
+      true: {
+        gap: "0.5em"
+      }
+    },
+    color: {
+      ...semanticColors,
+      ...scaleColors
+    },
+    size: {
+      sm: {
+        height: "2.25em",
+        padding: "0 0.75em"
+      },
+      md: {
+        height: "2.5em",
+        padding: "0 0.875em"
+      },
+      lg: {
+        height: "2.75em",
+        padding: "0 1em"
+      },
+      "icon-sm": {
+        width: "2em",
+        height: "2em"
+      },
+      "icon-md": {
+        width: "2.5em",
+        height: "2.5em"
+      },
+      "icon-lg": {
+        width: "2.75em",
+        height: "2.75em"
+      }
+    },
+    variant: {
+      contained: {
+        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
+        backgroundColor: `rgb(${backgroundVar})`,
+        color: `rgb(${foregroundVar})`,
+        ":disabled": {
+          backgroundColor: `rgb(${_themes.theme.color.muted})`,
+          color: `rgb(${_themes.theme.color["muted-foreground"]})`,
+          cursor: "default"
+        }
+      },
+      outlined: {
+        boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,
+        backgroundColor: `rgb(${_themes.theme.color.background})`,
+        color: `rgb(${_themes.theme.color.foreground})`,
+        ":disabled": {
+          backgroundColor: `rgb(${_themes.theme.color.muted})`,
+          color: `rgb(${_themes.theme.color["muted-foreground"]})`,
+          cursor: "default"
+        }
+      },
+      ghost: {
+        background: "transparent",
+        color: `rgb(${_themes.theme.color.foreground})`,
+        ":hover": {
+          backgroundColor: `rgba(${backgroundVar}, 0.8)`,
+          color: `rgb(${foregroundVar})`
+        },
+        ":disabled": {
+          color: `rgb(${_themes.theme.color["muted-foreground"]})`,
+          cursor: "default"
+        }
+      },
+      glass: {
+        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
+        backgroundColor: `rgba(${backgroundVar}, 0.75)`,
+        backdropFilter: "blur(1rem)",
+        color: `rgb(${_themes.theme.color.foreground})`,
+        ":disabled": {
+          backgroundColor: `rgb(${_themes.theme.color.muted})`,
+          color: `rgb(${_themes.theme.color["muted-foreground"]})`,
+          cursor: "default"
+        }
+      }
+    },
+    pulse: {
+      true: {
+        "::after": {
+          content: "",
+          position: "absolute",
+          inset: "0",
+          background: "linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)",
+          backgroundSize: "300% 100%",
+          animation: `${pulse} 5s linear 0s infinite`
+        }
+      }
+    }
+  }
+});
+const icon = _css.style.call(void 0, {
+  lineHeight: "0"
+});
+_css.globalStyle.call(void 0, `${icon} > *`, {
+  width: "1em",
+  height: "1em",
+  lineHeight: "0",
+  pointerEvents: "none"
+});
+_css.globalStyle.call(void 0, `${button.classNames.base} svg`, {
+  width: "1em",
+  height: "1em"
+});
+
+
+
+
+exports.button = button; exports.icon = icon; exports.span = span;
+//# sourceMappingURL=Button.css.cjs.map

package/dist/components/Button/Button.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Button/Button.css.ts","/home/runner/work/react-kits/react-kits/packages/ui/dist/components/Button/Button.css.cjs"],"names":[],"mappings":"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","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/components/Button/Button.css.cjs","sourcesContent":["import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';\n\nimport { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\n\nconst backgroundVar = createVar();\nconst foregroundVar = createVar();\n\nconst semanticColors = semanticColor.reduce(\n  (prev, color) => ({\n    ...prev,\n    [color]: styleWithLayer({\n      vars: {\n        [backgroundVar]: theme.color[color],\n        [foregroundVar]: theme.color[`${color}-foreground`],\n      },\n    }),\n  }),\n  {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n  (prev, value) => ({\n    ...prev,\n    [value]: styleWithLayer({\n      vars: {\n        [backgroundVar]: theme.color[value][500],\n        [foregroundVar]: theme.color.background,\n      },\n    }),\n  }),\n  {} as Record<ScaleColor, string>,\n);\n\nconst pulse = keyframes({\n  '0%': {\n    backgroundPosition: '-300% 0',\n  },\n\n  '100%': {\n    backgroundPosition: '300% 0',\n  },\n});\n\nexport const span = recipeWithLayer({\n  base: {\n    lineHeight: '0',\n  },\n  variants: {\n    size: {\n      sm: {\n        fontSize: '0.875em',\n      },\n\n      md: {\n        fontSize: '1em',\n      },\n\n      lg: {\n        fontSize: '1.125em',\n      },\n\n      'icon-sm': {\n        fontSize: '1em',\n      },\n\n      'icon-md': {\n        fontSize: '1.25em',\n      },\n\n      'icon-lg': {\n        fontSize: '1.5em',\n      },\n    },\n  },\n});\n\nexport const button = recipeWithLayer({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    overflow: 'hidden',\n\n    border: '0',\n    borderRadius: theme.borderRadius,\n\n    fontSize: '1em',\n\n    transition: 'background-color 0.2s ease, color 0.2s ease',\n\n    cursor: 'pointer',\n    userSelect: 'none',\n  },\n\n  variants: {\n    hasIcon: {\n      true: {\n        gap: '0.5em',\n      },\n    },\n\n    color: {\n      ...semanticColors,\n      ...scaleColors,\n    },\n\n    size: {\n      sm: {\n        height: '2.25em',\n        padding: '0 0.75em',\n      },\n\n      md: {\n        height: '2.5em',\n        padding: '0 0.875em',\n      },\n\n      lg: {\n        height: '2.75em',\n        padding: '0 1em',\n      },\n\n      'icon-sm': {\n        width: '2em',\n        height: '2em',\n      },\n\n      'icon-md': {\n        width: '2.5em',\n        height: '2.5em',\n      },\n\n      'icon-lg': {\n        width: '2.75em',\n        height: '2.75em',\n      },\n    },\n\n    variant: {\n      contained: {\n        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,\n        backgroundColor: `rgb(${backgroundVar})`,\n        color: `rgb(${foregroundVar})`,\n\n        ':disabled': {\n          backgroundColor: `rgb(${theme.color.muted})`,\n\n          color: `rgb(${theme.color['muted-foreground']})`,\n\n          cursor: 'default',\n        },\n      },\n\n      outlined: {\n        boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,\n        backgroundColor: `rgb(${theme.color.background})`,\n        color: `rgb(${theme.color.foreground})`,\n\n        ':disabled': {\n          backgroundColor: `rgb(${theme.color.muted})`,\n\n          color: `rgb(${theme.color['muted-foreground']})`,\n\n          cursor: 'default',\n        },\n      },\n\n      ghost: {\n        background: 'transparent',\n\n        color: `rgb(${theme.color.foreground})`,\n\n        ':hover': {\n          backgroundColor: `rgba(${backgroundVar}, 0.8)`,\n\n          color: `rgb(${foregroundVar})`,\n        },\n\n        ':disabled': {\n          color: `rgb(${theme.color['muted-foreground']})`,\n\n          cursor: 'default',\n        },\n      },\n\n      glass: {\n        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,\n        backgroundColor: `rgba(${backgroundVar}, 0.75)`,\n        backdropFilter: 'blur(1rem)',\n\n        color: `rgb(${theme.color.foreground})`,\n\n        ':disabled': {\n          backgroundColor: `rgb(${theme.color.muted})`,\n\n          color: `rgb(${theme.color['muted-foreground']})`,\n\n          cursor: 'default',\n        },\n      },\n    },\n\n    pulse: {\n      true: {\n        '::after': {\n          content: '',\n          position: 'absolute',\n          inset: '0',\n\n          background:\n            'linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)',\n          backgroundSize: '300% 100%',\n\n          animation: `${pulse} 5s linear 0s infinite`,\n        },\n      },\n    },\n  },\n});\n\nexport const icon = style({\n  lineHeight: '0',\n});\n\nglobalStyle(`${icon} > *`, {\n  width: '1em',\n  height: '1em',\n  lineHeight: '0',\n\n  pointerEvents: 'none',\n});\n\nglobalStyle(`${button.classNames.base} svg`, {\n  width: '1em',\n  height: '1em',\n});\n",null]}

package/dist/components/Button/Button.css.d.cts

@@ -0,0 +1,2 @@
+import '@vanilla-extract/recipes';
+export { b as button, i as icon, s as span } from '../../Button.css-CzeAAfQg.cjs';

package/dist/components/Button/Button.css.d.ts

@@ -1,146 +1,2 @@
-export declare const span: import("@vanilla-extract/recipes").RuntimeFn<{
-    size: {
-        sm: {
-            fontSize: "0.875em";
-        };
-        md: {
-            fontSize: "1em";
-        };
-        lg: {
-            fontSize: "1.125em";
-        };
-        'icon-sm': {
-            fontSize: "1em";
-        };
-        'icon-md': {
-            fontSize: "1.25em";
-        };
-        'icon-lg': {
-            fontSize: "1.5em";
-        };
-    };
-}>;
-export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
-    hasIcon: {
-        true: {
-            gap: "0.5em";
-        };
-    };
-    color: {
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
-        slate: string;
-        gray: string;
-        zinc: string;
-        neutral: string;
-        stone: string;
-        primary: string;
-        secondary: string;
-        muted: string;
-        accent: string;
-        card: string;
-        danger: string;
-        warning: string;
-        success: string;
-    };
-    size: {
-        sm: {
-            height: "2.25em";
-            padding: "0 0.75em";
-        };
-        md: {
-            height: "2.5em";
-            padding: "0 0.875em";
-        };
-        lg: {
-            height: "2.75em";
-            padding: "0 1em";
-        };
-        'icon-sm': {
-            width: "2em";
-            height: "2em";
-        };
-        'icon-md': {
-            width: "2.5em";
-            height: "2.5em";
-        };
-        'icon-lg': {
-            width: "2.75em";
-            height: "2.75em";
-        };
-    };
-    variant: {
-        contained: {
-            boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.08)";
-            backgroundColor: `rgb(var(--${string}))`;
-            color: `rgb(var(--${string}))`;
-            ':disabled': {
-                backgroundColor: `rgb(var(--${string}))`;
-                color: `rgb(var(--${string}))`;
-                cursor: "default";
-            };
-        };
-        outlined: {
-            boxShadow: `inset 0 0 0 1px rgb(var(--${string}))`;
-            backgroundColor: `rgb(var(--${string}))`;
-            color: `rgb(var(--${string}))`;
-            ':disabled': {
-                backgroundColor: `rgb(var(--${string}))`;
-                color: `rgb(var(--${string}))`;
-                cursor: "default";
-            };
-        };
-        ghost: {
-            background: "transparent";
-            color: `rgb(var(--${string}))`;
-            ':hover': {
-                backgroundColor: `rgba(var(--${string}), 0.8)`;
-                color: `rgb(var(--${string}))`;
-            };
-            ':disabled': {
-                color: `rgb(var(--${string}))`;
-                cursor: "default";
-            };
-        };
-        glass: {
-            boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.08)";
-            backgroundColor: `rgba(var(--${string}), 0.75)`;
-            backdropFilter: "blur(1rem)";
-            color: `rgb(var(--${string}))`;
-            ':disabled': {
-                backgroundColor: `rgb(var(--${string}))`;
-                color: `rgb(var(--${string}))`;
-                cursor: "default";
-            };
-        };
-    };
-    pulse: {
-        true: {
-            '::after': {
-                content: "";
-                position: "absolute";
-                inset: "0";
-                background: "linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)";
-                backgroundSize: "300% 100%";
-                animation: `${string} 5s linear 0s infinite`;
-            };
-        };
-    };
-}>;
-export declare const icon: string;
-//# sourceMappingURL=Button.css.d.ts.map
+import '@vanilla-extract/recipes';
+export { b as button, i as icon, s as span } from '../../Button.css-CzeAAfQg.js';