@deepnoid/ui 0.1.55 → 0.1.57

package/dist/components/drawer/drawer.d.mts

@@ -0,0 +1,89 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SlotsToClasses } from '../../utils/types.mjs';
+
+interface DrawerProps extends VariantProps<typeof drawer> {
+    isOpen?: boolean;
+    position?: "left" | "right" | "top" | "bottom";
+    content?: ReactNode | string;
+    isKeyboardDismissDisabled?: boolean;
+    onClose?: () => void;
+    classNames?: SlotsToClasses<DrawerSlots>;
+    backdrop?: boolean;
+}
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+declare const drawer: tailwind_variants.TVReturnType<{
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, undefined, {
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, tailwind_variants.TVReturnType<{
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, undefined, unknown, unknown, undefined>>;
+type DrawerSlots = keyof ReturnType<typeof drawer>;
+
+export { type DrawerProps, Drawer as default };

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,89 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SlotsToClasses } from '../../utils/types.js';
+
+interface DrawerProps extends VariantProps<typeof drawer> {
+    isOpen?: boolean;
+    position?: "left" | "right" | "top" | "bottom";
+    content?: ReactNode | string;
+    isKeyboardDismissDisabled?: boolean;
+    onClose?: () => void;
+    classNames?: SlotsToClasses<DrawerSlots>;
+    backdrop?: boolean;
+}
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+declare const drawer: tailwind_variants.TVReturnType<{
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, undefined, {
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, tailwind_variants.TVReturnType<{
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, undefined, unknown, unknown, undefined>>;
+type DrawerSlots = keyof ReturnType<typeof drawer>;
+
+export { type DrawerProps, Drawer as default };

package/dist/components/drawer/drawer.js

@@ -0,0 +1,544 @@
+"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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/components/drawer/drawer.tsx
+var drawer_exports = {};
+__export(drawer_exports, {
+  default: () => drawer_default
+});
+module.exports = __toCommonJS(drawer_exports);
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+
+// src/utils/tailwind-variants.ts
+var import_tailwind_variants = require("tailwind-variants");
+
+// ../tailwind-config/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// ../tailwind-config/src/typography/font.ts
+var fontSize = {
+  h1: [
+    "40px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      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)({
+  twMergeConfig: {
+    classGroups: {
+      fontSize: [{ text: [...typedKeys(fontSize)] }],
+      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
+      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
+      padding: [{ p: [...COMMON_SIZE] }],
+      gap: [{ gap: [...typedKeys(gap)] }]
+    }
+  }
+});
+
+// src/utils/props.ts
+var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
+  if (!variantKeys) {
+    return [props, {}];
+  }
+  const picked = variantKeys.reduce((acc, key) => {
+    if (key in props) {
+      return { ...acc, [key]: props[key] };
+    } else {
+      return acc;
+    }
+  }, {});
+  if (removeVariantProps) {
+    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
+    return [omitted, picked];
+  } else {
+    return [props, picked];
+  }
+};
+
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
+// src/components/drawer/drawer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Drawer = (0, import_react.forwardRef)((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, drawer.variantKeys);
+  const { classNames, isOpen, content, isKeyboardDismissDisabled = false, onClose, backdrop = true } = localProps;
+  const position = props.position || "right";
+  const [shouldRender, setShouldRender] = (0, import_react.useState)(isOpen);
+  const [isAnimating, setIsAnimating] = (0, import_react.useState)(isOpen);
+  const [isContentAnimating, setIsContentAnimating] = (0, import_react.useState)(isOpen);
+  const slots = (0, import_react.useMemo)(() => drawer(variantProps), [variantProps]);
+  (0, import_react.useEffect)(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setIsContentAnimating(true);
+        }, 50);
+      });
+    } else {
+      setIsContentAnimating(false);
+      setIsAnimating(false);
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+  (0, import_react.useEffect)(() => {
+    if (shouldRender) {
+      document.body.classList.add("overflow-hidden");
+    } else {
+      document.body.classList.remove("overflow-hidden");
+    }
+    if (!isOpen || isKeyboardDismissDisabled) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose == null ? void 0 : onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [shouldRender, isOpen, isKeyboardDismissDisabled, onClose]);
+  const getAnimationClasses = () => {
+    const baseTransition = "transform transition-all duration-300 ease-in-out";
+    if (!isContentAnimating) {
+      switch (position) {
+        case "left":
+          return `${baseTransition} -translate-x-full`;
+        case "right":
+          return `${baseTransition} translate-x-full`;
+        case "top":
+          return `${baseTransition} -translate-y-full`;
+        case "bottom":
+          return `${baseTransition} translate-y-full`;
+        default:
+          return `${baseTransition} translate-x-full`;
+      }
+    }
+    return `${baseTransition} translate-x-0 translate-y-0`;
+  };
+  if (!shouldRender) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: slots.base({
+          class: clsx(
+            classNames == null ? void 0 : classNames.base,
+            isAnimating ? "visible opacity-100" : "invisible opacity-0",
+            "transition-all duration-300 ease-in-out"
+          )
+        }),
+        "aria-labelledby": "drawer",
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          backdrop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: slots.drawerWrapper({
+                class: clsx(classNames == null ? void 0 : classNames.drawerWrapper, getAnimationClasses())
+              }),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: content })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+});
+Drawer.displayName = "Drawer";
+var drawer = tv({
+  slots: {
+    base: ["fixed", "inset-0", "z-50", "flex", "transition-all", "duration-300", "ease-in-out"],
+    drawerWrapper: ["relative", "flex", "flex-col", "bg-white", "shadow-xl", "overflow-hidden", "z-10"],
+    wrapper: ["flex", "flex-col", "h-full", "overflow-y-auto"]
+  },
+  variants: {
+    position: {
+      left: {
+        base: "justify-start",
+        drawerWrapper: "h-full border-r"
+      },
+      right: {
+        base: "justify-end",
+        drawerWrapper: "h-full border-l"
+      },
+      top: {
+        base: "items-start",
+        drawerWrapper: "w-full border-b"
+      },
+      bottom: {
+        base: "items-end",
+        drawerWrapper: "w-full border-t"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: ["top", "bottom"],
+      size: "sm",
+      class: {
+        drawerWrapper: "max-h-[25vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "md",
+      class: {
+        drawerWrapper: "max-h-[40vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "lg",
+      class: {
+        drawerWrapper: "max-h-[60vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "xl",
+      class: {
+        drawerWrapper: "max-h-[80vh] max-w-none w-full"
+      }
+    }
+  ],
+  defaultVariants: {
+    position: "right"
+  }
+});
+var drawer_default = Drawer;