@etus/ui 0.4.0-beta.1 → 0.4.0-beta.11

package/dist/chunk-HAEZLC7V.js

@@ -0,0 +1,122 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var switchVariants = cva(
+  [
+    "peer inline-flex shrink-0 items-center border border-transparent transition-all outline-none",
+    "rounded-[var(--switch-track-radius)] shadow-[var(--switch-track-shadow)]",
+    "bg-[color:var(--switch-track-bg-off)] data-[state=checked]:bg-[color:var(--switch-track-bg-on)]",
+    "dark:bg-input dark:data-[state=checked]:bg-primary",
+    "focus-visible:border-[color:var(--switch-track-ring-primary)] focus-visible:ring-[color:var(--switch-track-ring-primary)]/50 focus-visible:ring-[length:var(--switch-track-ring-width)]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "disabled:cursor-not-allowed disabled:bg-[color:var(--switch-track-bg-disabled)] disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--switch-size-sm-h)] w-[var(--switch-size-sm-w)]",
+        md: "h-[var(--switch-size-md-h)] w-[var(--switch-size-md-w)]",
+        lg: "h-[var(--switch-size-lg-h)] w-[var(--switch-size-lg-w)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var switchThumbVariants = cva(
+  [
+    "pointer-events-none block ring-0 transition-transform",
+    "rounded-[var(--switch-thumb-radius)] bg-[color:var(--switch-thumb-bg)]",
+    "dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground",
+    "data-[state=unchecked]:translate-x-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-[var(--switch-thumb-size-sm)] data-[state=checked]:translate-x-3",
+        md: "size-[var(--switch-thumb-size-md)] data-[state=checked]:translate-x-4",
+        lg: "size-[var(--switch-thumb-size-lg)] data-[state=checked]:translate-x-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Switch({
+  className,
+  size = "md",
+  type = "default",
+  switchText,
+  descriptionText,
+  showText,
+  showDescription,
+  id,
+  ...props
+}) {
+  const generatedId = React.useId();
+  const switchId = id ?? generatedId;
+  const shouldShowText = (showText ?? Boolean(switchText)) && Boolean(switchText);
+  const shouldShowDescription = (showDescription ?? Boolean(descriptionText)) && Boolean(descriptionText);
+  const hasComposition = shouldShowText || shouldShowDescription;
+  const switchEl = /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      className: cn(switchVariants({ size }), className),
+      "data-slot": "switch",
+      id: switchId,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          className: switchThumbVariants({ size }),
+          "data-slot": "switch-thumb"
+        }
+      )
+    }
+  );
+  if (!hasComposition) {
+    return switchEl;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-3",
+        type === "box" && "rounded-md border border-input p-4"
+      ),
+      "data-slot": "switch-composition",
+      "data-type": type,
+      children: [
+        switchEl,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", "data-slot": "switch-text-content", children: [
+          shouldShowText && /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: "text-sm font-medium leading-none",
+              "data-slot": "switch-text",
+              htmlFor: switchId,
+              children: switchText
+            }
+          ),
+          shouldShowDescription && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs text-muted-foreground leading-normal",
+              "data-slot": "switch-description",
+              children: descriptionText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { Switch, switchThumbVariants, switchVariants };
+//# sourceMappingURL=chunk-HAEZLC7V.js.map
+//# sourceMappingURL=chunk-HAEZLC7V.js.map

package/dist/chunk-HAEZLC7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/Switch/Switch.variants.ts","../src/components/forms/Switch/Switch.tsx"],"names":[],"mappings":"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","file":"chunk-HAEZLC7V.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const switchVariants = cva(\n  [\n    \"peer inline-flex shrink-0 items-center border border-transparent transition-all outline-none\",\n    \"rounded-[var(--switch-track-radius)] shadow-[var(--switch-track-shadow)]\",\n    \"bg-[color:var(--switch-track-bg-off)] data-[state=checked]:bg-[color:var(--switch-track-bg-on)]\",\n    \"dark:bg-input dark:data-[state=checked]:bg-primary\",\n    \"focus-visible:border-[color:var(--switch-track-ring-primary)] focus-visible:ring-[color:var(--switch-track-ring-primary)]/50 focus-visible:ring-[length:var(--switch-track-ring-width)]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n    \"disabled:cursor-not-allowed disabled:bg-[color:var(--switch-track-bg-disabled)] disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--switch-size-sm-h)] w-[var(--switch-size-sm-w)]\",\n        md: \"h-[var(--switch-size-md-h)] w-[var(--switch-size-md-w)]\",\n        lg: \"h-[var(--switch-size-lg-h)] w-[var(--switch-size-lg-w)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const switchThumbVariants = cva(\n  [\n    \"pointer-events-none block ring-0 transition-transform\",\n    \"rounded-[var(--switch-thumb-radius)] bg-[color:var(--switch-thumb-bg)]\",\n    \"dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground\",\n    \"data-[state=unchecked]:translate-x-0\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-[var(--switch-thumb-size-sm)] data-[state=checked]:translate-x-3\",\n        md: \"size-[var(--switch-thumb-size-md)] data-[state=checked]:translate-x-4\",\n        lg: \"size-[var(--switch-thumb-size-lg)] data-[state=checked]:translate-x-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type SwitchVariantProps = VariantProps<typeof switchVariants>\nexport type SwitchThumbVariantProps = VariantProps<typeof switchThumbVariants>\n","import type { SwitchProps } from \"./Switch.types\"\n\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { switchThumbVariants, switchVariants } from \"./Switch.variants\"\n\nfunction Switch({\n  className,\n  size = \"md\",\n  type = \"default\",\n  switchText,\n  descriptionText,\n  showText,\n  showDescription,\n  id,\n  ...props\n}: SwitchProps) {\n  const generatedId = React.useId()\n  const switchId = id ?? generatedId\n\n  const shouldShowText =\n    (showText ?? Boolean(switchText)) && Boolean(switchText)\n  const shouldShowDescription =\n    (showDescription ?? Boolean(descriptionText)) && Boolean(descriptionText)\n  const hasComposition = shouldShowText || shouldShowDescription\n\n  const switchEl = (\n    <SwitchPrimitive.Root\n      className={cn(switchVariants({ size }), className)}\n      data-slot=\"switch\"\n      id={switchId}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={switchThumbVariants({ size })}\n        data-slot=\"switch-thumb\"\n      />\n    </SwitchPrimitive.Root>\n  )\n\n  if (!hasComposition) {\n    return switchEl\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-start gap-3\",\n        type === \"box\" && \"rounded-md border border-input p-4\"\n      )}\n      data-slot=\"switch-composition\"\n      data-type={type}\n    >\n      {switchEl}\n      <div className=\"flex flex-col gap-1\" data-slot=\"switch-text-content\">\n        {shouldShowText && (\n          <label\n            className=\"text-sm font-medium leading-none\"\n            data-slot=\"switch-text\"\n            htmlFor={switchId}\n          >\n            {switchText}\n          </label>\n        )}\n        {shouldShowDescription && (\n          <p\n            className=\"text-xs text-muted-foreground leading-normal\"\n            data-slot=\"switch-description\"\n          >\n            {descriptionText}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { Switch }\n"]}