@deepnoid/ui 0.0.112 → 0.1.0

package/dist/tooltip-utils-DO3LQaVM.d.mts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+type TargetRect = {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+interface UseTooltipProps {
+    placement: TooltipPlacement;
+    offset: number;
+    delay: number;
+    targetRect: TargetRect | null;
+}
+declare const useTooltip: ({ placement, offset, targetRect }: UseTooltipProps) => {
+    tooltipPosition: {
+        x: number;
+        y: number;
+    };
+    tooltipRef: react.RefObject<HTMLDivElement | null>;
+};
+
+type TooltipPlacement = "top" | "left" | "right" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+declare const getTooltipPosition: (placement: TooltipPlacement, targetRect: TargetRect, width: number, height: number, offset: number) => {
+    tooltipX: number;
+    tooltipY: number;
+};
+/**
+ * 툴팁 꼬리(Tail)의 위치를 결정하는 Tailwind 클래스 문자열을 반환합니다.
+ *
+ * Tailwind 유틸리티 클래스를 사용하여 툴팁 내부 삼각형(또는 회전된 정사각형)이
+ * 툴팁 박스 외부에 적절하게 배치되도록 합니다.
+ *
+ * @param placement - 툴팁이 표시될 위치 (top, bottom, left, right 등)
+ * @returns 해당 위치에 맞는 Tailwind 클래스 문자열
+ */
+declare const getTailClassName: (placement: TooltipPlacement) => "" | "bottom-[-4px] left-1/2 -translate-x-1/2" | "top-[-4px] left-1/2 -translate-x-1/2" | "right-[-4px] top-1/2 -translate-y-1/2" | "left-[-4px] top-1/2 -translate-y-1/2" | "bottom-[-4px] left-[12px]" | "bottom-[-4px] right-[12px]" | "top-[-4px] left-[12px]" | "top-[-4px] right-[12px]" | "right-[-4px] top-[12px]" | "right-[-4px] bottom-[12px]" | "left-[-4px] top-[12px]" | "left-[-4px] bottom-[12px]";
+/**
+ * 툴팁 꼬리(Tail)의 위치를 결정하는 인라인 스타일 객체를 반환합니다.
+ *
+ * Tailwind 클래스만으로 부족하거나 조건부 제어가 필요한 경우,
+ * 해당 위치에 맞는 스타일을 직접 적용할 수 있도록 합니다.
+ *
+ * @param placement - 툴팁이 표시될 위치 (top, bottom, left, right 등)
+ * @returns 해당 위치에 맞는 CSSProperties 객체
+ */
+declare const getTailStyles: (placement: TooltipPlacement) => CSSProperties;
+
+export { type TooltipPlacement as T, type TargetRect as a, getTailClassName as b, getTailStyles as c, getTooltipPosition as g, useTooltip as u };

package/dist/tooltip-utils-DO3LQaVM.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+type TargetRect = {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+interface UseTooltipProps {
+    placement: TooltipPlacement;
+    offset: number;
+    delay: number;
+    targetRect: TargetRect | null;
+}
+declare const useTooltip: ({ placement, offset, targetRect }: UseTooltipProps) => {
+    tooltipPosition: {
+        x: number;
+        y: number;
+    };
+    tooltipRef: react.RefObject<HTMLDivElement | null>;
+};
+
+type TooltipPlacement = "top" | "left" | "right" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+declare const getTooltipPosition: (placement: TooltipPlacement, targetRect: TargetRect, width: number, height: number, offset: number) => {
+    tooltipX: number;
+    tooltipY: number;
+};
+/**
+ * 툴팁 꼬리(Tail)의 위치를 결정하는 Tailwind 클래스 문자열을 반환합니다.
+ *
+ * Tailwind 유틸리티 클래스를 사용하여 툴팁 내부 삼각형(또는 회전된 정사각형)이
+ * 툴팁 박스 외부에 적절하게 배치되도록 합니다.
+ *
+ * @param placement - 툴팁이 표시될 위치 (top, bottom, left, right 등)
+ * @returns 해당 위치에 맞는 Tailwind 클래스 문자열
+ */
+declare const getTailClassName: (placement: TooltipPlacement) => "" | "bottom-[-4px] left-1/2 -translate-x-1/2" | "top-[-4px] left-1/2 -translate-x-1/2" | "right-[-4px] top-1/2 -translate-y-1/2" | "left-[-4px] top-1/2 -translate-y-1/2" | "bottom-[-4px] left-[12px]" | "bottom-[-4px] right-[12px]" | "top-[-4px] left-[12px]" | "top-[-4px] right-[12px]" | "right-[-4px] top-[12px]" | "right-[-4px] bottom-[12px]" | "left-[-4px] top-[12px]" | "left-[-4px] bottom-[12px]";
+/**
+ * 툴팁 꼬리(Tail)의 위치를 결정하는 인라인 스타일 객체를 반환합니다.
+ *
+ * Tailwind 클래스만으로 부족하거나 조건부 제어가 필요한 경우,
+ * 해당 위치에 맞는 스타일을 직접 적용할 수 있도록 합니다.
+ *
+ * @param placement - 툴팁이 표시될 위치 (top, bottom, left, right 등)
+ * @returns 해당 위치에 맞는 CSSProperties 객체
+ */
+declare const getTailStyles: (placement: TooltipPlacement) => CSSProperties;
+
+export { type TooltipPlacement as T, type TargetRect as a, getTailClassName as b, getTailStyles as c, getTooltipPosition as g, useTooltip as u };

package/dist/utils/clsx.mjs

@@ -2,7 +2,7 @@
 import {
   clsx
 } from "../chunk-27Y6K5NK.mjs";
-import "../chunk-IZ6II3QA.mjs";
+import "../chunk-AC6TWLRT.mjs";
 export {
   clsx
 };

package/dist/utils/props.mjs

@@ -2,7 +2,7 @@
 import {
   mapPropsVariants
 } from "../chunk-E3G5QXSH.mjs";
-import "../chunk-IZ6II3QA.mjs";
+import "../chunk-AC6TWLRT.mjs";
 export {
   mapPropsVariants
 };

package/dist/utils/tailwind-variants.d.mts

@@ -1,26 +1,6 @@
 import * as tailwind_variants from 'tailwind-variants';
 export { VariantProps } from 'tailwind-variants';
 
-declare const tv: tailwind_variants.CreateTV<{
-    twMergeConfig: {
-        classGroups: {
-            fontSize: {
-                text: string[];
-            }[];
-            borderRadius: {
-                rounded: string[];
-            }[];
-            boxShadow: {
-                shadow: string[];
-            }[];
-            padding: {
-                p: string[];
-            }[];
-            gap: {
-                gap: string[];
-            }[];
-        };
-    };
-}>;
+declare const tv: tailwind_variants.CreateTV;
 
 export { tv };

package/dist/utils/tailwind-variants.d.ts

@@ -1,26 +1,6 @@
 import * as tailwind_variants from 'tailwind-variants';
 export { VariantProps } from 'tailwind-variants';
 
-declare const tv: tailwind_variants.CreateTV<{
-    twMergeConfig: {
-        classGroups: {
-            fontSize: {
-                text: string[];
-            }[];
-            borderRadius: {
-                rounded: string[];
-            }[];
-            boxShadow: {
-                shadow: string[];
-            }[];
-            padding: {
-                p: string[];
-            }[];
-            gap: {
-                gap: string[];
-            }[];
-        };
-    };
-}>;
+declare const tv: tailwind_variants.CreateTV;
 
 export { tv };

package/dist/utils/tailwind-variants.js

@@ -1,9 +1,14 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,8 +21,84 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/util/createPlugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// ../../node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/public/create-plugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    var _createPlugin = /* @__PURE__ */ _interop_require_default(require_createPlugin());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// ../../node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "../../node_modules/tailwindcss/plugin.js"(exports2, module2) {
+    "use strict";
+    var createPlugin = require_create_plugin();
+    module2.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+
 // src/utils/tailwind-variants.ts
 var tailwind_variants_exports = {};
 __export(tailwind_variants_exports, {
@@ -25,19 +106,226 @@ __export(tailwind_variants_exports, {
 });
 module.exports = __toCommonJS(tailwind_variants_exports);
 var import_tailwind_variants = require("tailwind-variants");
-var COMMON_SIZE = ["sm", "md", "lg"];
-var COMMON_RADIUS = ["xlg", "xxlg", "none", "full"];
-var COMMON_FONTSIZE = ["h1", "h2", "h3", "h4", "h5"];
-var COMMON_SHADOW = ["inner", "drop"];
+
+// ../tailwind-config/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// ../tailwind-config/src/typography/font.ts
+var fontSize = {
+  h1: [
+    "40px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ]
+};
+
+// ../tailwind-config/src/animation/slide.ts
+var sliceAnimation = {
+  slideInFromTop: "slideInFromTop 0.5s ease-out",
+  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
+  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
+  slideInFromRight: "slideInFromRight 0.5s ease-out",
+  slideOutToTop: "slideOutToTop 0.5s ease-in",
+  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
+  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
+  slideOutToRight: "slideOutToRight 0.5s ease-in"
+};
+var sliceKeyframe = {
+  slideInFromTop: {
+    "0%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromBottom: {
+    "0%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromLeft: {
+    "0%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromRight: {
+    "0%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideOutToTop: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToBottom: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToLeft: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToRight: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    }
+  }
+};
+
+// ../tailwind-config/src/animation/index.ts
+var animation = { ...sliceAnimation };
+var keyframes = { ...sliceKeyframe };
+
+// ../tailwind-config/src/shadow/index.ts
+var boxShadow = {
+  "border-1": "inner 0 0 0 1px inset",
+  "border-2": "inner 0 0 0 2px inset",
+  "border-3": "inner 0 0 0 3px inset",
+  "border-4": "inner 0 0 0 4px inset",
+  "border-5": "inner 0 0 0 5px inset",
+  "border-6": "inner 0 0 0 6px inset",
+  "border-7": "inner 0 0 0 7px inset",
+  "border-8": "inner 0 0 0 8px inset",
+  "border-9": "inner 0 0 0 9px inset",
+  "border-10": "inner 0 0 0 10px inset",
+  inner: "inset 0 4px 8px 0 rgba(36, 39, 44, 0.2)",
+  drop: "0 20px 40px 0 rgba(36, 39, 44, 0.2)"
+};
+
+// ../tailwind-config/src/border/radius.ts
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px",
+  none: "0",
+  full: "9999px"
+};
+
+// ../tailwind-config/src/space/gap.ts
+var gap = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px"
+};
+
+// src/utils/tailwind-variants.ts
+function typedKeys(obj) {
+  return Object.keys(obj);
+}
+var COMMON_SIZE = ["sm", "md", "lg", "xl"];
 var tv = (0, import_tailwind_variants.createTV)({
-  // twMerge: false,
   twMergeConfig: {
     classGroups: {
-      fontSize: [{ text: [...COMMON_SIZE, ...COMMON_FONTSIZE] }],
-      borderRadius: [{ rounded: [...COMMON_RADIUS, ...COMMON_SIZE] }],
-      boxShadow: [{ shadow: [...COMMON_SHADOW] }],
+      fontSize: [{ text: [...typedKeys(fontSize)] }],
+      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
+      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
       padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...COMMON_SIZE] }]
+      gap: [{ gap: [...typedKeys(gap)] }]
     }
   }
 });

package/dist/utils/tailwind-variants.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   tv
-} from "../chunk-J725QONZ.mjs";
-import "../chunk-IZ6II3QA.mjs";
+} from "../chunk-IE2BRM7Z.mjs";
+import "../chunk-AC6TWLRT.mjs";
 export {
   tv
 };

package/dist/utils/types.d.mts

@@ -1,10 +1,11 @@
-import { ClassValue } from 'tailwind-variants';
-
+type ClassNameValue = ClassNameArray | string | null | undefined | 0 | 0n | false;
+type ClassNameArray = ClassNameValue[];
 /**
  * This Typescript utility transform a list of slots into a list of {slot: classes}
  */
 type SlotsToClasses<S extends string> = {
-    [key in S]?: ClassValue;
+    [key in S]?: ClassNameValue;
 };
+type Size = "sm" | "md" | "lg" | "xl";
 
-export type { SlotsToClasses };
+export type { Size, SlotsToClasses };

package/dist/utils/types.d.ts

@@ -1,10 +1,11 @@
-import { ClassValue } from 'tailwind-variants';
-
+type ClassNameValue = ClassNameArray | string | null | undefined | 0 | 0n | false;
+type ClassNameArray = ClassNameValue[];
 /**
  * This Typescript utility transform a list of slots into a list of {slot: classes}
  */
 type SlotsToClasses<S extends string> = {
-    [key in S]?: ClassValue;
+    [key in S]?: ClassNameValue;
 };
+type Size = "sm" | "md" | "lg" | "xl";
 
-export type { SlotsToClasses };
+export type { Size, SlotsToClasses };

package/package.json

@@ -1,58 +1,55 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.0.112",
+  "version": "0.1.0",
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./fonts/font.css": "./dist/fonts/font.css",
+    "./dev": "./src/index.ts"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsup src --dts",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup src --dts && yarn copy:font",
     "build:fast": "tsup src",
     "clean": "rm -rf .turbo",
+    "copy:font": "copyfiles -u 2 src/fonts/**/* dist/fonts",
     "deploy:npm": "npm publish --access=public",
     "lint": "TIMING=1 eslint \"**/*.{ts,tsx,js,jsx}\" --fix",
-    "publish:npm": "npm version patch --no-git-tag-version && npm publish --access=public",
-    "test": "jest"
-  },
-  "jest": {
-    "testEnvironment": "jsdom"
+    "publish:npm": "npm version patch --no-git-tag-version && npm publish --access=public"
   },
   "dependencies": {
-    "tailwind-variants": "^0.2.0"
+    "framer-motion": "^12.10.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-variants": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-flow": "^7.24.1",
-    "@babel/preset-react": "^7.24.1",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-flow": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@deepnoid/eslint-config": "*",
     "@deepnoid/tailwind-config": "*",
     "@deepnoid/typescript-config": "*",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "@types/react-test-renderer": "^18.0.7",
-    "autoprefixer": "^10.4.17",
-    "babel-jest": "^29.7.0",
-    "eslint": "^8.11.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.35",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "4.8.4"
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "autoprefixer": "^10.4.21",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.56.0",
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0",
+    "framer-motion": ">=12.10.0"
   },
   "publishConfig": {
     "access": "public",

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/tailwind.config.ts

@@ -0,0 +1,7 @@
+
+// import { deepnoidUi } from "@deepnoid/ui";
+
+module.exports = {
+  content: ["./src/**/*.{ts,tsx}"],
+  // plugins: [deepnoidUi()],
+};

package/tsup.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: { js: '"use client";' },
+});