@base-framework/ui 1.0.202 → 1.0.203

package/dist/atoms.es.js

@@ -1,36 +1,37 @@
-import { B as e, C as t, a as n, F as o, L as p, P as r, R as u, S as I, b as i, T as l } from "./tooltip-CYtKjefM.js";
-import { B as m, I as T, L as x } from "./buttons-Cm9etaEG.js";
-import { C, d as c, D as g, c as b, E as f, F, H as L, I as P, M as R, N as S, P as h, R as k, T as D, a as V, b as E, U as H, W as M } from "./inputs-CMjx5-IX.js";
+import { B as e, C as t, b as o, F as n, a as r, L as p, P as u, R as I, S as i, c as l, T as d } from "./tooltip-Dn8TxE9o.js";
+import { B as T, I as c, L as x } from "./buttons-Cm9etaEG.js";
+import { C, d as g, D as F, c as b, E as f, F as L, H as P, I as R, M as S, N as h, P as k, R as D, T as V, a as E, b as G, U as H, W as M } from "./inputs-CMjx5-IX.js";
 import { V as U, a as W } from "./veil-D4dRxILB.js";
 export {
   e as Badge,
-  m as Button,
+  T as Button,
   t as Card,
   C as Checkbox,
-  n as CircleGraph,
-  c as ColorInput,
-  g as DateInput,
+  o as CircleGraph,
+  g as ColorInput,
+  F as DateInput,
   b as DateTimeInput,
   f as EmailInput,
-  o as Fieldset,
-  F as FileInput,
-  L as HiddenInput,
-  T as Icon,
-  P as Input,
+  n as Fieldset,
+  L as FileInput,
+  r as FormGroup,
+  P as HiddenInput,
+  c as Icon,
+  R as Input,
   p as Legend,
   x as LoadingButton,
-  R as MonthInput,
-  S as NumberInput,
-  h as PasswordInput,
-  r as ProgressBar,
-  k as Radio,
-  u as RangeSlider,
-  I as Select,
-  i as Skeleton,
-  D as TelInput,
-  V as Textarea,
-  E as TimeInput,
-  l as Tooltip,
+  S as MonthInput,
+  h as NumberInput,
+  k as PasswordInput,
+  u as ProgressBar,
+  D as Radio,
+  I as RangeSlider,
+  i as Select,
+  l as Skeleton,
+  V as TelInput,
+  E as Textarea,
+  G as TimeInput,
+  d as Tooltip,
   H as UrlInput,
   U as Veil,
   W as VeilJot,

package/dist/index.es.js

@@ -1,163 +1,164 @@
-import { B as s, C as t, a as o, F as r, L as n, P as l, R as i, S as p, b as u, T as m } from "./tooltip-CYtKjefM.js";
-import { B as c, I as g, L as C } from "./buttons-Cm9etaEG.js";
-import { C as b, d as D, D as I, c as S, E as B, F as P, H as F, I as M, M as k, N, P as f, R as v, T as x, a as y, b as h, U as W, W as H } from "./inputs-CMjx5-IX.js";
-import { V as A, a as w } from "./veil-D4dRxILB.js";
-import { Icons as R } from "./icons.es.js";
-import { A as O, B as G, C as V, t as j, E as q, v as z, w as J, x as _, D as K, j as Q, k as X, H as Y, G as Z, s as $, c as aa, a as ea, b as sa, I as ta, i as oa, g as ra, e as na, h as la, F as ia, d as pa, f as ua, u as ma, M as da, l as ca, N as ga, P as Ca, p as Ta, q as ba, S as Da, n as Ia, o as Sa, T as Ba, y as Pa, z as Fa, m as Ma, r as ka } from "./empty-state-CWXZVNA5.js";
-import { A as fa, b as va, C as xa, D as ya, a as ha, F as Wa, M as Ha, P as La, c as Aa, g as wa, p as Ua } from "./calendar-DQXME-2u.js";
-import { B as Ea, p as Oa, C as Ga, j as Va, D as ja, m as qa, k as za, H as Ja, I as _a, N as Ka, O as Qa, P as Xa, S as Ya, n as Za, o as $a, t as ae, s as ee, q as se, r as te, T as oe, l as re, U as ne, W as le, f as ie, h as pe, i as ue, c as me, d as de, b as ce, e as ge, a as Ce, g as Te } from "./signature-panel-CJVWNEzI.js";
-import { B as De, I as Ie, M as Se, d as Be, e as Pe, g as Fe, N as Me, b as ke, a as Ne, f as fe, P as ve, c as xe, S as ye, T as he } from "./mobile-nav-wrapper-Dj67Pb8l.js";
-import { B as He, a as Le, C as Ae, F as we, b as Ue, c as Re, M as Ee, P as Oe, S as Ge } from "./sidebar-menu-page-BVryQj2Z.js";
-import { A as je, F as qe, M as ze, a as Je, T as _e } from "./aside-template-McEj_Gxc.js";
-import { B as Qe } from "./bside-template-Du2m3rsE.js";
-import { F as Ye, I as Ze, c as $e } from "./image-scaler-BQ7WdtlV.js";
+import { B as e, C as o, b as t, F as r, a as n, L as l, P as i, R as p, S as u, c as m, T as d } from "./tooltip-Dn8TxE9o.js";
+import { B as g, I as C, L as T } from "./buttons-Cm9etaEG.js";
+import { C as D, d as I, D as S, c as B, E as P, F, H as M, I as k, M as N, N as f, P as v, R as x, T as y, a as h, b as W, U as H, W as L } from "./inputs-CMjx5-IX.js";
+import { V as w, a as U } from "./veil-D4dRxILB.js";
+import { Icons as E } from "./icons.es.js";
+import { A as O, B as V, C as j, t as q, E as z, v as J, w as _, x as K, D as Q, j as X, k as Y, H as Z, G as $, s as aa, c as sa, a as ea, b as oa, I as ta, i as ra, g as na, e as la, h as ia, F as pa, d as ua, f as ma, u as da, M as ca, l as ga, N as Ca, P as Ta, p as ba, q as Da, S as Ia, n as Sa, o as Ba, T as Pa, y as Fa, z as Ma, m as ka, r as Na } from "./empty-state-CWXZVNA5.js";
+import { A as va, b as xa, C as ya, D as ha, a as Wa, F as Ha, M as La, P as Aa, c as wa, g as Ua, p as Ra } from "./calendar-DQXME-2u.js";
+import { B as Ga, p as Oa, C as Va, j as ja, D as qa, m as za, k as Ja, H as _a, I as Ka, N as Qa, O as Xa, P as Ya, S as Za, n as $a, o as as, t as ss, s as es, q as os, r as ts, T as rs, l as ns, U as ls, W as is, f as ps, h as us, i as ms, c as ds, d as cs, b as gs, e as Cs, a as Ts, g as bs } from "./signature-panel-CJVWNEzI.js";
+import { B as Is, I as Ss, M as Bs, d as Ps, e as Fs, g as Ms, N as ks, b as Ns, a as fs, f as vs, P as xs, c as ys, S as hs, T as Ws } from "./mobile-nav-wrapper-Dj67Pb8l.js";
+import { B as Ls, a as As, C as ws, F as Us, b as Rs, c as Es, M as Gs, P as Os, S as Vs } from "./sidebar-menu-page-BVryQj2Z.js";
+import { A as qs, F as zs, M as Js, a as _s, T as Ks } from "./aside-template-McEj_Gxc.js";
+import { B as Xs } from "./bside-template-Du2m3rsE.js";
+import { F as Zs, I as $s, c as ae } from "./image-scaler-BQ7WdtlV.js";
 export {
   O as Alert,
-  je as AsideTemplate,
-  fa as Avatar,
-  Ea as BackButton,
-  De as Backdrop,
-  s as Badge,
-  He as BasicPage,
-  Le as BlankPage,
-  G as Breadcrumb,
-  Qe as BsideTemplate,
-  c as Button,
+  qs as AsideTemplate,
+  va as Avatar,
+  Ga as BackButton,
+  Is as Backdrop,
+  e as Badge,
+  Ls as BasicPage,
+  As as BlankPage,
+  V as Breadcrumb,
+  Xs as BsideTemplate,
+  g as Button,
   Oa as ButtonTab,
-  va as Calendar,
-  xa as CalendarCells,
-  t as Card,
-  Ae as CenterPage,
-  b as Checkbox,
-  Ga as CheckboxCol,
-  o as CircleGraph,
-  D as ColorInput,
-  V as ColumnRow,
-  j as Combobox,
-  q as Confirmation,
-  z as CountDisplay,
-  J as Counter,
-  Va as DataTable,
-  ja as DataTableBody,
-  I as DateInput,
-  _ as DatePicker,
-  S as DateTimeInput,
-  ya as DayCell,
-  ha as DayHeader,
-  K as DelayComponent,
-  Q as DetailBody,
-  X as DetailSection,
-  Y as Dialog,
-  Z as DialogContainer,
-  qa as DockableOverlay,
-  $ as DotsIndicator,
-  aa as Dropdown,
+  xa as Calendar,
+  ya as CalendarCells,
+  o as Card,
+  ws as CenterPage,
+  D as Checkbox,
+  Va as CheckboxCol,
+  t as CircleGraph,
+  I as ColorInput,
+  j as ColumnRow,
+  q as Combobox,
+  z as Confirmation,
+  J as CountDisplay,
+  _ as Counter,
+  ja as DataTable,
+  qa as DataTableBody,
+  S as DateInput,
+  K as DatePicker,
+  B as DateTimeInput,
+  ha as DayCell,
+  Wa as DayHeader,
+  Q as DelayComponent,
+  X as DetailBody,
+  Y as DetailSection,
+  Z as Dialog,
+  $ as DialogContainer,
+  za as DockableOverlay,
+  aa as DotsIndicator,
+  sa as Dropdown,
   ea as DropdownItem,
-  sa as DropdownMenu,
-  za as DynamicDataTable,
-  B as EmailInput,
+  oa as DropdownMenu,
+  Ja as DynamicDataTable,
+  P as EmailInput,
   ta as EmptyState,
   r as Fieldset,
-  P as FileInput,
-  oa as Form,
-  ra as FormControl,
-  na as FormDescription,
-  la as FormField,
-  ia as FormItem,
-  pa as FormLabel,
-  ua as FormMessage,
-  Ye as Format,
-  Wa as FormatDate,
-  we as FullContainPage,
-  Ue as FullPage,
-  qe as FullTemplate,
-  Re as FullscreenPage,
-  Ja as HeaderCol,
-  F as HiddenInput,
-  g as Icon,
-  R as Icons,
-  Ze as ImageScaler,
-  Ie as InlineNavigation,
-  _a as InlineOverlay,
-  M as Input,
-  n as Legend,
-  C as LoadingButton,
-  ze as MainColumn,
-  Se as MainLink,
-  Ee as MainSection,
-  ma as MinusButton,
-  Be as MobileNavButton,
-  Pe as MobileNavWrapper,
-  da as Modal,
-  Ha as MonthCalendar,
-  k as MonthInput,
-  Fe as NavButton,
-  Me as NavButtonLink,
-  ke as Navigation,
-  Ne as NavigationGroup,
-  Ka as NavigationMenu,
-  fe as NavigationPopover,
-  ca as Notification,
-  ga as NotificationContainer,
-  N as NumberInput,
-  Qa as Overlay,
-  Oe as Page,
-  Xa as Panel,
-  f as PasswordInput,
-  Ca as PlusButton,
-  La as PopOver,
-  ve as PopupHeader,
-  l as ProgressBar,
-  v as Radio,
-  i as RangeSlider,
-  Ta as STATUSES,
-  ba as STATUS_CLASS,
-  Ya as ScrollableDataTable,
-  Za as SearchDropdown,
-  $a as SearchInput,
-  p as Select,
-  xe as SidebarMenu,
-  Ge as SidebarMenuPage,
-  ae as SignaturePanel,
-  u as Skeleton,
-  Da as SplitRow,
-  Ia as StaticStatusIndicator,
-  Sa as StatusIndicator,
-  ye as SubNavigation,
-  ee as Tab,
-  se as TabGroup,
-  te as TabNavigation,
-  oe as TableHeader,
-  x as TelInput,
-  Je as Template,
-  y as Textarea,
-  Ba as ThemeToggle,
-  Pa as TimeFrame,
-  h as TimeInput,
-  Fa as TimePicker,
-  he as TitleHeader,
-  Ma as Toggle,
-  m as Tooltip,
-  _e as TopBar,
-  W as UrlInput,
-  re as UserList,
-  ne as UserListItem,
-  A as Veil,
-  w as VeilJot,
-  le as WeekCalendar,
-  ie as WeekCell,
-  pe as WeekCells,
-  ue as WeekHeader,
-  H as WeekInput,
-  Aa as addTime,
-  me as calculateWeekNumber,
-  $e as createWatcherCallback,
-  de as generateWeeks,
-  ce as getDateFromWeek,
-  ge as getMonthDays,
-  Ce as getNextMonthDays,
-  wa as getPosition,
-  Te as getPreviousMonthDays,
-  ka as getStatusClass,
-  Ua as pad
+  F as FileInput,
+  ra as Form,
+  na as FormControl,
+  la as FormDescription,
+  ia as FormField,
+  n as FormGroup,
+  pa as FormItem,
+  ua as FormLabel,
+  ma as FormMessage,
+  Zs as Format,
+  Ha as FormatDate,
+  Us as FullContainPage,
+  Rs as FullPage,
+  zs as FullTemplate,
+  Es as FullscreenPage,
+  _a as HeaderCol,
+  M as HiddenInput,
+  C as Icon,
+  E as Icons,
+  $s as ImageScaler,
+  Ss as InlineNavigation,
+  Ka as InlineOverlay,
+  k as Input,
+  l as Legend,
+  T as LoadingButton,
+  Js as MainColumn,
+  Bs as MainLink,
+  Gs as MainSection,
+  da as MinusButton,
+  Ps as MobileNavButton,
+  Fs as MobileNavWrapper,
+  ca as Modal,
+  La as MonthCalendar,
+  N as MonthInput,
+  Ms as NavButton,
+  ks as NavButtonLink,
+  Ns as Navigation,
+  fs as NavigationGroup,
+  Qa as NavigationMenu,
+  vs as NavigationPopover,
+  ga as Notification,
+  Ca as NotificationContainer,
+  f as NumberInput,
+  Xa as Overlay,
+  Os as Page,
+  Ya as Panel,
+  v as PasswordInput,
+  Ta as PlusButton,
+  Aa as PopOver,
+  xs as PopupHeader,
+  i as ProgressBar,
+  x as Radio,
+  p as RangeSlider,
+  ba as STATUSES,
+  Da as STATUS_CLASS,
+  Za as ScrollableDataTable,
+  $a as SearchDropdown,
+  as as SearchInput,
+  u as Select,
+  ys as SidebarMenu,
+  Vs as SidebarMenuPage,
+  ss as SignaturePanel,
+  m as Skeleton,
+  Ia as SplitRow,
+  Sa as StaticStatusIndicator,
+  Ba as StatusIndicator,
+  hs as SubNavigation,
+  es as Tab,
+  os as TabGroup,
+  ts as TabNavigation,
+  rs as TableHeader,
+  y as TelInput,
+  _s as Template,
+  h as Textarea,
+  Pa as ThemeToggle,
+  Fa as TimeFrame,
+  W as TimeInput,
+  Ma as TimePicker,
+  Ws as TitleHeader,
+  ka as Toggle,
+  d as Tooltip,
+  Ks as TopBar,
+  H as UrlInput,
+  ns as UserList,
+  ls as UserListItem,
+  w as Veil,
+  U as VeilJot,
+  is as WeekCalendar,
+  ps as WeekCell,
+  us as WeekCells,
+  ms as WeekHeader,
+  L as WeekInput,
+  wa as addTime,
+  ds as calculateWeekNumber,
+  ae as createWatcherCallback,
+  cs as generateWeeks,
+  gs as getDateFromWeek,
+  Cs as getMonthDays,
+  Ts as getNextMonthDays,
+  Ua as getPosition,
+  bs as getPreviousMonthDays,
+  Na as getStatusClass,
+  Ra as pad
 };

package/dist/{tooltip-CYtKjefM.js → tooltip-Dn8TxE9o.js}

@@ -1,7 +1,7 @@
-import { Span as c, Div as l, Legend as f, Fieldset as x, UseParent as u, Input as C } from "@base-framework/atoms";
+import { Span as g, Div as o, Legend as b, Fieldset as x, UseParent as u, Input as C } from "@base-framework/atoms";
 import { Atom as s, Html as h } from "@base-framework/base";
 import { a as d } from "./veil-D4dRxILB.js";
-import { f as p, e as y, g as k } from "./inputs-CMjx5-IX.js";
+import { f as y, e as p, g as k } from "./inputs-CMjx5-IX.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -79,30 +79,51 @@ const a = {
     ringColor: "ring-background"
   }
 }, w = (t) => a[t] || a.gray, $ = (t) => {
-  const { backgroundColor: e, textColor: r, ringColor: o } = w(t);
-  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${e} ${r} ${o}`;
-}, T = s((t, e) => {
-  const r = $(t == null ? void 0 : t.type);
-  return c({ ...t, class: r }, e);
-}), L = s((t, e) => {
-  const r = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
-  return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"), l({
+  const { backgroundColor: r, textColor: e, ringColor: l } = w(t);
+  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${l}`;
+}, T = s((t, r) => {
+  const e = $(t == null ? void 0 : t.type);
+  return g({ ...t, class: e }, r);
+}), L = s((t, r) => {
+  const e = t.margin ?? "my-5 mx-5", l = t.padding ?? "p-4";
+  return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"), o({
     ...t,
-    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${r} ${o} ${t.class || ""}`
-  }, e);
-}), v = s((t, e) => f({
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${l} ${t.class || ""}`
+  }, r);
+}), v = s((t, r) => b({
   ...t,
   class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, e)), I = s((t, e) => {
-  const r = t.border === "full" ? "border rounded-md" : "border-t";
+}, r)), G = s((t, r) => {
+  const e = t.border === "full" ? "border rounded-md" : "border-t";
   return x({
     ...t,
-    class: `p-6 ${r} ${t.class || ""}`
+    class: `p-6 ${e} ${t.class || ""}`
   }, [
     t.legend && v(t.legend),
-    l({ class: "flex flex-auto flex-col space-y-6" }, e)
+    o({ class: "flex flex-auto flex-col space-y-6" }, r)
   ]);
-}), G = d(
+}), I = s((t, r) => {
+  var e;
+  return o({
+    ...t,
+    class: `flex flex-col
+			sm:flex-row sm:items-center
+			${t.class || ""}`
+  }, [
+    // Label container: 1/4 width on sm+, full-width on mobile
+    t.label && o({
+      ...t.labelProps,
+      class: `w-full
+				sm:w-1/4
+				text-sm font-medium
+				${((e = t.labelProps) == null ? void 0 : e.class) || ""}`
+    }, [t.label]),
+    // Controls container: grows to fill remaining space, spacing between items
+    o({
+      class: "w-full sm:flex-1 flex flex-col space-y-4"
+    }, r)
+  ]);
+}), R = d(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -132,17 +153,17 @@ const a = {
      * @returns {object}
      */
     render() {
-      return l({ class: "relative w-full h-4 flex items-center" }, [
+      return o({ class: "relative w-full h-4 flex items-center" }, [
         // Track
-        l({ class: "absolute h-2 w-full rounded-full bg-muted" }),
+        o({ class: "absolute h-2 w-full rounded-full bg-muted" }),
         u(({ state: t }) => [
           // Filled Track
-          l({
+          o({
             class: "absolute h-2 bg-primary rounded-full",
             style: ["width: [[filledPercentage]]%", t]
           }),
           // Thumb
-          l({
+          o({
             class: `
 						absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
 						ring-offset-background transition-colors focus-visible:outline-none
@@ -160,35 +181,35 @@ const a = {
             // Incorporate your new classes here
             class: `
 						absolute w-full h-full opacity-0 cursor-pointer
-						${p}
 						${y}
+						${p}
 						${this.class || ""}
 					`.trim(),
             bind: this.bind,
-            input: (e) => {
-              const r = Number(e.target.value);
-              this.state.value = r, this.state.filledPercentage = this.getFillPercentage(r), typeof this.change == "function" && this.change(r);
+            input: (r) => {
+              const e = Number(r.target.value);
+              this.state.value = e, this.state.filledPercentage = this.getFillPercentage(e), typeof this.change == "function" && this.change(e);
             }
           })
         ])
       ]);
     }
   }
-), R = s((t) => ({
+), O = s((t) => ({
   tag: "select",
-  onCreated(e) {
-    t.options && h.setupSelectOptions(e, t.options);
+  onCreated(r) {
+    t.options && h.setupSelectOptions(r, t.options);
   },
   ...t,
   class: `${k} ${t.class || ""}`.trim()
-})), P = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
-  const r = t, o = 16, n = 2 * Math.PI * o, m = r / 100 * n, b = `
+})), P = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
+  const e = t, l = 16, n = 2 * Math.PI * l, m = e / 100 * n, f = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
 		<circle
 			cx="18"
 			cy="18"
-			r="${o}"
+			r="${l}"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="4"
@@ -199,7 +220,7 @@ const a = {
 		<circle
 			cx="18"
 			cy="18"
-			r="${o}"
+			r="${l}"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="4"
@@ -207,7 +228,7 @@ const a = {
 			stroke-dasharray="${n}"
 			stroke-dashoffset="${n - m}"
 			stroke-linecap="round"
-			class="${e}"
+			class="${r}"
 		/>
 		<!-- Percentage Text -->
 		<text
@@ -216,27 +237,27 @@ const a = {
 			class="text-[0.25em] font-medium fill-primary"
 			text-anchor="middle"
 			dominant-baseline="middle">
-			${r}%
+			${e}%
 		</text>
 	</svg>
 	`;
-  return l({
+  return o({
     class: "circle-graph text-inherit",
-    html: b
+    html: f
   });
-}, O = s((t) => {
-  const e = t.progress || 0, r = t.class || "", o = i(e, r);
-  return l({
+}, V = s((t) => {
+  const r = t.progress || 0, e = t.class || "", l = i(r, e);
+  return o({
     class: "circle-graph-wrap",
     onSet: [
       t.prop,
-      (n) => (n = P(n), n ? i(n, r) : o)
+      (n) => (n = P(n), n ? i(n, e) : l)
     ]
-  }, [o]);
-}), S = () => u(({ state: t }) => l({
+  }, [l]);
+}), S = () => u(({ state: t }) => o({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: ["width: [[progress]]%;", t]
-})), V = d(
+})), D = d(
   {
     /**
      * This will render the progress bar component.
@@ -244,7 +265,7 @@ const a = {
      * @returns {object}
      */
     render() {
-      return l({ class: "relative w-full h-4 rounded-full bg-muted" }, [
+      return o({ class: "relative w-full h-4 rounded-full bg-muted" }, [
         S()
       ]);
     },
@@ -274,8 +295,8 @@ const a = {
      */
     uploadProgress(t) {
       if (t.lengthComputable) {
-        const r = Math.round(t.loaded * 100 / t.total);
-        this.set(r);
+        const e = Math.round(t.loaded * 100 / t.total);
+        this.set(e);
       }
     },
     /**
@@ -288,9 +309,9 @@ const a = {
       t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
     }
   }
-), D = ({ class: t, shape: e = "rectangle", width: r = "w-full", height: o = "h-4" }) => l({
-  class: `bg-muted animate-pulse ${r} ${o} ${e === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
-}), g = {
+), M = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: l = "h-4" }) => o({
+  class: `bg-muted animate-pulse ${e} ${l} ${r === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
+}), c = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
   "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
   "top-left": "bottom-full right-full transform translate-x-1 mb-2",
@@ -299,28 +320,29 @@ const a = {
   "bottom-left": "top-full right-full transform translate-x-1 mt-2",
   left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
   right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
-}, E = (t) => g[t] || g.top, M = s(({ position: t = "top", content: e }, r) => {
-  const o = E(t);
-  return Array.isArray(r) === !1 && (r = [r]), l({ class: "relative group inline-block" }, [
-    ...r,
+}, E = (t) => c[t] || c.top, _ = s(({ position: t = "top", content: r }, e) => {
+  const l = E(t);
+  return Array.isArray(e) === !1 && (e = [e]), o({ class: "relative group inline-block" }, [
+    ...e,
     // Tooltip box
-    c({
+    g({
       class: `
 				absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
-				group-hover:opacity-100 transition-opacity duration-200 ${o} pointer-events-none
+				group-hover:opacity-100 transition-opacity duration-200 ${l} pointer-events-none
 			`
-    }, e)
+    }, r)
   ]);
 });
 export {
   T as B,
   L as C,
-  I as F,
+  G as F,
   v as L,
-  V as P,
-  G as R,
-  R as S,
-  M as T,
-  O as a,
-  D as b
+  D as P,
+  R,
+  O as S,
+  _ as T,
+  I as a,
+  V as b,
+  M as c
 };

package/dist/types/components/atoms/atoms.d.ts

@@ -2,6 +2,7 @@ export * from "./badges/badge.js";
 export * from "./buttons/buttons.js";
 export * from "./cards/card.js";
 export * from "./form/fieldset.js";
+export * from "./form/form-group.js";
 export * from "./form/inputs/checkbox.js";
 export * from "./form/inputs/inputs.js";
 export * from "./form/inputs/range-slider.js";

package/dist/types/components/atoms/form/form-group.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Creates a responsive form-group: label on the left, controls on the right.
+ *
+ * @param {object} props
+ * @param {string|object} props.label
+ * @param {object} [props.labelProps] any extra props for the label container
+ * @param {string} [props.class] extra classes for the outer container
+ * @param {array} children form controls (inputs, selects, etc)
+ * @returns {object}
+ */
+export const FormGroup: Function;
+export default FormGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.202",
+	"version": "1.0.203",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {