@glob-ui/checkbox 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# @glob-ui/checkbox
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A native checkbox with a label, sizes, and an indeterminate state for groups.
+
+## Install
+
+```bash
+pnpm add @glob-ui/checkbox
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Checkbox](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/checkbox.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">, VariantProps<typeof checkboxVariants> {
+    /** Shows a dash instead of a check. Not a checked state; the browser clears it on click. */
+    indeterminate?: boolean;
+    label?: React.ReactNode;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps, checkboxVariants };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">, VariantProps<typeof checkboxVariants> {
+    /** Shows a dash instead of a check. Not a checked state; the browser clears it on click. */
+    indeterminate?: boolean;
+    label?: React.ReactNode;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps, checkboxVariants };

package/dist/index.js

@@ -0,0 +1,174 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Checkbox: () => Checkbox,
+  checkboxVariants: () => checkboxVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/checkbox.tsx
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("@glob-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var checkboxVariants = (0, import_class_variance_authority.cva)(
+  "peer shrink-0 cursor-pointer appearance-none rounded-glob-sm border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary indeterminate:border-glob-primary indeterminate:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-glob-danger",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var labelSize = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var Checkbox = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      size,
+      indeterminate = false,
+      label,
+      id,
+      disabled,
+      "aria-labelledby": labelledByProp
+    } = _b, props = __objRest(_b, [
+      "className",
+      "size",
+      "indeterminate",
+      "label",
+      "id",
+      "disabled",
+      "aria-labelledby"
+    ]);
+    const innerRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(ref, () => innerRef.current);
+    (0, import_react.useEffect)(() => {
+      if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const autoId = (0, import_react.useId)();
+    const inputId = id != null ? id : autoId;
+    const labelId = `${inputId}-label`;
+    const labelledBy = labelledByProp && label ? `${labelledByProp} ${labelId}` : labelledByProp;
+    const s = size != null ? size : "md";
+    const control = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-flex shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        __spreadValues({
+          ref: innerRef,
+          type: "checkbox",
+          id: inputId,
+          disabled,
+          "aria-labelledby": labelledBy,
+          className: (0, import_utils.cn)(checkboxVariants({ size, className }))
+        }, props)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-[:checked:not(:indeterminate)]:block",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12l5 5 9-10" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          className: "pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-indeterminate:block",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 12h12" })
+        }
+      )
+    ] });
+    if (!label) return control;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+      control,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "label",
+        {
+          id: labelId,
+          htmlFor: inputId,
+          className: (0, import_utils.cn)(
+            "cursor-pointer text-glob-text",
+            labelSize[s],
+            disabled && "cursor-not-allowed opacity-50"
+          ),
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox,
+  checkboxVariants
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/checkbox.tsx"],"sourcesContent":["export { Checkbox, checkboxVariants } from \"./checkbox\"\nexport type { CheckboxProps } from \"./checkbox\"\n","\"use client\"\n\nimport { forwardRef, useEffect, useId, useImperativeHandle, useRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\n\nconst checkboxVariants = cva(\n  \"peer shrink-0 cursor-pointer appearance-none rounded-glob-sm border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary indeterminate:border-glob-primary indeterminate:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-glob-danger\",\n  {\n    variants: {\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      size: \"md\",\n    },\n  }\n)\n\nconst labelSize = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n}\n\nexport interface CheckboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">,\n    VariantProps<typeof checkboxVariants> {\n  /** Shows a dash instead of a check. Not a checked state; the browser clears it on click. */\n  indeterminate?: boolean\n  label?: React.ReactNode\n}\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className,\n      size,\n      indeterminate = false,\n      label,\n      id,\n      disabled,\n      \"aria-labelledby\": labelledByProp,\n      ...props\n    },\n    ref\n  ) => {\n    const innerRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)\n\n    // `indeterminate` only exists as a DOM property, not an HTML attribute.\n    useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = indeterminate\n    }, [indeterminate])\n\n    const autoId = useId()\n    const inputId = id ?? autoId\n    const labelId = `${inputId}-label`\n    // aria-labelledby (e.g. from Field) replaces the native <label for> name. Append our own\n    // label so the name stays \"Field label + checkbox label\", like several <label for> would.\n    const labelledBy = labelledByProp && label ? `${labelledByProp} ${labelId}` : labelledByProp\n    const s = size ?? \"md\"\n\n    const control = (\n      <span className=\"relative inline-flex shrink-0\">\n        <input\n          ref={innerRef}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          aria-labelledby={labelledBy}\n          className={cn(checkboxVariants({ size, className }))}\n          {...props}\n        />\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-[:checked:not(:indeterminate)]:block\"\n        >\n          <path d=\"M5 12l5 5 9-10\" />\n        </svg>\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          className=\"pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-indeterminate:block\"\n        >\n          <path d=\"M6 12h12\" />\n        </svg>\n      </span>\n    )\n\n    if (!label) return control\n\n    return (\n      <span className=\"inline-flex items-center gap-2\">\n        {control}\n        <label\n          id={labelId}\n          htmlFor={inputId}\n          className={cn(\n            \"cursor-pointer text-glob-text\",\n            labelSize[s],\n            disabled && \"cursor-not-allowed opacity-50\"\n          )}\n        >\n          {label}\n        </label>\n      </span>\n    )\n  }\n)\nCheckbox.displayName = \"Checkbox\"\n\nexport { Checkbox, checkboxVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA0E;AAC1E,sCAAuC;AACvC,mBAAmB;AA+Db;AA7DN,IAAM,uBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUA,IAAM,eAAW;AAAA,EACf,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,IA7CzB,IAsCI,IAQK,kBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,eAAW,qBAAyB,IAAI;AAC9C,0CAAoB,KAAK,MAAM,SAAS,OAA2B;AAGnE,gCAAU,MAAM;AACd,UAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB;AAAA,IACzD,GAAG,CAAC,aAAa,CAAC;AAElB,UAAM,aAAS,oBAAM;AACrB,UAAM,UAAU,kBAAM;AACtB,UAAM,UAAU,GAAG,OAAO;AAG1B,UAAM,aAAa,kBAAkB,QAAQ,GAAG,cAAc,IAAI,OAAO,KAAK;AAC9E,UAAM,IAAI,sBAAQ;AAElB,UAAM,UACJ,6CAAC,UAAK,WAAU,iCACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UACJ;AAAA,UACA,mBAAiB;AAAA,UACjB,eAAW,iBAAG,iBAAiB,EAAE,MAAM,UAAU,CAAC,CAAC;AAAA,WAC/C;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAU;AAAA,UAEV,sDAAC,UAAK,GAAE,kBAAiB;AAAA;AAAA,MAC3B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,WAAU;AAAA,UAEV,sDAAC,UAAK,GAAE,YAAW;AAAA;AAAA,MACrB;AAAA,OACF;AAGF,QAAI,CAAC,MAAO,QAAO;AAEnB,WACE,6CAAC,UAAK,WAAU,kCACb;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,eAAW;AAAA,YACT;AAAA,YACA,UAAU,CAAC;AAAA,YACX,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,149 @@
+"use client"
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/checkbox.tsx
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@glob-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var checkboxVariants = cva(
+  "peer shrink-0 cursor-pointer appearance-none rounded-glob-sm border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary indeterminate:border-glob-primary indeterminate:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-glob-danger",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var labelSize = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var Checkbox = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      size,
+      indeterminate = false,
+      label,
+      id,
+      disabled,
+      "aria-labelledby": labelledByProp
+    } = _b, props = __objRest(_b, [
+      "className",
+      "size",
+      "indeterminate",
+      "label",
+      "id",
+      "disabled",
+      "aria-labelledby"
+    ]);
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+      if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const autoId = useId();
+    const inputId = id != null ? id : autoId;
+    const labelId = `${inputId}-label`;
+    const labelledBy = labelledByProp && label ? `${labelledByProp} ${labelId}` : labelledByProp;
+    const s = size != null ? size : "md";
+    const control = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        __spreadValues({
+          ref: innerRef,
+          type: "checkbox",
+          id: inputId,
+          disabled,
+          "aria-labelledby": labelledBy,
+          className: cn(checkboxVariants({ size, className }))
+        }, props)
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-[:checked:not(:indeterminate)]:block",
+          children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5 9-10" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          className: "pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-indeterminate:block",
+          children: /* @__PURE__ */ jsx("path", { d: "M6 12h12" })
+        }
+      )
+    ] });
+    if (!label) return control;
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+      control,
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          id: labelId,
+          htmlFor: inputId,
+          className: cn(
+            "cursor-pointer text-glob-text",
+            labelSize[s],
+            disabled && "cursor-not-allowed opacity-50"
+          ),
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox,
+  checkboxVariants
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport { forwardRef, useEffect, useId, useImperativeHandle, useRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\n\nconst checkboxVariants = cva(\n  \"peer shrink-0 cursor-pointer appearance-none rounded-glob-sm border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary indeterminate:border-glob-primary indeterminate:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-glob-danger\",\n  {\n    variants: {\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      size: \"md\",\n    },\n  }\n)\n\nconst labelSize = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n}\n\nexport interface CheckboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">,\n    VariantProps<typeof checkboxVariants> {\n  /** Shows a dash instead of a check. Not a checked state; the browser clears it on click. */\n  indeterminate?: boolean\n  label?: React.ReactNode\n}\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className,\n      size,\n      indeterminate = false,\n      label,\n      id,\n      disabled,\n      \"aria-labelledby\": labelledByProp,\n      ...props\n    },\n    ref\n  ) => {\n    const innerRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)\n\n    // `indeterminate` only exists as a DOM property, not an HTML attribute.\n    useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = indeterminate\n    }, [indeterminate])\n\n    const autoId = useId()\n    const inputId = id ?? autoId\n    const labelId = `${inputId}-label`\n    // aria-labelledby (e.g. from Field) replaces the native <label for> name. Append our own\n    // label so the name stays \"Field label + checkbox label\", like several <label for> would.\n    const labelledBy = labelledByProp && label ? `${labelledByProp} ${labelId}` : labelledByProp\n    const s = size ?? \"md\"\n\n    const control = (\n      <span className=\"relative inline-flex shrink-0\">\n        <input\n          ref={innerRef}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          aria-labelledby={labelledBy}\n          className={cn(checkboxVariants({ size, className }))}\n          {...props}\n        />\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-[:checked:not(:indeterminate)]:block\"\n        >\n          <path d=\"M5 12l5 5 9-10\" />\n        </svg>\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          className=\"pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4 text-glob-primary-foreground peer-indeterminate:block\"\n        >\n          <path d=\"M6 12h12\" />\n        </svg>\n      </span>\n    )\n\n    if (!label) return control\n\n    return (\n      <span className=\"inline-flex items-center gap-2\">\n        {control}\n        <label\n          id={labelId}\n          htmlFor={inputId}\n          className={cn(\n            \"cursor-pointer text-glob-text\",\n            labelSize[s],\n            disabled && \"cursor-not-allowed opacity-50\"\n          )}\n        >\n          {label}\n        </label>\n      </span>\n    )\n  }\n)\nCheckbox.displayName = \"Checkbox\"\n\nexport { Checkbox, checkboxVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,YAAY,WAAW,OAAO,qBAAqB,cAAc;AAC1E,SAAS,WAA8B;AACvC,SAAS,UAAU;AA+Db,SACE,KADF;AA7DN,IAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUA,IAAM,WAAW;AAAA,EACf,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,IA7CzB,IAsCI,IAQK,kBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,WAAW,OAAyB,IAAI;AAC9C,wBAAoB,KAAK,MAAM,SAAS,OAA2B;AAGnE,cAAU,MAAM;AACd,UAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB;AAAA,IACzD,GAAG,CAAC,aAAa,CAAC;AAElB,UAAM,SAAS,MAAM;AACrB,UAAM,UAAU,kBAAM;AACtB,UAAM,UAAU,GAAG,OAAO;AAG1B,UAAM,aAAa,kBAAkB,QAAQ,GAAG,cAAc,IAAI,OAAO,KAAK;AAC9E,UAAM,IAAI,sBAAQ;AAElB,UAAM,UACJ,qBAAC,UAAK,WAAU,iCACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UACJ;AAAA,UACA,mBAAiB;AAAA,UACjB,WAAW,GAAG,iBAAiB,EAAE,MAAM,UAAU,CAAC,CAAC;AAAA,WAC/C;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAU;AAAA,UAEV,8BAAC,UAAK,GAAE,kBAAiB;AAAA;AAAA,MAC3B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,WAAU;AAAA,UAEV,8BAAC,UAAK,GAAE,YAAW;AAAA;AAAA,MACrB;AAAA,OACF;AAGF,QAAI,CAAC,MAAO,QAAO;AAEnB,WACE,qBAAC,UAAK,WAAU,kCACb;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,UAAU,CAAC;AAAA,YACX,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@glob-ui/checkbox",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "dependencies": {
+    "@glob-ui/utils": "0.1.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A native checkbox with a label, sizes, and an indeterminate state for groups.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "checkbox"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/checkbox"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }