@base-framework/ui 1.1.14 → 1.1.15

package/dist/full-page-DccgwWsM.js

@@ -0,0 +1,69 @@
+import { Div as a, Header as l, H1 as r, P as c } from "@base-framework/atoms";
+import { Component as i, Atom as t } from "@base-framework/base";
+import { F as o } from "./aside-template-BDvEMLnk.js";
+class n extends i {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "";
+  }
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return a({ class: `${this.class || ""}` }, this.children);
+  }
+}
+class d extends n {
+  /**
+   * This will be called every time the route
+   * is activated.
+   *
+   * @param {object} params
+   */
+  update(s) {
+  }
+}
+const p = t((e, s) => (e.class = "basic-page pt-[80px] sm:pt-0 flex flex-auto flex-col " + (e.class || ""), {
+  tag: "section",
+  ...e,
+  children: s
+})), x = t(({ title: e, description: s }) => l({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
+  r({ class: "scroll-m-20 text-3xl font-bold tracking-tight" }, e),
+  s && c({ class: "text-base text-muted-foreground py-2 max-w-[700px]" }, s)
+]));
+class u extends d {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    super.declareProps(), this.title = "", this.description = "";
+  }
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return p([
+      x({
+        title: this.title,
+        description: this.description
+      }),
+      o(this.children)
+    ]);
+  }
+}
+export {
+  d as B,
+  u as F,
+  p as M,
+  n as P
+};

package/dist/icons.es.js

@@ -1,4 +1,129 @@
 const o = {
+  // Common actions
+  add: "add",
+  remove: "remove",
+  edit: "edit",
+  delete: "delete",
+  save: "save",
+  cancel: "cancel",
+  check: "check",
+  close: "close",
+  done: "done",
+  // Navigation
+  home: "home",
+  menu: "menu",
+  search: "search",
+  settings: "settings",
+  more_vert: "more_vert",
+  more_horiz: "more_horiz",
+  arrow_back: "arrow_back",
+  arrow_forward: "arrow_forward",
+  arrow_upward: "arrow_upward",
+  arrow_downward: "arrow_downward",
+  expand_more: "expand_more",
+  expand_less: "expand_less",
+  chevron_left: "chevron_left",
+  chevron_right: "chevron_right",
+  // Content
+  file_copy: "file_copy",
+  content_copy: "content_copy",
+  content_paste: "content_paste",
+  filter_list: "filter_list",
+  sort: "sort",
+  refresh: "refresh",
+  download: "download",
+  upload: "upload",
+  share: "share",
+  print: "print",
+  // Communication
+  email: "email",
+  phone: "phone",
+  chat: "chat",
+  notifications: "notifications",
+  notifications_active: "notifications_active",
+  // Social
+  favorite: "favorite",
+  star: "star",
+  thumb_up: "thumb_up",
+  thumb_down: "thumb_down",
+  person: "person",
+  group: "group",
+  // Files & Folders
+  folder: "folder",
+  folder_open: "folder_open",
+  insert_drive_file: "insert_drive_file",
+  description: "description",
+  image: "image",
+  attachment: "attachment",
+  // Status & Alerts
+  error: "error",
+  warning: "warning",
+  info: "info",
+  help: "help",
+  check_circle: "check_circle",
+  // UI Controls
+  visibility: "visibility",
+  visibility_off: "visibility_off",
+  lock: "lock",
+  lock_open: "lock_open",
+  login: "login",
+  logout: "logout",
+  // Time & Date
+  schedule: "schedule",
+  today: "today",
+  calendar_today: "calendar_today",
+  event: "event",
+  history: "history",
+  // Device & System
+  computer: "computer",
+  phone_iphone: "phone_iphone",
+  tablet: "tablet",
+  desktop_windows: "desktop_windows",
+  // Nested categories for better organization
+  actions: {
+    add: "add",
+    remove: "remove",
+    edit: "edit",
+    delete: "delete",
+    save: "save",
+    cancel: "cancel",
+    undo: "undo",
+    redo: "redo"
+  },
+  arrows: {
+    back: "arrow_back",
+    forward: "arrow_forward",
+    up: "arrow_upward",
+    down: "arrow_downward",
+    left: "arrow_back",
+    right: "arrow_forward"
+  },
+  chevrons: {
+    left: "chevron_left",
+    right: "chevron_right",
+    up: "expand_less",
+    down: "expand_more"
+  },
+  content: {
+    copy: "content_copy",
+    paste: "content_paste",
+    cut: "content_cut"
+  },
+  social: {
+    favorite: "favorite",
+    star: "star",
+    share: "share",
+    like: "thumb_up",
+    dislike: "thumb_down"
+  },
+  status: {
+    error: "error",
+    warning: "warning",
+    info: "info",
+    success: "check_circle",
+    help: "help_outline"
+  }
+}, s = {
   home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
 </svg>`,
@@ -785,5 +910,6 @@ const o = {
   }
 };
 export {
-  o as Icons
+  s as Icons,
+  o as MaterialSymbols
 };

package/dist/image-BhZbKYDj.js

@@ -0,0 +1,237 @@
+import { Div as h, Label as f, Checkbox as m, Span as p, OnState as x, I as k, Input as n, Textarea as g, Img as y } from "@base-framework/atoms";
+import { Jot as b, Atom as s, Component as I } from "@base-framework/base";
+import { Icons as C } from "./icons.es.js";
+const v = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-border bg-input", l = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", c = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", o = "placeholder:text-muted-foreground", $ = `${v} ${r} ${l} ${o} ${c}`, w = ({ id: e, checked: a, bind: t, required: d }) => m({
+  id: e,
+  cache: "checkbox",
+  class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
+  aria: {
+    checked: ["checked"]
+  },
+  required: d,
+  checked: a,
+  bind: t
+}), T = () => p({ class: "absolute text-xs pointer-events-none" }, [
+  x(
+    "checked",
+    (e) => e ? k({
+      class: "w-2 h-2 pointer-events-none",
+      html: C.check
+    }) : null
+  )
+]), H = ({ id: e, bind: a, checked: t, required: d, clickHandler: u }) => h({
+  class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 hover:border-accent-foreground
+			rounded-md border
+			${l}
+			${c}`.trim(),
+  onState: [
+    "checked",
+    {
+      "bg-primary": !0,
+      "text-primary-foreground": !0,
+      "border-primary": !0
+    }
+  ],
+  role: "checkbox",
+  aria: {
+    checked: ["checked"]
+  },
+  tabIndex: 0,
+  click: u
+}, [
+  w({ bind: a, checked: t, id: e, required: d }),
+  T()
+]), D = ({ id: e, label: a, clickHandler: t }) => f({
+  class: "text-base cursor-pointer",
+  htmlFor: e,
+  click: t
+}, a), V = b(
+  {
+    /**
+     * This will initialize the state of the checkbox.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        // @ts-ignore
+        checked: this.checked ?? !1
+      };
+    },
+    /**
+     * This is added to check the checkbox after the component is rendered
+     * to see if the bind updated the checked value.
+     *
+     * @returns {void}
+     */
+    after() {
+      this.state.checked = this.checkbox.checked;
+    },
+    /**
+     * This will handle the click event for the checkbox.
+     *
+     * @param {object} e
+     * @returns {void}
+     */
+    clickHandler(e) {
+      e.preventDefault(), e.stopPropagation(), this.state.toggle("checked"), this.checkbox.checked = this.state.checked, typeof this.onChange == "function" && this.onChange(this.state.checked, this);
+    },
+    /**
+     * This will render the checkbox component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.getId(), a = (t) => this.clickHandler(t);
+      return h({ class: `flex items-center gap-x-2 cursor-pointer ${this.class || ""}` }, [
+        H({
+          id: e,
+          // @ts-ignore
+          bind: this.bind,
+          // @ts-ignore
+          checked: this.state.checked,
+          // @ts-ignore
+          required: this.required,
+          // @ts-ignore
+          clickHandler: a
+        }),
+        // @ts-ignore
+        this.label && D({ id: e, label: this.label, clickHandler: a })
+      ]);
+    }
+  }
+), E = (e) => {
+  if (!e || e.length === 0) return "";
+  const t = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+  return t ? t[2] ? `(${t[1]}) ${t[2]}${t[3] ? "-" + t[3] : ""}` : t[1] || "" : e;
+}, P = (e) => {
+  const a = e.target, t = E(a.value);
+  t && (a.value = t);
+}, i = s((e) => n({
+  ...e,
+  class: `${$} ${e.class || ""}`.trim()
+})), j = s((e) => i({
+  ...e,
+  type: "tel",
+  name: e.name || "Phone",
+  label: e.label || "Phone",
+  placeholder: "(555) 555-5555",
+  pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
+  keyup: P
+})), q = s((e) => i({
+  ...e,
+  type: "email",
+  name: e.name || "Email",
+  label: e.label || "Email",
+  placeholder: "Email address"
+})), J = s((e) => g({
+  ...e,
+  as: "textarea",
+  class: `flex w-full h-24 px-3 py-2 text-sm ${r} ${l} ${o} ${c} ${e.class || ""}`.trim()
+})), N = (e = {}) => h({ class: "flex items-center gap-x-2" }, [
+  n({
+    ...e,
+    type: "radio",
+    class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
+  }),
+  e.label && f({ forHTML: e.value, class: "cursor-pointer" }, e.label)
+]), R = s((e) => n({
+  ...e,
+  type: "date",
+  class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), U = s((e) => n({
+  ...e,
+  type: "time",
+  class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), W = s((e) => n({
+  ...e,
+  type: "datetime-local",
+  class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), z = s((e) => n({
+  ...e,
+  type: "month",
+  class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), A = s((e) => n({
+  ...e,
+  type: "week",
+  class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), B = s((e) => i({
+  ...e,
+  type: "number"
+})), G = s((e) => i({
+  ...e,
+  type: "password"
+}));
+s((e) => i({
+  ...e,
+  type: "search"
+}));
+const K = s((e) => i({
+  ...e,
+  type: "url"
+})), Q = s((e) => i({
+  ...e,
+  type: "hidden"
+})), X = s((e) => n({
+  ...e,
+  type: "color",
+  class: `${r} text-foreground p-0 ${c} ${e.class || ""}`.trim()
+}));
+s((e) => m({
+  ...e,
+  class: `flex h-4 w-4 text-foreground ${r} ${l} ${c} ${e.class || ""}`.trim()
+}));
+const F = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Y = s((e) => n({
+  ...e,
+  type: "file",
+  class: `${$} ${F} ${e.class || ""}`.trim()
+}));
+class L extends I {
+  /**
+   * This will set the component context.
+   *
+   * @param {object|null} context
+   * @returns {object|null}
+   */
+  setContext(a) {
+    if (this.data)
+      return null;
+    const t = this?.parent?.data ?? this?.parent?.context?.data ?? this?.parent?.state ?? null;
+    return t ? { data: t } : null;
+  }
+}
+const Z = (e) => b(e, L), _ = s(({ src: e, alt: a, class: t, checkPath: d = !0 }) => !e || (t = t || "", d && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : y({
+  class: `absolute w-full h-full object-cover fadeIn ${t}`,
+  src: e,
+  alt: a,
+  load: (u) => u.target.style.visibility = "visible",
+  /**
+   * If there's an error loading the image, hide it.
+   */
+  error: (u) => u.target.style.visibility = "hidden"
+}));
+export {
+  V as C,
+  R as D,
+  q as E,
+  Y as F,
+  Q as H,
+  _ as I,
+  z as M,
+  B as N,
+  G as P,
+  N as R,
+  j as T,
+  K as U,
+  L as V,
+  A as W,
+  X as a,
+  W as b,
+  i as c,
+  J as d,
+  U as e,
+  Z as f,
+  l as g,
+  c as h,
+  $ as i
+};