@bspk/ui 1.1.34 → 1.3.0

package/dist/components/TabGroup/TabGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMvD,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,UAAU,KAAG;wBACpB,UAAU,EAAE,KAAC,cAAc,KAAG;wBAC9B,KAAK,EAAE,SAAS;qBACnB;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,KAAK,EAAE,SAAS;qBACnB;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,UAAU,EAAE,KAAC,aAAa,KAAG;wBAC7B,KAAK,EAAE,SAAS;qBACnB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,SAAS;wBACf,UAAU,EAAE,SAAS;wBACrB,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,SAAS;wBACf,UAAU,EAAE,SAAS;wBACrB,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,SAAS;wBACf,UAAU,EAAE,SAAS;wBACrB,KAAK,EAAE,CAAC;qBACX;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,qBAAqB;YAC5B,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,UAAU,KAAG;wBACpB,UAAU,EAAE,KAAC,cAAc,KAAG;wBAC9B,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,UAAU,EAAE,KAAC,aAAa,KAAG;wBAC7B,KAAK,EAAE,CAAC;qBACX;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/TabGroup/tab-group.css

@@ -1,67 +1,27 @@
-[data-bspk=tab-group] {
-  display: flex;
-  flex-direction: row;
-  --btn-flex-grow: 0;
-  border-bottom: 1px solid var(--stroke-neutral-low);
-  width: 100%;
-  --font: var(--labels-base);
-  --height: var(--spacing-sizing-10);
-}
-[data-bspk=tab-group][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
-}
-[data-bspk=tab-group][data-size=small] {
-  --font: var(--labels-small);
-  --height: var(--spacing-sizing-08);
-}
-[data-bspk=tab-group][data-size=large] {
-  --font: var(--labels-large);
-  --height: var(--spacing-sizing-12);
+ul[data-bspk=tab-group] {
+  border-bottom: none;
 }
-[data-bspk=tab-group] button {
+ul[data-bspk=tab-group] li {
   border: 0;
-  cursor: pointer;
   color: var(--foreground-neutral-on-surface-variant-02);
   background: none;
-  flex-grow: var(--btn-flex-grow);
-  font: var(--font);
-  white-space: nowrap;
-}
-[data-bspk=tab-group] button:hover {
-  background: var(--interactions-neutral-hover-opacity);
+  border-bottom: 1px solid var(--stroke-neutral-low);
+  position: relative;
+  padding: 0 var(--spacing-sizing-04);
 }
-[data-bspk=tab-group] button:active {
+ul[data-bspk=tab-group] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=tab-group] button:disabled {
-  pointer-events: none;
+ul[data-bspk=tab-group] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=tab-group] button:focus-visible {
-  outline: solid 2px var(--stroke-neutral-focus);
-}
-[data-bspk=tab-group] button span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 0 var(--spacing-sizing-04);
-  height: var(--height);
-  justify-content: center;
-  position: relative;
-  gap: var(--spacing-sizing-02);
-}
-[data-bspk=tab-group] button span svg {
-  width: var(--spacing-sizing-05);
-}
-[data-bspk=tab-group] button[data-active] {
+ul[data-bspk=tab-group] li[aria-selected=true] {
   color: var(--foreground-brand-primary);
 }
-[data-bspk=tab-group] button[data-active] span::after {
+ul[data-bspk=tab-group] li[aria-selected=true]::after {
   content: "";
   display: block;
-  width: 100%;
+  width: calc(100% - var(--spacing-sizing-04) * 2);
   height: 2px;
   background-color: var(--stroke-brand-primary);
   bottom: -1px;
@@ -69,14 +29,18 @@
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
-[data-bspk=tab-group] button[data-active] span svg {
+ul[data-bspk=tab-group] li[aria-selected=true] svg {
   color: var(--surface-brand-primary);
 }
-[data-bspk=tab-group][data-hide-trail] {
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
+  width: 100%;
+  border-bottom: 1px solid var(--stroke-neutral-low);
+}
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] li {
   border-bottom: none;
 }
-[data-bspk=tab-group][data-hide-trail] button {
-  border-bottom: 1px solid var(--stroke-neutral-low);
+ul[data-bspk=tab-group]:focus-within li:not([aria-disabled])[data-active] {
+  background: var(--interactions-neutral-hover-opacity);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabGroup/tab-group.css.js

@@ -1,70 +1,30 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=tab-group] {
-  display: flex;
-  flex-direction: row;
-  --btn-flex-grow: 0;
-  border-bottom: 1px solid var(--stroke-neutral-low);
-  width: 100%;
-  --font: var(--labels-base);
-  --height: var(--spacing-sizing-10);
-}
-[data-bspk=tab-group][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
-}
-[data-bspk=tab-group][data-size=small] {
-  --font: var(--labels-small);
-  --height: var(--spacing-sizing-08);
-}
-[data-bspk=tab-group][data-size=large] {
-  --font: var(--labels-large);
-  --height: var(--spacing-sizing-12);
+style.appendChild(document.createTextNode(`ul[data-bspk=tab-group] {
+  border-bottom: none;
 }
-[data-bspk=tab-group] button {
+ul[data-bspk=tab-group] li {
   border: 0;
-  cursor: pointer;
   color: var(--foreground-neutral-on-surface-variant-02);
   background: none;
-  flex-grow: var(--btn-flex-grow);
-  font: var(--font);
-  white-space: nowrap;
-}
-[data-bspk=tab-group] button:hover {
-  background: var(--interactions-neutral-hover-opacity);
+  border-bottom: 1px solid var(--stroke-neutral-low);
+  position: relative;
+  padding: 0 var(--spacing-sizing-04);
 }
-[data-bspk=tab-group] button:active {
+ul[data-bspk=tab-group] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=tab-group] button:disabled {
-  pointer-events: none;
+ul[data-bspk=tab-group] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=tab-group] button:focus-visible {
-  outline: solid 2px var(--stroke-neutral-focus);
-}
-[data-bspk=tab-group] button span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 0 var(--spacing-sizing-04);
-  height: var(--height);
-  justify-content: center;
-  position: relative;
-  gap: var(--spacing-sizing-02);
-}
-[data-bspk=tab-group] button span svg {
-  width: var(--spacing-sizing-05);
-}
-[data-bspk=tab-group] button[data-active] {
+ul[data-bspk=tab-group] li[aria-selected=true] {
   color: var(--foreground-brand-primary);
 }
-[data-bspk=tab-group] button[data-active] span::after {
+ul[data-bspk=tab-group] li[aria-selected=true]::after {
   content: "";
   display: block;
-  width: 100%;
+  width: calc(100% - var(--spacing-sizing-04) * 2);
   height: 2px;
   background-color: var(--stroke-brand-primary);
   bottom: -1px;
@@ -72,17 +32,20 @@ style.appendChild(document.createTextNode(`[data-bspk=tab-group] {
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
-[data-bspk=tab-group] button[data-active] span svg {
+ul[data-bspk=tab-group] li[aria-selected=true] svg {
   color: var(--surface-brand-primary);
 }
-[data-bspk=tab-group][data-hide-trail] {
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
+  width: 100%;
+  border-bottom: 1px solid var(--stroke-neutral-low);
+}
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] li {
   border-bottom: none;
 }
-[data-bspk=tab-group][data-hide-trail] button {
-  border-bottom: 1px solid var(--stroke-neutral-low);
+ul[data-bspk=tab-group]:focus-within li:not([aria-disabled])[data-active] {
+  background: var(--interactions-neutral-hover-opacity);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/TabList/TabList.d.ts

@@ -0,0 +1,129 @@
+import './tab-list.scss';
+import { ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
+export type TabSize = 'large' | 'medium' | 'small';
+export type TabOption = {
+    /**
+     * The label of the tab. This is the text that will be displayed on the tab.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value of the tab sent to onChange when selected.
+     *
+     * If not provided, the label will be used as the value.
+     */
+    value: string;
+    /**
+     * The icon to display on the left side of the tab.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * The icon to display on the left side of the tab when the tab is currently selected.
+     *
+     * @type BspkIcon
+     */
+    iconSelected?: ReactNode;
+    /** The badge count to display on the tab */
+    badge?: number;
+};
+export type TabListProps<O extends TabOption = TabOption> = {
+    /**
+     * The tabs to display.
+     *
+     * If **less than 2** items are provided, the component will not render.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Disabled 2 ', disabled: true },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<TabOption>
+     * @required
+     */
+    options: O[];
+    /**
+     * The value of the selected tab.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: TabOption['value'];
+    /**
+     * The function to call when the tab is clicked.
+     *
+     * @required
+     */
+    onChange: (tabValue: string) => void;
+    /**
+     * The size of the tabs.
+     *
+     * @default medium
+     */
+    size?: TabSize;
+    /**
+     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
+     * content.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * The label for the tab utility, used for accessibility.
+     *
+     * @required
+     */
+    label: string;
+    /** The id of the tab utility, used for accessibility. */
+    id?: string;
+    /**
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
+     *
+     * @default false
+     */
+    iconsOnly?: boolean;
+};
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * See TabGroup or SegmentedControl for examples.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabList } from '@bspk/ui/TabList';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabList
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
+ * @name TabList
+ * @phase Utility
+ */
+export declare function TabList({ onChange, value: valueProp, size, options: optionsProp, width, label, id: idProp, iconsOnly: iconsOnlyProp, ...containerProps }: ElementProps<TabListProps, 'ul'>): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabList/TabList.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './tab-list.css.js';
+import { Fragment, useMemo } from 'react';
+import { Badge } from '../Badge';
+import { Tooltip } from '../Tooltip';
+import { Truncated } from '../Truncated';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { useId } from '../../hooks/useId';
+import { getElementById } from '../../utils/dom';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+import { useIds } from '../../utils/useIds';
+const TAB_BADGE_SIZES = {
+    large: 'small',
+    medium: 'x-small',
+    small: 'x-small',
+};
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * See TabGroup or SegmentedControl for examples.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabList } from '@bspk/ui/TabList';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabList
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
+ * @name TabList
+ * @phase Utility
+ */
+export function TabList({ 
+//
+onChange, value: valueProp, size = 'medium', options: optionsProp, width = 'hug', label, id: idProp, iconsOnly: iconsOnlyProp = false, ...containerProps }) {
+    const id = useId(idProp);
+    const options = useIds(`tab-list-${id}`, optionsProp);
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: options.map((opt) => opt.id),
+        defaultActiveId: options.find((opt) => opt.value === valueProp)?.id,
+    });
+    const value = useMemo(() => {
+        const option = options.find((opt) => opt.value === valueProp);
+        return option ? option.value : options[0]?.value;
+    }, [options, valueProp]);
+    // If all options have icons, we can hide the labels
+    const iconsOnly = iconsOnlyProp === true && options.every((item) => item.icon && item.label);
+    const handleClick = (item) => () => {
+        setActiveElementId(item.id);
+        if (!item.disabled)
+            onChange(item.value);
+    };
+    return (_jsx("ul", { ...containerProps, "aria-label": label, "data-bspk-utility": "tab-list", "data-hug": width === 'hug' || undefined, "data-size": size, "data-width": width, id: id, onFocusCapture: () => {
+            getElementById(activeElementId)?.focus();
+        }, onKeyDownCapture: handleKeyDown({
+            ...arrowKeyCallbacks,
+            Enter: (event) => {
+                event.preventDefault();
+                const activeOption = options.find((opt) => opt.id === activeElementId);
+                if (activeOption && !activeOption.disabled)
+                    onChange(activeOption.value);
+            },
+            Space: (event) => {
+                event.preventDefault();
+                const activeOption = options.find((opt) => opt.id === activeElementId);
+                if (activeOption && !activeOption.disabled)
+                    onChange(activeOption.value);
+            },
+        }), role: "tablist", children: options.map((item) => {
+            const isSelected = item.value === value;
+            const icon = isSelected ? item.iconSelected : item.icon;
+            const isActive = (activeElementId && activeElementId === item.id) || undefined;
+            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !iconsOnly, label: item.label, placement: "top", children: (triggerProps) => (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                    _jsxs("li", { ...triggerProps, "aria-controls": id, "aria-disabled": item.disabled || undefined, "aria-selected": isSelected, "data-active": isActive, "data-value": item.value, id: item.id, onClick: item.disabled ? undefined : handleClick(item), role: "tab", tabIndex: isActive ? 0 : -1, children: [icon && _jsx("span", { "aria-hidden": "true", children: icon }), !iconsOnly && _jsx(Truncated, { "data-label": true, children: item.label }), item.badge && !item.disabled && (_jsx(Badge, { count: item.badge, size: TAB_BADGE_SIZES[size] }))] })) }) }, item.id));
+        }) }));
+}
+//# sourceMappingURL=TabList.js.map

package/dist/components/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../src/components/TabList/TabList.tsx"],"names":[],"mappings":"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"}

package/dist/components/TabList/TabListExample.d.ts

@@ -0,0 +1,3 @@
+import { TabListProps } from './TabList';
+import { ComponentExample } from '-/utils/demo';
+export declare const TabListExample: ComponentExample<TabListProps>;

package/dist/components/TabList/TabListExample.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TabListExample = {
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+};
+//# sourceMappingURL=TabListExample.js.map

package/dist/components/TabList/TabListExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListExample.js","sourceRoot":"","sources":["../../../src/components/TabList/TabListExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}

package/dist/components/TabList/index.d.ts

@@ -0,0 +1 @@
+export * from './TabList';

package/dist/components/TabList/index.js

@@ -0,0 +1,2 @@
+export * from './TabList';
+//# sourceMappingURL=index.js.map

package/dist/components/TabList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TabList/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/TabList/tab-list.css

@@ -0,0 +1,61 @@
+ul[data-bspk-utility=tab-list] {
+  --item-flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  width: 100%;
+  height: var(--height);
+  font: var(--font);
+  --icon-size: var(--spacing-sizing-05);
+  --font: var(--labels-base);
+  --height: var(--spacing-sizing-10);
+}
+ul[data-bspk-utility=tab-list][data-width=fill] {
+  align-items: stretch;
+  width: 100%;
+  --item-flex-grow: 1;
+}
+ul[data-bspk-utility=tab-list][data-size=small] {
+  --font: var(--labels-small);
+  --height: var(--spacing-sizing-08);
+  --icon-size: var(--spacing-sizing-04);
+}
+ul[data-bspk-utility=tab-list][data-size=large] {
+  --font: var(--labels-large);
+  --height: var(--spacing-sizing-12);
+  --icon-size: var(--spacing-sizing-06);
+}
+ul[data-bspk-utility=tab-list]:has(:focus-visible) {
+  outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: -1px;
+  position: relative;
+  z-index: var(--z-index-focus);
+}
+ul[data-bspk-utility=tab-list] li {
+  list-style: none;
+  cursor: pointer;
+  font: var(--font);
+  white-space: nowrap;
+  outline: none;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+  min-width: 0;
+}
+ul[data-bspk-utility=tab-list] li[aria-disabled] {
+  cursor: not-allowed;
+}
+ul[data-bspk-utility=tab-list] li span {
+  pointer-events: none;
+}
+ul[data-bspk-utility=tab-list] li [data-label][style] {
+  justify-content: left;
+  max-width: 200px;
+}
+ul[data-bspk-utility=tab-list] li svg {
+  width: var(--icon-size);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabList/tab-list.css.js

@@ -0,0 +1,66 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`ul[data-bspk-utility=tab-list] {
+  --item-flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  width: 100%;
+  height: var(--height);
+  font: var(--font);
+  --icon-size: var(--spacing-sizing-05);
+  --font: var(--labels-base);
+  --height: var(--spacing-sizing-10);
+}
+ul[data-bspk-utility=tab-list][data-width=fill] {
+  align-items: stretch;
+  width: 100%;
+  --item-flex-grow: 1;
+}
+ul[data-bspk-utility=tab-list][data-size=small] {
+  --font: var(--labels-small);
+  --height: var(--spacing-sizing-08);
+  --icon-size: var(--spacing-sizing-04);
+}
+ul[data-bspk-utility=tab-list][data-size=large] {
+  --font: var(--labels-large);
+  --height: var(--spacing-sizing-12);
+  --icon-size: var(--spacing-sizing-06);
+}
+ul[data-bspk-utility=tab-list]:has(:focus-visible) {
+  outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: -1px;
+  position: relative;
+  z-index: var(--z-index-focus);
+}
+ul[data-bspk-utility=tab-list] li {
+  list-style: none;
+  cursor: pointer;
+  font: var(--font);
+  white-space: nowrap;
+  outline: none;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+  min-width: 0;
+}
+ul[data-bspk-utility=tab-list] li[aria-disabled] {
+  cursor: not-allowed;
+}
+ul[data-bspk-utility=tab-list] li span {
+  pointer-events: none;
+}
+ul[data-bspk-utility=tab-list] li [data-label][style] {
+  justify-content: left;
+  max-width: 200px;
+}
+ul[data-bspk-utility=tab-list] li svg {
+  width: var(--icon-size);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Table/Footer.d.ts

@@ -0,0 +1,8 @@
+export declare function TableFooter({ pageIndex, pageSize, setPageIndex, totalRows, id, totalPages, }: {
+    pageIndex: number;
+    pageSize: number;
+    setPageIndex: (newVal: number) => void;
+    totalRows: number;
+    id: string;
+    totalPages: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Footer.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from '../Pagination';
+export function TableFooter({ pageIndex, pageSize, setPageIndex, totalRows, id, totalPages, }) {
+    const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+    const endRow = Math.min(startRow + pageSize - 1, totalRows);
+    return (_jsxs("div", { "data-pagination": true, role: "group", children: [_jsxs("div", { "data-pagination-label": true, children: ["Showing ", startRow, "-", endRow, " of ", totalRows, " results"] }), _jsx("div", { "data-sr-only": true, id: `${id}-pagination-description`, children: _jsxs("p", { children: ["The buttons inside this control allow you to paginate through the data in the table above,", pageSize, "rows at a time."] }) }), _jsx(Pagination, { "aria-labelledby": `${id}-pagination-description`, numPages: totalPages, onChange: (newVal) => setPageIndex(newVal - 1), value: pageIndex + 1 })] }));
+}
+//# sourceMappingURL=Footer.js.map

package/dist/components/Table/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/Table/Footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,UAAU,WAAW,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,EAAE,EACF,UAAU,GAQb;IACG,MAAM,QAAQ,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC;IAC5D,OAAO,CACH,wCAAqB,IAAI,EAAC,OAAO,aAC7B,qEACa,QAAQ,OAAG,MAAM,UAAM,SAAS,gBACvC,EACN,oCAAkB,EAAE,EAAE,GAAG,EAAE,yBAAyB,YAChD,sHAEK,QAAQ,uBAET,GACF,EACN,KAAC,UAAU,uBACU,GAAG,EAAE,yBAAyB,EAC/C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,EAC9C,KAAK,EAAE,SAAS,GAAG,CAAC,GACtB,IACA,CACT,CAAC;AACN,CAAC"}