@db-vincent/components 0.0.0-stage → 0.1.0

package/src/astro/TextField.astro

@@ -0,0 +1,287 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/input.css";
+
+/**
+ * Text field. Label above, hint and count below, error replaces the hint.
+ * Hint and error are wired through aria-describedby; invalid sets
+ * aria-invalid. `validate` adds native constraint validation on blur, with
+ * live recovery while typing. Password fields get a reveal toggle, and
+ * counters update as the value changes.
+ */
+interface Props {
+  label?: string;
+  id?: string;
+  name?: string;
+  type?: string;
+  value?: string;
+  placeholder?: string;
+  hint?: string;
+  error?: string;
+  valid?: boolean;
+  validate?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  optional?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  maxlength?: number;
+  minlength?: number;
+  pattern?: string;
+  count?: boolean;
+  size?: "sm" | "md" | "lg";
+  autocomplete?: string;
+  inputmode?:
+    "text" | "numeric" | "decimal" | "email" | "tel" | "search" | "url";
+  class?: string;
+}
+
+const {
+  label,
+  id,
+  name,
+  type = "text",
+  value,
+  placeholder,
+  hint,
+  error,
+  valid = false,
+  validate = false,
+  disabled = false,
+  required = false,
+  optional = false,
+  multiline = false,
+  rows = 3,
+  maxlength,
+  minlength,
+  pattern,
+  count = false,
+  size = "md",
+  autocomplete,
+  inputmode,
+  class: className,
+} = Astro.props;
+
+const fieldId = id ?? `field-${Math.random().toString(36).slice(2, 9)}`;
+const hintId = `${fieldId}-hint`;
+const errorId = `${fieldId}-error`;
+const describedby =
+  [hint && (!error || validate) && hintId, (error || validate) && errorId]
+    .filter(Boolean)
+    .join(" ") || undefined;
+const current = value ?? "";
+const isPassword = !multiline && type === "password";
+const inputClass = [
+  "ds-input",
+  size !== "md" && `ds-input--${size}`,
+  error && "is-invalid",
+  valid && !error && "is-valid",
+  valid && !error && "ds-input--with-state",
+]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<div
+  class:list={["ds-field", isPassword && "ds-field--reveal", className]}
+  data-ds-field
+  data-message={error}
+>
+  {label && (
+    <label class="ds-field__label" for={fieldId}>
+      {label}
+      {optional && <span class="ds-field__optional"> (optional)</span>}
+      {required && (
+        <span class="ds-field__required" aria-hidden="true">
+          {" "}
+          *
+        </span>
+      )}
+    </label>
+  )}
+
+  <div class="ds-field__control">
+    {multiline ? (
+      <textarea
+        class={inputClass}
+        id={fieldId}
+        name={name}
+        rows={rows}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        maxlength={maxlength}
+        minlength={minlength}
+        aria-invalid={error ? "true" : undefined}
+        aria-describedby={describedby}
+        autocomplete={autocomplete}
+      >{current}</textarea>
+    ) : (
+      <input
+        class={inputClass}
+        id={fieldId}
+        name={name}
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        maxlength={maxlength}
+        minlength={minlength}
+        pattern={pattern}
+        inputmode={inputmode}
+        autocomplete={autocomplete}
+        aria-invalid={error ? "true" : undefined}
+        aria-describedby={describedby}
+      />
+    )}
+    {valid && !error && (
+      <>
+        <span class="ds-field__state" aria-hidden="true">
+          <Icon name="check" size={14} />
+        </span>
+        <span class="ds-sr-only">Valid.</span>
+      </>
+    )}
+    {isPassword && (
+      <button
+        class="ds-field__reveal"
+        type="button"
+        data-ds-reveal
+        aria-label="Show password"
+        aria-pressed="false"
+        aria-controls={fieldId}
+        disabled={disabled}
+      >
+        <span data-ds-reveal-show aria-hidden="true">
+          <Icon name="eye" size={16} />
+        </span>
+        <span data-ds-reveal-hide aria-hidden="true" hidden>
+          <Icon name="eye-off" size={16} />
+        </span>
+      </button>
+    )}
+  </div>
+
+  {((error && !validate) || (hint && (!error || validate))) && (
+    <div
+      class:list={[error && !validate ? "ds-field__error" : "ds-field__hint"]}
+      id={error && !validate ? errorId : hintId}
+    >
+      {error && !validate && <Icon name="alert-circle" size={14} />}
+      {error && !validate ? error : hint}
+    </div>
+  )}
+
+  {count && maxlength && (
+    <>
+      <span class="ds-field__count" data-ds-count>
+        {current.length} / {maxlength}
+      </span>
+      <span class="ds-sr-only" aria-live="polite" data-ds-count-live></span>
+    </>
+  )}
+
+  {validate && (
+    <div class="ds-field__error" id={errorId} data-ds-error hidden={!error}>
+      <Icon name="alert-circle" size={14} />
+      <span data-ds-error-text>{error || "Check this field."}</span>
+    </div>
+  )}
+</div>
+
+<script>
+  const fields = document.querySelectorAll<HTMLElement>("[data-ds-field]");
+
+  fields.forEach((field) => {
+    const input = field.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+      ".ds-input",
+    );
+    const count = field.querySelector<HTMLElement>("[data-ds-count]");
+    const countLive = field.querySelector<HTMLElement>("[data-ds-count-live]");
+    const error = field.querySelector<HTMLElement>("[data-ds-error]");
+    const errorText = field.querySelector<HTMLElement>("[data-ds-error-text]");
+    const hint = field.querySelector<HTMLElement>(".ds-field__hint");
+    if (!input) return;
+
+    if (count && input.maxLength > 0) {
+      // The visible counter updates silently; screen readers only hear it
+      // near the limit, not on every keystroke.
+      const updateCount = () => {
+        count.textContent = `${input.value.length} / ${input.maxLength}`;
+        const left = input.maxLength - input.value.length;
+        if (countLive) {
+          countLive.textContent =
+            left <= 5
+              ? `${left} ${left === 1 ? "character" : "characters"} left`
+              : "";
+        }
+      };
+      input.addEventListener("input", updateCount);
+      updateCount();
+    }
+
+    if (!error || !errorText) return;
+
+    const message = () => {
+      if (input.validity.valueMissing) {
+        return input.dataset.requiredMessage || "This field is required.";
+      }
+      if (input.validity.tooShort) {
+        return `Use at least ${input.minLength} characters.`;
+      }
+      if (input.validity.patternMismatch) {
+        return field.dataset.message || "Use the requested format.";
+      }
+      if (input.validity.typeMismatch) {
+        return "Enter a valid value.";
+      }
+      if (input.validity.tooLong) {
+        return `Use at most ${input.maxLength} characters.`;
+      }
+      return "";
+    };
+
+    const apply = (invalid: boolean, text: string) => {
+      input.classList.toggle("is-invalid", invalid);
+      if (invalid) {
+        input.setAttribute("aria-invalid", "true");
+      } else {
+        input.removeAttribute("aria-invalid");
+      }
+      error.hidden = !invalid;
+      errorText.textContent = text;
+      if (hint) hint.hidden = invalid;
+    };
+
+    const validate = () => {
+      const text = message();
+      apply(!!text, text);
+    };
+
+    input.addEventListener("blur", validate);
+    input.addEventListener("input", () => {
+      if (input.getAttribute("aria-invalid") === "true") validate();
+    });
+  });
+
+  document
+    .querySelectorAll<HTMLElement>("[data-ds-reveal]")
+    .forEach((button) => {
+      const field = button.closest("[data-ds-field]");
+      const input = field?.querySelector<HTMLInputElement>(".ds-input");
+      if (!input) return;
+      const show = button.querySelector<HTMLElement>("[data-ds-reveal-show]");
+      const hide = button.querySelector<HTMLElement>("[data-ds-reveal-hide]");
+
+      button.addEventListener("click", () => {
+        const revealed = input.type === "text";
+        input.type = revealed ? "password" : "text";
+        // Stable name, state in aria-pressed: "Show password, pressed".
+        button.setAttribute("aria-pressed", revealed ? "false" : "true");
+        if (show) show.hidden = !revealed;
+        if (hide) hide.hidden = revealed;
+        input.focus({ preventScroll: true });
+      });
+    });
+</script>

package/src/astro/ThemeToggle.astro

@@ -0,0 +1,66 @@
+---
+import Icon from "./Icon.astro";
+import Button from "./Button.astro";
+import "../styles/theme-toggle.css";
+
+/** Light/dark switch. Persists the choice and follows the OS until then. */
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<Button
+  variant="ghost"
+  iconOnly
+  ariaLabel="Switch color theme"
+  class:list={["ds-theme-toggle", className]}
+  data-theme-toggle
+>
+  <span class="ds-theme-toggle__sun" aria-hidden="true">
+    <Icon name="sun" size={16} />
+  </span>
+  <span class="ds-theme-toggle__moon" aria-hidden="true">
+    <Icon name="moon" size={16} />
+  </span>
+</Button>
+
+<script>
+  const root = document.documentElement;
+  const query = window.matchMedia("(prefers-color-scheme: dark)");
+  const current = () =>
+    root.dataset.theme ?? (query.matches ? "dark" : "light");
+
+  const sync = () => {
+    const theme = current();
+    document
+      .querySelectorAll<HTMLElement>("[data-theme-toggle]")
+      .forEach((button) => {
+        button.setAttribute(
+          "aria-label",
+          `Switch to ${theme === "dark" ? "light" : "dark"} theme`,
+        );
+      });
+  };
+
+  const apply = (theme: "light" | "dark") => {
+    root.dataset.theme = theme;
+    try {
+      localStorage.setItem("minerva-theme", theme);
+    } catch {}
+    sync();
+  };
+
+  document
+    .querySelectorAll<HTMLElement>("[data-theme-toggle]")
+    .forEach((button) => {
+      if (button.dataset.bound) return;
+      button.dataset.bound = "true";
+      button.addEventListener("click", () =>
+        apply(current() === "dark" ? "light" : "dark"),
+      );
+    });
+  query.addEventListener("change", sync);
+  sync();
+</script>

package/src/astro/Toast.astro

@@ -0,0 +1,181 @@
+---
+import Icon from "./Icon.astro";
+import Button from "./Button.astro";
+import "../styles/toast.css";
+
+/**
+ * Toast. A transient message on a raised neutral popover surface, shaped after
+ * shadcn/ui: neutral card, type icon, inline action and close. `danger` (alias
+ * `error`) and `warning` are assertive, the rest are polite.
+ *
+ * With `triggerLabel` the component renders a real button and a template; the
+ * button mounts the toast into one shared bottom-end region. For imperative
+ * use, import `toast` from `@ds/components/scripts/toast` and call
+ * `toast.add`, `toast.close` or `toast.promise`.
+ */
+interface Props {
+  tone?: "info" | "success" | "warning" | "danger" | "error" | "loading";
+  type?: "info" | "success" | "warning" | "danger" | "error" | "loading";
+  title: string;
+  message?: string;
+  description?: string;
+  dismissible?: boolean;
+  icon?: boolean;
+  triggerLabel?: string;
+  triggerVariant?: "primary" | "secondary" | "ghost" | "danger";
+  /** Auto-dismiss delay for the mounted toast, in milliseconds. 0 keeps it. */
+  duration?: number;
+  id?: string;
+  class?: string;
+}
+
+const {
+  tone: toneProp,
+  type: typeProp,
+  title,
+  message,
+  description,
+  dismissible = true,
+  icon = true,
+  triggerLabel,
+  triggerVariant = "secondary",
+  duration = 5000,
+  id,
+  class: className,
+} = Astro.props;
+
+const requested = typeProp ?? toneProp ?? "info";
+const tone = requested === "error" ? "danger" : requested;
+const role = tone === "danger" || tone === "warning" ? "alert" : "status";
+const live = role === "alert" ? "assertive" : "polite";
+const iconName = {
+  info: "info",
+  success: "check-circle",
+  warning: "alert-triangle",
+  danger: "alert-circle",
+  loading: "loader",
+}[tone];
+const body = description ?? message;
+const toastId = id ?? `toast-${Math.random().toString(36).slice(2, 9)}`;
+const hasActions = Astro.slots.has("actions");
+const classes = ["ds-toast", `ds-toast--${tone}`, className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+{triggerLabel ? (
+  <>
+    <Button variant={triggerVariant} type="button" data-toast-trigger={toastId}>
+      {triggerLabel}
+    </Button>
+    <template id={`${toastId}-template`}>
+      <div
+        class={classes}
+        id={toastId}
+        role={role}
+        aria-live={live}
+        aria-atomic="true"
+        data-toast
+        data-toast-type={tone}
+        data-toast-duration={duration}
+      >
+        {icon && (
+          <span class="ds-toast__icon" aria-hidden="true">
+            <Icon name={iconName} size={16} />
+          </span>
+        )}
+        <div class="ds-toast__content">
+          <p class="ds-toast__title">{title}</p>
+          {body && <p class="ds-toast__body">{body}</p>}
+          <slot />
+        </div>
+        {hasActions && (
+          <div class="ds-toast__actions">
+            <slot name="actions" />
+          </div>
+        )}
+        {dismissible && (
+          <button
+            class="ds-toast__close"
+            type="button"
+            aria-label="Close toast"
+            data-toast-close
+          >
+            <Icon name="x" size={16} />
+          </button>
+        )}
+      </div>
+    </template>
+  </>
+) : (
+  <div
+    class={classes}
+    id={toastId}
+    role={role}
+    aria-live={live}
+    aria-atomic="true"
+    data-toast
+    data-toast-type={tone}
+  >
+    {icon && (
+      <span class="ds-toast__icon" aria-hidden="true">
+        <Icon name={iconName} size={16} />
+      </span>
+    )}
+    <div class="ds-toast__content">
+      <p class="ds-toast__title">{title}</p>
+      {body && <p class="ds-toast__body">{body}</p>}
+      <slot />
+    </div>
+    {hasActions && (
+      <div class="ds-toast__actions">
+        <slot name="actions" />
+      </div>
+    )}
+    {dismissible && (
+      <button
+        class="ds-toast__close"
+        type="button"
+        aria-label="Close toast"
+        data-toast-close
+      >
+        <Icon name="x" size={16} />
+      </button>
+    )}
+  </div>
+)}
+
+<script>
+  import { dismiss, mount } from "../scripts/toast";
+
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+
+    const trigger = target.closest<HTMLElement>("[data-toast-trigger]");
+    if (trigger) {
+      const id = trigger.dataset.toastTrigger;
+      const template = id
+        ? (document.getElementById(
+            `${id}-template`,
+          ) as HTMLTemplateElement | null)
+        : null;
+      const toast = template?.content.firstElementChild?.cloneNode(true);
+      if (toast instanceof HTMLElement) {
+        // Inside the shared region the region itself is the live region.
+        if (toast.getAttribute("role") === "status") {
+          toast.removeAttribute("role");
+          toast.removeAttribute("aria-live");
+        }
+        mount(toast, trigger);
+      }
+      return;
+    }
+
+    // Inline previews rendered directly on a page are not mounted in the
+    // shared region, so they keep a local close handler.
+    const close = target.closest("[data-toast-close]");
+    const toast = close?.closest<HTMLElement>("[data-toast]");
+    if (toast && !toast.closest("[data-toast-region]")) dismiss(toast);
+  });
+</script>

package/src/astro/TopBar.astro

@@ -0,0 +1,29 @@
+---
+import "../styles/topbar.css";
+
+/**
+ * Slim, non-sticky utility strip for the top of a page.
+ *
+ * The start slot holds the page context (usually `<Breadcrumbs>`), the
+ * actions slot holds small utilities (theme toggle, command shortcut).
+ * It scrolls away with the page; persistent navigation belongs to
+ * `<Navbar>` or the sidebar.
+ */
+
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<div class:list={["ds-topbar", className]}>
+  <div class="ds-topbar__inner">
+    <div class="ds-topbar__start">
+      <slot name="start" />
+    </div>
+    <div class="ds-topbar__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</div>

package/src/data/icons.ts

@@ -0,0 +1,104 @@
+export const ICONS: Record<string, string> = {
+  "app-window":
+    '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 9h20"/><path d="M6 6.5h.01M9 6.5h.01"/>',
+  card: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 15h18"/>',
+  "check-square":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="m8 12 3 3 5-6"/>',
+  "chevrons-up-down": '<path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>',
+  "circle-dot":
+    '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/>',
+  loader:
+    '<path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/>',
+  "message-square":
+    '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/>',
+  "mouse-pointer": '<path d="m4 4 7 17 2.5-7.5L21 11 4 4Z"/>',
+  "panel-top":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/>',
+  "rectangle-horizontal": '<rect x="3" y="8" width="18" height="8" rx="2"/>',
+  rows: '<rect x="3" y="3" width="18" height="7" rx="1.5"/><rect x="3" y="14" width="18" height="7" rx="1.5"/>',
+  "square-dashed":
+    '<path d="M5 3a2 2 0 0 0-2 2M19 3a2 2 0 0 1 2 2M21 19a2 2 0 0 1-2 2M5 21a2 2 0 0 1-2-2M9 3h1M9 21h1M14 3h1M14 21h1M3 9v1M21 9v1M3 14v1M21 14v1"/>',
+  table:
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 9v12"/>',
+  tag: '<path d="M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4Z"/><circle cx="7.5" cy="7.5" r="1"/>',
+  "text-cursor":
+    '<path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1"/><path d="M7 22h1a4 4 0 0 0 4-4v-1"/><path d="M7 2h1a4 4 0 0 1 4 4v1"/>',
+  "alert-circle":
+    '<circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
+  "alert-triangle":
+    '<path d="M10.3 3.6 2.4 17a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+  "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+  "arrow-up-right": '<path d="M7 17 17 7"/><path d="M7 7h10v10"/>',
+  activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
+  bell: '<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>',
+  book: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z"/>',
+  box: '<path d="m21 8-9 5-9-5"/><path d="M3 8v8l9 5 9-5V8"/><path d="m12 3 9 5-9 5-9-5 9-5Z"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  "check-circle":
+    '<circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5 4.5-5"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+  command:
+    '<path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6Z"/>',
+  cpu: '<rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4"/>',
+  database:
+    '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/>',
+  download: '<path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/>',
+  external:
+    '<path d="M15 3h6v6"/><path d="m10 14 11-11"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+  "eye-off":
+    '<path d="m3 3 18 18"/><path d="M10.6 10.6a3 3 0 0 0 4.2 4.2"/><path d="M9.9 5.2A10.5 10.5 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.2 3.2"/><path d="M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4.1-.8"/>',
+  "file-text":
+    '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h6"/>',
+  filter: '<path d="M3 5h18l-7 8v6l-4 2v-8Z"/>',
+  "git-branch":
+    '<path d="M6 3v12"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+  grid: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
+  "hard-drive":
+    '<path d="M22 12H2"/><path d="M5.5 5h13L22 12v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Z"/><path d="M6 16h.01M10 16h.01"/>',
+  home: '<path d="m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z"/>',
+  inbox:
+    '<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5h13L22 12v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Z"/>',
+  info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/>',
+  layers:
+    '<path d="m12 2 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/>',
+  login:
+    '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><path d="m10 17 5-5-5-5"/><path d="M15 12H3"/>',
+  "log-out":
+    '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/>',
+  menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+  minus: '<path d="M5 12h14"/>',
+  "more-horizontal":
+    '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
+  moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>',
+  network:
+    '<rect x="9" y="2" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="16" y="16" width="6" height="6" rx="1"/><path d="M12 8v4M5 16v-4h14v4"/>',
+  "panel-left":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/>',
+  pause: '<path d="M9 5v14M15 5v14"/>',
+  play: '<path d="m7 4 13 8-13 8Z"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  refresh:
+    '<path d="M20 11a8 8 0 0 0-14.9-4L3 10"/><path d="M3 4v6h6"/><path d="M4 13a8 8 0 0 0 14.9 4L21 14"/><path d="M21 20v-6h-6"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/>',
+  server:
+    '<rect x="3" y="3" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="7" rx="2"/><path d="M7 6.5h.01M7 17.5h.01"/>',
+  settings:
+    '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>',
+  sliders:
+    '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3"/><path d="M1 14h6M9 8h6M17 16h6"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
+  terminal: '<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>',
+  trash:
+    '<path d="M3 6h18"/><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6M14 11v6"/>',
+  upload: '<path d="M12 21V9"/><path d="m7 14 5-5 5 5"/><path d="M5 3h14"/>',
+  users:
+    '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9"/><path d="M16 3.1a4 4 0 0 1 0 7.8"/>',
+  x: '<path d="M18 6 6 18M6 6l12 12"/>',
+  zap: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z"/>',
+};