@codecrib/ui 0.0.7 → 0.0.9

package/dist/index.d.cts

@@ -50,9 +50,40 @@ interface CountdownProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Countdown: React.ForwardRefExoticComponent<CountdownProps & React.RefAttributes<HTMLDivElement>>;
 
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: "default" | "success" | "warning" | "error" | "info";
+    size?: "sm" | "md" | "lg";
+    removable?: boolean;
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    removeLabel?: string;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+
+type SelectItem = {
+    value: string;
+    label: React.ReactNode;
+    icon?: string;
+    disabled?: boolean;
+};
+type SelectGroup = {
+    label: string;
+    items: SelectItem[];
+};
+type SelectSource = SelectItem | SelectGroup;
+interface SelectProps {
+    items: SelectSource[];
+    placeholder?: string;
+    multiselect?: boolean;
+    multiline?: boolean;
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    className?: string;
+}
+declare const Select: React.FC<SelectProps>;
+
 /**
  * Utility function to merge class names
  */
 declare function cn(...classes: (string | undefined | null | false)[]): string;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Countdown, type CountdownProps, Icon, type IconProps, Input, type InputProps, cn };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Countdown, type CountdownProps, Icon, type IconProps, Input, type InputProps, Select, type SelectGroup, type SelectItem, type SelectProps, Tag, type TagProps, cn };

package/dist/index.d.ts

@@ -50,9 +50,40 @@ interface CountdownProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Countdown: React.ForwardRefExoticComponent<CountdownProps & React.RefAttributes<HTMLDivElement>>;
 
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: "default" | "success" | "warning" | "error" | "info";
+    size?: "sm" | "md" | "lg";
+    removable?: boolean;
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    removeLabel?: string;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+
+type SelectItem = {
+    value: string;
+    label: React.ReactNode;
+    icon?: string;
+    disabled?: boolean;
+};
+type SelectGroup = {
+    label: string;
+    items: SelectItem[];
+};
+type SelectSource = SelectItem | SelectGroup;
+interface SelectProps {
+    items: SelectSource[];
+    placeholder?: string;
+    multiselect?: boolean;
+    multiline?: boolean;
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    className?: string;
+}
+declare const Select: React.FC<SelectProps>;
+
 /**
  * Utility function to merge class names
  */
 declare function cn(...classes: (string | undefined | null | false)[]): string;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Countdown, type CountdownProps, Icon, type IconProps, Input, type InputProps, cn };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Countdown, type CountdownProps, Icon, type IconProps, Input, type InputProps, Select, type SelectGroup, type SelectItem, type SelectProps, Tag, type TagProps, cn };

package/dist/index.js

@@ -114,6 +114,21 @@ Button.displayName = "Button";
 
 // src/components/Card/Card.tsx
 import * as React2 from "react";
+
+// src/styles/borders.ts
+var radius = {
+  default: "rounded-lg",
+  pill: "rounded-full"
+};
+var border = {
+  base: "border",
+  color: "border-gray-300",
+  focus: "focus:border-primary-500 focus:ring-primary-500",
+  ring: "focus:outline-none focus:ring-2 focus:ring-offset-0"
+};
+var input = `${border.base} ${border.color}`;
+
+// src/components/Card/Card.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: "bg-white",
@@ -126,7 +141,7 @@ var Card = React2.forwardRef(
       "div",
       {
         ref,
-        className: cn("rounded-xl p-6", variantStyles2[variant], className),
+        className: cn(radius.default, "p-6", variantStyles2[variant], className),
         ...props,
         children
       }
@@ -188,8 +203,10 @@ var Input = React3.forwardRef(
           id: inputId,
           ref,
           className: cn(
-            "block w-full rounded-lg border px-4 py-2 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-0 transition-colors",
-            error ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-primary-500 focus:ring-primary-500",
+            "block w-full px-4 py-2 text-gray-900 placeholder:text-gray-400 transition-colors",
+            radius.default,
+            border.base,
+            error ? "border-red-500 focus:border-red-500 focus:ring-red-500" : `${border.color} ${border.focus} ${border.ring}`,
             className
           ),
           ...props
@@ -284,7 +301,7 @@ function formatRemaining(ms) {
 var Countdown = React6.forwardRef(
   ({ deadline, onComplete, className, variant = "primary", size = "md", ...props }, ref) => {
     const target = React6.useMemo(() => parseDeadline(deadline), [deadline]);
-    const variantStyles4 = {
+    const variantStyles5 = {
       primary: "bg-primary-600 text-white",
       secondary: "bg-secondary-600 text-white",
       outline: "border-2 border-primary-600 text-primary-600 bg-transparent",
@@ -313,7 +330,7 @@ var Countdown = React6.forwardRef(
     const remaining = formatRemaining(target - now);
     const appliedVariant = expired ? "expired" : variant;
     const expiredClass = variant === "ghost" ? "text-red-600 bg-transparent" : variant === "outline" ? "border-2 border-red-600 text-red-600 bg-transparent" : "bg-red-600 text-white";
-    const variantClass = expired ? expiredClass : variantStyles4[variant];
+    const variantClass = expired ? expiredClass : variantStyles5[variant];
     return /* @__PURE__ */ jsx6(
       "div",
       {
@@ -331,6 +348,388 @@ var Countdown = React6.forwardRef(
   }
 );
 Countdown.displayName = "Countdown";
+
+// src/components/Tag/Tag.tsx
+import * as React7 from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var variantStyles4 = {
+  default: "bg-gray-100 text-gray-800",
+  success: "bg-green-100 text-green-800",
+  warning: "bg-yellow-100 text-yellow-800",
+  error: "bg-red-100 text-red-800",
+  info: "bg-blue-100 text-blue-800"
+};
+var sizeStyles3 = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+  lg: "px-3 py-1.5 text-base"
+};
+var Tag = React7.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "md",
+    removable = false,
+    onRemove,
+    removeLabel = "Remove",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs3(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center font-medium",
+          radius.pill,
+          variantStyles4[variant],
+          sizeStyles3[size],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx7("span", { children }),
+          removable && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              "aria-label": removeLabel,
+              onClick: onRemove,
+              className: cn(
+                "ml-2 inline-flex items-center justify-center",
+                radius.pill,
+                border.ring,
+                size === "sm" ? "h-4 w-4" : size === "md" ? "h-5 w-5" : "h-6 w-6"
+              ),
+              children: /* @__PURE__ */ jsx7(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  className: cn(size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5"),
+                  children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+
+// src/components/Select/Select.tsx
+import * as React8 from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var Select = ({
+  items,
+  placeholder = "Select...",
+  multiselect = false,
+  multiline = false,
+  value,
+  onChange,
+  className
+}) => {
+  const [open, setOpen] = React8.useState(false);
+  const [internalValue, setInternalValue] = React8.useState(
+    Array.isArray(value) ? value : value ? [value] : []
+  );
+  React8.useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(Array.isArray(value) ? value : value ? [value] : []);
+    }
+  }, [value]);
+  React8.useEffect(() => {
+    lastEmittedRef.current = null;
+  }, [value, multiselect]);
+  const containerRef = React8.useRef(null);
+  React8.useEffect(() => {
+    const onDoc = (e) => {
+      if (!containerRef.current) return;
+      if (!containerRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, []);
+  const isSelected = (v) => internalValue.includes(v);
+  const lastEmittedRef = React8.useRef(null);
+  const emitChange = (next) => {
+    const payload = multiselect ? JSON.stringify(next) : next[0] || "";
+    if (lastEmittedRef.current === payload) return;
+    lastEmittedRef.current = payload;
+    if (onChange) onChange(multiselect ? next : next[0] || "");
+  };
+  const toggleSelect = (v) => {
+    let next;
+    if (multiselect) {
+      next = isSelected(v) ? internalValue.filter((x) => x !== v) : [...internalValue, v];
+    } else {
+      next = isSelected(v) ? [] : [v];
+      setOpen(false);
+    }
+    emitChange(next);
+    if (value === void 0) setInternalValue(next);
+  };
+  const removeValue = (v) => {
+    const next = internalValue.filter((x) => x !== v);
+    emitChange(next);
+    if (value === void 0) setInternalValue(next);
+  };
+  const selectedItemsMap = React8.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const collect = (src) => {
+      src.forEach((s) => {
+        if ("items" in s) s.items.forEach((it) => map.set(it.value, it));
+        else map.set(s.value, s);
+      });
+    };
+    collect(items);
+    return map;
+  }, [items]);
+  const tagsContainerRef = React8.useRef(null);
+  const [visibleCount, setVisibleCount] = React8.useState(null);
+  React8.useEffect(() => {
+    if (multiline) {
+      setVisibleCount(null);
+      return;
+    }
+    let raf;
+    let timeout;
+    const measure = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const container = tagsContainerRef.current;
+        if (!container) {
+          setVisibleCount(null);
+          return;
+        }
+        const containerWidth = container.clientWidth;
+        if (containerWidth === 0) {
+          setVisibleCount(null);
+          return;
+        }
+        const tagEls = Array.from(
+          container.querySelectorAll('[data-role="select-tag"]')
+        );
+        if (!tagEls.length) {
+          setVisibleCount(null);
+          return;
+        }
+        const badgeEl = container.querySelector('[data-role="count-badge"]');
+        const containerStyle = window.getComputedStyle(container);
+        const gap = parseFloat(containerStyle.gap || containerStyle.columnGap || "0") || 0;
+        const tagWidths = tagEls.map((el) => el.offsetWidth);
+        let totalWidthAllTags = 0;
+        for (const [i, w] of tagWidths.entries()) {
+          totalWidthAllTags += w + (i > 0 ? gap : 0);
+        }
+        if (totalWidthAllTags <= containerWidth) {
+          setVisibleCount(tagEls.length);
+          return;
+        }
+        let badgeWidth = badgeEl ? badgeEl.offsetWidth : 40;
+        let usedWidth = 0;
+        let fitCount = 0;
+        for (const [i, tagWidth] of tagWidths.entries()) {
+          const gapBeforeTag = i > 0 ? gap : 0;
+          const gapBeforeBadge = gap;
+          const effectiveTagWidth = tagWidth ?? 0;
+          const spaceNeeded = usedWidth + gapBeforeTag + effectiveTagWidth + gapBeforeBadge + badgeWidth;
+          if (spaceNeeded <= containerWidth) {
+            usedWidth += gapBeforeTag + effectiveTagWidth;
+            fitCount = i + 1;
+          } else {
+            break;
+          }
+        }
+        fitCount = Math.max(1, fitCount);
+        setVisibleCount(fitCount);
+      });
+    };
+    measure();
+    const onResize = () => {
+      if (timeout) clearTimeout(timeout);
+      timeout = window.setTimeout(measure, 50);
+    };
+    window.addEventListener("resize", onResize);
+    let ro;
+    if (typeof ResizeObserver !== "undefined" && tagsContainerRef.current) {
+      ro = new ResizeObserver(onResize);
+      ro.observe(tagsContainerRef.current);
+    }
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      if (timeout) clearTimeout(timeout);
+      window.removeEventListener("resize", onResize);
+      ro?.disconnect();
+    };
+  }, [internalValue, multiline]);
+  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: cn("relative inline-block w-full", className), children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        role: "combobox",
+        tabIndex: 0,
+        "aria-expanded": open,
+        onClick: () => setOpen((s) => !s),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen((s) => !s);
+          }
+          if (e.key === "Escape") setOpen(false);
+        },
+        className: cn(
+          "w-full inline-flex items-center justify-between rounded-lg border bg-white px-4 py-2 text-gray-900 text-left cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500",
+          multiselect ? "" : "",
+          open ? "ring-1 ring-gray-300" : ""
+        ),
+        children: [
+          /* @__PURE__ */ jsx8("div", { className: "flex-1", children: multiselect && internalValue.length > 0 ? /* @__PURE__ */ jsxs4(
+            "span",
+            {
+              ref: tagsContainerRef,
+              className: cn(
+                "relative flex gap-1 items-center",
+                multiline ? "flex-wrap" : "overflow-hidden whitespace-nowrap"
+              ),
+              children: [
+                internalValue.map((v, index) => {
+                  const isHidden = !multiline && visibleCount !== null && index >= visibleCount;
+                  return /* @__PURE__ */ jsx8(
+                    "span",
+                    {
+                      "data-role": "select-tag",
+                      className: cn(
+                        "flex-shrink-0 inline-block",
+                        isHidden && "invisible absolute pointer-events-none"
+                      ),
+                      children: /* @__PURE__ */ jsx8(
+                        Tag,
+                        {
+                          size: "sm",
+                          removable: true,
+                          removeLabel: `Remove ${selectedItemsMap.get(v)?.label ?? v}`,
+                          onRemove: (e) => {
+                            e.stopPropagation();
+                            removeValue(v);
+                          },
+                          children: selectedItemsMap.get(v)?.label ?? v
+                        }
+                      )
+                    },
+                    v
+                  );
+                }),
+                !multiline && visibleCount !== null && visibleCount < internalValue.length && /* @__PURE__ */ jsx8("span", { "data-role": "count-badge", className: "flex-shrink-0 inline-block", children: /* @__PURE__ */ jsxs4(Badge, { size: "sm", variant: "info", children: [
+                  "+",
+                  internalValue.length - visibleCount
+                ] }) })
+              ]
+            }
+          ) : internalValue.length > 0 ? /* @__PURE__ */ jsx8("span", { className: "text-sm text-gray-900", children: selectedItemsMap.get(internalValue[0])?.label ?? placeholder }) : /* @__PURE__ */ jsx8("span", { className: "text-sm text-gray-400", children: placeholder }) }),
+          /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", className: "ml-2 h-4 w-4 text-gray-600", children: /* @__PURE__ */ jsx8("path", { d: "M5.5 7.5L10 12l4.5-4.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
+        ]
+      }
+    ) }),
+    open && /* @__PURE__ */ jsx8("div", { className: "absolute z-40 mt-2 w-56 bg-white border rounded shadow-lg", children: /* @__PURE__ */ jsx8("div", { className: "p-1", children: items.map((groupOrItem, gi) => {
+      if ("items" in groupOrItem) {
+        return /* @__PURE__ */ jsxs4("div", { className: "mb-2", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-2 py-1 text-xs text-gray-500 font-medium", children: [
+            /* @__PURE__ */ jsx8("div", { children: groupOrItem.label }),
+            /* @__PURE__ */ jsx8("div", { children: multiselect && /* @__PURE__ */ jsx8(
+              "input",
+              {
+                type: "checkbox",
+                "aria-label": `Select all ${groupOrItem.label}`,
+                checked: groupOrItem.items.every((it) => isSelected(it.value)),
+                onChange: () => {
+                  const all = groupOrItem.items.map((it) => it.value);
+                  const allSelected = all.every((v) => isSelected(v));
+                  let next;
+                  if (multiselect) {
+                    if (allSelected) {
+                      next = internalValue.filter((v) => !all.includes(v));
+                    } else {
+                      next = [...internalValue, ...all.filter((v) => !internalValue.includes(v))];
+                    }
+                  } else {
+                    next = allSelected ? [] : all[0] ? [all[0]] : [];
+                    setOpen(false);
+                  }
+                  emitChange(next);
+                  if (value === void 0) setInternalValue(next);
+                }
+              }
+            ) })
+          ] }),
+          groupOrItem.items.map((it) => /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              disabled: it.disabled,
+              onClick: () => toggleSelect(it.value),
+              className: cn(
+                "w-full text-left px-2 py-2 rounded hover:bg-gray-50 flex items-center gap-2",
+                isSelected(it.value) ? "bg-gray-100" : ""
+              ),
+              children: [
+                it.icon && /* @__PURE__ */ jsx8("img", { src: it.icon, alt: "", className: "h-4 w-4 rounded" }),
+                /* @__PURE__ */ jsx8("span", { className: "flex-1", children: it.label }),
+                /* @__PURE__ */ jsx8("span", { className: "w-6 flex items-center justify-end", children: isSelected(it.value) && /* @__PURE__ */ jsx8(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    className: "h-4 w-4",
+                    children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                  }
+                ) })
+              ]
+            },
+            it.value
+          ))
+        ] }, gi);
+      }
+      return /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          disabled: groupOrItem.disabled,
+          onClick: () => toggleSelect(groupOrItem.value),
+          className: cn(
+            "w-full text-left px-2 py-2 rounded hover:bg-gray-50 flex items-center gap-2",
+            isSelected(groupOrItem.value) ? "bg-gray-100" : ""
+          ),
+          children: [
+            groupOrItem.icon && /* @__PURE__ */ jsx8("img", { src: groupOrItem.icon, alt: "", className: "h-4 w-4 rounded" }),
+            /* @__PURE__ */ jsx8("span", { className: "flex-1", children: groupOrItem.label }),
+            /* @__PURE__ */ jsx8("span", { className: "w-6 flex items-center justify-end", children: isSelected(groupOrItem.value) && /* @__PURE__ */ jsx8(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                className: "h-4 w-4",
+                children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+              }
+            ) })
+          ]
+        },
+        groupOrItem.value
+      );
+    }) }) })
+  ] });
+};
 export {
   Badge,
   Button,
@@ -338,6 +737,8 @@ export {
   Countdown,
   Icon,
   Input,
+  Select,
+  Tag,
   cn
 };
 //# sourceMappingURL=index.js.map