Rebuild all components

components/_Base.js

@@ -0,0 +1,84 @@
+import { $, Tag } from "sigpro";
+
+import { Tag } from "sigpro";
+
+export const Alert = (props, children) => Tag("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
+export const Badge = (props, children) => Tag("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
+export const Button = (props, children) => Tag("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
+export const Card = (props, children) => Tag("div", { ...props, class: `card ${props.class ?? ''}` }, children);
+export const CardTitle = (props, children) => Tag("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
+export const CardBody = (props, children) => Tag("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
+export const CardActions = (props, children) => Tag("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
+export const Carousel = (props, children) => Tag("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
+export const CarouselItem = (props, children) => Tag("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
+export const Chat = (props, children) => Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
+export const ChatBubble = (props, children) => Tag("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
+export const Checkbox = (props) => Tag("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });
+export const Collapse = (props, children) => Tag("div", { ...props, class: `collapse ${props.class ?? ''}` }, children);
+export const Divider = (props) => Tag("div", { ...props, class: `divider ${props.class ?? ''}` });
+export const Drawer = (props, children) => Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
+export const Dropdown = (props, children) => Tag("details", { ...props, class: `dropdown ${props.class ?? ''}` }, children);
+export const Fab = (props, children) => Tag("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
+export const Fieldset = (props, children) => Tag("fieldset", { ...props, class: `fieldset ${props.class ?? ''}` }, children);
+export const Indicator = (props, children) => Tag("div", { ...props, class: `indicator ${props.class ?? ''}` }, children);
+export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` });
+export const Kbd = (props, children) => Tag("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
+export const Label = (props, children) => Tag("label", { ...props, class: `label ${props.class ?? ''}` }, children);
+export const List = (props, children) => Tag("ul", { ...props, class: `list ${props.class ?? ''}` }, children);
+export const Menu = (props, children) => Tag("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
+export const Modal = (props, children) => Tag("dialog", { ...props, class: `modal ${props.class ?? ''}` }, children);
+export const Navbar = (props, children) => Tag("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
+export const Radio = (props) => Tag("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });
+export const Range = (props) => Tag("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });
+export const Rating = (props, children) => Tag("div", { ...props, class: `rating ${props.class ?? ''}` }, children);
+export const Select = (props, children) => Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
+export const Skeleton = (props) => Tag("div", { ...props, class: `skeleton ${props.class ?? ''}` });
+export const Stack = (props, children) => Tag("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
+export const Stat = (props, children) => Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, children);
+export const Stats = (props, children) => Tag("div", { ...props, class: `stats ${props.class ?? ''}` }, children);
+export const Steps = (props, children) => Tag("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
+export const Step = (props, children) => Tag("li", { ...props, class: `step ${props.class ?? ''}` }, children);
+export const Swap = (props, children) => Tag("label", { ...props, class: `swap ${props.class ?? ''}` }, children);
+export const Table = (props, children) => Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
+export const Tab = (props, children) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
+export const Tabs = (props, children) => Tag("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
+export const TabContent = (props, children) => Tag("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
+export const Textarea = (props) => Tag("textarea", { ...props, class: `textarea ${props.class ?? ''}` });
+export const Timeline = (props, children) => Tag("ul", { ...props, class: `timeline ${props.class ?? ''}` }, children);
+export const Toast = (props, children) => Tag("div", { ...props, class: `toast ${props.class ?? ''}` }, children);
+export const Toggle = (props) => Tag("input", { ...props, type: "checkbox", class: `toggle ${props.class ?? ''}` });
+export const Tooltip = (props, children) => Tag("div", { ...props, class: `tooltip ${props.class ?? ''}` }, children);
+
+
+// Complex
+export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
+  Tag("span", { class: "flex items-center" }, [
+    p.label,
+    Tag("span", {
+      class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
+      onclick: (e) => { e.stopPropagation(); p.onClose?.(e); }
+    })
+  ])
+]);
+
+export const TabItems = (props) => {
+  const items = typeof p.items === "function" ? p.items : () => p.items || [];
+  return For(
+    items,
+    (item, idx) => {
+      const TabComp = item.closable ? TabClose : Tab;
+      return [
+        TabComp({
+          label: item.label,
+          class: () => p.activeIndex() === idx ? "tab-active" : "",
+          onclick: (e) => { e.preventDefault(); p.activeIndex(idx); },
+          onClose: () => p.onClose?.(idx, item)
+        }),
+        TabContent({
+          style: () => `display: ${p.activeIndex() === idx ? "block" : "none"};`
+        }, typeof item.content === "function" ? item.content() : item.content)
+      ];
+    },
+    (item, idx) => item.id ?? idx
+  );
+};