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

package/dist/chunk-3WOGOTOV.js

@@ -0,0 +1,152 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:size-[var(--toggle-icon-size)] [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]",
+        outline: "border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]"
+      },
+      size: {
+        default: "h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)]",
+        sm: "h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)]",
+        md: "h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)]",
+        lg: "h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)]"
+      },
+      /**
+       * The shape of the toggle button
+       */
+      shape: {
+        pill: "rounded-[var(--toggle-root-border-radius-pill)]",
+        rounded: "rounded-[var(--toggle-root-border-radius-rounded)]"
+      },
+      /**
+       * Whether the item is connected to adjacent items (spacing=0)
+       */
+      connected: {
+        true: "rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        connected: true,
+        className: "border-l-0 first:border-l"
+      },
+      {
+        shape: "rounded",
+        connected: true,
+        className: "first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "rounded",
+      connected: false
+    }
+  }
+);
+var ToggleGroupContext = React.createContext({});
+function Toggle({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    TogglePrimitive.Root,
+    {
+      className: cn(toggleVariants({ variant, size, shape, className })),
+      "data-slot": "toggle",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+var spacingVariants = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4"
+};
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  shape,
+  spacing = 1,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ToggleGroupContext, { value: { variant, size, shape, spacing }, children: /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      className: cn(
+        "group/toggle-group inline-flex items-center",
+        spacingVariants[spacing],
+        className
+      ),
+      "data-slot": "toggle-group",
+      "data-spacing": spacing,
+      ...props,
+      children
+    }
+  ) });
+}
+function ToggleItem({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  const context = React.use(ToggleGroupContext);
+  const resolvedVariant = variant ?? context.variant;
+  const resolvedSize = size ?? context.size;
+  const resolvedShape = shape ?? context.shape;
+  const resolvedSpacing = context.spacing ?? 1;
+  const isConnected = resolvedSpacing === 0;
+  return /* @__PURE__ */ jsxs(
+    ToggleGroupPrimitive.Item,
+    {
+      className: cn(
+        toggleVariants({
+          variant: resolvedVariant,
+          size: resolvedSize,
+          shape: resolvedShape,
+          connected: isConnected,
+          className
+        })
+      ),
+      "data-slot": "toggle-item",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+Toggle.Group = ToggleGroup;
+Toggle.Item = ToggleItem;
+
+export { Toggle, ToggleGroup, ToggleItem, toggleVariants };
+//# sourceMappingURL=chunk-3WOGOTOV.js.map
+//# sourceMappingURL=chunk-3WOGOTOV.js.map

package/dist/chunk-3WOGOTOV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Toggle/Toggle.tsx"],"names":[],"mappings":"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","file":"chunk-3WOGOTOV.js","sourcesContent":["\"use client\"\n\nimport type { ToggleGroupProps, ToggleItemProps, ToggleProps } from \"./Toggle.types\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:size-[var(--toggle-icon-size)] [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]\",\n        outline:\n          \"border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]\",\n      },\n      size: {\n        default: \"h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)]\",\n        sm: \"h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)]\",\n        md: \"h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)]\",\n        lg: \"h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)]\",\n      },\n      /**\n       * The shape of the toggle button\n       */\n      shape: {\n        pill: \"rounded-[var(--toggle-root-border-radius-pill)]\",\n        rounded: \"rounded-[var(--toggle-root-border-radius-rounded)]\",\n      },\n      /**\n       * Whether the item is connected to adjacent items (spacing=0)\n       */\n      connected: {\n        true: \"rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"outline\",\n        connected: true,\n        className: \"border-l-0 first:border-l\",\n      },\n      {\n        shape: \"rounded\",\n        connected: true,\n        className: \"first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"rounded\",\n      connected: false,\n    },\n  }\n)\n\n// Context for sharing group props with items\nconst ToggleGroupContext = React.createContext<{\n  shape?: ToggleProps[\"shape\"]\n  size?: ToggleProps[\"size\"]\n  spacing?: ToggleGroupProps[\"spacing\"]\n  variant?: ToggleProps[\"variant\"]\n}>({})\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive.Root\n      className={cn(toggleVariants({ variant, size, shape, className }))}\n      data-slot=\"toggle\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </TogglePrimitive.Root>\n  )\n}\n\nconst spacingVariants = {\n  0: \"gap-0\",\n  1: \"gap-1\",\n  2: \"gap-2\",\n  3: \"gap-3\",\n  4: \"gap-4\",\n}\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  shape,\n  spacing = 1,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupContext value={{ variant, size, shape, spacing }}>\n      <ToggleGroupPrimitive.Root\n        className={cn(\n          \"group/toggle-group inline-flex items-center\",\n          spacingVariants[spacing],\n          className\n        )}\n        data-slot=\"toggle-group\"\n        data-spacing={spacing}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    </ToggleGroupContext>\n  )\n}\n\nfunction ToggleItem({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleItemProps) {\n  const context = React.use(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedShape = shape ?? context.shape\n  const resolvedSpacing = context.spacing ?? 1\n  const isConnected = resolvedSpacing === 0\n\n  return (\n    <ToggleGroupPrimitive.Item\n      className={cn(\n        toggleVariants({\n          variant: resolvedVariant,\n          size: resolvedSize,\n          shape: resolvedShape,\n          connected: isConnected,\n          className,\n        })\n      )}\n      data-slot=\"toggle-item\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nToggle.Group = ToggleGroup\nToggle.Item = ToggleItem\n\nexport { Toggle, ToggleGroup, ToggleItem, toggleVariants }"]}