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

package/dist/chunk-33JGPMUW.js

@@ -0,0 +1,170 @@
+import { Textarea } from './chunk-U6EOAIPK.js';
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { Button } from './chunk-ONQCNOLU.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var inputGroupVariants = cva(
+  // Base styles
+  [
+    "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-[var(--input-group-radius)] border shadow-xs transition-[color,box-shadow] outline-none",
+    "min-w-0 has-[>textarea]:h-auto",
+    // Variants based on alignment
+    "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+    "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+    // Focus state
+    "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+    // Error state
+    "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8",
+        md: "h-9",
+        lg: "h-10"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[var(--input-group-button-radius)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+var inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[var(--input-group-button-radius)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-[var(--input-group-button-radius)] has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[var(--input-group-button-radius)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+var inputGroupInputVariants = cva(
+  "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
+);
+var inputGroupTextareaVariants = cva(
+  "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent"
+);
+function InputGroup({
+  className,
+  size,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(inputGroupVariants({ size }), className),
+      "data-disabled": disabled ?? void 0,
+      "data-slot": "input-group",
+      role: "group",
+      ...props
+    }
+  );
+}
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(inputGroupAddonVariants({ align }), className),
+      "data-align": align,
+      "data-slot": "input-group-addon",
+      role: "group",
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(inputGroupButtonVariants({ size }), className),
+      "data-size": size,
+      type,
+      variant,
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      className: cn(inputGroupInputVariants(), className),
+      "data-slot": "input-group-control",
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      className: cn(inputGroupTextareaVariants(), className),
+      "data-slot": "input-group-control",
+      ...props
+    }
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupInputVariants, inputGroupTextareaVariants, inputGroupVariants };
+//# sourceMappingURL=chunk-33JGPMUW.js.map
+//# sourceMappingURL=chunk-33JGPMUW.js.map

package/dist/chunk-33JGPMUW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/InputGroup/InputGroup.variants.ts","../src/components/forms/InputGroup/InputGroup.tsx"],"names":[],"mappings":"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","file":"chunk-33JGPMUW.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * InputGroup container variant styles using CVA\n */\nexport const inputGroupVariants = cva(\n  // Base styles\n  [\n    \"group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-[var(--input-group-radius)] border shadow-xs transition-[color,box-shadow] outline-none\",\n    \"min-w-0 has-[>textarea]:h-auto\",\n\n    // Variants based on alignment\n    \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n    \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n    \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n    // Focus state\n    \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]\",\n\n    // Error state\n    \"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-8\",\n        md: \"h-9\",\n        lg: \"h-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputGroupAddon variant styles using CVA\n */\nexport const inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[var(--input-group-button-radius)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\n/**\n * InputGroupButton variant styles using CVA\n */\nexport const inputGroupButtonVariants = cva(\n  \"text-sm shadow-none flex gap-2 items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-2 rounded-[var(--input-group-button-radius)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n        sm: \"h-8 px-2.5 gap-1.5 rounded-[var(--input-group-button-radius)] has-[>svg]:px-2.5\",\n        \"icon-xs\":\n          \"size-6 rounded-[var(--input-group-button-radius)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\n/**\n * InputGroupInput variant styles (for the input within the group)\n */\nexport const inputGroupInputVariants = cva(\n  \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\"\n)\n\n/**\n * InputGroupTextarea variant styles (for the textarea within the group)\n */\nexport const inputGroupTextareaVariants = cva(\n  \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\"\n)\n\n// Export variant types\nexport type InputGroupVariantProps = VariantProps<typeof inputGroupVariants>\nexport type InputGroupAddonVariantProps = VariantProps<typeof inputGroupAddonVariants>\nexport type InputGroupButtonVariantProps = VariantProps<typeof inputGroupButtonVariants>\nexport type InputGroupInputVariantProps = VariantProps<typeof inputGroupInputVariants>\nexport type InputGroupTextareaVariantProps = VariantProps<typeof inputGroupTextareaVariants>\n","\"use client\"\n\nimport type {\n  InputGroupAddonProps,\n  InputGroupButtonProps,\n  InputGroupInputProps,\n  InputGroupProps,\n  InputGroupTextareaProps,\n  InputGroupTextProps,\n} from \"./InputGroup.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Button } from \"../../primitives/Button\"\nimport { Textarea } from \"../Textarea\"\nimport { TextInput, type TextInputProps } from \"../TextInput\"\nimport {\n  inputGroupAddonVariants,\n  inputGroupButtonVariants,\n  inputGroupInputVariants,\n  inputGroupTextareaVariants,\n  inputGroupVariants,\n} from \"./InputGroup.variants\"\n\nfunction InputGroup({\n  className,\n  size,\n  disabled,\n  ...props\n}: InputGroupProps) {\n  return (\n    <div\n      className={cn(inputGroupVariants({ size }), className)}\n      data-disabled={disabled ?? undefined}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      role=\"group\"\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: InputGroupButtonProps) {\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({ className, ...props }: InputGroupInputProps) {\n  return (\n    <TextInput\n      className={cn(inputGroupInputVariants(), className)}\n      data-slot=\"input-group-control\"\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: InputGroupTextareaProps) {\n  return (\n    <Textarea\n      className={cn(inputGroupTextareaVariants(), className)}\n      data-slot=\"input-group-control\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n}\n\n// Re-export types\nexport type { TextInputProps }\n"]}