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

package/dist/chunk-JDETM3FL.js

@@ -0,0 +1,152 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { ChevronDownIcon } from 'lucide-react';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var nativeSelectVariants = cva(
+  // Base styles
+  [
+    "w-full min-w-0 appearance-none rounded-[var(--native-select-root-radius)] border bg-transparent transition-[color,box-shadow] outline-none",
+    "placeholder:text-muted-foreground",
+    "selection:bg-primary selection:text-primary-foreground",
+    "dark:bg-input/30 dark:hover:bg-input/50",
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    "focus-visible:border-[color:var(--native-select-root-border-focus)] focus-visible:ring-[color:var(--native-select-focus-ring-color)]/50 focus-visible:ring-[length:var(--native-select-focus-ring-width)]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-[var(--native-select-size-xs-height)] px-[var(--native-select-size-xs-padding-x)] py-0.5 pr-7 text-[length:var(--native-select-size-xs-text)]",
+        sm: "h-[var(--native-select-size-sm-height)] px-[var(--native-select-size-sm-padding-x)] py-1 pr-8 text-[length:var(--native-select-size-sm-text)]",
+        md: "h-[var(--native-select-size-md-height)] px-[var(--native-select-size-md-padding-x)] py-1 pr-9 text-base md:text-[length:var(--native-select-size-md-text)]",
+        lg: "h-[var(--native-select-size-lg-height)] px-[var(--native-select-size-lg-padding-x)] py-1.5 pr-10 text-[length:var(--native-select-size-lg-text)]",
+        xl: "h-[var(--native-select-size-xl-height)] px-[var(--native-select-size-xl-padding-x)] py-2 pr-11 text-[length:var(--native-select-size-xl-text)]"
+      },
+      variant: {
+        default: "border-[color:var(--native-select-root-border-default)] shadow-[var(--native-select-root-shadow)]",
+        filled: "border-transparent bg-[color:var(--native-select-variant-filled-bg)]",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0 pr-7"
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      variant: "default"
+    }
+  }
+);
+var nativeSelectWrapperVariants = cva(
+  "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var nativeSelectIconVariants = cva(
+  "text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50 select-none",
+  {
+    variants: {
+      size: {
+        xs: "right-2 size-3",
+        sm: "right-2.5 size-3.5",
+        md: "right-3 size-4",
+        lg: "right-3.5 size-4",
+        xl: "right-4 size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var nativeSelectLeftIconVariants = cva(
+  "text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-70 select-none",
+  {
+    variants: {
+      size: {
+        xs: "left-2 size-3",
+        sm: "left-2.5 size-3.5",
+        md: "left-3 size-4",
+        lg: "left-3.5 size-4",
+        xl: "left-4 size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var nativeSelectWithLeftIconPadding = {
+  xs: "pl-7",
+  sm: "pl-8",
+  md: "pl-9",
+  lg: "pl-10",
+  xl: "pl-11"
+};
+function NativeSelect({
+  className,
+  size = "lg",
+  variant,
+  leftIcon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(nativeSelectWrapperVariants()),
+      "data-slot": "native-select-wrapper",
+      children: [
+        leftIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(nativeSelectLeftIconVariants({ size })),
+            "data-slot": "native-select-left-icon",
+            children: leftIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: cn(
+              nativeSelectVariants({ size, variant }),
+              leftIcon && nativeSelectWithLeftIconPadding[size],
+              className
+            ),
+            "data-slot": "native-select",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            "aria-hidden": "true",
+            className: cn(nativeSelectIconVariants({ size })),
+            "data-slot": "native-select-icon"
+          }
+        )
+      ]
+    }
+  );
+}
+function NativeSelectOption({ ...props }) {
+  return /* @__PURE__ */ jsx("option", { "data-slot": "native-select-option", ...props });
+}
+function NativeSelectOptGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "optgroup",
+    {
+      className: cn(className),
+      "data-slot": "native-select-optgroup",
+      ...props
+    }
+  );
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, nativeSelectIconVariants, nativeSelectLeftIconVariants, nativeSelectVariants, nativeSelectWithLeftIconPadding, nativeSelectWrapperVariants };
+//# sourceMappingURL=chunk-JDETM3FL.js.map
+//# sourceMappingURL=chunk-JDETM3FL.js.map

package/dist/chunk-JDETM3FL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/NativeSelect/NativeSelect.variants.ts","../src/components/forms/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"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","file":"chunk-JDETM3FL.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * NativeSelect variant styles using CVA\n */\nexport const nativeSelectVariants = cva(\n  // Base styles\n  [\n    \"w-full min-w-0 appearance-none rounded-[var(--native-select-root-radius)] border bg-transparent transition-[color,box-shadow] outline-none\",\n    \"placeholder:text-muted-foreground\",\n    \"selection:bg-primary selection:text-primary-foreground\",\n    \"dark:bg-input/30 dark:hover:bg-input/50\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed\",\n    \"focus-visible:border-[color:var(--native-select-root-border-focus)] focus-visible:ring-[color:var(--native-select-focus-ring-color)]/50 focus-visible:ring-[length:var(--native-select-focus-ring-width)]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"h-[var(--native-select-size-xs-height)] px-[var(--native-select-size-xs-padding-x)] py-0.5 pr-7 text-[length:var(--native-select-size-xs-text)]\",\n        sm: \"h-[var(--native-select-size-sm-height)] px-[var(--native-select-size-sm-padding-x)] py-1 pr-8 text-[length:var(--native-select-size-sm-text)]\",\n        md: \"h-[var(--native-select-size-md-height)] px-[var(--native-select-size-md-padding-x)] py-1 pr-9 text-base md:text-[length:var(--native-select-size-md-text)]\",\n        lg: \"h-[var(--native-select-size-lg-height)] px-[var(--native-select-size-lg-padding-x)] py-1.5 pr-10 text-[length:var(--native-select-size-lg-text)]\",\n        xl: \"h-[var(--native-select-size-xl-height)] px-[var(--native-select-size-xl-padding-x)] py-2 pr-11 text-[length:var(--native-select-size-xl-text)]\",\n      },\n      variant: {\n        default: \"border-[color:var(--native-select-root-border-default)] shadow-[var(--native-select-root-shadow)]\",\n        filled: \"border-transparent bg-[color:var(--native-select-variant-filled-bg)]\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0 pr-7\",\n      },\n    },\n    defaultVariants: {\n      size: \"lg\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Wrapper styles for the NativeSelect container\n */\nexport const nativeSelectWrapperVariants = cva(\n  \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\n/**\n * Icon styles based on size\n */\nexport const nativeSelectIconVariants = cva(\n  \"text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50 select-none\",\n  {\n    variants: {\n      size: {\n        xs: \"right-2 size-3\",\n        sm: \"right-2.5 size-3.5\",\n        md: \"right-3 size-4\",\n        lg: \"right-3.5 size-4\",\n        xl: \"right-4 size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Left icon styles based on size\n */\nexport const nativeSelectLeftIconVariants = cva(\n  \"text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-70 select-none\",\n  {\n    variants: {\n      size: {\n        xs: \"left-2 size-3\",\n        sm: \"left-2.5 size-3.5\",\n        md: \"left-3 size-4\",\n        lg: \"left-3.5 size-4\",\n        xl: \"left-4 size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Additional padding-left when leftIcon is present\n */\nexport const nativeSelectWithLeftIconPadding: Record<NativeSelectSize, string> = {\n  xs: \"pl-7\",\n  sm: \"pl-8\",\n  md: \"pl-9\",\n  lg: \"pl-10\",\n  xl: \"pl-11\",\n}\n\ntype NativeSelectSize = \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"\n\nexport type NativeSelectVariantProps = VariantProps<typeof nativeSelectVariants>\n","import type {\n  NativeSelectOptGroupProps,\n  NativeSelectOptionProps,\n  NativeSelectProps,\n} from \"./NativeSelect.types\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  nativeSelectIconVariants,\n  nativeSelectLeftIconVariants,\n  nativeSelectVariants,\n  nativeSelectWithLeftIconPadding,\n  nativeSelectWrapperVariants,\n} from \"./NativeSelect.variants\"\n\nfunction NativeSelect({\n  className,\n  size = \"lg\",\n  variant,\n  leftIcon,\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(nativeSelectWrapperVariants())}\n      data-slot=\"native-select-wrapper\"\n    >\n      {leftIcon && (\n        <span\n          aria-hidden=\"true\"\n          className={cn(nativeSelectLeftIconVariants({ size }))}\n          data-slot=\"native-select-left-icon\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      <select\n        className={cn(\n          nativeSelectVariants({ size, variant }),\n          leftIcon && nativeSelectWithLeftIconPadding[size],\n          className\n        )}\n        data-slot=\"native-select\"\n        {...props}\n      />\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className={cn(nativeSelectIconVariants({ size }))}\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: NativeSelectOptionProps) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: NativeSelectOptGroupProps) {\n  return (\n    <optgroup\n      className={cn(className)}\n      data-slot=\"native-select-optgroup\"\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n"]}

package/dist/chunk-JDTAG7KZ.js

@@ -0,0 +1,33 @@
+import { Loader2, OctagonX, TriangleAlert, Info, CircleCheck } from 'lucide-react';
+import { Toaster as Toaster$1 } from 'sonner';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Toast/Toast.tsx
+var Toaster = ({ theme = "system", ...props }) => {
+  const resolvedTheme = theme;
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheck, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(Info, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonX, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover-bg)",
+        "--normal-text": "var(--popover-fg)",
+        "--normal-border": "var(--popover-border)",
+        "--border-radius": "var(--popover-radius)"
+      },
+      className: "toaster group",
+      theme: resolvedTheme,
+      ...props
+    }
+  );
+};
+
+export { Toaster };
+//# sourceMappingURL=chunk-JDTAG7KZ.js.map
+//# sourceMappingURL=chunk-JDTAG7KZ.js.map

package/dist/chunk-JDTAG7KZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"names":["Sonner"],"mappings":";;;;;AAaA,IAAM,UAAU,CAAC,EAAE,QAAQ,QAAA,EAAU,GAAG,OAAM,KAAoB;AAChE,EAAA,MAAM,aAAA,GAAgB,KAAA;AAEtB,EAAA,uBACE,GAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,kBAAS,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QACzC,IAAA,kBAAM,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QAC/B,OAAA,kBAAS,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QAC3C,KAAA,kBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QACpC,OAAA,kBAAS,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,qBAAA,EAAsB;AAAA,OACpD;AAAA,MACA,KAAA,EACE;AAAA,QACE,aAAA,EAAe,mBAAA;AAAA,QACf,eAAA,EAAiB,mBAAA;AAAA,QACjB,iBAAA,EAAmB,uBAAA;AAAA,QACnB,iBAAA,EAAmB;AAAA,OACrB;AAAA,MAEF,SAAA,EAAU,eAAA;AAAA,MACV,KAAA,EAAO,aAAA;AAAA,MACN,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-JDTAG7KZ.js","sourcesContent":["\"use client\"\n\nimport type { ToasterProps } from \"./Toast.types\"\n\nimport {\n  CircleCheck,\n  Info,\n  Loader2,\n  OctagonX,\n  TriangleAlert,\n} from \"lucide-react\"\nimport { Toaster as Sonner } from \"sonner\"\n\nconst Toaster = ({ theme = \"system\", ...props }: ToasterProps) => {\n  const resolvedTheme = theme as NonNullable<ToasterProps[\"theme\"]>\n\n  return (\n    <Sonner\n      icons={{\n        success: <CircleCheck className=\"size-4\" />,\n        info: <Info className=\"size-4\" />,\n        warning: <TriangleAlert className=\"size-4\" />,\n        error: <OctagonX className=\"size-4\" />,\n        loading: <Loader2 className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover-bg)\",\n          \"--normal-text\": \"var(--popover-fg)\",\n          \"--normal-border\": \"var(--popover-border)\",\n          \"--border-radius\": \"var(--popover-radius)\",\n        } as React.CSSProperties\n      }\n      className=\"toaster group\"\n      theme={resolvedTheme}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\nexport type { ToasterProps, ToastOptions, ToastPosition, ToastPromiseOptions, ToastTheme } from \"./Toast.types\"\n"]}