@bspk/ui 1.3.10 → 1.3.16

package/src/components/Slider/Slider.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef } from 'react';
 import { SliderIntervalDots } from './SliderIntervalDots';
 import { useNormalizeSliderValue } from './useNormalizeSliderValue';
 import { Txt } from '-/components/Txt';
+import { useControlledState } from '-/hooks/useControlledState';
 import { CommonPropsLibrary } from '-/types/common';
 
 export type SliderValue = number | [number, number];
@@ -77,15 +78,30 @@ export type SliderProps<Value> = Pick<CommonPropsLibrary, 'disabled' | 'readOnly
  *     () => {
  *         const [value, setValue] = useState(50);
  *
- *         return <Slider value={value} min={0} max={100} label="Slider Example" onChange={setValue} />;
+ *         return (
+ *             <div style={{ width: '100%' }}>
+ *                 <Slider
+ *                     label="Slider Example"
+ *                     max={100}
+ *                     min={0}
+ *                     name="slider-example"
+ *                     onChange={setValue}
+ *                     value={value}
+ *                 />
+ *                 <p>
+ *                     <br />
+ *                     Current Value: {value}
+ *                 </p>
+ *             </div>
+ *         );
  *     };
  *
  * @name Slider
- * @phase UXReview
+ * @phase Stable
  */
 export function Slider<V = SliderValue>({
     value: valueProp,
-    onChange,
+    onChange: onChangeProp,
     min,
     max,
     label,
@@ -96,7 +112,8 @@ export function Slider<V = SliderValue>({
     name,
     formatNumber: formatNumberProp,
 }: SliderProps<V>) {
-    const value = (valueProp as V) || min;
+    const [value, onChange] = useControlledState<V>((valueProp || min) as V, onChangeProp);
+
     const formatNumber: SliderProps<V>['formatNumber'] = (rawValue, context) =>
         formatNumberProp?.(rawValue, context) || rawValue.toString();
     const sliderRef = useRef<HTMLDivElement>(null);

package/src/components/Slider/SliderExample.tsx

@@ -1,10 +1,10 @@
+/* eslint-disable react/no-multi-comp */
 import { useState } from 'react';
 
-import { SliderProps } from './Slider';
+import { Slider, SliderProps } from './Slider';
 import { ComponentExample } from '-/utils/demo';
 
 export const SliderExample: ComponentExample<SliderProps<number | [number, number]>> = {
-    // containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
         const SliderDemo = (sliderProps: SliderProps<number | [number, number]>) => {
             const initialValue = Array.isArray(sliderProps.value)
@@ -89,3 +89,17 @@ export const SliderExample: ComponentExample<SliderProps<number | [number, numbe
         name: 'basic-slider',
     },
 };
+
+export const Usage = () => {
+    const [value, setValue] = useState(50);
+
+    return (
+        <div style={{ width: '100%' }}>
+            <Slider label="Slider Example" max={100} min={0} name="slider-example" onChange={setValue} value={value} />
+            <p>
+                <br />
+                Current Value: {value}
+            </p>
+        </div>
+    );
+};

package/src/components/Snackbar/Manager.tsx

@@ -33,7 +33,7 @@ const SnackbarEvent = createCustomEvent<SendSnackbarProps | string | typeof CLEA
  * context. :)
  *
  * @name SnackbarManager
- * @phase UXReview
+ * @phase Stable
  */
 export function SnackbarManager({ defaultTimeout = 5000 }: SnackbarManagerProps) {
     const [snackbarProps, setSnackbarProps] = useState<SendSnackbarProps | undefined>();

package/src/components/Snackbar/Snackbar.tsx

@@ -104,7 +104,7 @@ export type SnackbarProps = CommonProps<'id'> & {
  *     };
  *
  * @name Snackbar
- * @phase UXReview
+ * @phase Stable
  */
 export function Snackbar({
     id: propId,

package/src/components/Snackbar/SnackbarExample.tsx

@@ -5,7 +5,6 @@ import { Button } from '-/components/Button';
 import { ComponentExample } from '-/utils/demo';
 
 export const SnackbarExample: ComponentExample<SnackbarProps> = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets: [],

package/src/components/Switch/Switch.tsx

@@ -45,7 +45,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  * @element
  *
  * @name Switch
- * @phase UXReview
+ * @phase Stable
  */
 export function Switch({ checked = false, disabled = false, ...props }: SwitchProps) {
     return (

package/src/components/SwitchOption/SwitchOption.tsx

@@ -9,7 +9,7 @@ export type SwitchOptionProps = ToggleOptionControlProps<SwitchProps>;
  * If only a switch is needed, consider using the Switch component directly.
  *
  * @name SwitchOption
- * @phase UXReview
+ * @phase Stable
  */
 export function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps) {
     const label = labelProp || description;

package/src/components/TabGroup/TabGroup.tsx

@@ -38,7 +38,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *     };
  *
  * @name TabGroup
- * @phase UXReview
+ * @phase Stable
  */
 export function TabGroup({
     onChange: onTabChange,

package/src/components/TabGroup/TabGroupExample.tsx

@@ -93,7 +93,6 @@ export const presets: Preset<TabGroupProps>[] = [
 ];
 
 export const TabGroupExample: ComponentExample<TabGroupProps> = {
-    containerStyle: { width: '100%' },
     defaultState: {
         options: PRESET_OPTIONS,
     },

package/src/components/TabList/TabListExample.tsx

@@ -2,6 +2,5 @@ import { TabListProps } from './TabList';
 import { ComponentExample } from '-/utils/demo';
 
 export const TabListExample: ComponentExample<TabListProps> = {
-    containerStyle: { width: '100%' },
     render: ({ props, Component }) => <Component {...props} />,
 };

package/src/components/Table/Table.tsx

@@ -1,7 +1,7 @@
 import './table.scss';
-import { SvgAZAscend } from '@bspk/icons/AZAscend';
-import { SvgAZDescend } from '@bspk/icons/AZDescend';
-import { AriaAttributes, useEffect, useState } from 'react';
+import { SvgArrowDownward } from '@bspk/icons/ArrowDownward';
+import { SvgArrowUpward } from '@bspk/icons/ArrowUpward';
+import { AriaAttributes, ReactNode, useEffect, useState } from 'react';
 import { TableFooter } from './Footer';
 import { formatCell, SortOrder, TableColumn, TableRow, TableSize, useTable } from './utils';
 import { useId } from '-/hooks/useId';
@@ -11,23 +11,23 @@ import { cssWithVars } from '-/utils/cwv';
 const SORT_META: Record<
     SortOrder | 'none',
     {
-        icon: JSX.Element | null;
+        icon: ReactNode;
         label: string;
         aria: AriaAttributes['aria-sort'];
     }
 > = {
     asc: {
-        icon: <SvgAZAscend />,
+        icon: <SvgArrowUpward />,
         label: 'sorted ascending',
         aria: 'ascending',
     },
     desc: {
-        icon: <SvgAZDescend />,
+        icon: <SvgArrowDownward />,
         label: 'sorted descending',
         aria: 'descending',
     },
     none: {
-        icon: null,
+        icon: false,
         label: 'not sorted',
         aria: 'none',
     },
@@ -74,7 +74,7 @@ export type TableProps<R extends TableRow> = {
  *
  *     <Table
  *         columns={[
- *             { key: 'state', label: 'State', width: '160px' },
+ *             { key: 'state', label: 'State', width: '160px', sort: 'string' },
  *             { key: 'capital', label: 'Capital', width: '140px' },
  *             { key: 'population', label: 'Population', width: '140px' },
  *             { key: 'nickname', label: 'Nickname', width: '1fr' },
@@ -127,7 +127,7 @@ export type TableProps<R extends TableRow> = {
  *     />;
  *
  * @name Table
- * @phase UXReview
+ * @phase Stable
  */
 export function Table<R extends TableRow>({
     data = [],
@@ -194,16 +194,11 @@ export function Table<R extends TableRow>({
                                         {sortMeta ? (
                                             <button onClick={() => toggleSorting(column.key)} type="button">
                                                 {column.label}
-                                                {sortMeta?.icon && (
+                                                {sortMeta.icon && (
                                                     <span aria-hidden data-sort-icon>
-                                                        {sortMeta?.icon}
+                                                        {sortMeta.icon}
                                                     </span>
                                                 )}
-                                                <span data-sr-only>
-                                                    <span aria-live="polite" role="status">
-                                                        {sortMeta.label}
-                                                    </span>
-                                                </span>
                                             </button>
                                         ) : (
                                             column.label

package/src/components/Table/TableExample.tsx

@@ -17,68 +17,70 @@ export const TableExample: ComponentExampleFn<TableProps<TableRow>> = ({
     componentsMeta,
 }): ComponentExample<TableProps<TableRow>> => {
     return {
-        containerStyle: { width: '100%' },
         defaultState: {
             data: [
-                {
-                    id: '1',
-                    firstName: 'James',
-                    lastName: 'Kirk',
-                    email: 'james.kirk@starfleet.gov',
-                    serviceYears: 5,
-                },
-                {
-                    id: '2',
-                    firstName: 'Jean-Luc',
-                    lastName: 'Picard',
-                    email: 'jean-luc.picard@starfleet.gov',
-                    serviceYears: 9,
-                },
-                {
-                    id: '3',
-                    firstName: 'Benjamin',
-                    lastName: 'Sisko',
-                    email: 'benjamin.sisko@starfleet.gov',
-                    serviceYears: 6,
-                },
-                {
-                    id: '4',
-                    firstName: 'Kathryn',
-                    lastName: 'Janeway',
-                    email: 'kathryn.janeway@starfleet.gov',
-                    serviceYears: 7,
-                },
+                { id: '1', state: 'Alabama', capital: 'Montgomery', abbreviation: 'AL', population: 198525 },
+                { id: '2', state: 'Alaska', capital: 'Juneau', abbreviation: 'AK', population: 32756 },
+                { id: '3', state: 'Arizona', capital: 'Phoenix', abbreviation: 'AZ', population: 1680992 },
+                { id: '4', state: 'Arkansas', capital: 'Little Rock', abbreviation: 'AR', population: 197312 },
+                { id: '5', state: 'California', capital: 'Sacramento', abbreviation: 'CA', population: 524943 },
+                { id: '6', state: 'Colorado', capital: 'Denver', abbreviation: 'CO', population: 715522 },
+                { id: '7', state: 'Connecticut', capital: 'Hartford', abbreviation: 'CT', population: 121054 },
+                { id: '8', state: 'Delaware', capital: 'Dover', abbreviation: 'DE', population: 38158 },
+                { id: '9', state: 'Florida', capital: 'Tallahassee', abbreviation: 'FL', population: 196169 },
+                { id: '10', state: 'Georgia', capital: 'Atlanta', abbreviation: 'GA', population: 506811 },
+                { id: '11', state: 'Hawaii', capital: 'Honolulu', abbreviation: 'HI', population: 345064 },
+                { id: '12', state: 'Idaho', capital: 'Boise', abbreviation: 'ID', population: 235829 },
+                { id: '13', state: 'Illinois', capital: 'Springfield', abbreviation: 'IL', population: 114694 },
+                { id: '14', state: 'Indiana', capital: 'Indianapolis', abbreviation: 'IN', population: 876384 },
+                { id: '15', state: 'Iowa', capital: 'Des Moines', abbreviation: 'IA', population: 214133 },
+                { id: '16', state: 'Kansas', capital: 'Topeka', abbreviation: 'KS', population: 125310 },
+                { id: '17', state: 'Kentucky', capital: 'Frankfort', abbreviation: 'KY', population: 27749 },
+                { id: '18', state: 'Louisiana', capital: 'Baton Rouge', abbreviation: 'LA', population: 221599 },
+                { id: '19', state: 'Maine', capital: 'Augusta', abbreviation: 'ME', population: 18807 },
+                { id: '20', state: 'Maryland', capital: 'Annapolis', abbreviation: 'MD', population: 39774 },
+                { id: '21', state: 'Massachusetts', capital: 'Boston', abbreviation: 'MA', population: 675647 },
+                { id: '22', state: 'Michigan', capital: 'Lansing', abbreviation: 'MI', population: 112644 },
+                { id: '23', state: 'Minnesota', capital: 'Saint Paul', abbreviation: 'MN', population: 311527 },
+                { id: '24', state: 'Mississippi', capital: 'Jackson', abbreviation: 'MS', population: 153701 },
+                { id: '25', state: 'Missouri', capital: 'Jefferson City', abbreviation: 'MO', population: 43079 },
+                { id: '26', state: 'Montana', capital: 'Helena', abbreviation: 'MT', population: 32815 },
+                { id: '27', state: 'Nebraska', capital: 'Lincoln', abbreviation: 'NE', population: 289102 },
+                { id: '28', state: 'Nevada', capital: 'Carson City', abbreviation: 'NV', population: 57826 },
+                { id: '29', state: 'New Hampshire', capital: 'Concord', abbreviation: 'NH', population: 43627 },
+                { id: '30', state: 'New Jersey', capital: 'Trenton', abbreviation: 'NJ', population: 87937 },
+                { id: '31', state: 'New Mexico', capital: 'Santa Fe', abbreviation: 'NM', population: 84683 },
+                { id: '32', state: 'New York', capital: 'Albany', abbreviation: 'NY', population: 96460 },
+                { id: '33', state: 'North Carolina', capital: 'Raleigh', abbreviation: 'NC', population: 474069 },
+                { id: '34', state: 'North Dakota', capital: 'Bismarck', abbreviation: 'ND', population: 73335 },
+                { id: '35', state: 'Ohio', capital: 'Columbus', abbreviation: 'OH', population: 903852 },
+                { id: '36', state: 'Oklahoma', capital: 'Oklahoma City', abbreviation: 'OK', population: 655057 },
+                { id: '37', state: 'Oregon', capital: 'Salem', abbreviation: 'OR', population: 175535 },
+                { id: '38', state: 'Pennsylvania', capital: 'Harrisburg', abbreviation: 'PA', population: 49528 },
+                { id: '39', state: 'Rhode Island', capital: 'Providence', abbreviation: 'RI', population: 190934 },
+                { id: '40', state: 'South Carolina', capital: 'Columbia', abbreviation: 'SC', population: 137541 },
+                { id: '41', state: 'South Dakota', capital: 'Pierre', abbreviation: 'SD', population: 13946 },
+                { id: '42', state: 'Tennessee', capital: 'Nashville', abbreviation: 'TN', population: 670820 },
+                { id: '43', state: 'Texas', capital: 'Austin', abbreviation: 'TX', population: 964254 },
+                { id: '44', state: 'Utah', capital: 'Salt Lake City', abbreviation: 'UT', population: 200567 },
+                { id: '45', state: 'Vermont', capital: 'Montpelier', abbreviation: 'VT', population: 7919 },
+                { id: '46', state: 'Virginia', capital: 'Richmond', abbreviation: 'VA', population: 226610 },
+                { id: '47', state: 'Washington', capital: 'Olympia', abbreviation: 'WA', population: 52434 },
+                { id: '48', state: 'West Virginia', capital: 'Charleston', abbreviation: 'WV', population: 45756 },
+                { id: '49', state: 'Wisconsin', capital: 'Madison', abbreviation: 'WI', population: 269840 },
+                { id: '50', state: 'Wyoming', capital: 'Cheyenne', abbreviation: 'WY', population: 64235 },
             ],
             columns: [
-                {
-                    key: 'firstName',
-                    label: 'First Name',
-                    width: '1fr',
-                    sort: 'string',
-                },
-                {
-                    key: 'lastName',
-                    label: 'Last Name',
-                    width: '1fr',
-                    sort: 'string',
-                },
-                {
-                    key: 'email',
-                    label: 'Email',
-                    width: '1fr',
-                },
-                {
-                    key: 'serviceYears',
-                    label: 'Service Years',
-                    align: 'right',
-                    width: '1fr',
-                    sort: 'number',
-                },
+                { key: 'state', label: 'State', width: '1fr', sort: 'string' },
+                { key: 'capital', label: 'Capital', width: '1fr', sort: 'string' },
+                { key: 'abbreviation', label: 'Abbrev', width: '1fr', align: 'center' },
+                { key: 'population', label: 'Population', align: 'right', width: '1fr', sort: 'number' },
             ],
+            pageSize: 5,
         },
         presets: [
             {
-                label: 'Large data set',
+                label: 'Large dataset',
                 propState: {
                     title: 'Components',
                     columns: [

package/src/components/Table/utils.ts

@@ -1,14 +1,17 @@
+import { isValid } from 'date-fns';
 import { isValidElement, ReactNode, useMemo, useState } from 'react';
+import { sendAriaLiveMessage } from '-/utils/sendAriaLiveMessage';
 
 const parseDateTime = (val: TableCellValue) => {
-    if (val instanceof Date) return val.getTime();
-    if (typeof val === 'string' || typeof val === 'number') return new Date(val).getTime();
-    return 0;
+    let dateValue = val;
+    if (typeof val === 'string' || typeof val === 'number') dateValue = new Date(val).getTime();
+
+    return dateValue instanceof Date && isValid(dateValue) ? dateValue.getTime() : 0;
 };
 
 export type BuiltInColumnSorters = 'boolean' | 'date' | 'number' | 'string';
 
-const BUILT_IN_COLUMN_SORTERS: Record<BuiltInColumnSorters, TableColumnSortingFn> = {
+export const BUILT_IN_COLUMN_SORTERS: Record<BuiltInColumnSorters, TableColumnSortingFn> = {
     string: (a: TableCellValue, b: TableCellValue) => `${a}`.localeCompare(`${b}`),
     number: (a: TableCellValue, b: TableCellValue) => {
         const aNum = typeof a === 'number' ? a : Number(a) || 0;
@@ -23,7 +26,7 @@ const BUILT_IN_COLUMN_SORTERS: Record<BuiltInColumnSorters, TableColumnSortingFn
 
 export type TableSize = 'large' | 'medium' | 'small' | 'x-large';
 
-export type TableCellValue = ReactNode;
+export type TableCellValue = unknown;
 
 export type TableRow = {
     [key: string]: TableCellValue | TableCellValue[];
@@ -91,12 +94,6 @@ export type SortOrder = 'asc' | 'desc';
 
 export type SortState = { key: string; order: SortOrder }[];
 
-export const SORT_PREV_NEXT_STATE: Record<SortOrder | 'none', SortOrder | undefined> = {
-    asc: 'desc',
-    desc: undefined,
-    none: 'asc',
-};
-
 export function formatCell(value: TableCellValue): ReactNode {
     if (isValidElement(value)) return value;
 
@@ -161,15 +158,23 @@ export function useTable<R extends TableRow>({
         sorting,
         toggleSorting: (key: string) => {
             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' });
-                }
+                let nextArr: SortState = [];
+
+                const exists = prev.find((sort) => sort.key === key);
+                const order: SortOrder | undefined = getNextOrder(exists?.order);
+
+                // update to nextOrder
+                if (order && exists) nextArr = prev.map((sort) => (sort.key === key ? { ...sort, order } : sort));
+
+                // add nextOrder
+                if (order && !exists) nextArr = [...prev, { key, order }];
+
+                // remove sorting
+                if (!order && exists) nextArr = prev.filter((sort) => sort.key !== key);
+
+                const columnLabel = columns?.find((col) => col.key === key)?.label || key;
+                sendAriaLiveMessage(`${order ? `Sorted ${order}ending` : 'Removed sorting'} by ${columnLabel}`);
+
                 return nextArr;
             });
         },
@@ -177,3 +182,9 @@ export function useTable<R extends TableRow>({
         totalPages: Math.ceil(data.length / pageSize),
     };
 }
+
+function getNextOrder(currentOrder: SortOrder | undefined): SortOrder | undefined {
+    if (!currentOrder) return 'asc';
+    if (currentOrder === 'asc') return 'desc';
+    return undefined;
+}

package/src/components/Tag/Tag.tsx

@@ -38,7 +38,7 @@ export type TagProps = {
  *     <Tag label="Example Tag" variant="flat" color="primary" />;
  *
  * @name Tag
- * @phase UXReview
+ * @phase Stable
  */
 export function Tag({ label, color = 'white', size = 'small', variant = 'flat' }: TagProps) {
     return (

package/src/components/Textarea/Textarea.tsx

@@ -50,26 +50,23 @@ export type TextareaProps = CommonProps<'size'> &
  *     import { Textarea } from '@bspk/ui/Textarea';
  *
  *     () => {
- *         const [value, setValue] = useState('');
+ *         const [value, setValue] = useState<string | undefined>('');
+ *
  *         return (
- *             <>
- *                 // standalone textarea example
- *                 <Textarea aria-label="Enter text" name="example-name" onChange={setValue} value={value} />
- *                 <br />
- *                 // textarea used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Example Textarea</FieldLabel>
  *                     <Textarea name="example-name" onChange={setValue} value={value} />
  *                     <FieldDescription>This is an example textarea field.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @element
  *
  * @name Textarea
- * @phase UXReview
+ * @phase Stable
  */
 export function Textarea({
     invalid: invalidProp,

package/src/components/Textarea/TextareaExample.tsx

@@ -1,4 +1,6 @@
-import { TextareaProps } from '.';
+import { useState } from 'react';
+import { Textarea, TextareaProps } from '.';
+import { Field, FieldDescription, FieldLabel } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const TextareaExample: ComponentExample<TextareaProps> = {
@@ -6,4 +8,22 @@ export const TextareaExample: ComponentExample<TextareaProps> = {
         'aria-label': 'textarea aria-label',
     },
     render: ({ props, Component }) => <Component {...props} />,
+    containerStyle: {
+        width: 320,
+        padding: 0,
+    },
+};
+
+export const Usage = () => {
+    const [value, setValue] = useState<string | undefined>('');
+
+    return (
+        <div style={{ width: 320 }}>
+            <Field>
+                <FieldLabel>Example Textarea</FieldLabel>
+                <Textarea name="example-name" onChange={setValue} value={value} />
+                <FieldDescription>This is an example textarea field.</FieldDescription>
+            </Field>
+        </div>
+    );
 };

package/src/components/TextareaField/TextareaField.tsx

@@ -9,7 +9,7 @@ export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
  * This component takes properties from the FormField and Textarea components.
  *
  * @name TextareaField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/src/components/TimePicker/TimePicker.tsx

@@ -34,25 +34,21 @@ export type TimePickerProps = FieldControlProps & Pick<InputProps, 'size'>;
  *     import { TimePicker } from '@bspk/ui/TimePicker';
  *
  *     () => {
- *         const [value, onChange] = useState('');
+ *         const [value, onChange] = useState<string | undefined>('');
  *
  *         return (
- *             <>
- *                 // standalone time picker example
- *                 <TimePicker aria-label="Time" name="time" value={value} onChange={onChange} />
- *                 <br />
- *                 // time picker used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Time</FieldLabel>
- *                     <TimePicker value={value} onChange={onChange} />
+ *                     <TimePicker name="time" onChange={onChange} value={value} />
  *                     <FieldDescription>The time picker allows you to select a time.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name TimePicker
- * @phase UXReview
+ * @phase Stable
  */
 export function TimePicker({
     value,

package/src/components/TimePicker/TimePickerExample.tsx

@@ -1,4 +1,6 @@
-import { TimePickerProps } from './TimePicker';
+import { useState } from 'react';
+import { TimePicker, TimePickerProps } from './TimePicker';
+import { Field, FieldLabel, FieldDescription } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const TimePickerExample: ComponentExample<TimePickerProps> = {
@@ -7,4 +9,19 @@ export const TimePickerExample: ComponentExample<TimePickerProps> = {
         'aria-label': 'time picker aria-label',
     },
     render: ({ props, Component }) => <Component {...props} />,
+    containerStyle: { width: 320, padding: 0 },
+};
+
+export const Usage = () => {
+    const [value, onChange] = useState<string | undefined>('');
+
+    return (
+        <div style={{ width: 320 }}>
+            <Field>
+                <FieldLabel>Time</FieldLabel>
+                <TimePicker name="time" onChange={onChange} value={value} />
+                <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+            </Field>
+        </div>
+    );
 };

package/src/components/TimePickerField/TimePickerField.tsx

@@ -9,7 +9,7 @@ export type TimePickerFieldProps = FormFieldControlProps<TimePickerProps>;
  * This component takes properties from the FormField and TimePicker components.
  *
  * @name TimePickerField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/src/components/Tooltip/Tooltip.tsx

@@ -49,7 +49,7 @@ export type TooltipProps = {
  *     </Tooltip>;
  *
  * @name Tooltip
- * @phase UXReview
+ * @phase Stable
  */
 export function Tooltip({ placement = 'top', label, children, disabled = false, showTail = true }: TooltipProps) {
     const id = useId();
@@ -66,7 +66,7 @@ export function Tooltip({ placement = 'top', label, children, disabled = false,
         refWidth: false,
     });
 
-    if (disabled) return children({});
+    if (!label || disabled) return children({});
 
     return (
         <>

package/src/components/Tooltip/tooltip.scss

@@ -15,6 +15,8 @@
         padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
         border: none;
         transition: opacity 0.2s ease-in-out;
+        max-width: 300px;
+        word-wrap: break-word;
     }
 
     --arrow-size: var(--spacing-sizing-01);

package/src/components/Txt/Txt.tsx

@@ -52,7 +52,7 @@ export type TxtProps<As extends ElementType = ElementType> = {
  *     <Txt>Example Txt</Txt>;
  *
  * @name Txt
- * @phase UXReview
+ * @phase Stable
  */
 export function Txt<As extends ElementType = ElementType>({
     children,