@component-labs/ui 0.0.1

package/dist/checkbox.js

@@ -0,0 +1,210 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { C as h } from "./I7KWAPMF-CcAk8kiH.js";
+import { C as p } from "./HOITXJDS-DBccNHOl.js";
+import { c as k, a as m } from "./utils-BZvHF7th.js";
+import { forwardRef as x } from "react";
+const u = m(
+  [
+    "flex items-center justify-center rounded border-2",
+    "transition-all duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "cursor-pointer"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-gray-300 dark:border-gray-700",
+          "bg-white dark:bg-gray-900",
+          "aria-checked:bg-primary-600 aria-checked:border-primary-600",
+          "hover:border-gray-400 dark:hover:border-gray-600"
+        ],
+        outline: [
+          "border-primary-600 dark:border-primary-500",
+          "bg-transparent",
+          "aria-checked:bg-primary-600 aria-checked:border-primary-600",
+          "hover:border-primary-700 dark:hover:border-primary-400"
+        ]
+      },
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), f = x(
+  ({
+    variant: c,
+    size: s,
+    label: t,
+    description: a,
+    checkIcon: n,
+    className: d,
+    children: r,
+    ...l
+  }, b) => {
+    const i = /* @__PURE__ */ e(
+      h,
+      {
+        ref: b,
+        render: /* @__PURE__ */ e("div", {}),
+        className: k(u({ variant: c, size: s, className: d })),
+        ...l,
+        children: /* @__PURE__ */ e(p, { children: n || /* @__PURE__ */ e(g, {}) })
+      }
+    );
+    return t || a || r ? /* @__PURE__ */ o("label", { className: "flex items-start gap-2 cursor-pointer group", children: [
+      i,
+      /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+        (t || r) && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-gray-700 dark:group-hover:text-gray-300", children: t || r }),
+        a && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: a })
+      ] })
+    ] }) : i;
+  }
+);
+f.displayName = "Checkbox";
+function g() {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "text-white",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M13 4L6 11L3 8",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+const z = {
+  name: "Checkbox",
+  description: "Accessible checkbox with indeterminate state support, built on Ariakit.",
+  category: "Inputs",
+  installation: "pnpm add @component-labs/ui",
+  usage: `import { Checkbox } from "@component-labs/ui";
+
+<Checkbox label="Accept terms" />`,
+  props: [
+    {
+      name: "variant",
+      type: "'default' | 'outline'",
+      description: "Visual style variant of the checkbox",
+      default: "'default'"
+    },
+    {
+      name: "size",
+      type: "'sm' | 'md' | 'lg'",
+      description: "Size of the checkbox",
+      default: "'md'"
+    },
+    {
+      name: "label",
+      type: "ReactNode",
+      description: "Label text to display next to the checkbox"
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "Description text to display below the label"
+    },
+    {
+      name: "checkIcon",
+      type: "ReactNode",
+      description: "Custom check icon to replace the default"
+    },
+    {
+      name: "checked",
+      type: "boolean",
+      description: "Controlled checked state"
+    },
+    {
+      name: "defaultChecked",
+      type: "boolean",
+      description: "Default checked state for uncontrolled usage"
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Whether the checkbox is disabled",
+      default: "false"
+    }
+  ],
+  examples: [
+    {
+      title: "Basic Checkbox",
+      code: '<Checkbox label="I agree to the terms and conditions" />',
+      description: "Simple checkbox with a label"
+    },
+    {
+      title: "With Description",
+      code: `<Checkbox
+  label="Marketing emails"
+  description="Receive updates about new features and products"
+/>`,
+      description: "Checkbox with additional description text"
+    },
+    {
+      title: "Sizes",
+      code: `<div className="flex flex-col gap-4">
+  <Checkbox size="sm" label="Small checkbox" />
+  <Checkbox size="md" label="Medium checkbox" />
+  <Checkbox size="lg" label="Large checkbox" />
+</div>`,
+      description: "Different checkbox sizes"
+    },
+    {
+      title: "Variants",
+      code: `<div className="flex flex-col gap-4">
+  <Checkbox variant="default" label="Default variant" />
+  <Checkbox variant="outline" label="Outline variant" />
+</div>`,
+      description: "Available visual variants"
+    },
+    {
+      title: "Controlled",
+      code: `const [checked, setChecked] = useState(false);
+
+<Checkbox
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+  label="Controlled checkbox"
+/>`,
+      description: "Using checkbox in controlled mode"
+    },
+    {
+      title: "Disabled State",
+      code: '<Checkbox label="Disabled checkbox" disabled />',
+      description: "Checkbox in disabled state"
+    }
+  ],
+  accessibility: [
+    "Built on Ariakit's accessible Checkbox component",
+    "Proper ARIA attributes (aria-checked, aria-disabled)",
+    "Keyboard accessible (Space to toggle)",
+    "Focus visible states with ring indicator",
+    "Screen reader announcements for state changes",
+    "Supports indeterminate state"
+  ]
+};
+export {
+  f as Checkbox,
+  z as checkboxDocs
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../src/components/checkbox/Checkbox.tsx","../src/components/checkbox/Checkbox.docs.ts"],"sourcesContent":["import {\n  Checkbox as AriaCheckbox,\n  CheckboxCheck,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"@ariakit/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nconst checkboxVariants = cva(\n  [\n    \"flex items-center justify-center rounded border-2\",\n    \"transition-all duration-200\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"cursor-pointer\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: [\n          \"border-gray-300 dark:border-gray-700\",\n          \"bg-white dark:bg-gray-900\",\n          \"aria-checked:bg-primary-600 aria-checked:border-primary-600\",\n          \"hover:border-gray-400 dark:hover:border-gray-600\",\n        ],\n        outline: [\n          \"border-primary-600 dark:border-primary-500\",\n          \"bg-transparent\",\n          \"aria-checked:bg-primary-600 aria-checked:border-primary-600\",\n          \"hover:border-primary-700 dark:hover:border-primary-400\",\n        ],\n      },\n      size: {\n        sm: \"h-4 w-4\",\n        md: \"h-5 w-5\",\n        lg: \"h-6 w-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"size\">,\n    VariantProps<typeof checkboxVariants> {\n  /** Label text to display next to the checkbox */\n  label?: ReactNode;\n  /** Description text to display below the label */\n  description?: ReactNode;\n  /** Custom check icon */\n  checkIcon?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      variant,\n      size,\n      label,\n      description,\n      checkIcon,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const checkbox = (\n      <AriaCheckbox\n        ref={ref}\n        render={<div />}\n        className={cn(checkboxVariants({ variant, size, className }))}\n        {...props}\n      >\n        <CheckboxCheck>\n          {checkIcon || <CheckIcon />}\n        </CheckboxCheck>\n      </AriaCheckbox>\n    );\n\n    // If there's a label or description, wrap in a label element\n    if (label || description || children) {\n      return (\n        <label className=\"flex items-start gap-2 cursor-pointer group\">\n          {checkbox}\n          <div className=\"flex flex-col gap-1\">\n            {(label || children) && (\n              <span className=\"text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-gray-700 dark:group-hover:text-gray-300\">\n                {label || children}\n              </span>\n            )}\n            {description && (\n              <span className=\"text-xs text-gray-500 dark:text-gray-400\">\n                {description}\n              </span>\n            )}\n          </div>\n        </label>\n      );\n    }\n\n    return checkbox;\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n\n// Default check icon\nfunction CheckIcon() {\n  return (\n    <svg\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"text-white\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M13 4L6 11L3 8\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n","import type { ComponentDoc } from \"../../types/docs\";\n\nexport const checkboxDocs: ComponentDoc = {\n  name: \"Checkbox\",\n  description: \"Accessible checkbox with indeterminate state support, built on Ariakit.\",\n  category: \"Inputs\",\n  installation: `pnpm add @component-labs/ui`,\n  usage: `import { Checkbox } from \"@component-labs/ui\";\n\n<Checkbox label=\"Accept terms\" />`,\n  props: [\n    {\n      name: \"variant\",\n      type: \"'default' | 'outline'\",\n      description: \"Visual style variant of the checkbox\",\n      default: \"'default'\",\n    },\n    {\n      name: \"size\",\n      type: \"'sm' | 'md' | 'lg'\",\n      description: \"Size of the checkbox\",\n      default: \"'md'\",\n    },\n    {\n      name: \"label\",\n      type: \"ReactNode\",\n      description: \"Label text to display next to the checkbox\",\n    },\n    {\n      name: \"description\",\n      type: \"ReactNode\",\n      description: \"Description text to display below the label\",\n    },\n    {\n      name: \"checkIcon\",\n      type: \"ReactNode\",\n      description: \"Custom check icon to replace the default\",\n    },\n    {\n      name: \"checked\",\n      type: \"boolean\",\n      description: \"Controlled checked state\",\n    },\n    {\n      name: \"defaultChecked\",\n      type: \"boolean\",\n      description: \"Default checked state for uncontrolled usage\",\n    },\n    {\n      name: \"disabled\",\n      type: \"boolean\",\n      description: \"Whether the checkbox is disabled\",\n      default: \"false\",\n    },\n  ],\n  examples: [\n    {\n      title: \"Basic Checkbox\",\n      code: `<Checkbox label=\"I agree to the terms and conditions\" />`,\n      description: \"Simple checkbox with a label\",\n    },\n    {\n      title: \"With Description\",\n      code: `<Checkbox\n  label=\"Marketing emails\"\n  description=\"Receive updates about new features and products\"\n/>`,\n      description: \"Checkbox with additional description text\",\n    },\n    {\n      title: \"Sizes\",\n      code: `<div className=\"flex flex-col gap-4\">\n  <Checkbox size=\"sm\" label=\"Small checkbox\" />\n  <Checkbox size=\"md\" label=\"Medium checkbox\" />\n  <Checkbox size=\"lg\" label=\"Large checkbox\" />\n</div>`,\n      description: \"Different checkbox sizes\",\n    },\n    {\n      title: \"Variants\",\n      code: `<div className=\"flex flex-col gap-4\">\n  <Checkbox variant=\"default\" label=\"Default variant\" />\n  <Checkbox variant=\"outline\" label=\"Outline variant\" />\n</div>`,\n      description: \"Available visual variants\",\n    },\n    {\n      title: \"Controlled\",\n      code: `const [checked, setChecked] = useState(false);\n\n<Checkbox\n  checked={checked}\n  onChange={(e) => setChecked(e.target.checked)}\n  label=\"Controlled checkbox\"\n/>`,\n      description: \"Using checkbox in controlled mode\",\n    },\n    {\n      title: \"Disabled State\",\n      code: `<Checkbox label=\"Disabled checkbox\" disabled />`,\n      description: \"Checkbox in disabled state\",\n    },\n  ],\n  accessibility: [\n    \"Built on Ariakit's accessible Checkbox component\",\n    \"Proper ARIA attributes (aria-checked, aria-disabled)\",\n    \"Keyboard accessible (Space to toggle)\",\n    \"Focus visible states with ring indicator\",\n    \"Screen reader announcements for state changes\",\n    \"Supports indeterminate state\",\n  ],\n};\n"],"names":["checkboxVariants","cva","Checkbox","forwardRef","variant","size","label","description","checkIcon","className","children","props","ref","checkbox","jsx","AriaCheckbox","cn","CheckboxCheck","CheckIcon","jsxs","checkboxDocs"],"mappings":"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"}

package/dist/combobox.d.ts

@@ -0,0 +1,4 @@
+export { Combobox } from './components/combobox/Combobox';
+export type { ComboboxProps, ComboboxOption } from './components/combobox/Combobox';
+export { comboboxDocs } from './components/combobox/Combobox.docs';
+//# sourceMappingURL=combobox.d.ts.map

package/dist/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../src/combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC"}