@base-framework/ui 1.0.1727 → 1.0.2001

package/dist/templates.es.js

@@ -1,5 +1,5 @@
-import { A as s, F as l, M as m, a as p, T as o } from "./aside-template-McEj_Gxc.js";
-import { B as T } from "./bside-template-Du2m3rsE.js";
+import { A as s, F as l, M as m, a as p, T as o } from "./aside-template-sUm-F2f0.js";
+import { B as T } from "./bside-template-do_hXebn.js";
 export {
   s as AsideTemplate,
   T as BsideTemplate,

package/dist/{tooltip-CESEqMCU.js → tooltip-PupzYM1r.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 { 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-Dmu4Z-7-.js";
+import { Span as c, Legend as b, Fieldset as p, Div as l, UseParent as u, Input as C } from "@base-framework/atoms";
+import { Atom as s, Html as x } from "@base-framework/base";
+import { a as d } from "./veil-CqnAmj-D.js";
+import { f as h, e as y, g as k } from "./inputs-9udyzkHR.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -82,27 +82,21 @@ const a = {
   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);
+  const r = $(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({
-    ...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({
+}), v = s((t, e) => b({
   ...t,
-  class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, e)), I = s((t, e) => {
+  class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
+}, e)), L = s((t, e) => {
   const r = t.border === "full" ? "border rounded-md" : "border-t";
-  return x({
+  return p({
     ...t,
     class: `p-6 ${r} ${t.class || ""}`
   }, [
     t.legend && v(t.legend),
-    l({ class: "flex flex-auto flex-col space-y-6" }, e)
+    l({ class: "flex flex-auto flex-col gap-y-6" }, e)
   ]);
-}), G = d(
+}), I = d(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -160,7 +154,7 @@ const a = {
             // Incorporate your new classes here
             class: `
 						absolute w-full h-full opacity-0 cursor-pointer
-						${p}
+						${h}
 						${y}
 						${this.class || ""}
 					`.trim(),
@@ -174,15 +168,15 @@ const a = {
       ]);
     }
   }
-), R = s((t) => ({
+), G = s((t) => ({
   tag: "select",
   onCreated(e) {
-    t.options && h.setupSelectOptions(e, t.options);
+    t.options && x.setupSelectOptions(e, 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 = `
+  const r = t, o = 16, n = 2 * Math.PI * o, m = r / 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
@@ -222,9 +216,9 @@ const a = {
 	`;
   return l({
     class: "circle-graph text-inherit",
-    html: b
+    html: f
   });
-}, O = s((t) => {
+}, R = s((t) => {
   const e = t.progress || 0, r = t.class || "", o = i(e, r);
   return l({
     class: "circle-graph-wrap",
@@ -236,7 +230,7 @@ const a = {
 }), S = () => u(({ state: t }) => l({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: ["width: [[progress]]%;", t]
-})), V = d(
+})), O = d(
   {
     /**
      * This will render the progress bar component.
@@ -288,7 +282,7 @@ 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({
+), V = ({ 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 = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
@@ -299,7 +293,7 @@ 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) => {
+}, E = (t) => g[t] || g.top, D = 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,
@@ -314,13 +308,12 @@ const a = {
 });
 export {
   T as B,
-  L as C,
-  I as F,
+  R as C,
+  L as F,
   v as L,
-  V as P,
-  G as R,
-  R as S,
-  M as T,
-  O as a,
-  D as b
+  O as P,
+  I as R,
+  G as S,
+  D as T,
+  V as a
 };

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/dist/types/components/atoms/form/inputs/input-classes.d.ts

@@ -7,7 +7,7 @@ export const sizeClass: "flex h-10 w-full px-3 py-2 text-sm";
  * @constant {string} borderClass
  * Common border & background classes for inputs.
  */
-export const borderClass: "rounded-md border border-input bg-background";
+export const borderClass: "rounded-md border border-border bg-input";
 /**
  * @constant {string} focusClass
  * Common focus and ring classes for inputs.
@@ -27,4 +27,4 @@ export const placeholderClass: "placeholder:text-muted-foreground";
  * @constant {string} commonInputClasses
  * Composed classes for text-like inputs (text, email, tel, etc.).
  */
-export const commonInputClasses: "flex h-10 w-full px-3 py-2 text-sm rounded-md border border-input bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive";
+export const commonInputClasses: "flex h-10 w-full px-3 py-2 text-sm rounded-md border border-border bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive";

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

@@ -76,13 +76,6 @@ export const NumberInput: Function;
  * @returns {object} An Input element of type "password".
  */
 export const PasswordInput: Function;
-/**
- * Input component specifically for search.
- *
- * @param {object} props Props passed to the Input.
- * @returns {object} An Input element of type "search".
- */
-export const SearchInput: Function;
 /**
  * Input component specifically for URLs.
  *

package/dist/types/components/molecules/date-time/date-range-picker.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DateRangePicker Atom
+ *
+ * This will create a date picker component.
+ *
+ * @type {typeof Veil}
+ */
+export const DateRangePicker: typeof Veil;
+export default DateRangePicker;
+import { Veil } from '../../atoms/veil.js';

package/dist/types/components/molecules/empty/empty-state.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This will create an empty state component for unsubscription errors.
+ *
+ * @param {object} props - The properties for the empty state.
+ * @param {array} children - The children elements to be rendered inside the empty state.
+ * @return {object} - The empty state component.
+ */
+export const EmptyState: Function;
+export default EmptyState;

package/dist/types/components/molecules/files/attachment/attachment-input.d.ts

@@ -0,0 +1,9 @@
+/**
+ * AttachmentInput
+ *
+ * This component handles file attachments.
+ *
+ * @class
+ */
+export const AttachmentInput: typeof import("@base-framework/base").Component;
+export default AttachmentInput;

package/dist/types/components/molecules/files/attachment/attachment.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Attachment
+ *
+ * This creates an attachment.
+ *
+ * @class
+ */
+export const Attachment: typeof import("@base-framework/base").Component;
+export default AttachmentInput;
+import AttachmentInput from "./attachment-input.js";

package/dist/types/components/molecules/files/attachment/orientation.d.ts

@@ -0,0 +1 @@
+export function getOrientation(file: object, callback: Function): void;

package/dist/types/components/molecules/files/attachment/type.d.ts

@@ -0,0 +1 @@
+export function getFileType(file: object): string;

package/dist/types/components/molecules/form/form-card.d.ts

@@ -0,0 +1,31 @@
+/**
+ * FormCard
+ *
+ * A card component for displaying a form.
+ *
+ * @param {object} props - The component props.
+ * @param {string} props.title - The title of the form.
+ * @param {array} children - The children to render inside the card.
+ * @returns {object} The rendered form card component.
+ */
+export const FormCard: Function;
+/**
+ * FormCardGroup
+ *
+ * A group of form cards.
+ *
+ * @param {object} props - The component props.
+ * @param {array} children - The children to render inside the group.
+ * @returns {object} The rendered form card group component.
+ */
+export const FormCardGroup: Function;
+/**
+ * FormCardGroup
+ *
+ * A group of form cards.
+ *
+ * @param {object} props - The component props.
+ * @param {array} children - The children to render inside the group.
+ * @returns {object} The rendered form card group component.
+ */
+export const FormCardContent: Function;

package/dist/types/components/molecules/image/image-uploader.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ImageUploader
+ *
+ * Upload button for image files, styled with a dashed circular drop zone.
+ *
+ * @type {typeof Component}
+ */
+export const ImageUploader: typeof Component;
+import { Component } from '@base-framework/base';

package/dist/types/components/molecules/image/logo-uploader.d.ts

@@ -0,0 +1,9 @@
+/**
+ * LogoUploader
+ *
+ * Upload button for logo images, styled with a dashed circular drop zone.
+ *
+ * @type {typeof Component}
+ */
+export const LogoUploader: typeof Component;
+import { Component } from '@base-framework/base';

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

@@ -4,6 +4,7 @@ export * from "./dropdowns/dropdown-item.js";
 export * from "./dropdowns/dropdown-menu.js";
 export * from "./dropdowns/dropdown.js";
 export * from "./form/form-atoms.js";
+export * from "./form/form-card.js";
 export * from "./form/form-control.js";
 export * from "./form/form-field.js";
 export * from "./form/form.js";
@@ -18,14 +19,18 @@ export * from "./avatars/avatar.js";
 export * from "./avatars/static-status-indicator.js";
 export * from "./avatars/status-indicator.js";
 export * from "./avatars/statuses.js";
+export * from "./image/image-uploader.js";
+export * from "./image/logo-uploader.js";
 export * from "./breadcrumb/breadcrumb.js";
 export * from "./breadcrumb/dots-indicator.js";
 export * from "./combobox/combobox.js";
 export * from "./counters/atoms.js";
 export * from "./counters/counter.js";
 export * from "./date-time/date-picker.js";
+export * from "./date-time/date-range-picker.js";
 export * from "./date-time/time-frame.js";
 export * from "./date-time/time-picker.js";
 export * from "./dialogs/confirmation.js";
 export * from "./dialogs/dialog-container.js";
 export * from "./dialogs/dialog.js";
+export * from "./empty/empty-state.js";

package/dist/types/components/molecules/notifications/notification.d.ts

@@ -4,9 +4,9 @@
  * A component that displays notifications.
  *
  * @class
- * @extends DelayComponent
+ * @extends Component
  */
-export class Notification extends DelayComponent {
+export class Notification extends Component {
     /**
      * @member {function|null} secondaryAction
      */
@@ -75,5 +75,5 @@ export class Notification extends DelayComponent {
     close(e: object): void;
 }
 export default Notification;
-import { DelayComponent } from "../delay-component.js";
+import { Component } from "@base-framework/base";
 import { Timer } from "@base-framework/organisms";

package/dist/types/components/organisms/calendar/calendar.d.ts

@@ -38,6 +38,12 @@ export class Calendar extends Component {
      * @returns {Data}
      */
     setData(): Data;
+    /**
+     * This will set up the states for the calendar.
+     *
+     * @return {object}
+     */
+    setupStates(): object;
     /**
      * This will get the name of the month.
      *

package/dist/types/components/organisms/calendar/month/calendar-header.d.ts

@@ -0,0 +1,7 @@
+export function CalendarHeader({ onMonthClick, onYearClick, next, previous }: {
+    onMonthClick: Function;
+    onYearClick: Function;
+    next: Function;
+    previous: Function;
+}): object;
+export default CalendarHeader;

package/dist/types/components/organisms/calendar/month-selector.d.ts

@@ -0,0 +1,5 @@
+export function MonthSelector({ currentMonth, currentYear, onSelect }: {
+    currentMonth: number;
+    currentYear: number;
+    onSelect: Function;
+}): object;

package/dist/types/components/organisms/calendar/range/calendar-header.d.ts

@@ -0,0 +1,7 @@
+export function CalendarHeader({ onMonthClick, onYearClick, next, previous }: {
+    onMonthClick: Function;
+    onYearClick: Function;
+    next: Function;
+    previous: Function;
+}): object;
+export default CalendarHeader;

package/dist/types/components/organisms/calendar/range/day-header.d.ts

@@ -0,0 +1 @@
+export function DayHeader(day: string): object;

package/dist/types/components/organisms/calendar/range/days-of-week-header.d.ts

@@ -0,0 +1 @@
+export function DaysOfWeekHeader(): object;

package/dist/types/components/organisms/calendar/range/month-calendar.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Create a month calendar component.
+ *
+ * @param {object} props
+ * @param {string} props.monthName
+ * @param {number} props.year
+ * @param {object} props.today
+ * @param {object} props.current
+ * @param {boolean} props.blockPriorDates
+ * @param {function} props.onDateClick
+ * @param {function} props.onMonthClick
+ * @param {function} props.onYearClick
+ * @param {function} props.next
+ * @param {function} props.previous
+ * @returns {object}
+ */
+export const MonthCalendar: Function;

package/dist/types/components/organisms/calendar/range/month-selector.d.ts

@@ -0,0 +1,5 @@
+export function MonthSelector({ currentMonth, currentYear, onSelect }: {
+    currentMonth: number;
+    currentYear: number;
+    onSelect: Function;
+}): object;

package/dist/types/components/organisms/calendar/range/navigation-button.d.ts

@@ -0,0 +1 @@
+export function NavigationButton({ label, click }: object): object;

package/dist/types/components/organisms/calendar/range/range-calendar.d.ts

@@ -0,0 +1,72 @@
+/**
+ * RangeCalendar
+ *
+ * A calendar component for selecting a start and end date.
+ *
+ * @class RangeCalendar
+ */
+export class RangeCalendar extends Component {
+    /**
+     * Initial start ISO date (YYYY-MM-DD).
+     * @member {string|null} startDate
+     */
+    startDate: any;
+    /**
+     * Initial end ISO date (YYYY-MM-DD).
+     * @member {string|null} endDate
+     */
+    endDate: any;
+    /**
+     * Callback after both dates are chosen.
+     * @member {function|null} onRangeSelect
+     */
+    onRangeSelect: any;
+    /**
+     * Block dates before today.
+     * @member {boolean} blockPriorDates
+     */
+    blockPriorDates: boolean;
+    /**
+     * Initialize reactive data for today and current view.
+     *
+     * @returns {Data}
+     */
+    setData(): Data;
+    /**
+     * This will get the name of the month.
+     *
+     * @param {number} month
+     * @returns {string}
+     */
+    getMonthName(month: number): string;
+    /**
+     * Initialize component state.
+     *
+     * @returns {{view:string}}
+     */
+    setupStates(): {
+        view: string;
+    };
+    /**
+     * Handle a date cell click.
+     *
+     * @param {string} isoDate
+     * @returns {void}
+     */
+    handleClick(isoDate: string): void;
+    /**
+     * Update current month/year in data.
+     *
+     * @param {object} obj
+     * @returns {void}
+     */
+    setCurrent({ month, year, date }: object): void;
+    /**
+     * Render the range calendar.
+     *
+     * @returns {object}
+     */
+    render(): object;
+}
+import { Component } from '@base-framework/base';
+import { Data } from '@base-framework/base';

package/dist/types/components/organisms/calendar/range/range-day-cell.d.ts

@@ -0,0 +1,10 @@
+export function RangeDayCell({ day, iso, disabled, isStart, isEnd, isBetween, isOtherMonth, click }: {
+    day: number;
+    iso: string;
+    disabled: boolean;
+    isStart: boolean;
+    isEnd: boolean;
+    isBetween: boolean;
+    isOtherMonth: boolean;
+    click: Function;
+}): object;

package/dist/types/components/organisms/calendar/range/range-days-grid.d.ts

@@ -0,0 +1,6 @@
+export function RangeDaysGrid({ today, current, blockPriorDates, onDateClick }: {
+    today: object;
+    current: object;
+    blockPriorDates: boolean;
+    onDateClick: Function;
+}): object;

package/dist/types/components/organisms/calendar/range/range-toggle.d.ts

@@ -0,0 +1,7 @@
+export function RangeToggle({ start, end, selecting, onSelectStart, onSelectEnd }: {
+    start: string | null;
+    end: string | null;
+    selecting: string;
+    onSelectStart: Function;
+    onSelectEnd: Function;
+}): object;

package/dist/types/components/organisms/calendar/range/year-selector.d.ts

@@ -0,0 +1,4 @@
+export function YearSelector({ currentYear, onSelect }: {
+    currentYear: number;
+    onSelect: Function;
+}): object;

package/dist/types/components/organisms/calendar/year-selector.d.ts

@@ -0,0 +1,5 @@
+export function YearSelector({ currentMonth, currentYear, onSelect }: {
+    currentMonth: number;
+    currentYear: number;
+    onSelect: Function;
+}): object;

package/dist/types/components/organisms/lists/data-table-body.d.ts

@@ -1,4 +1,4 @@
-export function DataTableBody({ key, rows, selectRow, rowItem }: object): object;
+export function DataTableBody({ key, rows, selectRow, rowItem, emptyState, skeleton, columnCount }: object): object;
 import { CheckboxCol } from './table-header.js';
 import { HeaderCol } from './table-header.js';
 import { TableHeader } from './table-header.js';

package/dist/types/components/organisms/lists/data-table.d.ts

@@ -4,6 +4,7 @@
  * Manages data, filtering, pagination, and selection within a table.
  *
  * @param {object} props
+ * @param {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export class DataTable extends Component {
@@ -45,6 +46,12 @@ export class DataTable extends Component {
      * @param {object} row
      */
     selectRow(row: object): void;
+    /**
+     * Gets the number of header columns.
+     *
+     * @returns {number}
+     */
+    getHeaderColCount(): number;
     /**
      * Renders the DataTable component.
      *

package/dist/types/components/organisms/lists/dynamic-data-table.d.ts

@@ -17,6 +17,8 @@
  * @property {string} [props.border] - The border to add to the table.
  * @property {object} [props.data] - The table data.
  * @property {string} [props.cache] - The table cache identifier.
+ * @property {object|null} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export const DynamicDataTable: Function;

package/dist/types/components/organisms/lists/dynamic-table.d.ts

@@ -14,6 +14,8 @@ export function DynamicTableBody(props: object): object;
  * @property {array} [props.rows] - The initial rows.
  * @property {function} [props.rowItem] - The row item.
  * @property {string} [props.containerClass] - The class to add to the scroll container.
+ * @property {object|null} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export class DynamicTable extends DataTable {

package/dist/types/components/organisms/lists/scrollable-data-table.d.ts

@@ -18,6 +18,8 @@
  * @property {string} [props.border] - The border to add to the table.
  * @property {object} [props.data] - The table data.
  * @property {string} [props.cache] - The table cache identifier.
+ * @property {object|null} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export const ScrollableDataTable: Function;

package/dist/types/components/organisms/lists/scrollable-table.d.ts

@@ -15,6 +15,8 @@ export function ScrollableDataTableBody(props: object): object;
  * @property {array} [props.rows] - The initial rows.
  * @property {function} [props.rowItem] - The row item.
  * @property {string} [props.containerClass] - The class to add to the scroll container.
+ * @property {array} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export class ScrollableTable extends DataTable {

package/dist/types/components/organisms/lists/skeleton-examples.d.ts

@@ -0,0 +1,12 @@
+export function BasicSkeletonExample(): DataTable;
+export function CustomCountExample(): DataTable;
+export function CustomSkeletonRowExample(): DataTable;
+export function demonstrateSkeletonUsage(): DataTable;
+declare namespace _default {
+    export { BasicSkeletonExample };
+    export { CustomCountExample };
+    export { CustomSkeletonRowExample };
+    export { demonstrateSkeletonUsage };
+}
+export default _default;
+import { DataTable } from './data-table.js';

package/dist/types/components/organisms/lists/skeleton-table-row.d.ts

@@ -0,0 +1,6 @@
+export function SkeletonTableRow({ columnCount, customCell, key }: {
+    columnCount?: number;
+    customCell?: Function;
+    key?: string;
+}): object;
+export default SkeletonTableRow;

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

@@ -9,6 +9,7 @@ export * from "./calendar/week/week-calendar.js";
 export * from "./calendar/week/week-cell.js";
 export * from "./calendar/week/week-cells.js";
 export * from "./calendar/week/week-header.js";
+export * from "./calendar/range/range-calendar.js";
 export * from "./calendar/calendar.js";
 export * from "./calendar/utils.js";
 export * from "./lists/checkbox-col.js";
@@ -34,8 +35,13 @@ export * from "./overlays/dockable-overlay.js";
 export * from "./overlays/inline-overlay.js";
 export * from "./overlays/overlay.js";
 export * from "./search/search-dropdown.js";
+export * from "./search/search-input.js";
 export * from "./tabs/button-tab.js";
 export * from "./tabs/tab-group.js";
 export * from "./tabs/tab-navigation.js";
 export * from "./tabs/tab.js";
+export * from "./tabs/underlined-button-tab.js";
+export * from "./tabs/underlined-tab-group.js";
+export * from "./tabs/underlined-tab-navigation.js";
+export * from "./tabs/underlined-tab.js";
 export * from "./signature/signature-panel.js";