@base-framework/ui 0.0.0

package/dist/index.es.js

@@ -0,0 +1,154 @@
+import { B as e, C as o, a as t, F as r, L as n, P as i, R as l, S as p, b as u, T as m } from "./tooltip-DCszmsxe.js";
+import { B as g, I as C, L as T } from "./icon-B9QUT2NY.js";
+import { C as D, d as I, D as b, c as S, E as B, F as P, H as F, I as M, M as k, N, P as v, R as f, S as x, T as h, a as y, b as W, U as L, W as A } from "./inputs-BF3C3KfF.js";
+import { V as w, a as U } from "./veil-B9GQfH0d.js";
+import { Icons as R } from "./icons.es.js";
+import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ca, p as Ta, q as ca, S as Da, n as Ia, o as ba, T as Sa, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-D1Y_SgzE.js";
+import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-DR_svCOR.js";
+import { B as Oa, m as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, p as Xa, n as Ya, o as Za, T as $a, k as as, U as ss, W as es, f as os, h as ts, i as rs, c as ns, d as is, b as ls, e as ps, a as us, g as ms } from "./tab-C_dZb2qH.js";
+import { B as gs, I as Cs, M as Ts, d as cs, e as Ds, g as Is, N as bs, b as Ss, a as Bs, f as Ps, P as Fs, c as Ms, S as ks, T as Ns } from "./mobile-nav-wrapper-7Qul1-mt.js";
+import { B as fs, a as xs, C as hs, F as ys, b as Ws, c as Ls, M as As, P as Hs, S as ws } from "./sidebar-menu-page-M8hr9onX.js";
+import { A as Os, F as Rs, M as Es, a as Gs, T as Vs } from "./aside-template-D0KANPjh.js";
+import { B as qs } from "./bside-template-CDbINL4X.js";
+export {
+  G as Alert,
+  Os as AsideTemplate,
+  Na as Avatar,
+  Oa as BackButton,
+  gs as Backdrop,
+  e as Badge,
+  fs as BasicPage,
+  xs as BlankPage,
+  V as Breadcrumb,
+  qs as BsideTemplate,
+  g as Button,
+  Ra as ButtonTab,
+  va as Calendar,
+  fa as CalendarCells,
+  o as Card,
+  hs as CenterPage,
+  D as Checkbox,
+  Ea as CheckboxCol,
+  t as CircleGraph,
+  I as ColorInput,
+  j as Combobox,
+  q as Confirmation,
+  z as CountDisplay,
+  J as Counter,
+  Ga as DataTable,
+  Va as DataTableBody,
+  b as DateInput,
+  _ as DatePicker,
+  S as DateTimeInput,
+  xa as DayCell,
+  ha as DayHeader,
+  K as DelayComponent,
+  Q as DetailBody,
+  X as DetailSection,
+  Y as Dialog,
+  Z as DialogContainer,
+  ja as DockableOverlay,
+  $ as DotsIndicator,
+  aa as Dropdown,
+  sa as DropdownItem,
+  ea as DropdownMenu,
+  B as EmailInput,
+  r as Fieldset,
+  P as FileInput,
+  oa as Form,
+  ta as FormControl,
+  ra as FormDescription,
+  na as FormField,
+  ia as FormItem,
+  la as FormLabel,
+  pa as FormMessage,
+  ya as FormatDate,
+  ys as FullContainPage,
+  Ws as FullPage,
+  Rs as FullTemplate,
+  Ls as FullscreenPage,
+  qa as HeaderCol,
+  F as HiddenInput,
+  C as Icon,
+  R as Icons,
+  Cs as InlineNavigation,
+  za as InlineOverlay,
+  M as Input,
+  n as Legend,
+  T as LoadingButton,
+  Es as MainColumn,
+  Ts as MainLink,
+  As as MainSection,
+  ua as MinusButton,
+  cs as MobileNavButton,
+  Ds as MobileNavWrapper,
+  ma as Modal,
+  Wa as MonthCalendar,
+  k as MonthInput,
+  Is as NavButton,
+  bs as NavButtonLink,
+  Ss as Navigation,
+  Bs as NavigationGroup,
+  Ja as NavigationMenu,
+  Ps as NavigationPopover,
+  da as Notification,
+  ga as NotificationContainer,
+  N as NumberInput,
+  _a as Overlay,
+  Hs as Page,
+  Ka as Panel,
+  v as PasswordInput,
+  Ca as PlusButton,
+  La as PopOver,
+  Fs as PopupHeader,
+  i as ProgressBar,
+  f as Radio,
+  l as RangeSlider,
+  Ta as STATUSES,
+  ca as STATUS_CLASS,
+  Qa as SearchDropdown,
+  x as SearchInput,
+  p as Select,
+  Ms as SidebarMenu,
+  ws as SidebarMenuPage,
+  u as Skeleton,
+  Da as SplitRow,
+  Ia as StaticStatusIndicator,
+  ba as StatusIndicator,
+  ks as SubNavigation,
+  Xa as Tab,
+  Ya as TabGroup,
+  Za as TabNavigation,
+  $a as TableHeader,
+  h as TelInput,
+  Gs as Template,
+  y as Textarea,
+  Sa as ThemeToggle,
+  Ba as TimeFrame,
+  W as TimeInput,
+  Pa as TimePicker,
+  Ns as TitleHeader,
+  Fa as Toggle,
+  m as Tooltip,
+  Vs as TopBar,
+  L as UrlInput,
+  as as UserList,
+  ss as UserListItem,
+  w as Veil,
+  U as VeilJot,
+  es as WeekCalendar,
+  os as WeekCell,
+  ts as WeekCells,
+  rs as WeekHeader,
+  A as WeekInput,
+  Aa as addTime,
+  ns as calculateWeekNumber,
+  is as generateWeeks,
+  ls as getDateFromWeek,
+  ps as getMonthDays,
+  us as getNextMonthDays,
+  Ha as getPosition,
+  ms as getPreviousMonthDays,
+  Ma as getStatusClass,
+  wa as pad
+};

package/dist/inputs-BF3C3KfF.js

@@ -0,0 +1,204 @@
+import { Div as l, Label as d, Checkbox as u, Span as g, OnState as p, I as x, Input as r, Textarea as k } from "@base-framework/atoms";
+import { Icons as y } from "./icons.es.js";
+import { a as $ } from "./veil-B9GQfH0d.js";
+import { Atom as t } from "@base-framework/base";
+const v = "flex h-10 w-full px-3 py-2 text-sm", b = "rounded-md border border-input bg-background", n = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", i = "disabled:cursor-not-allowed disabled:opacity-50", f = "placeholder:text-muted-foreground", h = `${v} ${b} ${n} ${f} ${i}`, I = ({ id: e, checked: o, bind: s, required: a }) => u({
+  id: e,
+  cache: "checkbox",
+  class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
+  aria: {
+    checked: ["checked"]
+  },
+  required: a,
+  checked: o,
+  bind: s
+}), C = () => g({ class: "absolute text-xs pointer-events-none" }, [
+  p(
+    "checked",
+    (e) => e ? x({
+      class: "w-2 h-2 pointer-events-none",
+      html: y.check
+    }) : null
+  )
+]), w = ({ id: e, bind: o, checked: s, required: a, clickHandler: m }) => l({
+  class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 border-primary hover:border-accent-foreground
+			${b}
+			${n}
+			${i}`.trim(),
+  onState: [
+    "checked",
+    {
+      "bg-primary": !0,
+      "text-primary-foreground": !0,
+      "border-primary": !0
+    }
+  ],
+  role: "checkbox",
+  aria: {
+    checked: ["checked"]
+  },
+  tabIndex: 0,
+  click: m
+}, [
+  I({ bind: o, checked: s, id: e, required: a }),
+  C()
+]), H = ({ id: e, label: o, clickHandler: s }) => d({
+  class: "text-base cursor-pointer",
+  htmlFor: e,
+  click: s
+}, o), F = $(
+  {
+    /**
+     * This will initialize the state of the checkbox.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        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.
+     *
+     * @returns {void}
+     */
+    clickHandler() {
+      this.state.toggle("checked"), this.checkbox.checked = this.state.checked, typeof this.onChange == "function" && this.onChange(this.state.checked);
+    },
+    /**
+     * This will render the checkbox component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.getId();
+      return l({ class: `flex items-center space-x-2 cursor-pointer ${this.class || ""}` }, [
+        w({
+          id: e,
+          bind: this.bind,
+          checked: this.state.checked,
+          required: this.required,
+          clickHandler: () => this.clickHandler()
+        }),
+        this.label && H({ id: e, label: this.label, clickHandler: () => this.clickHandler() })
+      ]);
+    }
+  }
+), T = (e) => {
+  if (!e || e.length === 0) return "";
+  const s = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+  return s ? s[2] ? `(${s[1]}) ${s[2]}${s[3] ? "-" + s[3] : ""}` : s[1] || "" : e;
+}, E = (e) => {
+  const o = e.target, s = T(o.value);
+  s && (o.value = s);
+}, c = t((e) => r({
+  ...e,
+  class: `${h} ${e.class || ""}`.trim()
+})), L = t((e) => c({
+  ...e,
+  type: "tel",
+  name: e.name || "Phone",
+  label: e.label || "Phone",
+  placeholder: "(555) 555-5555",
+  required: !0,
+  pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
+  keyup: E
+})), M = t((e) => c({
+  ...e,
+  type: "email",
+  name: e.name || "Email",
+  label: e.label || "Email",
+  placeholder: "Email address"
+})), R = t((e) => k({
+  ...e,
+  as: "textarea",
+  class: `flex w-full h-24 px-3 py-2 text-sm rounded-md border border-input bg-background ${n} ${f} ${i} ${e.class || ""}`.trim()
+})), U = (e = {}) => l({ class: "flex items-center space-x-2" }, [
+  r({
+    ...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 && d({ forHTML: e.value, class: "cursor-pointer" }, e.label)
+]), W = t((e) => r({
+  ...e,
+  type: "date",
+  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+})), j = t((e) => r({
+  ...e,
+  type: "time",
+  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+})), z = t((e) => r({
+  ...e,
+  type: "datetime-local",
+  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+})), A = t((e) => r({
+  ...e,
+  type: "month",
+  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+})), B = t((e) => r({
+  ...e,
+  type: "week",
+  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+})), J = t((e) => c({
+  ...e,
+  type: "number"
+})), O = t((e) => c({
+  ...e,
+  type: "password"
+})), V = t((e) => c({
+  ...e,
+  type: "search"
+})), G = t((e) => c({
+  ...e,
+  type: "url"
+})), K = t((e) => c({
+  ...e,
+  type: "hidden"
+})), Q = t((e) => r({
+  ...e,
+  type: "color",
+  class: `border rounded-md border-input bg-background text-foreground p-0 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+}));
+t((e) => u({
+  ...e,
+  class: `flex h-4 w-4 rounded-md border border-input bg-background text-foreground ${n} ${i} ${e.class || ""}`.trim()
+}));
+const D = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", X = t((e) => r({
+  ...e,
+  type: "file",
+  class: `${h} ${D} ${e.class || ""}`.trim()
+}));
+export {
+  F as C,
+  W as D,
+  M as E,
+  X as F,
+  K as H,
+  c as I,
+  A as M,
+  J as N,
+  O as P,
+  U as R,
+  V as S,
+  L as T,
+  G as U,
+  B as W,
+  R as a,
+  j as b,
+  z as c,
+  Q as d,
+  i as e,
+  n as f,
+  h as g
+};