@deepnoid/ui 0.0.112 → 0.1.0

package/dist/chunk-XTGRSVYO.mjs

@@ -0,0 +1,221 @@
+"use client";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/checkbox/checkbox.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckBox = forwardRef((originalProps, ref) => {
+  var _a, _b;
+  const [props, variantProps] = mapPropsVariants(originalProps, checkboxStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = useMemo(() => checkboxStyle({ ...variantProps }), [variantProps]);
+  const isSelected = (_b = (_a = inputProps.checked) != null ? _a : inputProps.defaultChecked) != null ? _b : false;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("input", { ...inputProps, type: "checkbox", ref }) }),
+        /* @__PURE__ */ jsx("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ jsx(
+          CheckBoxIcon,
+          {
+            size: variantProps.size,
+            isSelected,
+            className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
+          }
+        ) }),
+        children && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children })
+      ]
+    }
+  );
+});
+CheckBox.displayName = "CheckBox";
+var checkbox_default = CheckBox;
+var CheckBoxIcon = ({ size, isSelected, className }) => {
+  const strokeWidth = useMemo(() => {
+    switch (size) {
+      case "sm":
+        return 1;
+      case "md":
+        return 1.25;
+      case "lg":
+        return 1.5;
+      case "xl":
+        return 1.75;
+      default:
+        return 1.25;
+    }
+  }, [size]);
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 13 13", fill: "none", className, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.16667 6.90123L5.63334 10.1111L10.8333 2.88889",
+      stroke: "white",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: isSelected ? { transition: "stroke-dashoffset 250ms linear 0.2s" } : {}
+    }
+  ) });
+};
+var checkboxStyle = tv({
+  slots: {
+    base: ["group", "relative", "inline-flex", "items-center", "cursor-pointer"],
+    wrapper: [
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "before:content-['']",
+      "before:bg-body-background",
+      "before:absolute",
+      "before:inset-0",
+      "before:border",
+      "before:border-neutral-light",
+      "before:box-border",
+      "before:z-10",
+      "after:content-['']",
+      "after:absolute",
+      "after:inset-0",
+      "after:scale-50",
+      "after:opacity-0",
+      "group-has-[:checked]:after:scale-100",
+      "group-has-[:checked]:after:opacity-100",
+      "before:transition duration-200"
+    ],
+    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-neutral-light"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["relative", "text-body-foreground", "select-none"]
+  },
+  variants: {
+    color: {
+      primary: {
+        wrapper: [
+          "group-has-[:checked]:before:border-primary-main",
+          "group-has-[:checked]:before:bg-primary-main",
+          "group-hover:before:border-primary-light",
+          "group-hover:before:bg-primary-soft"
+        ]
+      },
+      secondary: {
+        wrapper: [
+          "group-has-[:checked]:before:border-secondary-main",
+          "group-has-[:checked]:before:bg-secondary-main",
+          "group-hover:before:border-secondary-light",
+          "group-hover:before:bg-secondary-soft"
+        ]
+      },
+      neutral: {
+        wrapper: [
+          "group-has-[:checked]:before:border-neutral-main",
+          "group-has-[:checked]:before:bg-neutral-main",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
+        ]
+      }
+    },
+    size: {
+      sm: {
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[12px]",
+          "h-[12px]",
+          "rounded-[2px]",
+          "before:border-sm",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-sm"],
+        icon: ["w-[10px]", "h-[10px]"]
+      },
+      md: {
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[15px]",
+          "h-[15px]",
+          "rounded-[2px]",
+          "before:border-md",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-md"],
+        icon: ["w-[13px]", "h-[13px]"]
+      },
+      lg: {
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[18px]",
+          "h-[18px]",
+          "rounded-[4px]",
+          "before:border-lg",
+          "before:rounded-[4px]",
+          "after:rounded-[4px]"
+        ],
+        label: ["text-lg"],
+        icon: ["w-[16px]", "h-[16px]"]
+      },
+      xl: {
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[21px]",
+          "h-[21px]",
+          "rounded-[4px]",
+          "before:border-xl",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-xl"],
+        icon: ["w-[19px]", "h-[19px]"]
+      }
+    },
+    isInvalid: {
+      true: {
+        wrapper: [
+          "before:border-danger-main",
+          "group-has-[:checked]:before:bg-danger-main",
+          "group-has-[:checked]:before:border-danger-main",
+          "group-hover:before:border-danger-light",
+          "group-hover:before:bg-danger-soft"
+        ],
+        label: ["text-danger-main"]
+      }
+    },
+    isDisabled: {
+      true: {
+        base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
+        wrapper: [
+          "cursor-not-allowed",
+          "after:bg-neutral-soft",
+          "before:border-neutral-light",
+          "before:bg-neutral-soft",
+          "group-has-[:checked]:before:bg-neutral-soft",
+          "group-has-[:checked]:before:border-neutral-light",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
+        ],
+        label: ["text-neutral-light"],
+        icon: ["text-neutral-light", "opacity-0"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false
+  }
+});
+
+export {
+  checkbox_default
+};

package/dist/{chunk-QGZEHOKA.mjs → chunk-YGOEKSNZ.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   table_body_default
-} from "./chunk-VWD26TIQ.mjs";
+} from "./chunk-5IQKKLZY.mjs";
 import {
   table_head_default
-} from "./chunk-PO3ADNA5.mjs";
+} from "./chunk-PFYYYUJW.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
@@ -183,6 +183,9 @@ var table = tv({
       },
       lg: {
         tr: "h-[50px] text-lg"
+      },
+      xl: {
+        tr: "h-[50px] text-xl"
       }
     },
     color: {

package/dist/chunk-Z74QNVPG.mjs

@@ -0,0 +1,127 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/switch/switch.tsx
+import { forwardRef, useMemo } from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Switch = forwardRef((originalProps, ref) => {
+  const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
+  const { size, color, isDisabled, disableAnimation, id, classNames, ...inputProps } = { ...rawProps, ...variantProps };
+  const slots = useMemo(() => switchStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ jsxs("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsx("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
+    /* @__PURE__ */ jsx("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ jsx("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ jsx("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
+  ] });
+});
+Switch.displayName = "Switch";
+var switch_default = Switch;
+var switchStyle = tv({
+  slots: {
+    base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
+    outerWrapper: [
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "flex-shrink-0",
+      "bg-neutral-soft",
+      "overflow-hidden",
+      "rounded-full"
+    ],
+    wrapper: [
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "flex-shrink-0",
+      "overflow-hidden",
+      "bg-neutral-light",
+      "rounded-full"
+    ],
+    thumb: [
+      "z-10",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-white",
+      "shadow-small",
+      "rounded-full",
+      "origin-right"
+    ]
+  },
+  variants: {
+    size: {
+      sm: {
+        outerWrapper: ["w-[32px]", "h-[16px]", "p-[2px]"],
+        wrapper: ["w-[28px]", "h-[12px]", "p-[2px]"],
+        thumb: ["w-[8px]", "h-[8px]", "group-has-[:checked]/switch:ml-[16px]"]
+      },
+      md: {
+        outerWrapper: ["w-[48px]", "h-[24px]", "px-[3px]"],
+        wrapper: ["w-[42px]", "h-[16px]", "px-[3px]"],
+        thumb: ["w-[12px]", "h-[12px]", "group-has-[:checked]/switch:ml-[24px]"]
+      },
+      lg: {
+        outerWrapper: ["w-[64px]", "h-[32px]", "px-[4px]"],
+        wrapper: ["w-[56px]", "h-[24px]", "px-[4px]"],
+        thumb: ["w-[16px]", "h-[16px]", "group-has-[:checked]/switch:ml-[32px]"]
+      },
+      xl: {
+        outerWrapper: ["w-[80px]", "h-[40px]", "px-[5px]"],
+        wrapper: ["w-[70px]", "h-[30px]", "px-[5px]"],
+        thumb: ["w-[20px]", "h-[20px]", "group-has-[:checked]/switch:ml-[40px]"]
+      }
+    },
+    color: {
+      primary: {},
+      secondary: {}
+    },
+    isDisabled: {
+      true: {
+        base: ["!pointer-events-none"],
+        outerWrapper: ["!bg-neutral-soft"],
+        wrapper: ["!bg-neutral-light", "!group-has-[:checked]/switch:bg-neutral-light", "!hover:bg-neutral-light"],
+        thumb: ["!bg-trans-light"]
+      }
+    },
+    disableAnimation: {
+      true: {
+        wrapper: ["transition-none"],
+        thumb: ["transition-none"]
+      },
+      false: {
+        wrapper: ["transition-background"],
+        thumb: ["transition-all"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      class: {
+        outerWrapper: ["group-has-[:checked]/switch:bg-primary-light"],
+        wrapper: ["group-has-[:checked]/switch:bg-primary-main", "hover:bg-primary-light"]
+      }
+    },
+    {
+      color: "secondary",
+      class: {
+        outerWrapper: ["group-has-[:checked]/switch:bg-secondary-light"],
+        wrapper: ["group-has-[:checked]/switch:bg-secondary-main", "hover:bg-secondary-light"]
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    isDisabled: false,
+    disableAnimation: false
+  }
+});
+
+export {
+  switch_default
+};

package/dist/{chunk-KCBBBRSF.mjs → chunk-ZMOAFSYE.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getTooltipPosition
-} from "./chunk-ODMRJXLJ.mjs";
+} from "./chunk-WSIADHVC.mjs";
 
 // src/components/tooltip/useTooltip.ts
 import { useState, useEffect, useRef } from "react";

package/dist/components/avatar/avatar.d.mts

@@ -0,0 +1,80 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.mjs';
+
+interface AvatarProps extends VariantProps<typeof avatarStyle> {
+    classNames?: SlotsToClasses<AvatarSlots>;
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const avatarStyle: tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, {
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, unknown, unknown, undefined>>;
+type AvatarSlots = keyof ReturnType<typeof avatarStyle>;
+
+export { type AvatarProps, Avatar as default };

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,80 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.js';
+
+interface AvatarProps extends VariantProps<typeof avatarStyle> {
+    classNames?: SlotsToClasses<AvatarSlots>;
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const avatarStyle: tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, {
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, unknown, unknown, undefined>>;
+type AvatarSlots = keyof ReturnType<typeof avatarStyle>;
+
+export { type AvatarProps, Avatar as default };