@deepnoid/ui 1.0.16 → 1.0.18

package/dist/tailwind-config/styles/tokens/theme.css

@@ -0,0 +1,177 @@
+/* Fallback for bundlers that do not run Tailwind's CSS transform on dependency CSS. */
+:root,
+:host {
+  /* Fonts */
+  --font-sans:
+    "NanumSquare", "-apple-system", ".SFNSText-Regular", "San Francisco", "BlinkMacSystemFont", "Segoe UI",
+    "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+  --font-nanumsquare:
+    "NanumSquare", "-apple-system", ".SFNSText-Regular", "San Francisco", "BlinkMacSystemFont", "Segoe UI",
+    "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+
+  /* Border Radius */
+  --radius-2: 2px;
+  --radius-5: 5px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-2xl: 20px;
+  --radius-none: 0;
+  --radius-full: 9999px;
+
+  /* Spacing */
+  --spacing-5: 5px;
+  --spacing-10: 10px;
+  --spacing-20: 20px;
+  --spacing-30: 30px;
+  --spacing-sm: 4px;
+  --spacing-md: 6px;
+  --spacing-lg: 8px;
+  --spacing-xl: 10px;
+
+  /* Shadows */
+  --shadow-border-1: inner 0 0 0 1px inset;
+  --shadow-border-2: inner 0 0 0 2px inset;
+  --shadow-border-3: inner 0 0 0 3px inset;
+  --shadow-border-4: inner 0 0 0 4px inset;
+  --shadow-border-5: inner 0 0 0 5px inset;
+  --shadow-border-6: inner 0 0 0 6px inset;
+  --shadow-border-7: inner 0 0 0 7px inset;
+  --shadow-border-8: inner 0 0 0 8px inset;
+  --shadow-border-9: inner 0 0 0 9px inset;
+  --shadow-border-10: inner 0 0 0 10px inset;
+  --shadow-inner: inset 0 4px 8px 0 rgba(36, 39, 44, 0.2);
+  --shadow-inner-sm: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  --shadow-inner-md: inset 0 6px 12px 0 rgba(0, 0, 0, 0.2);
+  --shadow-inner-lg: inset 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  --shadow-inner-xl: inset 0 10px 20px 0 rgba(0, 0, 0, 0.2);
+  --shadow-drop: 0 20px 40px 0 rgba(36, 39, 44, 0.2);
+  --shadow-drop-sm: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+  --shadow-drop-md: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
+  --shadow-drop-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
+  --shadow-drop-xl: 0 0px 60px 0 rgba(0, 0, 0, 0.2);
+
+  /* Font Sizes */
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --text-h1: 40px;
+  --text-h1--line-height: normal;
+  --text-h1--font-weight: var(--font-weight-bold);
+  --text-h2: 34px;
+  --text-h2--line-height: normal;
+  --text-h2--font-weight: var(--font-weight-bold);
+  --text-h3: 28px;
+  --text-h3--line-height: normal;
+  --text-h3--font-weight: var(--font-weight-bold);
+  --text-h4: 24px;
+  --text-h4--line-height: normal;
+  --text-h4--font-weight: var(--font-weight-bold);
+  --text-h5: 20px;
+  --text-h5--line-height: normal;
+  --text-h5--font-weight: var(--font-weight-semibold);
+  --text-sm: 12px;
+  --text-sm--line-height: 18px;
+  --text-sm--font-weight: var(--font-weight-regular);
+  --text-md: 14px;
+  --text-md--line-height: 21px;
+  --text-md--font-weight: var(--font-weight-regular);
+  --text-lg: 16px;
+  --text-lg--line-height: 24px;
+  --text-lg--font-weight: var(--font-weight-regular);
+  --text-xl: 18px;
+  --text-xl--line-height: 27px;
+  --text-xl--font-weight: var(--font-weight-regular);
+  --text-2xl: 24px;
+  --text-2xl--line-height: normal;
+  --text-2xl--font-weight: var(--font-weight-regular);
+}
+
+@theme {
+  /* Fonts */
+  --font-sans:
+    "NanumSquare", "-apple-system", ".SFNSText-Regular", "San Francisco", "BlinkMacSystemFont", "Segoe UI",
+    "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+  --font-nanumsquare:
+    "NanumSquare", "-apple-system", ".SFNSText-Regular", "San Francisco", "BlinkMacSystemFont", "Segoe UI",
+    "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+
+  /* Border Radius */
+  --radius-2: 2px;
+  --radius-5: 5px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-2xl: 20px;
+  --radius-none: 0;
+  --radius-full: 9999px;
+
+  /* Spacing */
+  --spacing-5: 5px;
+  --spacing-10: 10px;
+  --spacing-20: 20px;
+  --spacing-30: 30px;
+  --spacing-sm: 4px;
+  --spacing-md: 6px;
+  --spacing-lg: 8px;
+  --spacing-xl: 10px;
+
+  /* Shadows */
+  --shadow-border-1: inner 0 0 0 1px inset;
+  --shadow-border-2: inner 0 0 0 2px inset;
+  --shadow-border-3: inner 0 0 0 3px inset;
+  --shadow-border-4: inner 0 0 0 4px inset;
+  --shadow-border-5: inner 0 0 0 5px inset;
+  --shadow-border-6: inner 0 0 0 6px inset;
+  --shadow-border-7: inner 0 0 0 7px inset;
+  --shadow-border-8: inner 0 0 0 8px inset;
+  --shadow-border-9: inner 0 0 0 9px inset;
+  --shadow-border-10: inner 0 0 0 10px inset;
+  --shadow-inner: inset 0 4px 8px 0 rgba(36, 39, 44, 0.2);
+  --shadow-inner-sm: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  --shadow-inner-md: inset 0 6px 12px 0 rgba(0, 0, 0, 0.2);
+  --shadow-inner-lg: inset 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  --shadow-inner-xl: inset 0 10px 20px 0 rgba(0, 0, 0, 0.2);
+  --shadow-drop: 0 20px 40px 0 rgba(36, 39, 44, 0.2);
+  --shadow-drop-sm: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+  --shadow-drop-md: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
+  --shadow-drop-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
+  --shadow-drop-xl: 0 0px 60px 0 rgba(0, 0, 0, 0.2);
+
+  /* Font Sizes */
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --text-h1: 40px;
+  --text-h1--line-height: normal;
+  --text-h1--font-weight: var(--font-weight-bold);
+  --text-h2: 34px;
+  --text-h2--line-height: normal;
+  --text-h2--font-weight: var(--font-weight-bold);
+  --text-h3: 28px;
+  --text-h3--line-height: normal;
+  --text-h3--font-weight: var(--font-weight-bold);
+  --text-h4: 24px;
+  --text-h4--line-height: normal;
+  --text-h4--font-weight: var(--font-weight-bold);
+  --text-h5: 20px;
+  --text-h5--line-height: normal;
+  --text-h5--font-weight: var(--font-weight-semibold);
+  --text-sm: 12px;
+  --text-sm--line-height: 18px;
+  --text-sm--font-weight: var(--font-weight-regular);
+  --text-md: 14px;
+  --text-md--line-height: 21px;
+  --text-md--font-weight: var(--font-weight-regular);
+  --text-lg: 16px;
+  --text-lg--line-height: 24px;
+  --text-lg--font-weight: var(--font-weight-regular);
+  --text-xl: 18px;
+  --text-xl--line-height: 27px;
+  --text-xl--font-weight: var(--font-weight-regular);
+  --text-2xl: 24px;
+  --text-2xl--line-height: normal;
+  --text-2xl--font-weight: var(--font-weight-regular);
+}

package/dist/tailwind-config/styles/utilities/scrollbar.css

@@ -0,0 +1,127 @@
+.tw-scrollbar-hide {
+  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
+}
+
+.tw-scrollbar-sm {
+  &::-webkit-scrollbar {
+    width: 8px !important;
+    height: 8px !important;
+  }
+}
+.tw-scrollbar-sm.tw-scrollbar-plain::-webkit-scrollbar-button {
+  width: 8px !important;
+  height: 8px !important;
+}
+.tw-scrollbar-sm.tw-scrollbar-plain::-webkit-scrollbar-button:vertical {
+  background-size: 3.56px 2.67px !important;
+}
+.tw-scrollbar-sm.tw-scrollbar-plain::-webkit-scrollbar-button:horizontal {
+  background-size: 2.67px 3.56px !important;
+}
+
+.tw-scrollbar-md {
+  &::-webkit-scrollbar {
+    width: 10px !important;
+    height: 10px !important;
+  }
+}
+.tw-scrollbar-md.tw-scrollbar-plain::-webkit-scrollbar-button {
+  width: 10px !important;
+  height: 10px !important;
+}
+.tw-scrollbar-md.tw-scrollbar-plain::-webkit-scrollbar-button:vertical {
+  background-size: 4.44px 3.33px !important;
+}
+.tw-scrollbar-md.tw-scrollbar-plain::-webkit-scrollbar-button:horizontal {
+  background-size: 3.33px 4.44px !important;
+}
+
+.tw-scrollbar-lg {
+  &::-webkit-scrollbar {
+    width: 12px !important;
+    height: 12px !important;
+  }
+}
+.tw-scrollbar-lg.tw-scrollbar-plain::-webkit-scrollbar-button {
+  width: 12px !important;
+  height: 12px !important;
+}
+.tw-scrollbar-lg.tw-scrollbar-plain::-webkit-scrollbar-button:vertical {
+  background-size: 5.33px 4px !important;
+}
+.tw-scrollbar-lg.tw-scrollbar-plain::-webkit-scrollbar-button:horizontal {
+  background-size: 4px 5.33px !important;
+}
+
+.tw-scrollbar-base {
+  &::-webkit-scrollbar-thumb {
+    border: 1px solid transparent !important;
+    background-clip: padding-box !important;
+    border-radius: 100px !important;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-neutral-soft) !important;
+  }
+}
+
+.tw-scrollbar-plain {
+  scrollbar-color: var(--color-neutral-soft) !important;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-trans-soft) !important;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--color-trans-soft) !important;
+  }
+
+  &::-webkit-scrollbar-button {
+    background-color: var(--color-neutral-soft) !important;
+    color: var(--color-neutral-main) !important;
+  }
+
+  /* Webkit custom scrollbar arrows standard fallback simulation */
+  &::-webkit-scrollbar-button:vertical:decrement {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 8 12 6' fill='%23808488'%3E%3Cpath d='M12 8l6 6H6z'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+  }
+  &::-webkit-scrollbar-button:vertical:increment {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 10 12 6' fill='%23808488'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+  }
+  &::-webkit-scrollbar-button:horizontal:decrement {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 6 6 12' fill='%23808488'%3E%3Cpath d='M8 12l6-6v12z'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+  }
+  &::-webkit-scrollbar-button:horizontal:increment {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 6 6 12' fill='%23808488'%3E%3Cpath d='M16 12l-6 6V6z'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+  }
+}
+
+.tw-scrollbar-adorn {
+  scrollbar-color: var(--color-primary-main) !important;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-primary-main) !important;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--color-primary-main) !important;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
@@ -23,10 +23,12 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup src --dts && yarn copy:font && yarn copy:css",
-    "build:fast": "tsup src && yarn copy:font && yarn copy:css",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup src --dts && yarn copy:font && yarn copy:style && yarn copy:tailwind-config",
+    "build:fast": "tsup src && yarn copy:font && yarn copy:style && yarn copy:tailwind-config",
     "clean": "rm -rf .turbo",
-    "copy:css": "copyfiles -u 1 src/style.css dist",
+    "copy:style": "node scripts/copy-style.mjs",
+    "copy:css": "yarn copy:style",
+    "copy:tailwind-config": "node scripts/copy-tailwind-config.mjs",
     "copy:font": "copyfiles -u 2 src/fonts/**/* dist/fonts",
     "deploy:npm": "npm publish --access=public",
     "lint": "TIMING=1 eslint \"**/*.{ts,tsx,js,jsx}\" --fix",
@@ -34,7 +36,6 @@
     "publish:npm": "npm version patch --no-git-tag-version && npm publish --access=public"
   },
   "dependencies": {
-    "@deepnoid/tailwind-config": "*",
     "@emotion/is-prop-valid": "^1.3.1",
     "framer-motion": "^12.23.6",
     "react": "^19.1.0",

package/dist/{chunk-PRLKKUBY.mjs → chunk-BA7IXGUO.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  ripple_default
-} from "./chunk-LXHUO6VM.mjs";
 import {
   useRipple
 } from "./chunk-SZL743JC.mjs";
+import {
+  ripple_default
+} from "./chunk-LXHUO6VM.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";

package/dist/{chunk-XTMOAGLY.mjs → chunk-J4QVGC54.mjs}

@@ -2,12 +2,12 @@
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";
-import {
-  avatar_default
-} from "./chunk-D3DKXTTY.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  avatar_default
+} from "./chunk-D3DKXTTY.mjs";
 import {
   tv
 } from "./chunk-UP6RPQDX.mjs";

package/dist/{chunk-7U7FM6I6.mjs → chunk-LFPED3UH.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  ripple_default
-} from "./chunk-LXHUO6VM.mjs";
 import {
   useRipple
 } from "./chunk-SZL743JC.mjs";
+import {
+  ripple_default
+} from "./chunk-LXHUO6VM.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";

package/dist/{chunk-KE26ONWZ.mjs → chunk-S7UE2MJZ.mjs}

@@ -1,13 +1,13 @@
 "use client";
-import {
-  useIsMounted
-} from "./chunk-3V4HT2K5.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-UP6RPQDX.mjs";
+import {
+  useIsMounted
+} from "./chunk-3V4HT2K5.mjs";
 
 // src/components/progress/progress.tsx
 import { useMemo } from "react";