@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/toggle-group.mjs

@@ -0,0 +1,180 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import {
+  createContext,
+  forwardRef,
+  useContext
+} from "react";
+const ToggleGroupContext = createContext({
+  variant: "default",
+  size: "md"
+});
+function useToggleGroupContext() {
+  return useContext(ToggleGroupContext);
+}
+const toggleGroupVariants = cva(
+  // Base styles — shared across all orientations
+  [
+    // Layout
+    "inline-flex items-center",
+    // Gap between items
+    "gap-1"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Orientation Variants
+      // -----------------------------------------------------------------
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+const toggleGroupItemVariants = cva(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "inline-flex items-center justify-center gap-2",
+    // Typography
+    "text-sm font-medium leading-5",
+    // Shape
+    "rounded-md",
+    // Transition (uses design system motion tokens)
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Focus ring — WCAG AA compliant, visible on keyboard navigation only
+    focusRingClasses,
+    // Disabled — consistent across all variants
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+    // Cursor
+    "cursor-pointer",
+    // Prevent text selection on rapid clicks
+    "select-none",
+    // Shrink protection
+    "shrink-0"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Default — transparent background, fills on press.
+         */
+        default: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-secondary data-[state=on]:text-foreground"
+        ],
+        /**
+         * Outline — bordered item with visible boundary.
+         */
+        outline: [
+          "border border-border",
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-secondary data-[state=on]:text-foreground",
+          "data-[state=on]:border-border-strong"
+        ],
+        /**
+         * Ghost — minimal visual weight.
+         */
+        ghost: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-transparent data-[state=on]:text-foreground"
+        ]
+      },
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — compact for dense UIs, toolbars.
+         * Height: 32px (h-8)
+         */
+        sm: "h-8 px-2 text-xs gap-1.5",
+        /**
+         * Medium — default size for most toggle groups.
+         * Height: 36px (h-9)
+         */
+        md: "h-9 px-3 text-sm gap-2",
+        /**
+         * Large — prominent for larger touch targets.
+         * Height: 40px (h-10)
+         */
+        lg: "h-10 px-4 text-sm gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const ToggleGroup = forwardRef(function ToggleGroup2({
+  variant = "default",
+  size = "md",
+  orientation = "horizontal",
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      ref,
+      orientation,
+      className: cn(toggleGroupVariants({ orientation }), className),
+      "data-ds": "",
+      "data-ds-component": "toggle-group",
+      "data-ds-variant": variant,
+      "data-ds-size": size,
+      "data-ds-orientation": orientation,
+      ...rest,
+      children
+    }
+  ) });
+});
+ToggleGroup.displayName = "ToggleGroup";
+const ToggleGroupItem = forwardRef(function ToggleGroupItem2({ variant: variantProp, size: sizeProp, className, children, ...rest }, ref) {
+  const context = useToggleGroupContext();
+  const variant = variantProp ?? context.variant;
+  const size = sizeProp ?? context.size;
+  const iconSizeClass = size === "sm" ? "[&>svg]:size-3.5" : "[&>svg]:size-4";
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleGroupItemVariants({ variant, size }),
+        iconSizeClass,
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "toggle-group-item",
+      "data-ds-variant": variant,
+      "data-ds-size": size,
+      ...rest,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  toggleGroupItemVariants,
+  toggleGroupVariants,
+  useToggleGroupContext
+};

package/dist/components/toggle.cjs

@@ -0,0 +1,155 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+var toggle_exports = {};
+__export(toggle_exports, {
+  Toggle: () => Toggle,
+  toggleVariants: () => toggleVariants
+});
+module.exports = __toCommonJS(toggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_focus_ring = require("../utils/focus-ring");
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const toggleVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "inline-flex items-center justify-center gap-2",
+    // Typography
+    "text-sm font-medium leading-5",
+    // Shape
+    "rounded-md",
+    // Transition (uses design system motion tokens)
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Focus ring — WCAG AA compliant, visible on keyboard navigation only
+    import_focus_ring.focusRingClasses,
+    // Disabled — consistent across all variants
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+    // Cursor
+    "cursor-pointer",
+    // Prevent text selection on rapid clicks
+    "select-none",
+    // Shrink protection
+    "shrink-0"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Default — transparent background, fills on press.
+         * Medium visual prominence. The most common toggle style.
+         */
+        default: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-secondary data-[state=on]:text-foreground"
+        ],
+        /**
+         * Outline — bordered toggle with visible boundary.
+         * Medium-high visual prominence. Use for toolbar-style toggles.
+         */
+        outline: [
+          "border border-border",
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-secondary data-[state=on]:text-foreground",
+          "data-[state=on]:border-border-strong"
+        ],
+        /**
+         * Ghost — minimal visual weight. No background until hover.
+         * Low visual prominence. Use for subtle inline toggles.
+         */
+        ghost: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-transparent data-[state=on]:text-foreground"
+        ]
+      },
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — compact toggles for dense UIs, toolbars.
+         * Height: 32px (h-8), Padding: 8px horizontal
+         */
+        sm: "h-8 px-2 text-xs gap-1.5",
+        /**
+         * Medium — default size for most toggles.
+         * Height: 36px (h-9), Padding: 12px horizontal
+         */
+        md: "h-9 px-3 text-sm gap-2",
+        /**
+         * Large — prominent toggles for larger touch targets.
+         * Height: 40px (h-10), Padding: 16px horizontal
+         */
+        lg: "h-10 px-4 text-sm gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const Toggle = (0, import_react.forwardRef)(function Toggle2({
+  variant = "default",
+  size = "md",
+  iconLeft,
+  iconRight,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const iconSizeClass = size === "sm" ? "[&>svg]:size-3.5" : "[&>svg]:size-4";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_radix_ui.Toggle.Root,
+    {
+      ref,
+      className: (0, import_cn.cn)(
+        toggleVariants({ variant, size }),
+        iconSizeClass,
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "toggle",
+      "data-ds-variant": variant,
+      "data-ds-size": size,
+      ...rest,
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", "aria-hidden": "true", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", "aria-hidden": "true", children: iconRight })
+      ]
+    }
+  );
+});
+Toggle.displayName = "Toggle";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toggle,
+  toggleVariants
+});

package/dist/components/toggle.d.cts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Toggle as Toggle$1 } from 'radix-ui';
+
+declare const toggleVariants: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleVariant = "default" | "outline" | "ghost";
+type ToggleSize = "sm" | "md" | "lg";
+interface ToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof Toggle$1.Root>, "asChild">, VariantProps<typeof toggleVariants> {
+    /**
+     * Visual variant of the toggle.
+     * @default "default"
+     */
+    variant?: ToggleVariant;
+    /**
+     * Size of the toggle.
+     * @default "md"
+     */
+    size?: ToggleSize;
+    /**
+     * Icon to display before the toggle label.
+     */
+    iconLeft?: ReactNode;
+    /**
+     * Icon to display after the toggle label.
+     */
+    iconRight?: ReactNode;
+    /** Content to render inside the toggle. */
+    children?: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * Toggle — a pressable on/off button for binary states.
+ *
+ * Built on Radix UI's Toggle primitive for accessibility and the design
+ * system's token layer for styling. Use for toolbar actions (bold, italic),
+ * view mode switches, mute/unmute, and other binary toggleable actions.
+ *
+ * Distinct from Switch: Toggle looks and behaves like a button that stays
+ * pressed. Switch looks like a sliding track and is better for settings/preferences.
+ *
+ * Accessibility:
+ *   - Radix handles `aria-pressed` state management
+ *   - Focus ring visible on keyboard navigation (focus-visible)
+ *   - Disabled state uses both `disabled` attribute and `data-disabled`
+ *   - Keyboard toggle via Space and Enter keys (Radix)
+ *   - When used as icon-only, provide `aria-label`
+ *
+ * @example
+ * ```tsx
+ * // Icon-only toggle (must have aria-label)
+ * <Toggle aria-label="Toggle bold">
+ *   <BoldIcon className="size-4" />
+ * </Toggle>
+ *
+ * // With text label
+ * <Toggle variant="outline">
+ *   <BoldIcon className="size-4" />
+ *   Bold
+ * </Toggle>
+ *
+ * // Controlled
+ * <Toggle
+ *   pressed={isMuted}
+ *   onPressedChange={setIsMuted}
+ *   aria-label="Toggle mute"
+ * >
+ *   {isMuted ? <VolumeOffIcon /> : <VolumeIcon />}
+ * </Toggle>
+ *
+ * // Sizes
+ * <Toggle size="sm" aria-label="Small toggle">
+ *   <StarIcon className="size-3.5" />
+ * </Toggle>
+ * <Toggle size="md" aria-label="Medium toggle">
+ *   <StarIcon className="size-4" />
+ * </Toggle>
+ * <Toggle size="lg" aria-label="Large toggle">
+ *   <StarIcon className="size-4" />
+ * </Toggle>
+ *
+ * // Disabled
+ * <Toggle disabled aria-label="Disabled toggle">
+ *   <LockIcon className="size-4" />
+ * </Toggle>
+ *
+ * // Ghost variant
+ * <Toggle variant="ghost" aria-label="Bookmark">
+ *   <BookmarkIcon className="size-4" />
+ * </Toggle>
+ * ```
+ */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, toggleVariants };

package/dist/components/toggle.d.ts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Toggle as Toggle$1 } from 'radix-ui';
+
+declare const toggleVariants: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleVariant = "default" | "outline" | "ghost";
+type ToggleSize = "sm" | "md" | "lg";
+interface ToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof Toggle$1.Root>, "asChild">, VariantProps<typeof toggleVariants> {
+    /**
+     * Visual variant of the toggle.
+     * @default "default"
+     */
+    variant?: ToggleVariant;
+    /**
+     * Size of the toggle.
+     * @default "md"
+     */
+    size?: ToggleSize;
+    /**
+     * Icon to display before the toggle label.
+     */
+    iconLeft?: ReactNode;
+    /**
+     * Icon to display after the toggle label.
+     */
+    iconRight?: ReactNode;
+    /** Content to render inside the toggle. */
+    children?: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * Toggle — a pressable on/off button for binary states.
+ *
+ * Built on Radix UI's Toggle primitive for accessibility and the design
+ * system's token layer for styling. Use for toolbar actions (bold, italic),
+ * view mode switches, mute/unmute, and other binary toggleable actions.
+ *
+ * Distinct from Switch: Toggle looks and behaves like a button that stays
+ * pressed. Switch looks like a sliding track and is better for settings/preferences.
+ *
+ * Accessibility:
+ *   - Radix handles `aria-pressed` state management
+ *   - Focus ring visible on keyboard navigation (focus-visible)
+ *   - Disabled state uses both `disabled` attribute and `data-disabled`
+ *   - Keyboard toggle via Space and Enter keys (Radix)
+ *   - When used as icon-only, provide `aria-label`
+ *
+ * @example
+ * ```tsx
+ * // Icon-only toggle (must have aria-label)
+ * <Toggle aria-label="Toggle bold">
+ *   <BoldIcon className="size-4" />
+ * </Toggle>
+ *
+ * // With text label
+ * <Toggle variant="outline">
+ *   <BoldIcon className="size-4" />
+ *   Bold
+ * </Toggle>
+ *
+ * // Controlled
+ * <Toggle
+ *   pressed={isMuted}
+ *   onPressedChange={setIsMuted}
+ *   aria-label="Toggle mute"
+ * >
+ *   {isMuted ? <VolumeOffIcon /> : <VolumeIcon />}
+ * </Toggle>
+ *
+ * // Sizes
+ * <Toggle size="sm" aria-label="Small toggle">
+ *   <StarIcon className="size-3.5" />
+ * </Toggle>
+ * <Toggle size="md" aria-label="Medium toggle">
+ *   <StarIcon className="size-4" />
+ * </Toggle>
+ * <Toggle size="lg" aria-label="Large toggle">
+ *   <StarIcon className="size-4" />
+ * </Toggle>
+ *
+ * // Disabled
+ * <Toggle disabled aria-label="Disabled toggle">
+ *   <LockIcon className="size-4" />
+ * </Toggle>
+ *
+ * // Ghost variant
+ * <Toggle variant="ghost" aria-label="Bookmark">
+ *   <BookmarkIcon className="size-4" />
+ * </Toggle>
+ * ```
+ */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, toggleVariants };

package/dist/components/toggle.mjs

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+import { forwardRef } from "react";
+const toggleVariants = cva(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "inline-flex items-center justify-center gap-2",
+    // Typography
+    "text-sm font-medium leading-5",
+    // Shape
+    "rounded-md",
+    // Transition (uses design system motion tokens)
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Focus ring — WCAG AA compliant, visible on keyboard navigation only
+    focusRingClasses,
+    // Disabled — consistent across all variants
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+    // Cursor
+    "cursor-pointer",
+    // Prevent text selection on rapid clicks
+    "select-none",
+    // Shrink protection
+    "shrink-0"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Default — transparent background, fills on press.
+         * Medium visual prominence. The most common toggle style.
+         */
+        default: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-secondary data-[state=on]:text-foreground"
+        ],
+        /**
+         * Outline — bordered toggle with visible boundary.
+         * Medium-high visual prominence. Use for toolbar-style toggles.
+         */
+        outline: [
+          "border border-border",
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-secondary data-[state=on]:text-foreground",
+          "data-[state=on]:border-border-strong"
+        ],
+        /**
+         * Ghost — minimal visual weight. No background until hover.
+         * Low visual prominence. Use for subtle inline toggles.
+         */
+        ghost: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-transparent data-[state=on]:text-foreground"
+        ]
+      },
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — compact toggles for dense UIs, toolbars.
+         * Height: 32px (h-8), Padding: 8px horizontal
+         */
+        sm: "h-8 px-2 text-xs gap-1.5",
+        /**
+         * Medium — default size for most toggles.
+         * Height: 36px (h-9), Padding: 12px horizontal
+         */
+        md: "h-9 px-3 text-sm gap-2",
+        /**
+         * Large — prominent toggles for larger touch targets.
+         * Height: 40px (h-10), Padding: 16px horizontal
+         */
+        lg: "h-10 px-4 text-sm gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const Toggle = forwardRef(function Toggle2({
+  variant = "default",
+  size = "md",
+  iconLeft,
+  iconRight,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const iconSizeClass = size === "sm" ? "[&>svg]:size-3.5" : "[&>svg]:size-4";
+  return /* @__PURE__ */ jsxs(
+    TogglePrimitive.Root,
+    {
+      ref,
+      className: cn(
+        toggleVariants({ variant, size }),
+        iconSizeClass,
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "toggle",
+      "data-ds-variant": variant,
+      "data-ds-size": size,
+      ...rest,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: iconRight })
+      ]
+    }
+  );
+});
+Toggle.displayName = "Toggle";
+export {
+  Toggle,
+  toggleVariants
+};