@locusgraph/components 0.1.1 → 0.2.1

package/dist/form/input-group.js

@@ -1,65 +1,315 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
+import * as React from "react";
 import { Button } from "../action/button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
-const inputGroupAlignmentClasses = [
-    "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",
-];
+import { jsx as _jsx } from "react/jsx-runtime";
+const inputGroupAlignmentClasses = ["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"];
 const inputGroupFocusClasses = "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring";
 const inputGroupErrorClasses = "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40";
-function InputGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", inputGroupAlignmentClasses, inputGroupFocusClasses, inputGroupErrorClasses, className), ...props }));
+function InputGroup(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", inputGroupAlignmentClasses, inputGroupFocusClasses, inputGroupErrorClasses, className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "input-group",
+      role: "group",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
-    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 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
-            "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
-        },
-    },
-    defaultVariants: {
-        align: "inline-start",
-    },
+  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 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+      "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3"
+    }
+  },
+  defaultVariants: {
+    align: "inline-start"
+  }
 });
-function InputGroupAddon({ className, align = "inline-start", ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
-            if (e.target.closest("button")) {
-                return;
-            }
-            e.currentTarget.parentElement?.querySelector("input")?.focus();
-        }, ...props }));
+function InputGroupAddon(t0) {
+  const $ = _c(11);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      align: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const align = t1 === undefined ? "inline-start" : t1;
+  let t2;
+  if ($[4] !== align || $[5] !== className) {
+    t2 = cn(inputGroupAddonVariants({
+      align
+    }), className);
+    $[4] = align;
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== align || $[8] !== props || $[9] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: t2,
+      onClick: _temp,
+      ...props
+    });
+    $[7] = align;
+    $[8] = props;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}
+function _temp(e) {
+  if (e.target.closest("button")) {
+    return;
+  }
+  e.currentTarget.parentElement?.querySelector("input")?.focus();
 }
 const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
-    variants: {
-        size: {
-            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-            sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-            "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-            "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-        },
-    },
-    defaultVariants: {
-        size: "xs",
-    },
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-full px-2.5 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-full px-3 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-full p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 rounded-full p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
 });
-function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
-    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+function InputGroupButton(t0) {
+  const $ = _c(15);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      className,
+      type: t1,
+      variant: t2,
+      size: t3,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+  }
+  const type = t1 === undefined ? "button" : t1;
+  const variant = t2 === undefined ? "ghost" : t2;
+  const size = t3 === undefined ? "xs" : t3;
+  let t4;
+  if ($[6] !== className || $[7] !== size) {
+    t4 = cn(inputGroupButtonVariants({
+      size
+    }), className);
+    $[6] = className;
+    $[7] = size;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== props || $[10] !== size || $[11] !== t4 || $[12] !== type || $[13] !== variant) {
+    t5 = /*#__PURE__*/_jsx(Button, {
+      type: type,
+      "data-size": size,
+      variant: variant,
+      className: t4,
+      ...props
+    });
+    $[9] = props;
+    $[10] = size;
+    $[11] = t4;
+    $[12] = type;
+    $[13] = variant;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
 }
-function InputGroupText({ className, ...props }) {
-    return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+function InputGroupText(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function InputGroupInput({ className, ...props }) {
-    return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
+function InputGroupInput(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Input, {
+      "data-slot": "input-group-control",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function InputGroupTextarea({ className, ...props }) {
-    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
+function InputGroupTextarea(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Textarea, {
+      "data-slot": "input-group-control",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/form/input.js

@@ -1,6 +1,50 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
-function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }));
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Input(t0) {
+  const $ = _c(10);
+  let className;
+  let props;
+  let type;
+  if ($[0] !== t0) {
+    ({
+      className,
+      type,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = type;
+  } else {
+    className = $[1];
+    props = $[2];
+    type = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== props || $[7] !== t1 || $[8] !== type) {
+    t2 = /*#__PURE__*/_jsx("input", {
+      type: type,
+      "data-slot": "input",
+      className: t1,
+      ...props
+    });
+    $[6] = props;
+    $[7] = t1;
+    $[8] = type;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
 }
 export { Input };

package/dist/form/label.js

@@ -1,8 +1,47 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import * as LabelPrimitive from "radix-ui/label";
-function Label({ className, ...props }) {
-    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Label(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(LabelPrimitive.Root, {
+      "data-slot": "label",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 export { Label };

package/dist/form/native-select.js

@@ -1,13 +1,153 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { ChevronDown as ChevronDownIcon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { ChevronDownIcon } from "lucide-react";
-function NativeSelect({ className, size = "default", ...props }) {
-    return (_jsxs("div", { className: "group/native-select relative w-fit has-[select:disabled]:opacity-50", "data-slot": "native-select-wrapper", children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: cn("h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50", "focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }), _jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+import * as React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function NativeSelect(t0) {
+  const $ = _c(13);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      size: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const size = t1 === undefined ? "default" : t1;
+  let t2;
+  if ($[4] !== className) {
+    t2 = cn("h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground has-[option[value='']:checked]:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50", "focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className);
+    $[4] = className;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== props || $[7] !== size || $[8] !== t2) {
+    t3 = /*#__PURE__*/_jsx("select", {
+      "data-slot": "native-select",
+      "data-size": size,
+      className: t2,
+      ...props
+    });
+    $[6] = props;
+    $[7] = size;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/_jsx(ChevronDownIcon, {
+      className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+      "aria-hidden": "true",
+      "data-slot": "native-select-icon"
+    });
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== t3) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      className: "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+      "data-slot": "native-select-wrapper",
+      children: [t3, t4]
+    });
+    $[11] = t3;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
 }
-function NativeSelectOption({ className, ...props }) {
-    return (_jsx("option", { "data-slot": "native-select-option", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));
+function NativeSelectOption(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("bg-[Canvas] text-[CanvasText]", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("option", {
+      "data-slot": "native-select-option",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function NativeSelectOptGroup({ className, ...props }) {
-    return (_jsx("optgroup", { "data-slot": "native-select-optgroup", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));
+function NativeSelectOptGroup(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("bg-[Canvas] text-[CanvasText]", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("optgroup", {
+      "data-slot": "native-select-optgroup",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/form/textarea.js

@@ -1,6 +1,44 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
-function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className), ...props }));
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Textarea(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("textarea", {
+      "data-slot": "textarea",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 export { Textarea };