@bspk/ui 1.3.22 → 1.3.24

package/src/components/PasswordField/PasswordField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Password, PasswordProps } from '-/components/Password';
 import { useId } from '-/hooks/useId';
 
-export type PasswordFieldProps = FieldControlProps<PasswordProps>;
+export type PasswordFieldProps = ComposedFieldProps<PasswordProps>;
 
 /**
  * A field wrapper for the Password component.
@@ -31,6 +31,7 @@ export function PasswordField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <Password {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/RadioGroup/radio-group.scss

@@ -5,4 +5,8 @@
     max-width: 100%;
 
     --list-item-height: 'auto';
+
+    [data-bspk='list-item'] {
+        background: transparent;
+    }
 }

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -1,8 +1,8 @@
-import { FieldControlProps, Fieldset, propsWithAria } from '-/components/Field';
+import { ComposedFieldProps, Fieldset, propsWithAria } from '-/components/Field';
 import { RadioGroup, RadioGroupProps } from '-/components/RadioGroup';
 import { useId } from '-/hooks/useId';
 
-export type RadioGroupFieldProps = FieldControlProps<RadioGroupProps>;
+export type RadioGroupFieldProps = ComposedFieldProps<RadioGroupProps>;
 
 /**
  * A field wrapper for the RadioGroup component.

package/src/components/Select/select.scss

@@ -46,18 +46,6 @@
         color: var(--select-text-color);
     }
 
-    [data-icon] {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        pointer-events: none;
-
-        svg {
-            transform: rotate(90deg);
-            width: var(--select-icon-width);
-        }
-    }
-
     &[data-size='small'] {
         --select-height: var(--spacing-sizing-08);
         --select-font: var(--body-small);

package/src/components/SelectField/SelectField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Select, SelectProps } from '-/components/Select';
 import { useId } from '-/hooks/useId';
 
-export type SelectFieldProps = FieldControlProps<SelectProps>;
+export type SelectFieldProps = ComposedFieldProps<SelectProps>;
 
 /**
  * A field wrapper for the Select component.
@@ -31,6 +31,7 @@ export function SelectField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <Select {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/TextareaField/TextareaField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Textarea, TextareaProps } from '-/components/Textarea';
 import { useId } from '-/hooks/useId';
 
-export type TextareaFieldProps = FieldControlProps<TextareaProps>;
+export type TextareaFieldProps = ComposedFieldProps<TextareaProps>;
 
 /**
  * A field wrapper for the Textarea component.
@@ -31,6 +31,7 @@ export function TextareaField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <Textarea {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/TimePickerField/TimePickerField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { TimePicker, TimePickerProps } from '-/components/TimePicker';
 import { useId } from '-/hooks/useId';
 
-export type TimePickerFieldProps = FieldControlProps<TimePickerProps>;
+export type TimePickerFieldProps = ComposedFieldProps<TimePickerProps>;
 
 /**
  * A field wrapper for the TimePicker component.
@@ -31,6 +31,7 @@ export function TimePickerField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <TimePicker {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/hooks/useFloating.ts

@@ -79,12 +79,6 @@ export type UseFloatingElements = {
     setFloating: (element: HTMLElement | null) => void;
 };
 
-/**
- *
- *
- * @param param0
- * @returns
- */
 export function useFloating({
     placement = 'bottom-start',
     arrowRef,

package/src/styles/base.scss

@@ -68,93 +68,8 @@ body[data-bspk] {
     color: var(--foreground-neutral-on-surface);
     min-width: 343px;
 
-    a,
-    [data-bspk='link'] {
-        &:not([data-bspk='button'], [data-bspk='list-item']) {
-            color: var(--foreground-link-text-default);
-
-            &:not([disabled]) {
-                &:hover,
-                &[data-pseudo='hover'] {
-                    color: var(--foreground-link-text-default-hovered);
-                }
-
-                &:active,
-                &[data-pseudo='active'] {
-                    color: var(--foreground-link-text-default);
-                    filter: brightness(80%);
-                }
-
-                &:visited,
-                &[data-pseudo='visited'] {
-                    color: var(--foreground-link-text-default-visited);
-                }
-            }
-
-            &[disabled] {
-                pointer-events: none;
-                cursor: text;
-                color: var(--foreground-link-text-default-disabled);
-            }
-        }
-
-        &[data-subtle] {
-            text-decoration: none;
-            color: var(--foreground-neutral-on-surface);
-
-            &:not([disabled]) {
-                &:hover,
-                &[data-pseudo='hover'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-hovered);
-                }
-
-                &:active,
-                &[data-pseudo='active'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-pressed);
-                }
-
-                &:visited,
-                &[data-pseudo='visited'] {
-                    color: var(--foreground-neutral-on-surface);
-                }
-            }
-
-            &[disabled] {
-                pointer-events: none;
-                color: var(--foreground-link-text-subtle-disabled);
-            }
-        }
-
-        &[data-subtle-inverse] {
-            text-decoration: none;
-            color: var(--foreground-neutral-inverse-on-surface);
-
-            &:not([disabled]) {
-                &:hover,
-                &[data-pseudo='hover'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-inverse-hovered);
-                }
-
-                &:active,
-                &[data-pseudo='active'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-inverse-pressed);
-                }
-
-                &:visited,
-                &[data-pseudo='visited'] {
-                    color: var(--foreground-neutral-on-inverse-surface);
-                }
-            }
-
-            &[disabled] {
-                pointer-events: none;
-                color: var(--foreground-link-text-subtle-inversed-disabled);
-            }
-        }
+    a:not([data-bspk]) {
+        @extend %link;
     }
 }
 
@@ -314,4 +229,111 @@ body[data-bspk] {
     display: none !important;
 }
 
+[data-bspk='link'] {
+    @extend %link;
+}
+
+%link {
+    color: var(--foreground-link-text-default);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-sizing-01);
+    font: var(--labels-base);
+
+    &:not([disabled]) {
+        &:hover,
+        &[data-pseudo='hover'] {
+            color: var(--foreground-link-text-default-hovered);
+        }
+
+        &:active,
+        &[data-pseudo='active'] {
+            color: var(--foreground-link-text-default);
+            filter: brightness(80%);
+        }
+
+        &:visited,
+        &[data-pseudo='visited'] {
+            color: var(--foreground-link-text-default-visited);
+        }
+    }
+
+    &[disabled] {
+        pointer-events: none;
+        cursor: text;
+        color: var(--foreground-link-text-default-disabled);
+    }
+
+    &[data-subtle] {
+        text-decoration: none;
+        color: var(--foreground-neutral-on-surface);
+
+        &:not([disabled]) {
+            &:hover,
+            &[data-pseudo='hover'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-hovered);
+            }
+
+            &:active,
+            &[data-pseudo='active'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-pressed);
+            }
+
+            &:visited,
+            &[data-pseudo='visited'] {
+                color: var(--foreground-neutral-on-surface);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            color: var(--foreground-link-text-subtle-disabled);
+        }
+    }
+
+    &[data-subtle-inverse] {
+        text-decoration: none;
+        color: var(--foreground-neutral-inverse-on-surface);
+
+        &:not([disabled]) {
+            &:hover,
+            &[data-pseudo='hover'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-inverse-hovered);
+            }
+
+            &:active,
+            &[data-pseudo='active'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-inverse-pressed);
+            }
+
+            &:visited,
+            &[data-pseudo='visited'] {
+                color: var(--foreground-neutral-on-inverse-surface);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            color: var(--foreground-link-text-subtle-inversed-disabled);
+        }
+    }
+
+    &[data-size='large'] {
+        font: var(--labels-large);
+    }
+
+    &[data-size='small'] {
+        font: var(--labels-small);
+    }
+
+    svg {
+        width: var(--spacing-sizing-05);
+    }
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/types/common.ts

@@ -148,6 +148,7 @@ export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLi
 
 export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;
 
+/** The common properties for all input control components such as Input, TextArea, Select, etc. */
 export type FieldControlProps<
     ValueType = string,
     ChangeContext = ChangeEvent<HTMLElement> | KeyboardEvent | undefined,

package/dist/components/Link/link.css

@@ -1,18 +0,0 @@
-[data-bspk=link] {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--spacing-sizing-01);
-  font: var(--labels-base);
-}
-[data-bspk=link][data-size=large] {
-  font: var(--labels-large);
-}
-[data-bspk=link][data-size=small] {
-  font: var(--labels-small);
-}
-[data-bspk=link] svg {
-  width: var(--spacing-sizing-05);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Link/link.css.js

@@ -1,23 +0,0 @@
-/** * 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=link] {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--spacing-sizing-01);
-  font: var(--labels-base);
-}
-[data-bspk=link][data-size=large] {
-  font: var(--labels-large);
-}
-[data-bspk=link][data-size=small] {
-  font: var(--labels-small);
-}
-[data-bspk=link] svg {
-  width: var(--spacing-sizing-05);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-`));
-document.head.appendChild(style);

package/src/components/Link/link.scss

@@ -1,21 +0,0 @@
-[data-bspk='link'] {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-sizing-01);
-    font: var(--labels-base);
-
-    &[data-size='large'] {
-        font: var(--labels-large);
-    }
-
-    &[data-size='small'] {
-        font: var(--labels-small);
-    }
-
-    svg {
-        width: var(--spacing-sizing-05);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */