eglador-ui-react 0.1.0-alpha.2 → 0.1.0-alpha.3

package/README.md

@@ -24,7 +24,7 @@ Add the following to your global stylesheet (e.g. `app/globals.css`) so Tailwind
 ## Usage
 
 ```tsx
-import { Button, ButtonGroup } from "eglador-ui-react";
+import { Button, ButtonGroup, Checkbox, CheckboxGroup } from "eglador-ui-react";
 ```
 
 ## Components
@@ -33,6 +33,8 @@ import { Button, ButtonGroup } from "eglador-ui-react";
 |-----------|-----------|
 | **Button** | `variant`, `color`, `size`, `shape`, `soft`, `icon`, `iconRight`, `loading`, `active`, `disabled`, `className` |
 | **ButtonGroup** | `variant`, `className`, `children` |
+| **Checkbox** | `variant`, `color`, `size`, `checked`, `onChange`, `indeterminate`, `label`, `description`, `disabled`, `name`, `value`, `className` |
+| **CheckboxGroup** | `variant`, `className`, `children` |
 
 ## Development
 

package/dist/index.d.mts

@@ -28,6 +28,34 @@ interface ButtonGroupProps {
 }
 declare function ButtonGroup({ variant, className, children, }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
+type CheckboxSize = "xs" | "sm" | "md";
+type CheckboxColor = "default" | "black" | "primary" | "danger" | "success" | "warning" | "info";
+type CheckboxVariant = "default" | "card" | "list";
+interface CheckboxProps {
+    variant?: CheckboxVariant;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+    color?: CheckboxColor;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    name?: string;
+    value?: string;
+    id?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+type CheckboxGroupVariant = "bordered" | "segmented";
+interface CheckboxGroupProps {
+    variant?: CheckboxGroupVariant;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function CheckboxGroup({ variant, className, children, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, cn };
+export { Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, cn };

package/dist/index.d.ts

@@ -28,6 +28,34 @@ interface ButtonGroupProps {
 }
 declare function ButtonGroup({ variant, className, children, }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
+type CheckboxSize = "xs" | "sm" | "md";
+type CheckboxColor = "default" | "black" | "primary" | "danger" | "success" | "warning" | "info";
+type CheckboxVariant = "default" | "card" | "list";
+interface CheckboxProps {
+    variant?: CheckboxVariant;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+    color?: CheckboxColor;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    name?: string;
+    value?: string;
+    id?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+type CheckboxGroupVariant = "bordered" | "segmented";
+interface CheckboxGroupProps {
+    variant?: CheckboxGroupVariant;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function CheckboxGroup({ variant, className, children, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, cn };
+export { Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, cn };

package/dist/index.js

@@ -32,6 +32,8 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
+  Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
   cn: () => cn
 });
 module.exports = __toCommonJS(index_exports);
@@ -3429,10 +3431,238 @@ function ButtonGroup({
     }
   );
 }
+
+// src/components/checkbox/checkbox.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CheckIcon({ className, strokeWidth }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function MinusIcon({ className, strokeWidth }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }) });
+}
+var SIZES2 = {
+  xs: {
+    box: "size-3.5",
+    iconSize: "size-2.5",
+    iconStroke: 3,
+    labelFont: "text-xs",
+    descFont: "text-[10px]",
+    gap: "gap-1.5",
+    cardPadding: "p-2"
+  },
+  sm: {
+    box: "size-4",
+    iconSize: "size-3",
+    iconStroke: 3,
+    labelFont: "text-sm",
+    descFont: "text-xs",
+    gap: "gap-2",
+    cardPadding: "p-2.5"
+  },
+  md: {
+    box: "size-5",
+    iconSize: "size-3.5",
+    iconStroke: 2.5,
+    labelFont: "text-base",
+    descFont: "text-sm",
+    gap: "gap-2.5",
+    cardPadding: "p-3"
+  }
+};
+var COLORS2 = {
+  default: {
+    checked: "bg-zinc-900 border-zinc-900",
+    hover: "group-hover/cb:border-zinc-400"
+  },
+  black: {
+    checked: "bg-zinc-900 border-zinc-900",
+    hover: "group-hover/cb:border-zinc-400"
+  },
+  primary: {
+    checked: "bg-blue-600 border-blue-600",
+    hover: "group-hover/cb:border-blue-300"
+  },
+  danger: {
+    checked: "bg-red-500 border-red-500",
+    hover: "group-hover/cb:border-red-300"
+  },
+  success: {
+    checked: "bg-green-500 border-green-500",
+    hover: "group-hover/cb:border-green-300"
+  },
+  warning: {
+    checked: "bg-yellow-500 border-yellow-500",
+    hover: "group-hover/cb:border-yellow-300"
+  },
+  info: {
+    checked: "bg-indigo-500 border-indigo-500",
+    hover: "group-hover/cb:border-indigo-300"
+  }
+};
+var CARD_COLORS = {
+  default: {
+    checked: "bg-zinc-50 border-zinc-300 text-zinc-800",
+    unchecked: "bg-white border-zinc-200 text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300"
+  },
+  black: {
+    checked: "bg-zinc-100 border-zinc-300 text-zinc-900",
+    unchecked: "bg-white border-zinc-200 text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300"
+  },
+  primary: {
+    checked: "bg-blue-50/50 border-blue-200 text-blue-700",
+    unchecked: "bg-white border-zinc-200 text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300"
+  },
+  danger: {
+    checked: "bg-red-50/50 border-red-200 text-red-700",
+    unchecked: "bg-white border-zinc-200 text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300"
+  },
+  success: {
+    checked: "bg-green-50/50 border-green-200 text-green-700",
+    unchecked: "bg-white border-zinc-200 text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300"
+  },
+  warning: {
+    checked: "bg-yellow-50/50 border-yellow-200 text-yellow-700",
+    unchecked: "bg-white border-zinc-200 text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300"
+  },
+  info: {
+    checked: "bg-indigo-50/50 border-indigo-200 text-indigo-700",
+    unchecked: "bg-white border-zinc-200 text-zinc-600 hover:bg-zinc-50 hover:border-zinc-300"
+  }
+};
+var Checkbox = React3.forwardRef(
+  ({
+    variant = "default",
+    checked = false,
+    onChange,
+    indeterminate = false,
+    size = "sm",
+    color = "default",
+    label,
+    description,
+    disabled = false,
+    className,
+    name,
+    value,
+    id: idProp
+  }, ref) => {
+    const autoId = React3.useId();
+    const id = idProp || autoId;
+    const s = SIZES2[size];
+    const c = COLORS2[color];
+    const isActive = checked || indeterminate;
+    const handleChange = () => {
+      if (disabled) return;
+      onChange?.(!checked);
+    };
+    const variantClasses = (() => {
+      switch (variant) {
+        case "card": {
+          const cc = CARD_COLORS[color];
+          return cn(
+            "rounded-xl border font-medium transition-colors",
+            s.cardPadding,
+            isActive ? cc.checked : cc.unchecked
+          );
+        }
+        case "list":
+          return "p-2 rounded-lg hover:bg-zinc-50 transition-colors";
+        default:
+          return "";
+      }
+    })();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "group/cb inline-flex items-start select-none",
+          s.gap,
+          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+          variantClasses,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              ref,
+              id,
+              type: "checkbox",
+              className: "sr-only",
+              checked,
+              onChange: handleChange,
+              disabled,
+              name,
+              value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: cn(
+                "shrink-0 flex items-center justify-center rounded transition-all duration-150 mt-0.5",
+                s.box,
+                isActive ? cn(c.checked, "text-white") : cn("border border-zinc-300 bg-white", !disabled && c.hover)
+              ),
+              children: [
+                checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: s.iconSize, strokeWidth: s.iconStroke }),
+                indeterminate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MinusIcon, { className: s.iconSize, strokeWidth: s.iconStroke })
+              ]
+            }
+          ),
+          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col min-w-0", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("font-medium", s.labelFont, variant === "default" && "text-zinc-700"), children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("text-zinc-400 mt-0.5", s.descFont), children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/checkbox-group/checkbox-group.tsx
+var React4 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CheckboxGroup({
+  variant = "bordered",
+  className,
+  children
+}) {
+  const items = React4.Children.toArray(children).filter(React4.isValidElement);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center rounded-lg",
+        variant === "bordered" ? "bg-white border border-zinc-200" : "bg-zinc-100 p-1 gap-px",
+        className
+      ),
+      children: items.map((child, index) => {
+        const childProps = child.props;
+        const isChecked = !!childProps.checked;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React4.Fragment, { children: [
+          React4.cloneElement(child, {
+            className: cn(
+              childProps.className,
+              "border-0",
+              variant === "segmented" && !isChecked && "bg-transparent hover:bg-white/80",
+              variant === "segmented" && isChecked && "bg-white shadow-sm text-zinc-900"
+            )
+          }),
+          variant === "bordered" && index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-px self-stretch my-2 bg-zinc-200 shrink-0" })
+        ] }, index);
+      })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   ButtonGroup,
+  Checkbox,
+  CheckboxGroup,
   cn
 });
 //# sourceMappingURL=index.js.map