@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-LSRKDZW4.js

@@ -0,0 +1,226 @@
+import { Checkbox } from './chunk-JXEIRIU4.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { useId, useState, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var checkboxGroupVariants = cva("grid gap-3", {
+  variants: {
+    orientation: {
+      vertical: "grid-flow-row",
+      horizontal: "grid-flow-col auto-cols-max"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var checkboxGroupItemWrapperVariants = cva(
+  "flex gap-2",
+  {
+    variants: {
+      hasDescription: {
+        true: "items-start",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      hasDescription: false
+    }
+  }
+);
+var checkboxGroupLabelVariants = cva(
+  [
+    "font-medium leading-tight cursor-pointer select-none",
+    "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var checkboxGroupDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-xs",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var checkboxGroupHeaderVariants = cva(
+  "font-medium text-foreground mb-2",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function CheckboxGroupItem({
+  className,
+  size = "md",
+  label,
+  description,
+  id,
+  value,
+  checked,
+  onCheckedChange,
+  disabled,
+  name
+}) {
+  const generatedId = useId();
+  const itemId = id ?? generatedId;
+  const hasDescription = !!description;
+  const checkbox = /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked,
+      className: "mt-0.5",
+      disabled,
+      id: itemId,
+      name,
+      size,
+      value,
+      onCheckedChange: (state) => {
+        if (typeof state === "boolean") {
+          onCheckedChange?.(state);
+        }
+      }
+    }
+  );
+  if (!label) return checkbox;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        checkboxGroupItemWrapperVariants({ hasDescription }),
+        className
+      ),
+      "data-disabled": disabled ?? void 0,
+      "data-slot": "checkbox-group-item",
+      children: [
+        checkbox,
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: checkboxGroupLabelVariants({ size }),
+              "data-slot": "checkbox-group-item-label",
+              htmlFor: itemId,
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: checkboxGroupDescriptionVariants({ size }),
+              "data-slot": "checkbox-group-item-description",
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CheckboxGroup({
+  className,
+  label,
+  options,
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  orientation = "vertical",
+  size = "md",
+  disabled,
+  name,
+  required
+}) {
+  const groupId = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const selectedValues = isControlled ? controlledValue : internalValue;
+  const handleCheckedChange = useCallback(
+    (optionValue, checked) => {
+      const newValues = checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue);
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+      onChange?.(newValues);
+    },
+    [selectedValues, isControlled, onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": label ? `${groupId}-label` : void 0,
+      "aria-required": required,
+      className: cn("flex flex-col", className),
+      "data-orientation": orientation,
+      "data-slot": "checkbox-group",
+      role: "group",
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: checkboxGroupHeaderVariants({ size }),
+            "data-slot": "checkbox-group-label",
+            id: `${groupId}-label`,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: checkboxGroupVariants({ orientation }),
+            "data-slot": "checkbox-group-items",
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              CheckboxGroupItem,
+              {
+                checked: selectedValues.includes(option.value),
+                description: option.description,
+                disabled: disabled || option.disabled,
+                label: option.label,
+                name,
+                size,
+                value: option.value,
+                onCheckedChange: (checked) => {
+                  handleCheckedChange(option.value, checked);
+                }
+              },
+              option.value
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CheckboxGroup, CheckboxGroupItem, checkboxGroupDescriptionVariants, checkboxGroupHeaderVariants, checkboxGroupItemWrapperVariants, checkboxGroupLabelVariants, checkboxGroupVariants };
+//# sourceMappingURL=chunk-LSRKDZW4.js.map
+//# sourceMappingURL=chunk-LSRKDZW4.js.map

package/dist/chunk-LSRKDZW4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/CheckboxGroup/CheckboxGroup.variants.ts","../src/components/forms/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"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","file":"chunk-LSRKDZW4.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const checkboxGroupVariants = cva(\"grid gap-3\", {\n  variants: {\n    orientation: {\n      vertical: \"grid-flow-row\",\n      horizontal: \"grid-flow-col auto-cols-max\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n})\n\nexport const checkboxGroupItemWrapperVariants = cva(\n  \"flex gap-2\",\n  {\n    variants: {\n      hasDescription: {\n        true: \"items-start\",\n        false: \"items-center\",\n      },\n    },\n    defaultVariants: {\n      hasDescription: false,\n    },\n  }\n)\n\nexport const checkboxGroupLabelVariants = cva(\n  [\n    \"font-medium leading-tight cursor-pointer select-none\",\n    \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const checkboxGroupDescriptionVariants = cva(\n  \"text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-xs\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const checkboxGroupHeaderVariants = cva(\n  \"font-medium text-foreground mb-2\",\n  {\n    variants: {\n      size: {\n        sm: \"text-sm\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type CheckboxGroupVariantProps = VariantProps<typeof checkboxGroupVariants>\nexport type CheckboxGroupItemWrapperVariantProps = VariantProps<typeof checkboxGroupItemWrapperVariants>\nexport type CheckboxGroupLabelVariantProps = VariantProps<typeof checkboxGroupLabelVariants>\nexport type CheckboxGroupDescriptionVariantProps = VariantProps<typeof checkboxGroupDescriptionVariants>\nexport type CheckboxGroupHeaderVariantProps = VariantProps<typeof checkboxGroupHeaderVariants>\n","\"use client\"\n\nimport type {\n  CheckboxGroupItemProps,\n  CheckboxGroupProps,\n} from \"./CheckboxGroup.types\"\n\nimport * as React from \"react\"\nimport { useCallback, useId, useState } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Checkbox } from \"../Checkbox\"\nimport {\n  checkboxGroupDescriptionVariants,\n  checkboxGroupHeaderVariants,\n  checkboxGroupItemWrapperVariants,\n  checkboxGroupLabelVariants,\n  checkboxGroupVariants,\n} from \"./CheckboxGroup.variants\"\n\n/**\n * CheckboxGroupItem - Individual checkbox with optional label and description\n *\n * @example\n * ```tsx\n * <CheckboxGroupItem\n *   value=\"option1\"\n *   label=\"Option 1\"\n *   description=\"Description for option 1\"\n *   checked={selected.includes(\"option1\")}\n *   onCheckedChange={(checked) => handleChange(\"option1\", checked)}\n * />\n * ```\n */\nfunction CheckboxGroupItem({\n  className,\n  size = \"md\",\n  label,\n  description,\n  id,\n  value,\n  checked,\n  onCheckedChange,\n  disabled,\n  name,\n}: CheckboxGroupItemProps) {\n  const generatedId = useId()\n  const itemId = id ?? generatedId\n  const hasDescription = !!description\n\n  const checkbox = (\n    <Checkbox\n      checked={checked}\n      className=\"mt-0.5\"\n      disabled={disabled}\n      id={itemId}\n      name={name}\n      size={size}\n      value={value}\n      onCheckedChange={(state) => {\n        if (typeof state === \"boolean\") {\n          onCheckedChange?.(state)\n        }\n      }}\n    />\n  )\n\n  if (!label) return checkbox\n\n  return (\n    <div\n      className={cn(\n        checkboxGroupItemWrapperVariants({ hasDescription }),\n        className\n      )}\n      data-disabled={disabled ?? undefined}\n      data-slot=\"checkbox-group-item\"\n    >\n      {checkbox}\n      <div className=\"grid gap-0.5\">\n        <label\n          className={checkboxGroupLabelVariants({ size })}\n          data-slot=\"checkbox-group-item-label\"\n          htmlFor={itemId}\n        >\n          {label}\n        </label>\n        {description && (\n          <p\n            className={checkboxGroupDescriptionVariants({ size })}\n            data-slot=\"checkbox-group-item-description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * CheckboxGroup - A group of related checkboxes with shared state management\n *\n * @example\n * ```tsx\n * // Uncontrolled\n * <CheckboxGroup\n *   label=\"Select features\"\n *   options={[\n *     { value: \"feature1\", label: \"Feature 1\" },\n *     { value: \"feature2\", label: \"Feature 2\" },\n *     { value: \"feature3\", label: \"Feature 3\", disabled: true },\n *   ]}\n *   defaultValue={[\"feature1\"]}\n * />\n *\n * // Controlled\n * const [selected, setSelected] = useState([\"feature1\"])\n * <CheckboxGroup\n *   label=\"Select features\"\n *   options={[\n *     { value: \"feature1\", label: \"Feature 1\" },\n *     { value: \"feature2\", label: \"Feature 2\" },\n *   ]}\n *   value={selected}\n *   onChange={setSelected}\n * />\n * ```\n */\nfunction CheckboxGroup({\n  className,\n  label,\n  options,\n  value: controlledValue,\n  defaultValue = [],\n  onChange,\n  orientation = \"vertical\",\n  size = \"md\",\n  disabled,\n  name,\n  required,\n}: CheckboxGroupProps) {\n  const groupId = useId()\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n\n  // Determine if controlled\n  const isControlled = controlledValue !== undefined\n  const selectedValues = isControlled ? controlledValue : internalValue\n\n  const handleCheckedChange = useCallback(\n    (optionValue: string, checked: boolean) => {\n      const newValues = checked\n        ? [...selectedValues, optionValue]\n        : selectedValues.filter((v) => v !== optionValue)\n\n      if (!isControlled) {\n        setInternalValue(newValues)\n      }\n\n      onChange?.(newValues)\n    },\n    [selectedValues, isControlled, onChange]\n  )\n\n  return (\n    <div\n      aria-labelledby={label ? `${groupId}-label` : undefined}\n      aria-required={required}\n      className={cn(\"flex flex-col\", className)}\n      data-orientation={orientation}\n      data-slot=\"checkbox-group\"\n      role=\"group\"\n    >\n      {label && (\n        <span\n          className={checkboxGroupHeaderVariants({ size })}\n          data-slot=\"checkbox-group-label\"\n          id={`${groupId}-label`}\n        >\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n              *\n            </span>\n          )}\n        </span>\n      )}\n      <div\n        className={checkboxGroupVariants({ orientation })}\n        data-slot=\"checkbox-group-items\"\n      >\n        {options.map((option) => (\n          <CheckboxGroupItem\n            key={option.value}\n            checked={selectedValues.includes(option.value)}\n            description={option.description}\n            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Intentional: checking truthiness\n            disabled={disabled || option.disabled}\n            label={option.label}\n            name={name}\n            size={size}\n            value={option.value}\n            onCheckedChange={(checked) => {\n              handleCheckedChange(option.value, checked)\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport { CheckboxGroup, CheckboxGroupItem }\n"]}

package/dist/chunk-MGIGDALC.js

@@ -0,0 +1,153 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var toolbarVariants = cva(
+  [
+    // Base styles
+    "flex items-center gap-[var(--toolbar-root-gap)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] p-[var(--toolbar-root-padding)]",
+        floating: "rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-popover p-[var(--toolbar-root-padding)] shadow-lg",
+        sticky: "border-b border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] px-[var(--toolbar-root-padding-x)] py-[var(--toolbar-root-padding-y)]",
+        minimal: "gap-1"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var toolbarButtonVariants = cva([
+  // Base styles
+  "inline-flex items-center justify-center rounded-[var(--toolbar-button-radius)] h-[var(--toolbar-button-height)] px-[var(--toolbar-button-padding-x)]",
+  // Colors
+  "text-foreground",
+  "hover:bg-accent hover:text-accent-foreground",
+  // Focus styles
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  // Disabled
+  "disabled:pointer-events-none disabled:opacity-50",
+  // Transition
+  "transition-colors",
+  // SVG styles
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+]);
+var toolbarGroupVariants = cva([
+  "flex items-center gap-0.5"
+]);
+var toolbarToggleGroupVariants = cva([
+  "flex items-center gap-0.5"
+]);
+var toolbarToggleItemVariants = cva([
+  // Base styles
+  "inline-flex items-center justify-center rounded-sm p-2",
+  // Colors
+  "text-foreground",
+  "hover:bg-accent hover:text-accent-foreground",
+  // Active state
+  "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  // Focus styles
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  // Disabled
+  "disabled:pointer-events-none disabled:opacity-50",
+  // Transition
+  "transition-colors",
+  // SVG styles
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+]);
+var toolbarSeparatorVariants = cva([
+  "mx-[var(--toolbar-separator-margin-x)] h-6 w-[var(--toolbar-separator-width)] self-center bg-[color:var(--toolbar-separator-color)] data-[orientation=horizontal]:h-[var(--toolbar-separator-width)] data-[orientation=horizontal]:w-full data-[orientation=horizontal]:mx-0 data-[orientation=horizontal]:my-2"
+]);
+var toolbarLinkVariants = cva([
+  // Base styles
+  "inline-flex items-center justify-center rounded-sm p-2",
+  // Colors
+  "text-foreground",
+  "hover:bg-accent hover:text-accent-foreground",
+  // Focus styles
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  // Transition
+  "transition-colors",
+  // SVG styles
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+]);
+function Toolbar({ className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Root,
+    {
+      className: cn(toolbarVariants({ variant }), className),
+      "data-slot": "toolbar",
+      ...props
+    }
+  );
+}
+function ToolbarButton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Button,
+    {
+      className: cn(toolbarButtonVariants(), className),
+      "data-slot": "toolbar-button",
+      ...props
+    }
+  );
+}
+function ToolbarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(toolbarGroupVariants(), className),
+      "data-slot": "toolbar-group",
+      role: "group",
+      ...props
+    }
+  );
+}
+function ToolbarToggleGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleGroup,
+    {
+      className: cn(toolbarToggleGroupVariants(), className),
+      "data-slot": "toolbar-toggle-group",
+      ...props
+    }
+  );
+}
+function ToolbarToggleItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleItem,
+    {
+      className: cn(toolbarToggleItemVariants(), className),
+      "data-slot": "toolbar-toggle-item",
+      ...props
+    }
+  );
+}
+function ToolbarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Separator,
+    {
+      className: cn(toolbarSeparatorVariants(), className),
+      "data-slot": "toolbar-separator",
+      ...props
+    }
+  );
+}
+function ToolbarLink({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Link,
+    {
+      className: cn(toolbarLinkVariants(), className),
+      "data-slot": "toolbar-link",
+      ...props
+    }
+  );
+}
+
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, toolbarButtonVariants, toolbarGroupVariants, toolbarLinkVariants, toolbarSeparatorVariants, toolbarToggleGroupVariants, toolbarToggleItemVariants, toolbarVariants };
+//# sourceMappingURL=chunk-MGIGDALC.js.map
+//# sourceMappingURL=chunk-MGIGDALC.js.map

package/dist/chunk-MGIGDALC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Toolbar/Toolbar.variants.ts","../src/components/navigation/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","file":"chunk-MGIGDALC.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Toolbar root variant styles\n */\nexport const toolbarVariants = cva(\n  [\n    // Base styles\n    \"flex items-center gap-[var(--toolbar-root-gap)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] p-[var(--toolbar-root-padding)]\",\n        floating: \"rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-popover p-[var(--toolbar-root-padding)] shadow-lg\",\n        sticky: \"border-b border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] px-[var(--toolbar-root-padding-x)] py-[var(--toolbar-root-padding-y)]\",\n        minimal: \"gap-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Toolbar button variant styles\n */\nexport const toolbarButtonVariants = cva([\n  // Base styles\n  \"inline-flex items-center justify-center rounded-[var(--toolbar-button-radius)] h-[var(--toolbar-button-height)] px-[var(--toolbar-button-padding-x)]\",\n  // Colors\n  \"text-foreground\",\n  \"hover:bg-accent hover:text-accent-foreground\",\n  // Focus styles\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  // Disabled\n  \"disabled:pointer-events-none disabled:opacity-50\",\n  // Transition\n  \"transition-colors\",\n  // SVG styles\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n])\n\n/**\n * Toolbar group variant styles\n *\n * Generic grouping wrapper that keeps related controls visually tight,\n * mirroring the spacing of the toggle group without its toggle semantics.\n */\nexport const toolbarGroupVariants = cva([\n  \"flex items-center gap-0.5\",\n])\n\n/**\n * Toolbar toggle group variant styles\n */\nexport const toolbarToggleGroupVariants = cva([\n  \"flex items-center gap-0.5\",\n])\n\n/**\n * Toolbar toggle item variant styles\n */\nexport const toolbarToggleItemVariants = cva([\n  // Base styles\n  \"inline-flex items-center justify-center rounded-sm p-2\",\n  // Colors\n  \"text-foreground\",\n  \"hover:bg-accent hover:text-accent-foreground\",\n  // Active state\n  \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  // Focus styles\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  // Disabled\n  \"disabled:pointer-events-none disabled:opacity-50\",\n  // Transition\n  \"transition-colors\",\n  // SVG styles\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n])\n\n/**\n * Toolbar separator variant styles\n *\n * The vertical divider is a fixed 24px (`h-6`) centered hairline (DES-1237 —\n * era `self-stretch`, que acompanhava a altura do item). The horizontal variant\n * (vertical toolbars) stays a full-width hairline.\n */\nexport const toolbarSeparatorVariants = cva([\n  \"mx-[var(--toolbar-separator-margin-x)] h-6 w-[var(--toolbar-separator-width)] self-center bg-[color:var(--toolbar-separator-color)] data-[orientation=horizontal]:h-[var(--toolbar-separator-width)] data-[orientation=horizontal]:w-full data-[orientation=horizontal]:mx-0 data-[orientation=horizontal]:my-2\",\n])\n\n/**\n * Toolbar link variant styles\n */\nexport const toolbarLinkVariants = cva([\n  // Base styles\n  \"inline-flex items-center justify-center rounded-sm p-2\",\n  // Colors\n  \"text-foreground\",\n  \"hover:bg-accent hover:text-accent-foreground\",\n  // Focus styles\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  // Transition\n  \"transition-colors\",\n  // SVG styles\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n])\n","\"use client\"\n\nimport type {\n  ToolbarButtonProps,\n  ToolbarGroupProps,\n  ToolbarLinkProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleGroupProps,\n  ToolbarToggleItemProps,\n} from \"./Toolbar.types\"\n\nimport * as ToolbarPrimitive from \"@radix-ui/react-toolbar\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  toolbarButtonVariants,\n  toolbarGroupVariants,\n  toolbarLinkVariants,\n  toolbarSeparatorVariants,\n  toolbarToggleGroupVariants,\n  toolbarToggleItemVariants,\n  toolbarVariants,\n} from \"./Toolbar.variants\"\n\n/**\n * Toolbar - Root container for toolbar components.\n *\n * A horizontal bar of actions and controls for the current content.\n * Provides quick access to common functionality like text formatting,\n * zoom, alignment, and other contextual operations.\n *\n * @example\n * <Toolbar>\n *   <ToolbarToggleGroup type=\"multiple\">\n *     <ToolbarToggleItem value=\"bold\">Bold</ToolbarToggleItem>\n *     <ToolbarToggleItem value=\"italic\">Italic</ToolbarToggleItem>\n *   </ToolbarToggleGroup>\n *   <ToolbarSeparator />\n *   <ToolbarButton>Action</ToolbarButton>\n * </Toolbar>\n */\nfunction Toolbar({ className, variant = \"default\", ...props }: ToolbarProps) {\n  return (\n    <ToolbarPrimitive.Root\n      className={cn(toolbarVariants({ variant }), className)}\n      data-slot=\"toolbar\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarButton - Button for toolbar actions.\n *\n * Used for non-toggle actions within the toolbar.\n */\nfunction ToolbarButton({ className, ...props }: ToolbarButtonProps) {\n  return (\n    <ToolbarPrimitive.Button\n      className={cn(toolbarButtonVariants(), className)}\n      data-slot=\"toolbar-button\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarGroup - Generic grouping wrapper for related toolbar items.\n *\n * Use to visually cluster a set of buttons, links, or toggle groups as a\n * single unit. Unlike ToolbarToggleGroup it carries no selection semantics —\n * it is a plain `role=\"group\"` container for composition.\n */\nfunction ToolbarGroup({ className, ...props }: ToolbarGroupProps) {\n  return (\n    <div\n      className={cn(toolbarGroupVariants(), className)}\n      data-slot=\"toolbar-group\"\n      role=\"group\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarToggleGroup - Container for toggle items.\n *\n * Groups toggle items for single or multiple selection.\n */\nfunction ToolbarToggleGroup({ className, ...props }: ToolbarToggleGroupProps) {\n  return (\n    <ToolbarPrimitive.ToggleGroup\n      className={cn(toolbarToggleGroupVariants(), className)}\n      data-slot=\"toolbar-toggle-group\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarToggleItem - Individual toggle item within a toggle group.\n *\n * Represents a selectable option that can be toggled on/off.\n */\nfunction ToolbarToggleItem({ className, ...props }: ToolbarToggleItemProps) {\n  return (\n    <ToolbarPrimitive.ToggleItem\n      className={cn(toolbarToggleItemVariants(), className)}\n      data-slot=\"toolbar-toggle-item\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarSeparator - Visual separator between toolbar groups.\n *\n * Provides visual division between groups of related actions.\n */\nfunction ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps) {\n  return (\n    <ToolbarPrimitive.Separator\n      className={cn(toolbarSeparatorVariants(), className)}\n      data-slot=\"toolbar-separator\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarLink - Link element within the toolbar.\n *\n * Renders an accessible link styled to match toolbar items.\n */\nfunction ToolbarLink({ className, ...props }: ToolbarLinkProps) {\n  return (\n    <ToolbarPrimitive.Link\n      className={cn(toolbarLinkVariants(), className)}\n      data-slot=\"toolbar-link\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarLink,\n  ToolbarSeparator,\n  ToolbarToggleGroup,\n  ToolbarToggleItem,\n}\n"]}