@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/toggle-group.cjs

@@ -0,0 +1,204 @@
+"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_group_exports = {};
+__export(toggle_group_exports, {
+  ToggleGroup: () => ToggleGroup,
+  ToggleGroupItem: () => ToggleGroupItem,
+  toggleGroupItemVariants: () => toggleGroupItemVariants,
+  toggleGroupVariants: () => toggleGroupVariants,
+  useToggleGroupContext: () => useToggleGroupContext
+});
+module.exports = __toCommonJS(toggle_group_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_focus_ring = require("../utils/focus-ring.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const ToggleGroupContext = (0, import_react.createContext)({
+  variant: "default",
+  size: "md"
+});
+function useToggleGroupContext() {
+  return (0, import_react.useContext)(ToggleGroupContext);
+}
+const toggleGroupVariants = (0, import_class_variance_authority.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 = (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.
+         */
+        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 = (0, import_react.forwardRef)(function ToggleGroup2({
+  variant = "default",
+  size = "md",
+  orientation = "horizontal",
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.ToggleGroup.Root,
+    {
+      ref,
+      orientation,
+      className: (0, import_cn.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 = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.ToggleGroup.Item,
+    {
+      ref,
+      className: (0, import_cn.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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleGroup,
+  ToggleGroupItem,
+  toggleGroupItemVariants,
+  toggleGroupVariants,
+  useToggleGroupContext
+});

package/dist/components/toggle-group.d.cts

@@ -0,0 +1,215 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+
+interface ToggleGroupContextValue {
+    variant: ToggleGroupVariant;
+    size: ToggleGroupSize;
+}
+declare function useToggleGroupContext(): ToggleGroupContextValue;
+declare const toggleGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const toggleGroupItemVariants: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleGroupVariant = "default" | "outline" | "ghost";
+type ToggleGroupSize = "sm" | "md" | "lg";
+type ToggleGroupOrientation = "horizontal" | "vertical";
+interface ToggleGroupSingleProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup$1.Root>, "type" | "asChild" | "rovingFocus" | "orientation"> {
+    /**
+     * Selection mode: only one item can be active at a time.
+     */
+    type: "single";
+    /**
+     * The controlled value of the active item.
+     */
+    value?: string;
+    /**
+     * The default value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the active item changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Visual variant applied to all items in the group.
+     * @default "default"
+     */
+    variant?: ToggleGroupVariant;
+    /**
+     * Size applied to all items in the group.
+     * @default "md"
+     */
+    size?: ToggleGroupSize;
+    /**
+     * Orientation of the toggle group.
+     * @default "horizontal"
+     */
+    orientation?: ToggleGroupOrientation;
+    /**
+     * Whether the group is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content to render inside the group (ToggleGroupItem children). */
+    children: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+interface ToggleGroupMultipleProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup$1.Root>, "type" | "asChild" | "rovingFocus" | "orientation"> {
+    /**
+     * Selection mode: multiple items can be active simultaneously.
+     */
+    type: "multiple";
+    /**
+     * The controlled value of the active items.
+     */
+    value?: string[];
+    /**
+     * The default value for uncontrolled usage.
+     */
+    defaultValue?: string[];
+    /**
+     * Callback fired when the active items change.
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Visual variant applied to all items in the group.
+     * @default "default"
+     */
+    variant?: ToggleGroupVariant;
+    /**
+     * Size applied to all items in the group.
+     * @default "md"
+     */
+    size?: ToggleGroupSize;
+    /**
+     * Orientation of the toggle group.
+     * @default "horizontal"
+     */
+    orientation?: ToggleGroupOrientation;
+    /**
+     * Whether the group is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content to render inside the group (ToggleGroupItem children). */
+    children: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+interface ToggleGroupItemProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup$1.Item>, "asChild"> {
+    /**
+     * The unique value for this item.
+     */
+    value: string;
+    /**
+     * Override the group-level variant for this specific item.
+     */
+    variant?: ToggleGroupVariant;
+    /**
+     * Override the group-level size for this specific item.
+     */
+    size?: ToggleGroupSize;
+    /** Content to render inside the toggle item. */
+    children?: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * ToggleGroup — a group of toggle buttons with single or multi-select behavior.
+ *
+ * Built on Radix UI's ToggleGroup primitive for accessibility and the
+ * design system's token layer for styling. Supports both single-select
+ * (radio-like) and multi-select (checkbox-like) modes.
+ *
+ * The group shares variant and size context with its items, so you only
+ * need to set these once on the group level. Individual items can override
+ * these if needed.
+ *
+ * Accessibility:
+ *   - Radix handles `role="group"` on the root
+ *   - Radix handles `aria-pressed` on each item
+ *   - Roving tabindex for keyboard navigation (arrow keys move between items)
+ *   - Space/Enter toggles the focused item
+ *   - Disabled state on group propagates to all items
+ *   - Each icon-only item should have an `aria-label`
+ *
+ * @example
+ * ```tsx
+ * // Single-select: text alignment
+ * <ToggleGroup type="single" value={align} onValueChange={setAlign}>
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon className="size-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon className="size-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon className="size-4" />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * // Multi-select: text formatting
+ * <ToggleGroup type="multiple" variant="outline" size="sm">
+ *   <ToggleGroupItem value="bold" aria-label="Bold">
+ *     <BoldIcon className="size-3.5" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Italic">
+ *     <ItalicIcon className="size-3.5" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Underline">
+ *     <UnderlineIcon className="size-3.5" />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * // Vertical orientation
+ * <ToggleGroup type="single" orientation="vertical">
+ *   <ToggleGroupItem value="list">List view</ToggleGroupItem>
+ *   <ToggleGroupItem value="grid">Grid view</ToggleGroupItem>
+ *   <ToggleGroupItem value="board">Board view</ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * // Disabled
+ * <ToggleGroup type="single" disabled>
+ *   <ToggleGroupItem value="a">A</ToggleGroupItem>
+ *   <ToggleGroupItem value="b">B</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+declare const ToggleGroup: react.ForwardRefExoticComponent<ToggleGroupProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ToggleGroupItem — an individual toggle button within a ToggleGroup.
+ *
+ * Inherits variant and size from the parent ToggleGroup context, but
+ * can override them per-item if needed.
+ *
+ * When used as an icon-only item, always provide an `aria-label` for
+ * accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroupItem value="bold" aria-label="Bold">
+ *   <BoldIcon className="size-4" />
+ * </ToggleGroupItem>
+ *
+ * // With text label
+ * <ToggleGroupItem value="grid">
+ *   <GridIcon className="size-4" />
+ *   Grid view
+ * </ToggleGroupItem>
+ *
+ * // Override group variant/size
+ * <ToggleGroupItem value="special" variant="outline" size="lg">
+ *   Special
+ * </ToggleGroupItem>
+ * ```
+ */
+declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, toggleGroupItemVariants, toggleGroupVariants, useToggleGroupContext };

package/dist/components/toggle-group.d.ts

@@ -0,0 +1,215 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+
+interface ToggleGroupContextValue {
+    variant: ToggleGroupVariant;
+    size: ToggleGroupSize;
+}
+declare function useToggleGroupContext(): ToggleGroupContextValue;
+declare const toggleGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const toggleGroupItemVariants: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleGroupVariant = "default" | "outline" | "ghost";
+type ToggleGroupSize = "sm" | "md" | "lg";
+type ToggleGroupOrientation = "horizontal" | "vertical";
+interface ToggleGroupSingleProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup$1.Root>, "type" | "asChild" | "rovingFocus" | "orientation"> {
+    /**
+     * Selection mode: only one item can be active at a time.
+     */
+    type: "single";
+    /**
+     * The controlled value of the active item.
+     */
+    value?: string;
+    /**
+     * The default value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the active item changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Visual variant applied to all items in the group.
+     * @default "default"
+     */
+    variant?: ToggleGroupVariant;
+    /**
+     * Size applied to all items in the group.
+     * @default "md"
+     */
+    size?: ToggleGroupSize;
+    /**
+     * Orientation of the toggle group.
+     * @default "horizontal"
+     */
+    orientation?: ToggleGroupOrientation;
+    /**
+     * Whether the group is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content to render inside the group (ToggleGroupItem children). */
+    children: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+interface ToggleGroupMultipleProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup$1.Root>, "type" | "asChild" | "rovingFocus" | "orientation"> {
+    /**
+     * Selection mode: multiple items can be active simultaneously.
+     */
+    type: "multiple";
+    /**
+     * The controlled value of the active items.
+     */
+    value?: string[];
+    /**
+     * The default value for uncontrolled usage.
+     */
+    defaultValue?: string[];
+    /**
+     * Callback fired when the active items change.
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Visual variant applied to all items in the group.
+     * @default "default"
+     */
+    variant?: ToggleGroupVariant;
+    /**
+     * Size applied to all items in the group.
+     * @default "md"
+     */
+    size?: ToggleGroupSize;
+    /**
+     * Orientation of the toggle group.
+     * @default "horizontal"
+     */
+    orientation?: ToggleGroupOrientation;
+    /**
+     * Whether the group is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content to render inside the group (ToggleGroupItem children). */
+    children: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+interface ToggleGroupItemProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup$1.Item>, "asChild"> {
+    /**
+     * The unique value for this item.
+     */
+    value: string;
+    /**
+     * Override the group-level variant for this specific item.
+     */
+    variant?: ToggleGroupVariant;
+    /**
+     * Override the group-level size for this specific item.
+     */
+    size?: ToggleGroupSize;
+    /** Content to render inside the toggle item. */
+    children?: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * ToggleGroup — a group of toggle buttons with single or multi-select behavior.
+ *
+ * Built on Radix UI's ToggleGroup primitive for accessibility and the
+ * design system's token layer for styling. Supports both single-select
+ * (radio-like) and multi-select (checkbox-like) modes.
+ *
+ * The group shares variant and size context with its items, so you only
+ * need to set these once on the group level. Individual items can override
+ * these if needed.
+ *
+ * Accessibility:
+ *   - Radix handles `role="group"` on the root
+ *   - Radix handles `aria-pressed` on each item
+ *   - Roving tabindex for keyboard navigation (arrow keys move between items)
+ *   - Space/Enter toggles the focused item
+ *   - Disabled state on group propagates to all items
+ *   - Each icon-only item should have an `aria-label`
+ *
+ * @example
+ * ```tsx
+ * // Single-select: text alignment
+ * <ToggleGroup type="single" value={align} onValueChange={setAlign}>
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon className="size-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon className="size-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon className="size-4" />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * // Multi-select: text formatting
+ * <ToggleGroup type="multiple" variant="outline" size="sm">
+ *   <ToggleGroupItem value="bold" aria-label="Bold">
+ *     <BoldIcon className="size-3.5" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Italic">
+ *     <ItalicIcon className="size-3.5" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Underline">
+ *     <UnderlineIcon className="size-3.5" />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * // Vertical orientation
+ * <ToggleGroup type="single" orientation="vertical">
+ *   <ToggleGroupItem value="list">List view</ToggleGroupItem>
+ *   <ToggleGroupItem value="grid">Grid view</ToggleGroupItem>
+ *   <ToggleGroupItem value="board">Board view</ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * // Disabled
+ * <ToggleGroup type="single" disabled>
+ *   <ToggleGroupItem value="a">A</ToggleGroupItem>
+ *   <ToggleGroupItem value="b">B</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+declare const ToggleGroup: react.ForwardRefExoticComponent<ToggleGroupProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ToggleGroupItem — an individual toggle button within a ToggleGroup.
+ *
+ * Inherits variant and size from the parent ToggleGroup context, but
+ * can override them per-item if needed.
+ *
+ * When used as an icon-only item, always provide an `aria-label` for
+ * accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroupItem value="bold" aria-label="Bold">
+ *   <BoldIcon className="size-4" />
+ * </ToggleGroupItem>
+ *
+ * // With text label
+ * <ToggleGroupItem value="grid">
+ *   <GridIcon className="size-4" />
+ *   Grid view
+ * </ToggleGroupItem>
+ *
+ * // Override group variant/size
+ * <ToggleGroupItem value="special" variant="outline" size="lg">
+ *   Special
+ * </ToggleGroupItem>
+ * ```
+ */
+declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, toggleGroupItemVariants, toggleGroupVariants, useToggleGroupContext };