@kimdw-rtk/ui 0.0.17 → 0.0.20

package/dist/chunk-RRNRBLG6.mjs

@@ -0,0 +1,221 @@
+import {
+  recipeWithLayer,
+  styleWithLayer
+} from "./chunk-3DOILUMO.mjs";
+import {
+  theme
+} from "./chunk-MBHPGYUE.mjs";
+import {
+  semanticColor
+} from "./chunk-XOG2JHIV.mjs";
+import {
+  SCALE_COLOR
+} from "./chunk-GAJYOAMV.mjs";
+import {
+  createVar,
+  globalStyle,
+  keyframes,
+  style
+} from "./chunk-VSQF5NYH.mjs";
+import {
+  __export
+} from "./chunk-D57E6H3M.mjs";
+
+// src/components/Button/Button.css.ts
+var Button_css_exports = {};
+__export(Button_css_exports, {
+  button: () => button,
+  icon: () => icon,
+  span: () => span
+});
+var backgroundVar = createVar();
+var foregroundVar = createVar();
+var semanticColors = semanticColor.reduce(
+  (prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+      vars: {
+        [backgroundVar]: theme.color[color],
+        [foregroundVar]: theme.color[`${color}-foreground`]
+      }
+    })
+  }),
+  {}
+);
+var scaleColors = SCALE_COLOR.reduce(
+  (prev, value) => ({
+    ...prev,
+    [value]: styleWithLayer({
+      vars: {
+        [backgroundVar]: theme.color[value][500],
+        [foregroundVar]: theme.color.background
+      }
+    })
+  }),
+  {}
+);
+var pulse = keyframes({
+  "0%": {
+    backgroundPosition: "-300% 0"
+  },
+  "100%": {
+    backgroundPosition: "300% 0"
+  }
+});
+var span = recipeWithLayer({
+  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"
+      }
+    }
+  }
+});
+var button = recipeWithLayer({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+    border: "0",
+    borderRadius: 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(${theme.color.muted})`,
+          color: `rgb(${theme.color["muted-foreground"]})`,
+          cursor: "default"
+        }
+      },
+      outlined: {
+        boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,
+        backgroundColor: `rgb(${theme.color.background})`,
+        color: `rgb(${theme.color.foreground})`,
+        ":disabled": {
+          backgroundColor: `rgb(${theme.color.muted})`,
+          color: `rgb(${theme.color["muted-foreground"]})`,
+          cursor: "default"
+        }
+      },
+      ghost: {
+        background: "transparent",
+        color: `rgb(${theme.color.foreground})`,
+        ":hover": {
+          backgroundColor: `rgba(${backgroundVar}, 0.8)`,
+          color: `rgb(${foregroundVar})`
+        },
+        ":disabled": {
+          color: `rgb(${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(${theme.color.foreground})`,
+        ":disabled": {
+          backgroundColor: `rgb(${theme.color.muted})`,
+          color: `rgb(${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`
+        }
+      }
+    }
+  }
+});
+var icon = style({
+  lineHeight: "0"
+});
+globalStyle(`${icon} > *`, {
+  width: "1em",
+  height: "1em",
+  lineHeight: "0",
+  pointerEvents: "none"
+});
+globalStyle(`${button.classNames.base} svg`, {
+  width: "1em",
+  height: "1em"
+});
+
+export {
+  span,
+  button,
+  icon,
+  Button_css_exports
+};
+//# sourceMappingURL=chunk-RRNRBLG6.mjs.map

package/dist/chunk-RRNRBLG6.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Button/Button.css.ts"],
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,IAAM,gBAAgB,UAAU;AAChC,IAAM,gBAAgB,UAAU;AAEhC,IAAM,iBAAiB,cAAc;AAAA,EACnC,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK;AAAA,QAClC,CAAC,aAAa,GAAG,MAAM,MAAM,GAAG,KAAK,aAAa;AAAA,MACpD;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEA,IAAM,cAAc,YAAY;AAAA,EAC9B,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK,EAAE,GAAG;AAAA,QACvC,CAAC,aAAa,GAAG,MAAM,MAAM;AAAA,MAC/B;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEA,IAAM,QAAQ,UAAU;AAAA,EACtB,MAAM;AAAA,IACJ,oBAAoB;AAAA,EACtB;AAAA,EAEA,QAAQ;AAAA,IACN,oBAAoB;AAAA,EACtB;AACF,CAAC;AAEM,IAAM,OAAO,gBAAgB;AAAA,EAClC,MAAM;AAAA,IACJ,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,WAAW;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MAEA,WAAW;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MAEA,WAAW;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,IAAM,SAAS,gBAAgB;AAAA,EACpC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,QAAQ;AAAA,IACR,cAAc,MAAM;AAAA,IAEpB,UAAU;AAAA,IAEV,YAAY;AAAA,IAEZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IAEA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MAEA,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MAEA,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MAEA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,QACT,WAAW;AAAA,QACX,iBAAiB,OAAO,aAAa;AAAA,QACrC,OAAO,OAAO,aAAa;AAAA,QAE3B,aAAa;AAAA,UACX,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,UAEzC,OAAO,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,UAE7C,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,WAAW,uBAAuB,aAAa;AAAA,QAC/C,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAAA,QAC9C,OAAO,OAAO,MAAM,MAAM,UAAU;AAAA,QAEpC,aAAa;AAAA,UACX,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,UAEzC,OAAO,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,UAE7C,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,YAAY;AAAA,QAEZ,OAAO,OAAO,MAAM,MAAM,UAAU;AAAA,QAEpC,UAAU;AAAA,UACR,iBAAiB,QAAQ,aAAa;AAAA,UAEtC,OAAO,OAAO,aAAa;AAAA,QAC7B;AAAA,QAEA,aAAa;AAAA,UACX,OAAO,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,UAE7C,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,WAAW;AAAA,QACX,iBAAiB,QAAQ,aAAa;AAAA,QACtC,gBAAgB;AAAA,QAEhB,OAAO,OAAO,MAAM,MAAM,UAAU;AAAA,QAEpC,aAAa;AAAA,UACX,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,UAEzC,OAAO,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,UAE7C,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,WAAW;AAAA,UACT,SAAS;AAAA,UACT,UAAU;AAAA,UACV,OAAO;AAAA,UAEP,YACE;AAAA,UACF,gBAAgB;AAAA,UAEhB,WAAW,GAAG,KAAK;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,IAAM,OAAO,MAAM;AAAA,EACxB,YAAY;AACd,CAAC;AAED,YAAY,GAAG,IAAI,QAAQ;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AAAA,EAEZ,eAAe;AACjB,CAAC;AAED,YAAY,GAAG,OAAO,WAAW,IAAI,QAAQ;AAAA,EAC3C,OAAO;AAAA,EACP,QAAQ;AACV,CAAC;",
+  "names": []
+}

package/dist/chunk-SMSD7KQC.mjs

@@ -0,0 +1,65 @@
+import {
+  navigationBarContainer
+} from "./chunk-LB2ZL6PH.mjs";
+import {
+  recipeWithLayer,
+  styleWithLayer
+} from "./chunk-3DOILUMO.mjs";
+import {
+  theme
+} from "./chunk-MBHPGYUE.mjs";
+
+// src/components/Navigation/NavigationDrawer.css.ts
+var narrow = styleWithLayer({
+  display: "none",
+  "@container": {
+    [`${navigationBarContainer} (max-width: 800px)`]: {
+      display: "block"
+    }
+  }
+});
+var wide = styleWithLayer({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.5em",
+  flexGrow: "1",
+  "@container": {
+    [`${navigationBarContainer} (max-width: 800px)`]: {
+      display: "none"
+    }
+  }
+});
+var popup = recipeWithLayer({
+  base: {
+    position: "absolute",
+    top: "100%",
+    height: "calc(100vh - 100%)",
+    left: "0",
+    width: "100%",
+    zIndex: "100",
+    maxHeight: "100vh",
+    padding: "0.75em",
+    borderBottom: `1px solid rgb(${theme.color.border})`,
+    backgroundColor: `rgb(${theme.color.background})`,
+    transition: "opacity 0.2s ease"
+  },
+  variants: {
+    isVisible: {
+      true: {
+        opacity: "1"
+      },
+      false: {
+        opacity: "0",
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+
+export {
+  narrow,
+  wide,
+  popup
+};
+//# sourceMappingURL=chunk-SMSD7KQC.mjs.map

package/dist/chunk-SMSD7KQC.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Navigation/NavigationDrawer.css.ts"],
+  "sourcesContent": ["import { recipeWithLayer, styleWithLayer } from '@/styleUtils';\nimport { theme } from '@/themes';\n\nimport { navigationBarContainer } from './NavigationBar.css';\n\nexport const narrow = styleWithLayer({\n  display: 'none',\n\n  '@container': {\n    [`${navigationBarContainer} (max-width: 800px)`]: {\n      display: 'block',\n    },\n  },\n});\n\nexport const wide = styleWithLayer({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: '0.5em',\n  flexGrow: '1',\n\n  '@container': {\n    [`${navigationBarContainer} (max-width: 800px)`]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const popup = recipeWithLayer({\n  base: {\n    position: 'absolute',\n    top: '100%',\n    height: 'calc(100vh - 100%)',\n    left: '0',\n    width: '100%',\n    zIndex: '100',\n\n    maxHeight: '100vh',\n    padding: '0.75em',\n    borderBottom: `1px solid rgb(${theme.color.border})`,\n\n    backgroundColor: `rgb(${theme.color.background})`,\n\n    transition: 'opacity 0.2s ease',\n  },\n\n  variants: {\n    isVisible: {\n      true: {\n        opacity: '1',\n      },\n\n      false: {\n        opacity: '0',\n\n        pointerEvents: 'none',\n      },\n    },\n  },\n});\n"],
+  "mappings": ";;;;;;;;;;;;AAKO,IAAM,SAAS,eAAe;AAAA,EACnC,SAAS;AAAA,EAET,cAAc;AAAA,IACZ,CAAC,GAAG,sBAAsB,qBAAqB,GAAG;AAAA,MAChD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,IAAM,OAAO,eAAe;AAAA,EACjC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,UAAU;AAAA,EAEV,cAAc;AAAA,IACZ,CAAC,GAAG,sBAAsB,qBAAqB,GAAG;AAAA,MAChD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,IAAM,QAAQ,gBAAgB;AAAA,EACnC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc,iBAAiB,MAAM,MAAM,MAAM;AAAA,IAEjD,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAAA,IAE9C,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MAEA,OAAO;AAAA,QACL,SAAS;AAAA,QAET,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "names": []
+}