@kamod-ui/core 0.1.0

package/dist/chunk-QCYFSBZ7.js

@@ -0,0 +1,81 @@
+import { tv } from 'tailwind-variants';
+import { jsxs, jsx } from 'preact/jsx-runtime';
+
+// src/components/native-select/NativeSelect.tsx
+var nativeSelectWrapper = tv({
+  base: [
+    /* min-w-0 + no w-fit: column flex + w-full on <select> must resolve to parent width (w-fit breaks that). */
+    "group/native-select relative isolate min-w-0 max-w-full has-[select:disabled]:opacity-50"
+  ]
+});
+var nativeSelect = tv({
+  base: [
+    "border-input dark:bg-input/30 text-foreground ring-offset-background min-h-0 min-w-0 w-full rounded-md border bg-transparent shadow-xs",
+    "invalid:text-foreground/85",
+    "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground appearance-none bg-none select-none",
+    "[&_option]:text-foreground",
+    "hover:border-foreground/20 transition-[color,box-shadow,border-color] outline-none",
+    "focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40 aria-invalid:focus-visible:ring-3"
+  ],
+  variants: {
+    size: {
+      sm: "min-h-8 py-1 pe-9 ps-2.5 text-sm leading-5",
+      md: "min-h-9 py-1.5 pe-10 ps-3 text-sm leading-5",
+      lg: "min-h-11 py-2 pe-11 ps-3.5 text-base leading-6"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var nativeSelectIcon = tv({
+  base: ["text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2"],
+  variants: {
+    size: {
+      sm: "end-2.5 size-3.5",
+      md: "end-3 size-4",
+      lg: "end-3.5 size-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var NativeSelect = ({ class: className, size, icon, children, ...rest }) => /* @__PURE__ */ jsxs("div", { class: nativeSelectWrapper(), "data-size": size, "data-slot": "native-select-wrapper", children: [
+  /* @__PURE__ */ jsx("select", { class: nativeSelect({ size, class: className }), "data-slot": "native-select", ...rest, children }),
+  icon ?? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      class: nativeSelectIcon({ size }),
+      "data-slot": "native-select-icon",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  )
+] });
+var NativeSelectOptGroup = ({ children, ...rest }) => /* @__PURE__ */ jsx("optgroup", { ...rest, children });
+var NativeSelectOption = ({ children, ...rest }) => /* @__PURE__ */ jsx("option", { ...rest, children });
+
+// src/components/native-select/index.ts
+var NativeSelectVariants = {
+  nativeSelect,
+  nativeSelectIcon,
+  nativeSelectWrapper
+};
+var native_select_default = {
+  Root: NativeSelect,
+  Option: NativeSelectOption,
+  OptGroup: NativeSelectOptGroup
+};
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, NativeSelectVariants, native_select_default };
+//# sourceMappingURL=chunk-QCYFSBZ7.js.map
+//# sourceMappingURL=chunk-QCYFSBZ7.js.map

package/dist/chunk-QCYFSBZ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/native-select/NativeSelect.tsx","../src/components/native-select/NativeSelectOptGroup.tsx","../src/components/native-select/NativeSelectOption.tsx","../src/components/native-select/index.ts"],"names":["jsx"],"mappings":";;;;AAGO,IAAM,sBAAsB,EAAA,CAAG;AAAA,EACpC,IAAA,EAAM;AAAA;AAAA,IAEJ;AAAA;AAEJ,CAAC,CAAA;AAEM,IAAM,eAAe,EAAA,CAAG;AAAA,EAC7B,IAAA,EAAM;AAAA,IACJ,wIAAA;AAAA,IACA,4BAAA;AAAA,IACA,8HAAA;AAAA,IACA,4BAAA;AAAA,IACA,oFAAA;AAAA,IACA,iFAAA;AAAA,IACA,0DAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,4CAAA;AAAA,MACJ,EAAA,EAAI,6CAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,IAAM,mBAAmB,EAAA,CAAG;AAAA,EACjC,IAAA,EAAM,CAAC,6EAA6E,CAAA;AAAA,EACpF,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,kBAAA;AAAA,MACJ,EAAA,EAAI,cAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAQM,IAAM,eAAe,CAAC,EAAE,OAAO,SAAA,EAAW,IAAA,EAAM,MAAM,QAAA,EAAU,GAAG,MAAK,qBAC7E,IAAA,CAAC,SAAI,KAAA,EAAO,mBAAA,IAAuB,WAAA,EAAW,IAAA,EAAM,aAAU,uBAAA,EAC5D,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAO,YAAA,CAAa,EAAE,IAAA,EAAM,KAAA,EAAO,SAAA,EAAiC,CAAA,EAAG,WAAA,EAAU,eAAA,EAAiB,GAAG,MAC1G,QAAA,EACH,CAAA;AAAA,EACC,IAAA,oBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAY,GAAA;AAAA,MACZ,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,aAAA,EAAY,MAAA;AAAA,MACZ,KAAA,EAAO,gBAAA,CAAiB,EAAE,IAAA,EAAM,CAAA;AAAA,MAChC,WAAA,EAAU,oBAAA;AAAA,MAEV,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,cAAA,EAAe;AAAA;AAAA;AACzB,CAAA,EAEJ;ACnEK,IAAM,oBAAA,GAAuB,CAAC,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,qBACvDA,GAAAA,CAAC,UAAA,EAAA,EAAU,GAAG,IAAA,EAAO,QAAA,EAAS;ACDzB,IAAM,kBAAA,GAAqB,CAAC,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,qBAA+BA,GAAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,IAAA,EAAO,QAAA,EAAS;;;ACFlH,IAAM,oBAAA,GAAuB;AAAA,EAC3B,YAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF;AAIA,IAAO,qBAAA,GAAQ;AAAA,EACb,IAAA,EAAM,YAAA;AAAA,EACN,MAAA,EAAQ,kBAAA;AAAA,EACR,QAAA,EAAU;AACZ","file":"chunk-QCYFSBZ7.js","sourcesContent":["import type { ComponentChildren, JSX } from \"preact\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const nativeSelectWrapper = tv({\n  base: [\n    /* min-w-0 + no w-fit: column flex + w-full on <select> must resolve to parent width (w-fit breaks that). */\n    \"group/native-select relative isolate min-w-0 max-w-full has-[select:disabled]:opacity-50\"\n  ]\n});\n\nexport const nativeSelect = tv({\n  base: [\n    \"border-input dark:bg-input/30 text-foreground ring-offset-background min-h-0 min-w-0 w-full rounded-md border bg-transparent shadow-xs\",\n    \"invalid:text-foreground/85\",\n    \"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground appearance-none bg-none select-none\",\n    \"[&_option]:text-foreground\",\n    \"hover:border-foreground/20 transition-[color,box-shadow,border-color] outline-none\",\n    \"focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:ring-3\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed\",\n    \"aria-invalid:border-error aria-invalid:focus-visible:ring-error/40 aria-invalid:focus-visible:ring-3\"\n  ],\n  variants: {\n    size: {\n      sm: \"min-h-8 py-1 pe-9 ps-2.5 text-sm leading-5\",\n      md: \"min-h-9 py-1.5 pe-10 ps-3 text-sm leading-5\",\n      lg: \"min-h-11 py-2 pe-11 ps-3.5 text-base leading-6\"\n    }\n  },\n  defaultVariants: {\n    size: \"md\"\n  }\n});\n\nexport const nativeSelectIcon = tv({\n  base: [\"text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2\"],\n  variants: {\n    size: {\n      sm: \"end-2.5 size-3.5\",\n      md: \"end-3 size-4\",\n      lg: \"end-3.5 size-5\"\n    }\n  },\n  defaultVariants: {\n    size: \"md\"\n  }\n});\n\nexport type NativeSelectProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, \"size\"> &\n  VariantProps<typeof nativeSelect> & {\n    icon?: ComponentChildren;\n    children?: ComponentChildren;\n  };\n\nexport const NativeSelect = ({ class: className, size, icon, children, ...rest }: NativeSelectProps) => (\n  <div class={nativeSelectWrapper()} data-size={size} data-slot=\"native-select-wrapper\">\n    <select class={nativeSelect({ size, class: className as string | undefined })} data-slot=\"native-select\" {...rest}>\n      {children}\n    </select>\n    {icon ?? (\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n        class={nativeSelectIcon({ size })}\n        data-slot=\"native-select-icon\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    )}\n  </div>\n);\n\n","import type { ComponentChildren, JSX } from \"preact\";\n\nexport type NativeSelectOptGroupProps = JSX.OptgroupHTMLAttributes<HTMLOptGroupElement> & {\n  children?: ComponentChildren;\n};\n\nexport const NativeSelectOptGroup = ({ children, ...rest }: NativeSelectOptGroupProps) => (\n  <optgroup {...rest}>{children}</optgroup>\n);\n\n","import type { ComponentChildren, JSX } from \"preact\";\n\nexport type NativeSelectOptionProps = JSX.OptionHTMLAttributes<HTMLOptionElement> & {\n  children?: ComponentChildren;\n};\n\nexport const NativeSelectOption = ({ children, ...rest }: NativeSelectOptionProps) => <option {...rest}>{children}</option>;\n\n","import { NativeSelect, nativeSelect, nativeSelectIcon, nativeSelectWrapper } from \"./NativeSelect\";\nimport { NativeSelectOptGroup } from \"./NativeSelectOptGroup\";\nimport { NativeSelectOption } from \"./NativeSelectOption\";\n\nconst NativeSelectVariants = {\n  nativeSelect,\n  nativeSelectIcon,\n  nativeSelectWrapper\n};\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption, NativeSelectVariants };\n\nexport default {\n  Root: NativeSelect,\n  Option: NativeSelectOption,\n  OptGroup: NativeSelectOptGroup\n};\n\n"]}