minusculas

components/select.js

@@ -0,0 +1,34 @@
+// components/Select.js
+import { Tag, For } from "sigpro";
+
+export const Select = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
+};
+
+export const SelectItems = (props) => {
+  const placeholderOption = props.placeholder
+    ? Tag("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder)
+    : null;
+
+  const dynamicOptions = For(
+    () => [...(typeof props.items === "function" ? props.items() : props.items || [])],
+    (item) => {
+      const val = typeof item === "string" ? item : item.value;
+      const label = typeof item === "string" ? item : item.label;
+      return Tag("option", { value: val }, label);
+    },
+    props.keyFn || ((item) => (typeof item === "string" ? item : item.value))
+  );
+
+  return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
+};
+
+export const SelectLabel = (props, children) => Tag("label", { class: `${props.float ? 'floating-label' : 'select'}` },
+  [
+    Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
+    props.left ?? null,
+    Tag("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
+    props.right ?? null
+  ]
+);