@bspk/ui 1.1.16 → 1.1.18

package/src/Tag.tsx

@@ -1,9 +1,9 @@
-import './tag.scss';
 import { ElementType, ReactNode } from 'react';
 
 import { ColorVariant } from './utils/colorVariants';
 
 import { ElementProps } from './';
+import './tag.scss';
 
 export type TagProps<As extends ElementType = 'span'> = {
     /**
@@ -16,6 +16,9 @@ export type TagProps<As extends ElementType = 'span'> = {
     /**
      * The content of the tag.
      *
+     * @example
+     *     New;
+     *
      * @required
      */
     children: ReactNode;
@@ -28,7 +31,7 @@ export type TagProps<As extends ElementType = 'span'> = {
     /**
      * The color of the tag.
      *
-     * @default white
+     * @default grey
      */
     color?: ColorVariant;
     /**

package/src/TextInput.tsx

@@ -1,10 +1,18 @@
 import { SvgCancel } from '@bspk/icons/Cancel';
-import './text-input.scss';
 import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
 
 import { useId } from './hooks/useId';
 
-import { ElementProps, CommonProps, InvalidPropsLibrary } from '.';
+import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '.';
+
+import './text-input.scss';
+
+export const DEFAULT = {
+    size: 'medium',
+    value: '',
+    type: 'text' as Extract<HTMLInputTypeAttribute, 'number' | 'text'>,
+    autoComplete: 'off',
+} as const;
 
 export type TextInputProps = CommonProps<
     'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
@@ -13,21 +21,24 @@ export type TextInputProps = CommonProps<
         /**
          * Callback when the value of the field changes.
          *
-         * @type (next: String, Event) => void
          * @required
          */
         onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
         /** The ref of the container. */
-        containerRef?: (node: HTMLElement | null) => void;
+        containerRef?: SetRef<HTMLDivElement>;
         /** The ref of the input. */
-        inputRef?: (node: HTMLElement | null) => void;
+        inputRef?: SetRef<HTMLInputElement>;
         /** The trailing element to display in the field. */
         trailing?: ReactNode;
         /** The leading element to display in the field. */
         leading?: ReactNode;
         /** The placeholder of the field. */
         placeholder?: string;
-        /** The type of the input. */
+        /**
+         * The type of the input.
+         *
+         * @default text
+         */
         type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
         /**
          * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
@@ -49,8 +60,8 @@ export type TextInputProps = CommonProps<
 function TextInput({
     invalid: invalidProp,
     onChange,
-    size = 'medium',
-    value = '',
+    size = DEFAULT.size,
+    value = DEFAULT.value,
     name,
     'aria-label': ariaLabel,
     inputRef,
@@ -59,10 +70,10 @@ function TextInput({
     id: idProp,
     leading,
     trailing,
-    type,
+    type = DEFAULT.type,
     readOnly,
     disabled,
-    autoComplete = 'off',
+    autoComplete = DEFAULT.autoComplete,
     containerRef,
     errorMessage,
     ...otherProps
@@ -75,6 +86,7 @@ function TextInput({
         <div
             data-bspk="text-input"
             data-disabled={disabled || undefined}
+            data-empty={!value.toString().length || undefined}
             data-invalid={invalid || undefined}
             data-readonly={readOnly || undefined}
             data-required={required || undefined}
@@ -102,11 +114,9 @@ function TextInput({
                 value={value}
             />
             {trailing && <span data-trailing>{trailing}</span>}
-            {value?.toString().length > 0 && !readOnly && !disabled && (
-                <button aria-label="clear" data-clear onClick={() => onChange('')}>
-                    <SvgCancel />
-                </button>
-            )}
+            <button aria-label="clear" data-clear onClick={() => onChange('')}>
+                <SvgCancel />
+            </button>
         </div>
     );
 }

package/src/Textarea.tsx

@@ -1,9 +1,9 @@
 import './textarea.scss';
-import { ChangeEvent, CSSProperties, Ref } from 'react';
+import { ChangeEvent, CSSProperties } from 'react';
 
 import { useId } from './hooks/useId';
 
-import { CommonProps, InvalidPropsLibrary } from './';
+import { CommonProps, InvalidPropsLibrary, SetRef } from './';
 
 const DEFAULT = {
     minRows: 3,
@@ -39,7 +39,7 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
          */
         name: string;
         /** The ref of the field. */
-        innerRef?: Ref<HTMLTextAreaElement>;
+        innerRef?: SetRef<HTMLTextAreaElement>;
         /** The placeholder of the field. */
         placeholder?: string;
         /**

package/src/avatar-group.scss

@@ -0,0 +1,17 @@
+[data-bspk='avatar-group'] {
+    width: 100%;
+
+    [data-wrap] {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: end;
+        justify-content: end;
+        gap: var(--spacing-sizing-02);
+        overflow: hidden;
+
+        & > * + * {
+            // margin-left: calc(var(--spacing-sizing-01) * -1);
+        }
+    }
+}

package/src/avatar.scss

@@ -1,8 +1,11 @@
 [data-bspk='avatar'] {
     --height: var(--spacing-sizing-10);
     --font: var(--labels-base);
-    --foreground: var(--foreground-neutral-on-surface);
-    --background: var(--surface-neutral-t3-low);
+
+    &:not([data-color]) {
+        --foreground: var(--foreground-neutral-on-surface);
+        --background: var(--surface-neutral-t3-low);
+    }
 
     display: flex;
     flex-direction: column;

package/src/badge.scss

@@ -6,6 +6,7 @@
     justify-content: center;
     border-radius: var(--radius-circular);
     height: var(--size);
+    width: fit-content;
     min-width: var(--size);
     padding: 0 var(--spacing-sizing-02);
 

package/src/button.scss

@@ -10,6 +10,7 @@
     background: transparent;
     text-decoration: none;
     width: fit-content;
+    font-family: var(--typeface);
     position: relative;
 
     [data-touch-target] {

package/src/demo/ExampleModalRender.tsx

@@ -0,0 +1,37 @@
+import { useId } from 'react';
+
+import { Button } from '../Button';
+import { ModalProps, Modal } from '../Modal';
+import { useModalState } from '../hooks/useModalState';
+
+import { Preset, DemoSetState } from './examples';
+
+export function ExampleModalRender({
+    props,
+    preset,
+    setState,
+}: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: ModalProps & Record<string, any>;
+    preset?: Preset<ModalProps>;
+    setState: DemoSetState;
+}) {
+    let label = 'Open Modal';
+
+    const dialogId = useId();
+    const openKey = `${dialogId}-open`;
+
+    const { open, onClose, onOpen } = useModalState(!!props[openKey], (next) => setState({ [openKey]: next }));
+
+    const presetState: Partial<ModalProps> = preset?.state || {};
+    if (presetState?.placement) label += ` (${presetState?.placement})`;
+
+    return (
+        <>
+            <Button label={label} onClick={() => onOpen()} />
+            <Modal data-example-component id="exampleId" {...props} onClose={onClose} open={open}>
+                <pre>{JSON.stringify(props, null, '\t')}</pre>
+            </Modal>
+        </>
+    );
+}

package/src/demo/ExamplePlaceholder.tsx

@@ -0,0 +1,40 @@
+import { useRef } from 'react';
+
+import { ElementProps } from '..';
+import { Txt } from '../Txt';
+
+const dimension = (value: number | string) => (typeof value === 'number' ? `${value}px` : `${value}`);
+
+export function ExamplePlaceholder({
+    hideSize = false,
+    height = 100,
+    width = '100%',
+    direction = 'row',
+    ...props
+}: ElementProps<
+    { hideSize?: boolean; height?: number | string; width?: number | string; direction?: 'column' | 'row' },
+    'div'
+>) {
+    const ref = useRef<HTMLDivElement | null>(null);
+
+    return (
+        <div
+            {...props}
+            data-example-placeholder
+            ref={ref}
+            style={{
+                width: dimension(width),
+                height: dimension(height),
+                flexDirection: direction,
+            }}
+        >
+            {!hideSize && (
+                <>
+                    <Txt variant="labels-large">{dimension(width)}</Txt>
+                    <Txt>&times;</Txt>
+                    <Txt variant="labels-large">{dimension(height)}</Txt>
+                </>
+            )}
+        </div>
+    );
+}