@glob-ui/toggle 0.0.0-stage → 0.2.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/toggle
 
-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 button with a pressed state, and a group of them with single or multiple selection.
+
+## Install
+
+```bash
+pnpm add @glob-ui/toggle
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Toggle](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/toggle.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value">, VariantProps<typeof toggleVariants> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+}
+/** A button with an on and off state (`aria-pressed`). Give it an accessible name when it has only an icon. */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+type CommonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & VariantProps<typeof toggleVariants> & {
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+};
+type ToggleGroupSingleProps = CommonGroupProps & {
+    type: "single";
+    /** The pressed item's value, or "" when none is pressed. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type ToggleGroupMultipleProps = CommonGroupProps & {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+/**
+ * A row of toggles. `single` lets one item be pressed (pressing it again clears the choice);
+ * `multiple` lets several be pressed. Items are `aria-pressed` buttons in one tab stop: arrows move focus.
+ */
+declare const ToggleGroup: react.ForwardRefExoticComponent<ToggleGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface ToggleGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    /** The value this item stands for in the group's `value`. */
+    value: string;
+}
+declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleProps, toggleVariants };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value">, VariantProps<typeof toggleVariants> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+}
+/** A button with an on and off state (`aria-pressed`). Give it an accessible name when it has only an icon. */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+type CommonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & VariantProps<typeof toggleVariants> & {
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+};
+type ToggleGroupSingleProps = CommonGroupProps & {
+    type: "single";
+    /** The pressed item's value, or "" when none is pressed. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type ToggleGroupMultipleProps = CommonGroupProps & {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+/**
+ * A row of toggles. `single` lets one item be pressed (pressing it again clears the choice);
+ * `multiple` lets several be pressed. Items are `aria-pressed` buttons in one tab stop: arrows move focus.
+ */
+declare const ToggleGroup: react.ForwardRefExoticComponent<ToggleGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface ToggleGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    /** The value this item stands for in the group's `value`. */
+    value: string;
+}
+declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleProps, toggleVariants };

package/dist/index.js

@@ -0,0 +1,228 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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, {
+  Toggle: () => Toggle,
+  ToggleGroup: () => ToggleGroup,
+  ToggleGroupItem: () => ToggleGroupItem,
+  toggleVariants: () => toggleVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/toggle.tsx
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("@glob-ui/utils");
+var import_hooks = require("@glob-ui/hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 rounded-glob-md font-medium text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none data-[state=on]:bg-glob-primary-light data-[state=on]:text-glob-text",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-glob-border bg-transparent data-[state=on]:border-glob-primary"
+      },
+      size: {
+        sm: "h-8 px-2 text-xs",
+        md: "h-10 px-3 text-sm",
+        lg: "h-12 px-4 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Toggle = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, pressed, defaultPressed = false, onPressedChange, onClick, disabled } = _b, props = __objRest(_b, ["className", "variant", "size", "pressed", "defaultPressed", "onPressedChange", "onClick", "disabled"]);
+    const [isPressed, setPressed] = (0, import_hooks.useControllableState)(pressed, defaultPressed, onPressedChange);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      __spreadValues({
+        ref,
+        type: "button",
+        "aria-pressed": isPressed,
+        "data-state": isPressed ? "on" : "off",
+        disabled,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (!e.defaultPrevented) setPressed(!isPressed);
+        },
+        className: (0, import_utils.cn)(toggleVariants({ variant, size, className }))
+      }, props)
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var ToggleGroupContext = (0, import_react.createContext)(null);
+var ToggleGroup = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, {
+    type,
+    variant,
+    size,
+    orientation = "horizontal",
+    disabled = false,
+    className,
+    children,
+    value: rawValue,
+    defaultValue: rawDefault,
+    onValueChange: rawOnValueChange,
+    onFocus,
+    onKeyDown
+  } = _a, rest = __objRest(_a, [
+    "type",
+    "variant",
+    "size",
+    "orientation",
+    "disabled",
+    "className",
+    "children",
+    "value",
+    "defaultValue",
+    "onValueChange",
+    "onFocus",
+    "onKeyDown"
+  ]);
+  const onValueChange = rawOnValueChange;
+  const controlled = rawValue === void 0 ? void 0 : type === "single" ? rawValue ? [rawValue] : [] : rawValue;
+  const initial = rawDefault === void 0 ? [] : type === "single" ? rawDefault ? [rawDefault] : [] : rawDefault;
+  const [pressed, setPressed] = (0, import_hooks.useControllableState)(
+    controlled,
+    initial,
+    (next) => {
+      var _a2;
+      return onValueChange == null ? void 0 : onValueChange(type === "single" ? (_a2 = next[0]) != null ? _a2 : "" : next);
+    }
+  );
+  function select(item) {
+    if (type === "single") setPressed(pressed.includes(item) ? [] : [item]);
+    else setPressed(pressed.includes(item) ? pressed.filter((v) => v !== item) : [...pressed, item]);
+  }
+  const rootRef = (0, import_react.useRef)(null);
+  const stopRef = (0, import_react.useRef)(null);
+  const roving = (0, import_hooks.useRovingFocus)({ orientation, loop: true });
+  function syncTabStop() {
+    var _a2, _b;
+    const root = rootRef.current;
+    if (!root) return;
+    const items = Array.from(root.querySelectorAll("[data-roving-item]"));
+    const enabled = items.filter((el) => !el.disabled);
+    const stop = (_b = (_a2 = stopRef.current && enabled.includes(stopRef.current) ? stopRef.current : void 0) != null ? _a2 : enabled.find((el) => el.getAttribute("aria-pressed") === "true")) != null ? _b : enabled[0];
+    for (const el of items) el.tabIndex = el === stop ? 0 : -1;
+    stopRef.current = stop != null ? stop : null;
+  }
+  (0, import_react.useLayoutEffect)(syncTabStop);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupContext.Provider, { value: { pressed, select, variant, size, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      role: "group",
+      "aria-disabled": disabled || void 0
+    }, rest), {
+      "data-roving-root": "",
+      onKeyDown: (e) => {
+        onKeyDown == null ? void 0 : onKeyDown(e);
+        roving.onKeyDown(e);
+      },
+      onFocus: (e) => {
+        onFocus == null ? void 0 : onFocus(e);
+        stopRef.current = e.target;
+        syncTabStop();
+      },
+      className: (0, import_utils.cn)("inline-flex items-center gap-1", orientation === "vertical" && "flex-col", className),
+      children
+    })
+  ) });
+});
+ToggleGroup.displayName = "ToggleGroup";
+var ToggleGroupItem = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className, value, onClick, disabled, children } = _b, props = __objRest(_b, ["className", "value", "onClick", "disabled", "children"]);
+    const ctx = (0, import_react.useContext)(ToggleGroupContext);
+    if (!ctx) throw new Error("ToggleGroupItem must be used inside ToggleGroup");
+    const on = ctx.pressed.includes(value);
+    const isDisabled = disabled || ctx.disabled;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "data-roving-item": "",
+        "aria-pressed": on,
+        "data-state": on ? "on" : "off",
+        disabled: isDisabled,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (!e.defaultPrevented) ctx.select(value);
+        },
+        className: (0, import_utils.cn)(toggleVariants({ variant: ctx.variant, size: ctx.size, className }))
+      }, props), {
+        children
+      })
+    );
+  }
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  toggleVariants
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/toggle.tsx"],"sourcesContent":["export { Toggle, ToggleGroup, ToggleGroupItem, toggleVariants } from \"./toggle\"\nexport type { ToggleProps, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps } from \"./toggle\"\n","\"use client\"\n\nimport { createContext, forwardRef, useContext, useLayoutEffect, useRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState, useRovingFocus } from \"@glob-ui/hooks\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-glob-md font-medium text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none data-[state=on]:bg-glob-primary-light data-[state=on]:text-glob-text\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-glob-border bg-transparent data-[state=on]:border-glob-primary\",\n      },\n      size: {\n        sm: \"h-8 px-2 text-xs\",\n        md: \"h-10 px-3 text-sm\",\n        lg: \"h-12 px-4 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\nexport interface ToggleProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\">,\n    VariantProps<typeof toggleVariants> {\n  pressed?: boolean\n  defaultPressed?: boolean\n  onPressedChange?: (pressed: boolean) => void\n}\n\n/** A button with an on and off state (`aria-pressed`). Give it an accessible name when it has only an icon. */\nconst Toggle = forwardRef<HTMLButtonElement, ToggleProps>(\n  ({ className, variant, size, pressed, defaultPressed = false, onPressedChange, onClick, disabled, ...props }, ref) => {\n    const [isPressed, setPressed] = useControllableState(pressed, defaultPressed, onPressedChange)\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={isPressed}\n        data-state={isPressed ? \"on\" : \"off\"}\n        disabled={disabled}\n        onClick={(e) => {\n          onClick?.(e)\n          if (!e.defaultPrevented) setPressed(!isPressed)\n        }}\n        className={cn(toggleVariants({ variant, size, className }))}\n        {...props}\n      />\n    )\n  }\n)\nToggle.displayName = \"Toggle\"\n\ninterface ToggleGroupContextValue {\n  pressed: string[]\n  select: (value: string) => void\n  variant: VariantProps<typeof toggleVariants>[\"variant\"]\n  size: VariantProps<typeof toggleVariants>[\"size\"]\n  disabled: boolean\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null)\n\ntype CommonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"defaultValue\" | \"onChange\"> &\n  VariantProps<typeof toggleVariants> & {\n    orientation?: \"horizontal\" | \"vertical\"\n    disabled?: boolean\n  }\n\nexport type ToggleGroupSingleProps = CommonGroupProps & {\n  type: \"single\"\n  /** The pressed item's value, or \"\" when none is pressed. */\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport type ToggleGroupMultipleProps = CommonGroupProps & {\n  type: \"multiple\"\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps\n\n/**\n * A row of toggles. `single` lets one item be pressed (pressing it again clears the choice);\n * `multiple` lets several be pressed. Items are `aria-pressed` buttons in one tab stop: arrows move focus.\n */\nconst ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>((props, ref) => {\n  const {\n    type,\n    variant,\n    size,\n    orientation = \"horizontal\",\n    disabled = false,\n    className,\n    children,\n    value: rawValue,\n    defaultValue: rawDefault,\n    onValueChange: rawOnValueChange,\n    onFocus,\n    onKeyDown,\n    ...rest\n  } = props\n  const onValueChange = rawOnValueChange as ((v: string | string[]) => void) | undefined\n\n  // Internally a list of values; single mode maps \"\" to [] and back.\n  const controlled = rawValue === undefined ? undefined : type === \"single\" ? (rawValue ? [rawValue as string] : []) : (rawValue as string[])\n  const initial = rawDefault === undefined ? [] : type === \"single\" ? (rawDefault ? [rawDefault as string] : []) : (rawDefault as string[])\n  const [pressed, setPressed] = useControllableState<string[]>(controlled, initial, (next) =>\n    onValueChange?.(type === \"single\" ? (next[0] ?? \"\") : next)\n  )\n\n  function select(item: string) {\n    if (type === \"single\") setPressed(pressed.includes(item) ? [] : [item])\n    else setPressed(pressed.includes(item) ? pressed.filter((v) => v !== item) : [...pressed, item])\n  }\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const stopRef = useRef<HTMLElement | null>(null)\n  const roving = useRovingFocus({ orientation, loop: true })\n\n  // One tab stop: the last focused item, else the first pressed one, else the first enabled one.\n  function syncTabStop() {\n    const root = rootRef.current\n    if (!root) return\n    const items = Array.from(root.querySelectorAll<HTMLElement>(\"[data-roving-item]\"))\n    const enabled = items.filter((el) => !(el as HTMLButtonElement).disabled)\n    const stop =\n      (stopRef.current && enabled.includes(stopRef.current) ? stopRef.current : undefined) ??\n      enabled.find((el) => el.getAttribute(\"aria-pressed\") === \"true\") ??\n      enabled[0]\n    for (const el of items) el.tabIndex = el === stop ? 0 : -1\n    stopRef.current = stop ?? null\n  }\n  useLayoutEffect(syncTabStop)\n\n  return (\n    <ToggleGroupContext.Provider value={{ pressed, select, variant, size, disabled }}>\n      <div\n        ref={(node) => {\n          rootRef.current = node\n          if (typeof ref === \"function\") ref(node)\n          else if (ref) ref.current = node\n        }}\n        role=\"group\"\n        aria-disabled={disabled || undefined}\n        {...rest}\n        data-roving-root=\"\"\n        onKeyDown={(e) => {\n          onKeyDown?.(e)\n          roving.onKeyDown(e)\n        }}\n        onFocus={(e) => {\n          onFocus?.(e)\n          stopRef.current = e.target as HTMLElement\n          syncTabStop()\n        }}\n        className={cn(\"inline-flex items-center gap-1\", orientation === \"vertical\" && \"flex-col\", className)}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  )\n})\nToggleGroup.displayName = \"ToggleGroup\"\n\nexport interface ToggleGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  /** The value this item stands for in the group's `value`. */\n  value: string\n}\n\nconst ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(\n  ({ className, value, onClick, disabled, children, ...props }, ref) => {\n    const ctx = useContext(ToggleGroupContext)\n    if (!ctx) throw new Error(\"ToggleGroupItem must be used inside ToggleGroup\")\n    const on = ctx.pressed.includes(value)\n    const isDisabled = disabled || ctx.disabled\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-roving-item=\"\"\n        aria-pressed={on}\n        data-state={on ? \"on\" : \"off\"}\n        disabled={isDisabled}\n        onClick={(e) => {\n          onClick?.(e)\n          if (!e.defaultPrevented) ctx.select(value)\n        }}\n        className={cn(toggleVariants({ variant: ctx.variant, size: ctx.size, className }))}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  }\n)\nToggleGroupItem.displayName = \"ToggleGroupItem\"\n\nexport { Toggle, ToggleGroup, ToggleGroupItem, toggleVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA+E;AAC/E,sCAAuC;AACvC,mBAAmB;AACnB,mBAAqD;AAoC/C;AAlCN,IAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAWA,IAAM,aAAS;AAAA,EACb,CAAC,IAA6G,QAAQ;AAArH,iBAAE,aAAW,SAAS,MAAM,SAAS,iBAAiB,OAAO,iBAAiB,SAAS,SAtC1F,IAsCG,IAAoG,kBAApG,IAAoG,CAAlG,aAAW,WAAS,QAAM,WAAS,kBAAwB,mBAAiB,WAAS;AACtF,UAAM,CAAC,WAAW,UAAU,QAAI,mCAAqB,SAAS,gBAAgB,eAAe;AAC7F,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,cAAY,YAAY,OAAO;AAAA,QAC/B;AAAA,QACA,SAAS,CAAC,MAAM;AACd,6CAAU;AACV,cAAI,CAAC,EAAE,iBAAkB,YAAW,CAAC,SAAS;AAAA,QAChD;AAAA,QACA,eAAW,iBAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,SACtD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAUrB,IAAM,yBAAqB,4BAA8C,IAAI;AA6B7E,IAAM,kBAAc,yBAA6C,CAAC,OAAO,QAAQ;AAC/E,QAcI,YAbF;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EA7GJ,IA+GM,IADC,iBACD,IADC;AAAA,IAZH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,gBAAgB;AAGtB,QAAM,aAAa,aAAa,SAAY,SAAY,SAAS,WAAY,WAAW,CAAC,QAAkB,IAAI,CAAC,IAAM;AACtH,QAAM,UAAU,eAAe,SAAY,CAAC,IAAI,SAAS,WAAY,aAAa,CAAC,UAAoB,IAAI,CAAC,IAAM;AAClH,QAAM,CAAC,SAAS,UAAU,QAAI;AAAA,IAA+B;AAAA,IAAY;AAAA,IAAS,CAAC,SAAM;AArH3F,UAAAA;AAsHI,4DAAgB,SAAS,YAAYA,MAAA,KAAK,CAAC,MAAN,OAAAA,MAAW,KAAM;AAAA;AAAA,EACxD;AAEA,WAAS,OAAO,MAAc;AAC5B,QAAI,SAAS,SAAU,YAAW,QAAQ,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAAA,QACjE,YAAW,QAAQ,SAAS,IAAI,IAAI,QAAQ,OAAO,CAAC,MAAM,MAAM,IAAI,IAAI,CAAC,GAAG,SAAS,IAAI,CAAC;AAAA,EACjG;AAEA,QAAM,cAAU,qBAA8B,IAAI;AAClD,QAAM,cAAU,qBAA2B,IAAI;AAC/C,QAAM,aAAS,6BAAe,EAAE,aAAa,MAAM,KAAK,CAAC;AAGzD,WAAS,cAAc;AAnIzB,QAAAA,KAAA;AAoII,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,oBAAoB,CAAC;AACjF,UAAM,UAAU,MAAM,OAAO,CAAC,OAAO,CAAE,GAAyB,QAAQ;AACxE,UAAM,QACH,MAAAA,MAAA,QAAQ,WAAW,QAAQ,SAAS,QAAQ,OAAO,IAAI,QAAQ,UAAU,WAAzE,OAAAA,MACD,QAAQ,KAAK,CAAC,OAAO,GAAG,aAAa,cAAc,MAAM,MAAM,MAD9D,YAED,QAAQ,CAAC;AACX,eAAW,MAAM,MAAO,IAAG,WAAW,OAAO,OAAO,IAAI;AACxD,YAAQ,UAAU,sBAAQ;AAAA,EAC5B;AACA,oCAAgB,WAAW;AAE3B,SACE,4CAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,SAAS,QAAQ,SAAS,MAAM,SAAS,GAC7E;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,CAAC,SAAS;AACb,gBAAQ,UAAU;AAClB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,IAAK,KAAI,UAAU;AAAA,MAC9B;AAAA,MACA,MAAK;AAAA,MACL,iBAAe,YAAY;AAAA,OACvB,OARL;AAAA,MASC,oBAAiB;AAAA,MACjB,WAAW,CAAC,MAAM;AAChB,+CAAY;AACZ,eAAO,UAAU,CAAC;AAAA,MACpB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,2CAAU;AACV,gBAAQ,UAAU,EAAE;AACpB,oBAAY;AAAA,MACd;AAAA,MACA,eAAW,iBAAG,kCAAkC,gBAAgB,cAAc,YAAY,SAAS;AAAA,MAElG;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,YAAY,cAAc;AAO1B,IAAM,sBAAkB;AAAA,EACtB,CAAC,IAA6D,QAAQ;AAArE,iBAAE,aAAW,OAAO,SAAS,UAAU,SArL1C,IAqLG,IAAoD,kBAApD,IAAoD,CAAlD,aAAW,SAAO,WAAS,YAAU;AACtC,UAAM,UAAM,yBAAW,kBAAkB;AACzC,QAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iDAAiD;AAC3E,UAAM,KAAK,IAAI,QAAQ,SAAS,KAAK;AACrC,UAAM,aAAa,YAAY,IAAI;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,gBAAc;AAAA,QACd,cAAY,KAAK,OAAO;AAAA,QACxB,UAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACd,6CAAU;AACV,cAAI,CAAC,EAAE,iBAAkB,KAAI,OAAO,KAAK;AAAA,QAC3C;AAAA,QACA,eAAW,iBAAG,eAAe,EAAE,SAAS,IAAI,SAAS,MAAM,IAAI,MAAM,UAAU,CAAC,CAAC;AAAA,SAC7E,QAZL;AAAA,QAcE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;","names":["_a"]}

package/dist/index.mjs

@@ -0,0 +1,201 @@
+"use client"
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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/toggle.tsx
+import { createContext, forwardRef, useContext, useLayoutEffect, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@glob-ui/utils";
+import { useControllableState, useRovingFocus } from "@glob-ui/hooks";
+import { jsx } from "react/jsx-runtime";
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-glob-md font-medium text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none data-[state=on]:bg-glob-primary-light data-[state=on]:text-glob-text",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-glob-border bg-transparent data-[state=on]:border-glob-primary"
+      },
+      size: {
+        sm: "h-8 px-2 text-xs",
+        md: "h-10 px-3 text-sm",
+        lg: "h-12 px-4 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Toggle = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, pressed, defaultPressed = false, onPressedChange, onClick, disabled } = _b, props = __objRest(_b, ["className", "variant", "size", "pressed", "defaultPressed", "onPressedChange", "onClick", "disabled"]);
+    const [isPressed, setPressed] = useControllableState(pressed, defaultPressed, onPressedChange);
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadValues({
+        ref,
+        type: "button",
+        "aria-pressed": isPressed,
+        "data-state": isPressed ? "on" : "off",
+        disabled,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (!e.defaultPrevented) setPressed(!isPressed);
+        },
+        className: cn(toggleVariants({ variant, size, className }))
+      }, props)
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var ToggleGroupContext = createContext(null);
+var ToggleGroup = forwardRef((props, ref) => {
+  const _a = props, {
+    type,
+    variant,
+    size,
+    orientation = "horizontal",
+    disabled = false,
+    className,
+    children,
+    value: rawValue,
+    defaultValue: rawDefault,
+    onValueChange: rawOnValueChange,
+    onFocus,
+    onKeyDown
+  } = _a, rest = __objRest(_a, [
+    "type",
+    "variant",
+    "size",
+    "orientation",
+    "disabled",
+    "className",
+    "children",
+    "value",
+    "defaultValue",
+    "onValueChange",
+    "onFocus",
+    "onKeyDown"
+  ]);
+  const onValueChange = rawOnValueChange;
+  const controlled = rawValue === void 0 ? void 0 : type === "single" ? rawValue ? [rawValue] : [] : rawValue;
+  const initial = rawDefault === void 0 ? [] : type === "single" ? rawDefault ? [rawDefault] : [] : rawDefault;
+  const [pressed, setPressed] = useControllableState(
+    controlled,
+    initial,
+    (next) => {
+      var _a2;
+      return onValueChange == null ? void 0 : onValueChange(type === "single" ? (_a2 = next[0]) != null ? _a2 : "" : next);
+    }
+  );
+  function select(item) {
+    if (type === "single") setPressed(pressed.includes(item) ? [] : [item]);
+    else setPressed(pressed.includes(item) ? pressed.filter((v) => v !== item) : [...pressed, item]);
+  }
+  const rootRef = useRef(null);
+  const stopRef = useRef(null);
+  const roving = useRovingFocus({ orientation, loop: true });
+  function syncTabStop() {
+    var _a2, _b;
+    const root = rootRef.current;
+    if (!root) return;
+    const items = Array.from(root.querySelectorAll("[data-roving-item]"));
+    const enabled = items.filter((el) => !el.disabled);
+    const stop = (_b = (_a2 = stopRef.current && enabled.includes(stopRef.current) ? stopRef.current : void 0) != null ? _a2 : enabled.find((el) => el.getAttribute("aria-pressed") === "true")) != null ? _b : enabled[0];
+    for (const el of items) el.tabIndex = el === stop ? 0 : -1;
+    stopRef.current = stop != null ? stop : null;
+  }
+  useLayoutEffect(syncTabStop);
+  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { pressed, select, variant, size, disabled }, children: /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      role: "group",
+      "aria-disabled": disabled || void 0
+    }, rest), {
+      "data-roving-root": "",
+      onKeyDown: (e) => {
+        onKeyDown == null ? void 0 : onKeyDown(e);
+        roving.onKeyDown(e);
+      },
+      onFocus: (e) => {
+        onFocus == null ? void 0 : onFocus(e);
+        stopRef.current = e.target;
+        syncTabStop();
+      },
+      className: cn("inline-flex items-center gap-1", orientation === "vertical" && "flex-col", className),
+      children
+    })
+  ) });
+});
+ToggleGroup.displayName = "ToggleGroup";
+var ToggleGroupItem = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, value, onClick, disabled, children } = _b, props = __objRest(_b, ["className", "value", "onClick", "disabled", "children"]);
+    const ctx = useContext(ToggleGroupContext);
+    if (!ctx) throw new Error("ToggleGroupItem must be used inside ToggleGroup");
+    const on = ctx.pressed.includes(value);
+    const isDisabled = disabled || ctx.disabled;
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "data-roving-item": "",
+        "aria-pressed": on,
+        "data-state": on ? "on" : "off",
+        disabled: isDisabled,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (!e.defaultPrevented) ctx.select(value);
+        },
+        className: cn(toggleVariants({ variant: ctx.variant, size: ctx.size, className }))
+      }, props), {
+        children
+      })
+    );
+  }
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";
+export {
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  toggleVariants
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport { createContext, forwardRef, useContext, useLayoutEffect, useRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState, useRovingFocus } from \"@glob-ui/hooks\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-glob-md font-medium text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none data-[state=on]:bg-glob-primary-light data-[state=on]:text-glob-text\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-glob-border bg-transparent data-[state=on]:border-glob-primary\",\n      },\n      size: {\n        sm: \"h-8 px-2 text-xs\",\n        md: \"h-10 px-3 text-sm\",\n        lg: \"h-12 px-4 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\nexport interface ToggleProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\">,\n    VariantProps<typeof toggleVariants> {\n  pressed?: boolean\n  defaultPressed?: boolean\n  onPressedChange?: (pressed: boolean) => void\n}\n\n/** A button with an on and off state (`aria-pressed`). Give it an accessible name when it has only an icon. */\nconst Toggle = forwardRef<HTMLButtonElement, ToggleProps>(\n  ({ className, variant, size, pressed, defaultPressed = false, onPressedChange, onClick, disabled, ...props }, ref) => {\n    const [isPressed, setPressed] = useControllableState(pressed, defaultPressed, onPressedChange)\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={isPressed}\n        data-state={isPressed ? \"on\" : \"off\"}\n        disabled={disabled}\n        onClick={(e) => {\n          onClick?.(e)\n          if (!e.defaultPrevented) setPressed(!isPressed)\n        }}\n        className={cn(toggleVariants({ variant, size, className }))}\n        {...props}\n      />\n    )\n  }\n)\nToggle.displayName = \"Toggle\"\n\ninterface ToggleGroupContextValue {\n  pressed: string[]\n  select: (value: string) => void\n  variant: VariantProps<typeof toggleVariants>[\"variant\"]\n  size: VariantProps<typeof toggleVariants>[\"size\"]\n  disabled: boolean\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null)\n\ntype CommonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"defaultValue\" | \"onChange\"> &\n  VariantProps<typeof toggleVariants> & {\n    orientation?: \"horizontal\" | \"vertical\"\n    disabled?: boolean\n  }\n\nexport type ToggleGroupSingleProps = CommonGroupProps & {\n  type: \"single\"\n  /** The pressed item's value, or \"\" when none is pressed. */\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport type ToggleGroupMultipleProps = CommonGroupProps & {\n  type: \"multiple\"\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps\n\n/**\n * A row of toggles. `single` lets one item be pressed (pressing it again clears the choice);\n * `multiple` lets several be pressed. Items are `aria-pressed` buttons in one tab stop: arrows move focus.\n */\nconst ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>((props, ref) => {\n  const {\n    type,\n    variant,\n    size,\n    orientation = \"horizontal\",\n    disabled = false,\n    className,\n    children,\n    value: rawValue,\n    defaultValue: rawDefault,\n    onValueChange: rawOnValueChange,\n    onFocus,\n    onKeyDown,\n    ...rest\n  } = props\n  const onValueChange = rawOnValueChange as ((v: string | string[]) => void) | undefined\n\n  // Internally a list of values; single mode maps \"\" to [] and back.\n  const controlled = rawValue === undefined ? undefined : type === \"single\" ? (rawValue ? [rawValue as string] : []) : (rawValue as string[])\n  const initial = rawDefault === undefined ? [] : type === \"single\" ? (rawDefault ? [rawDefault as string] : []) : (rawDefault as string[])\n  const [pressed, setPressed] = useControllableState<string[]>(controlled, initial, (next) =>\n    onValueChange?.(type === \"single\" ? (next[0] ?? \"\") : next)\n  )\n\n  function select(item: string) {\n    if (type === \"single\") setPressed(pressed.includes(item) ? [] : [item])\n    else setPressed(pressed.includes(item) ? pressed.filter((v) => v !== item) : [...pressed, item])\n  }\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const stopRef = useRef<HTMLElement | null>(null)\n  const roving = useRovingFocus({ orientation, loop: true })\n\n  // One tab stop: the last focused item, else the first pressed one, else the first enabled one.\n  function syncTabStop() {\n    const root = rootRef.current\n    if (!root) return\n    const items = Array.from(root.querySelectorAll<HTMLElement>(\"[data-roving-item]\"))\n    const enabled = items.filter((el) => !(el as HTMLButtonElement).disabled)\n    const stop =\n      (stopRef.current && enabled.includes(stopRef.current) ? stopRef.current : undefined) ??\n      enabled.find((el) => el.getAttribute(\"aria-pressed\") === \"true\") ??\n      enabled[0]\n    for (const el of items) el.tabIndex = el === stop ? 0 : -1\n    stopRef.current = stop ?? null\n  }\n  useLayoutEffect(syncTabStop)\n\n  return (\n    <ToggleGroupContext.Provider value={{ pressed, select, variant, size, disabled }}>\n      <div\n        ref={(node) => {\n          rootRef.current = node\n          if (typeof ref === \"function\") ref(node)\n          else if (ref) ref.current = node\n        }}\n        role=\"group\"\n        aria-disabled={disabled || undefined}\n        {...rest}\n        data-roving-root=\"\"\n        onKeyDown={(e) => {\n          onKeyDown?.(e)\n          roving.onKeyDown(e)\n        }}\n        onFocus={(e) => {\n          onFocus?.(e)\n          stopRef.current = e.target as HTMLElement\n          syncTabStop()\n        }}\n        className={cn(\"inline-flex items-center gap-1\", orientation === \"vertical\" && \"flex-col\", className)}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  )\n})\nToggleGroup.displayName = \"ToggleGroup\"\n\nexport interface ToggleGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  /** The value this item stands for in the group's `value`. */\n  value: string\n}\n\nconst ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(\n  ({ className, value, onClick, disabled, children, ...props }, ref) => {\n    const ctx = useContext(ToggleGroupContext)\n    if (!ctx) throw new Error(\"ToggleGroupItem must be used inside ToggleGroup\")\n    const on = ctx.pressed.includes(value)\n    const isDisabled = disabled || ctx.disabled\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-roving-item=\"\"\n        aria-pressed={on}\n        data-state={on ? \"on\" : \"off\"}\n        disabled={isDisabled}\n        onClick={(e) => {\n          onClick?.(e)\n          if (!e.defaultPrevented) ctx.select(value)\n        }}\n        className={cn(toggleVariants({ variant: ctx.variant, size: ctx.size, className }))}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  }\n)\nToggleGroupItem.displayName = \"ToggleGroupItem\"\n\nexport { Toggle, ToggleGroup, ToggleGroupItem, toggleVariants }\n"],"mappings":"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","names":["_a"]}

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@glob-ui/toggle",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.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/hooks": "0.2.0",
+    "@glob-ui/utils": "0.2.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A button with a pressed state, and a group of them with single or multiple selection.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "toggle"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/toggle"
+  },
+  "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"
+  }
 }