@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Table/table.css.js

@@ -2,48 +2,194 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=table] {
-  width: 100%;
+  /*! --template-columns: is set via inline style */
+  --white-background: var(--surface-neutral-t1-base);
+  --grey-background: var(--surface-neutral-t2-lowest);
+  --icon-size: var(--spacing-sizing-05);
+  min-width: 100%;
+  overflow: auto hidden;
   border-collapse: separate;
   text-align: left;
   border-spacing: 2rem 0.125rem;
-  display: grid;
   color: var(--foreground-neutral-on-surface);
   font: var(--labels-base);
   border-radius: var(--radius-md);
   border: 1px solid var(--stroke-neutral-low);
+  background: var(--white-background);
+  /* [data-size='medium'] */
+  --min-height: var(--spacing-sizing-10);
+  --padding-y: var(--spacing-sizing-02);
+}
+[data-bspk=table][data-size=x-large] {
+  --min-height: var(--spacing-sizing-14);
+  --padding-y: var(--spacing-sizing-04);
+}
+[data-bspk=table][data-size=large] {
+  --min-height: var(--spacing-sizing-12);
+  --padding-y: var(--spacing-sizing-03);
+}
+[data-bspk=table][data-size=small] {
+  --min-height: var(--spacing-sizing-08);
+  --padding-y: var(--spacing-sizing-01);
+}
+[data-bspk=table] [data-scroll-container] {
+  width: fit-content;
+  min-width: 100%;
+  border-radius: var(--radius-md);
+}
+[data-bspk=table] table {
+  display: grid;
+  grid-template-columns: var(--template-columns);
+  border-collapse: collapse;
+  min-width: 100%;
+  user-select: none;
+}
+[data-bspk=table] table tr,
+[data-bspk=table] table tbody,
+[data-bspk=table] table thead {
+  display: contents;
 }
-[data-bspk=table] [data-cell] {
+[data-bspk=table] table caption {
+  grid-column: 1/-1;
+  background: var(--grey-background);
+  border-bottom: 1px solid var(--stroke-neutral-low);
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sizing-02);
-  padding: var(--spacing-sizing-04);
-  background-color: var(--surface-neutral-t1-base);
-  border-bottom: var(--stroke-neutral-low) solid 1px;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
   font: var(--labels-small);
+  min-height: var(--min-height);
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  overflow: hidden;
+}
+[data-bspk=table] table th {
+  display: flex;
+  min-height: var(--min-height);
+  overflow: hidden;
+  flex-direction: row;
+  background: var(--grey-background);
+  font: var(--labels-small);
+  border-bottom: 1px solid var(--stroke-neutral-base);
+  white-space: nowrap;
+  z-index: 1;
+  position: relative;
+}
+[data-bspk=table] table th:not([data-sortable]) {
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  pointer-events: none;
+}
+[data-bspk=table] table th[data-sortable] button {
+  display: flex;
+  min-height: var(--min-height);
+  border: none;
+  overflow: hidden;
+  flex-direction: row;
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  background: var(--grey-background);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sizing-02);
+  width: 100%;
+  cursor: pointer;
+  font: inherit;
+  outline: none;
+  position: relative;
+}
+[data-bspk=table] table th[data-sortable] button:hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--grey-background), var(--grey-background));
+}
+[data-bspk=table] table th[data-sortable] button:active {
+  background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--grey-background), var(--grey-background));
+}
+[data-bspk=table] table th[data-sortable] button [data-sort-icon] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+[data-bspk=table] table th[data-sortable] button [data-sort-icon] svg {
+  width: var(--icon-size);
+}
+[data-bspk=table] table th[data-sortable] button:focus-visible {
+  position: absolute;
+  z-index: var(--z-index-focus);
+  inset: 0;
+  outline: solid 2px var(--stroke-neutral-focus);
+  outline-offset: -2px;
+}
+[data-bspk=table] table th[data-align=right] {
+  align-items: flex-end;
+}
+[data-bspk=table] table th[data-align=right] button {
+  justify-content: flex-end;
+}
+[data-bspk=table] table th[data-align=center] {
+  align-items: center;
+}
+[data-bspk=table] table th[data-align=center] button {
+  justify-content: center;
 }
-[data-bspk=table] [data-cell] p {
+[data-bspk=table] table th[data-align=left] {
+  align-items: flex-start;
+}
+[data-bspk=table] table th[data-align=left] button {
+  justify-content: space-between;
+}
+[data-bspk=table] table td {
+  display: flex;
+  min-height: var(--min-height);
+  overflow: hidden;
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  flex-direction: column;
+  font: var(--body-small);
+}
+[data-bspk=table] table td[data-align=right] {
+  align-items: flex-end;
+}
+[data-bspk=table] table td[data-align=center] {
+  align-items: center;
+}
+[data-bspk=table] table td[data-align=left] {
+  align-items: flex-start;
+}
+[data-bspk=table] table td[data-valign=top] {
+  justify-content: flex-start;
+}
+[data-bspk=table] table td[data-valign=bottom] {
+  justify-content: flex-end;
+}
+[data-bspk=table] table td[data-valign=center] {
+  justify-content: center;
+}
+[data-bspk=table] table td p {
   margin: 0;
   padding: 0;
   font: var(--body-small);
 }
-[data-bspk=table] [data-head] {
+[data-bspk=table] table td[data-action]:hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--white-background), var(--white-background));
+}
+[data-bspk=table] table tr:nth-child(even) td {
+  background: var(--grey-background);
+}
+[data-bspk=table] table tr:nth-child(even) td[data-action]:hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--grey-background), var(--grey-background));
+}
+[data-bspk=table] [data-pagination] {
   display: flex;
-  align-items: center;
   flex-direction: row;
-  border-bottom: 1px solid var(--stroke-neutral-base);
-  background: var(--surface-neutral-t2-lowest);
-  height: var(--spacing-sizing-10);
-  padding: 0 var(--spacing-sizing-03);
-  font: var(--labels-base);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
+  width: 100%;
 }
-[data-bspk=table] [data-head][data-head=first] {
-  border-top-left-radius: var(--radius-md);
+[data-bspk=table] [data-pagination] [data-pagination-label] {
+  font: var(--body-small);
+  min-width: fit-content;
 }
-[data-bspk=table] [data-head][data-head=last] {
-  border-top-right-radius: var(--radius-md);
+[data-bspk=table] [data-pagination] [data-bspk=pagination] {
+  flex-grow: 0;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+export type BuiltInColumnSorters = 'boolean' | 'date' | 'number' | 'string';
+export type TableSize = 'large' | 'medium' | 'small' | 'x-large';
+export type TableCellValue = ReactNode;
+export type TableRow = {
+    [key: string]: TableCellValue | TableCellValue[];
+    id: string;
+};
+export type TableColumnSortingFn = (a: TableCellValue, b: TableCellValue) => number;
+export type TableColumn<R extends TableRow> = {
+    /**
+     * The key of the column. This is used to access the data in the row.
+     *
+     * @type string
+     */
+    key: string;
+    /**
+     * The label of the column. This is used to display the column header.
+     *
+     * @type string
+     */
+    label: string;
+    /**
+     * The width of the column. This is used to set the width of the column.
+     *
+     * Used to set the value of
+     * [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+     *
+     * @default 1fr
+     * @type string
+     */
+    width?: string;
+    /**
+     * The horizontal alignment of the column. This is used to set the text alignment of the column.
+     *
+     * @default left
+     */
+    align?: 'center' | 'left' | 'right';
+    /**
+     * The vertical alignment of the column. This is used to set the text alignment of the column.
+     *
+     * @default center
+     */
+    valign?: 'bottom' | 'center' | 'top';
+    /**
+     * The sorting function for the column.
+     *
+     * This can be a custom sorting function or one of the built-in sorting functions:
+     *
+     * `string`, `boolean`, `date`, or `number`.
+     *
+     * If unspecified, the column will not be sortable.
+     */
+    sort?: BuiltInColumnSorters | TableColumnSortingFn;
+    /**
+     * A formatter function for the cell values in the column.
+     *
+     * This function is called for each cell in the column and can be used to customize the display of the cell value.
+     */
+    formatter?: TableCellValueFormatter<R>;
+};
+export type TableCellValueFormatter<R extends TableRow> = (row: R, size: TableSize) => ReactNode;
+export type SortOrder = 'asc' | 'desc';
+export type SortState = {
+    key: string;
+    order: SortOrder;
+}[];
+export declare const SORT_PREV_NEXT_STATE: Record<SortOrder | 'none', SortOrder | undefined>;
+export declare function formatCell(value: TableCellValue): ReactNode;
+export declare function useTable<R extends TableRow>({ data, pageIndex, pageSize, columns, }: {
+    data: R[];
+    pageIndex: number;
+    pageSize: number;
+    columns?: TableColumn<R>[];
+}): {
+    rows: R[];
+    sorting: SortState;
+    toggleSorting: (key: string) => void;
+    totalColumns: number;
+    totalPages: number;
+};

package/dist/components/Table/utils.js

@@ -0,0 +1,89 @@
+import { isValidElement, useMemo, useState } from 'react';
+const parseDateTime = (val) => {
+    if (val instanceof Date)
+        return val.getTime();
+    if (typeof val === 'string' || typeof val === 'number')
+        return new Date(val).getTime();
+    return 0;
+};
+const BUILT_IN_COLUMN_SORTERS = {
+    string: (a, b) => `${a}`.localeCompare(`${b}`),
+    number: (a, b) => {
+        const aNum = typeof a === 'number' ? a : Number(a) || 0;
+        const bNum = typeof b === 'number' ? b : Number(b) || 0;
+        return aNum - bNum;
+    },
+    boolean: (a, b) => (a === b ? 0 : a ? 1 : -1),
+    date: (a, b) => {
+        return parseDateTime(a) - parseDateTime(b);
+    },
+};
+export const SORT_PREV_NEXT_STATE = {
+    asc: 'desc',
+    desc: undefined,
+    none: 'asc',
+};
+export function formatCell(value) {
+    if (isValidElement(value))
+        return value;
+    if (Array.isArray(value))
+        return value.map(formatCell).join(', ');
+    if (typeof value === 'object') {
+        // eslint-disable-next-line no-console
+        console.warn('Unexpected object value:', value);
+        return null;
+    }
+    return `${value}`;
+}
+export function useTable({ data, pageIndex, pageSize, columns, }) {
+    const [sorting, setSorting] = useState([]);
+    const filteredData = useMemo(() => {
+        let result = data;
+        // Apply sorting
+        if (sorting.length) {
+            result = result.sort((a, b) => {
+                for (const { key, order } of sorting) {
+                    const aValue = a[key];
+                    const bValue = b[key];
+                    const colSort = columns?.find((col) => col.key === key)?.sort;
+                    if (!colSort)
+                        continue;
+                    const colSortFn = typeof colSort === 'function' ? colSort : BUILT_IN_COLUMN_SORTERS[colSort];
+                    const next = colSortFn(aValue, bValue);
+                    if (next !== 0)
+                        return next * (order === 'asc' ? 1 : -1);
+                }
+                return 0;
+            });
+        }
+        // Apply pagination
+        const start = pageIndex * pageSize;
+        const end = start + pageSize;
+        result = result.slice(start, end);
+        return result;
+    }, [data, sorting, pageIndex, pageSize, columns]);
+    return {
+        rows: filteredData,
+        sorting,
+        toggleSorting: (key) => {
+            setSorting((prev) => {
+                const nextArr = [...prev];
+                const prevIndex = nextArr.findIndex((sort) => sort.key === key);
+                if (prevIndex !== -1) {
+                    const order = SORT_PREV_NEXT_STATE[nextArr[prevIndex].order];
+                    if (order === undefined)
+                        nextArr.splice(prevIndex, 1);
+                    else
+                        nextArr[prevIndex] = { key, order: order };
+                }
+                else {
+                    nextArr.push({ key, order: 'asc' });
+                }
+                return nextArr;
+            });
+        },
+        totalColumns: columns?.length || 0,
+        totalPages: Math.ceil(data.length / pageSize),
+    };
+}
+//# sourceMappingURL=utils.js.map

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

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

package/dist/components/Tag/Tag.d.ts

@@ -1,24 +1,12 @@
-import { ElementType, ReactNode } from 'react';
-import { ElementProps } from '../../index.js';
-import { ColorVariant } from '../../utils/colorVariants';
 import './tag.scss';
-export type TagProps<As extends ElementType = 'span'> = {
+import { ColorVariant } from '-/utils/colorVariants';
+export type TagProps = {
     /**
-     * The element type to render as.
-     *
-     * @default span
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The content of the tag.
-     *
-     * @example
-     *     New;
+     * The label of the tag.
      *
      * @required
      */
-    children: ReactNode;
+    label: string;
     /**
      * The size of the tag.
      *
@@ -37,14 +25,6 @@ export type TagProps<As extends ElementType = 'span'> = {
      * @default flat
      */
     variant?: 'corner-wrap' | 'flat' | 'pill';
-    /**
-     * Whether the tag should wrap its content.
-     *
-     * (Not recommended)
-     *
-     * @default false
-     */
-    wrap?: boolean;
 };
 /**
  * A non-interactive visual indicators to draw attention or categorization of a component.
@@ -53,19 +33,11 @@ export type TagProps<As extends ElementType = 'span'> = {
  *     import { Tag } from '@bspk/ui/Tag';
  *
  *     export function Example() {
- *         return (
- *             <Tag variant="flat" color="primary">
- *                 Example Tag
- *             </Tag>
- *         );
+ *         return <Tag label="Example Tag" variant="flat" color="primary" />;
  *     }
  *
  * @name Tag
- * @phase AccessibilityReview
+ * @phase UXReview
  */
-declare function Tag<As extends ElementType = 'span'>({ children, as, color, size, variant, wrap, ...props }: ElementProps<TagProps<As>, As>): import("react/jsx-runtime").JSX.Element;
-declare namespace Tag {
-    var bspkName: string;
-}
-export { Tag };
+export declare function Tag({ label, color, size, variant }: TagProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Tag/Tag.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './tag.css.js';
+import { Truncated } from '../Truncated';
 /**
  * A non-interactive visual indicators to draw attention or categorization of a component.
  *
@@ -7,20 +8,13 @@ import './tag.css.js';
  *     import { Tag } from '@bspk/ui/Tag';
  *
  *     export function Example() {
- *         return (
- *             <Tag variant="flat" color="primary">
- *                 Example Tag
- *             </Tag>
- *         );
+ *         return <Tag label="Example Tag" variant="flat" color="primary" />;
  *     }
  *
  * @name Tag
- * @phase AccessibilityReview
+ * @phase UXReview
  */
-function Tag({ children, as, color = 'white', size = 'small', variant = 'flat', wrap, ...props }) {
-    const As = as || 'span';
-    return (_jsxs(As, { ...props, "data-bspk": "tag", "data-color": color, "data-size": size, "data-variant": variant, "data-wrap": wrap || undefined, children: [children, variant === 'corner-wrap' && _jsx("div", { "data-triangle": true })] }));
+export function Tag({ label, color = 'white', size = 'small', variant = 'flat' }) {
+    return (_jsxs("span", { "data-bspk": "tag", "data-color": color, "data-size": size, "data-variant": variant, children: [label && _jsx(Truncated, { children: label }), variant === 'corner-wrap' && _jsx("div", { "data-triangle": true })] }));
 }
-Tag.bspkName = 'Tag';
-export { Tag };
 //# sourceMappingURL=Tag.js.map

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AA+CpB;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,GAAG,KAAK,EACqB;IAC7B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,MAAC,EAAE,OACK,KAAK,eACC,KAAK,gBACH,KAAK,eACN,IAAI,kBACD,OAAO,eACV,IAAI,IAAI,SAAS,aAE3B,QAAQ,EACR,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAClD,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AA8BnD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAY;IACtF,OAAO,CACH,6BAAgB,KAAK,gBAAa,KAAK,eAAa,IAAI,kBAAgB,OAAO,aAC1E,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,GAAa,EACvC,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAChD,CACV,CAAC;AACN,CAAC"}

package/dist/components/Tag/TagExample.d.ts

@@ -0,0 +1,4 @@
+import { TagProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<TagProps>[];
+export declare const TagExample: ComponentExample<TagProps>;

package/dist/components/Tag/TagExample.js

@@ -0,0 +1,15 @@
+export const presets = [
+    {
+        label: 'Long Label',
+        propState: {
+            label: 'Hello, this is a very long tag label that should be truncated if it exceeds the container width.',
+            color: 'purple',
+            size: 'small',
+            variant: 'flat',
+        },
+    },
+];
+export const TagExample = {
+    presets,
+};
+//# sourceMappingURL=TagExample.js.map

package/dist/components/Tag/TagExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagExample.js","sourceRoot":"","sources":["../../../src/components/Tag/TagExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAuB;IACvC;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,kGAAkG;YACzG,KAAK,EAAE,QAA6B;YACpC,IAAI,EAAE,OAA2B;YACjC,OAAO,EAAE,MAA6B;SACzC;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAA+B;IAClD,OAAO;CACV,CAAC"}

package/dist/components/Tag/tag.css

@@ -1,23 +1,19 @@
 [data-bspk=tag] {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: fit-content;
+  display: inline-flex;
+  align-items: center;
   position: relative;
   padding: 0 var(--spacing-sizing-03);
   border-radius: var(--radius-sm);
   color: var(--foreground) !important;
   background: var(--background);
   font: unset;
-  text-decoration: unset;
-  white-space: nowrap;
-  pointer-events: none;
-}
-[data-bspk=tag][data-wrap] {
-  height: auto;
+  max-width: 200px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: fit-content;
 }
 [data-bspk=tag][data-variant=pill] {
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
 }
 [data-bspk=tag][data-variant=corner-wrap] {
   border-bottom-right-radius: 0;

package/dist/components/Tag/tag.css.js

@@ -2,25 +2,21 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=tag] {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: fit-content;
+  display: inline-flex;
+  align-items: center;
   position: relative;
   padding: 0 var(--spacing-sizing-03);
   border-radius: var(--radius-sm);
   color: var(--foreground) !important;
   background: var(--background);
   font: unset;
-  text-decoration: unset;
-  white-space: nowrap;
-  pointer-events: none;
-}
-[data-bspk=tag][data-wrap] {
-  height: auto;
+  max-width: 200px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: fit-content;
 }
 [data-bspk=tag][data-variant=pill] {
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
 }
 [data-bspk=tag][data-variant=corner-wrap] {
   border-bottom-right-radius: 0;
@@ -51,4 +47,3 @@ style.appendChild(document.createTextNode(`[data-bspk=tag] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/TextField/TextField.d.ts

@@ -1,6 +1,6 @@
-import { FormFieldProps } from '../FormField';
-import { TextInputProps } from '../TextInput';
-export type TextFieldProps = Pick<TextInputProps, 'autoComplete' | 'disabled' | 'errorMessage' | 'inputRef' | 'invalid' | 'leading' | 'name' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'trailing' | 'type' | 'value'> & Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing'>;
+import { FormFieldWrapProps } from '-/components/FormField';
+import { TextInputProps } from '-/components/TextInput';
+export type TextFieldProps = FormFieldWrapProps<TextInputProps>;
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line.
  *
@@ -25,11 +25,7 @@ export type TextFieldProps = Pick<TextInputProps, 'autoComplete' | 'disabled' |
  *     }
  *
  * @name TextField
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function TextField({ label, errorMessage, helperText, controlId, labelTrailing, required, invalid, ...inputProps }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TextField {
-    var bspkName: string;
-}
-export { TextField };
+export declare function TextField({ label, errorMessage, helperText, controlId, labelTrailing, required, invalid, ...inputProps }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TextField/TextField.js

@@ -25,11 +25,9 @@ import { TextInput } from '../TextInput';
  *     }
  *
  * @name TextField
- * @phase DesignReview
+ * @phase UXReview
  */
-function TextField({ label, errorMessage, helperText, controlId, labelTrailing, required, invalid, ...inputProps }) {
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "text-field", errorMessage: errorMessage, helperText: helperText, invalid: !inputProps.readOnly && !inputProps.disabled && invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(TextInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId, required: required, value: inputProps.value ?? '' })) }));
+export function TextField({ label, errorMessage, helperText, controlId, labelTrailing, required, invalid, ...inputProps }) {
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "text-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(TextInput, { ...inputProps, ...fieldProps, id: controlId, invalid: invalid, required: required, value: inputProps.value ?? '' })) }));
 }
-TextField.bspkName = 'TextField';
-export { TextField };
 //# sourceMappingURL=TextField.js.map

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAsBnE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACA;IACb,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,YAAY,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,OAAO,EAChE,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,SAAS,OACF,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,EAAE,EAAE,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,EAAE,GAC/B,CACL,GACO,CACf,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACA;IACb,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,YAAY,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,SAAS,OACF,UAAU,KACV,UAAU,EACd,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,EAAE,GAC/B,CACL,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/TextField/TextFieldExample.d.ts

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

package/dist/components/TextField/TextFieldExample.js

@@ -0,0 +1,6 @@
+export const TextFieldExample = {
+    variants: {
+        type: false,
+    },
+};
+//# sourceMappingURL=TextFieldExample.js.map

package/dist/components/TextField/TextFieldExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldExample.js","sourceRoot":"","sources":["../../../src/components/TextField/TextFieldExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,QAAQ,EAAE;QACN,IAAI,EAAE,KAAK;KACd;CACJ,CAAC"}