@bspk/ui 1.1.16 → 1.1.18

package/src/hooks/useOptionIconsInvalid.ts

@@ -41,8 +41,17 @@ export type NavOption = {
     disabled?: boolean;
     /** The value of the option. If not provided, the label will be used as the value. */
     value?: string;
-    /** The the icon to display before the label. */
+    /**
+     * The the icon to display before the label.
+     *
+     * @type BspkIcon
+     */
     icon?: React.ReactNode;
+    /**
+     * The icon to display before the label when the option is active.
+     *
+     * @type BspkIcon
+     */
     iconActive?: React.ReactNode;
 };
 

package/src/index.ts

@@ -4,10 +4,12 @@
  * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
  */
 
-import { ChangeEvent, MouseEvent as ReactMouseEvent, ComponentProps, JSXElementConstructor, ReactNode } from 'react';
+import { ComponentProps, JSXElementConstructor, ReactNode } from 'react';
 
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
 
+export type SetRef<T> = (instance: T | null) => void;
+
 export type ElementProps<
     P extends Record<string, unknown>,
     E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements,
@@ -26,7 +28,6 @@ export type CallToActionButton = {
     /**
      * The callback function for the call to action button.
      *
-     * @type () => void
      * @required
      */
     onClick: () => void;
@@ -34,28 +35,7 @@ export type CallToActionButton = {
     size?: ButtonSize;
 };
 
-export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'name', T> &
-    InvalidPropsLibrary &
-    Required<CommonProps<'value'>> & {
-        /**
-         * Marks the control as checked.
-         *
-         * @default false
-         */
-        checked?: boolean;
-        /**
-         * The function to call when the control is checked or unchecked.
-         *
-         * @type (checked, Event) => void
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<T>) => void;
-    };
-
-export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElement = HTMLElement> = Pick<
-    CommonPropsLibrary<T>,
-    K
->;
+export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
 
 /**
  * The props that are common to input elements.
@@ -79,7 +59,7 @@ export type InvalidPropsLibrary = {
     errorMessage?: string;
 };
 
-export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
+export type CommonPropsLibrary = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
     /**
@@ -136,13 +116,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @required
      */
     'aria-label': string;
-    /**
-     * The function to call when the element is clicked.
-     *
-     * @param event - The mouse event.
-     * @returns Void
-     */
-    onClick?: (event: ReactMouseEvent<T, MouseEvent>) => void;
 };
 
 export type Brand =

package/src/list-item.scss

@@ -44,7 +44,7 @@
         }
     }
 
-    /* &:has(+ [data-list-item]) {
+    /* &:has(+ [data-bspk="list-item"]) {
     [data-inner] {
       border-bottom: 1px solid var(--stroke-neutral-low);
     }
@@ -74,6 +74,10 @@
         }
     }
 
+    [data-trailing]:has(input) {
+        pointer-events: none;
+    }
+
     [data-component='Img'] > img {
         height: 36px;
         width: 36px;

package/src/menu.scss

@@ -27,7 +27,7 @@
         gap: var(--spacing-sizing-03);
     }
 
-    [data-list-item] {
+    [data-bspk='list-item'] {
         min-height: var(--item-size);
         height: var(--item-size);
     }

package/src/segmented-control.scss

@@ -42,6 +42,7 @@
         height: var(--spacing-sizing-12);
         background: transparent;
         position: relative;
+        white-space: nowrap;
 
         [data-focus-ring] {
             display: none;

package/src/tab-group.scss

@@ -34,6 +34,7 @@
         background: none;
         flex-grow: var(--btn-flex-grow);
         font: var(--font);
+        white-space: nowrap;
 
         &:hover {
             background: var(--interactions-neutral-hover-opacity);

package/src/tag.scss

@@ -11,6 +11,7 @@
     font: unset;
     text-decoration: unset;
     white-space: nowrap;
+    pointer-events: none;
 
     &[data-wrap] {
         height: auto;

package/src/text-input.scss

@@ -7,7 +7,7 @@
     border: solid 1px var(--border-color);
     height: var(--field-height);
     border-radius: var(--radius-small);
-    padding: 0 var(--field-padding);
+    padding: 0 0 0 var(--field-padding);
     gap: var(--spacing-sizing-01);
     width: 100%;
 
@@ -22,17 +22,13 @@
     }
 
     &:hover:not(:focus-within) {
-        background: 
-    // multiple colors
-
+        background:
             linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),
             linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
     }
 
     &:active:not(:focus-within) {
-        background: 
-    // multiple colors
-
+        background:
             linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),
             linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
     }
@@ -40,9 +36,7 @@
     &[data-readonly] {
         --border-color: var(--stroke-neutral-disabled-light);
 
-        background: 
-    // multiple colors
-
+        background:
             linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
             linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
     }
@@ -51,8 +45,6 @@
         --border-color: var(--stroke-neutral-disabled-light);
 
         background:
-    // multiple colors
-
             linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
             linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 
@@ -117,7 +109,7 @@
     }
 
     button[data-clear] {
-        display: none;
+        display: flex;
         border: none;
         background: none;
         padding: 0;
@@ -132,16 +124,19 @@
         }
     }
 
-    &:focus-within {
-        --border-color: var(--stroke-brand-primary);
+    &:not(:focus-within),
+    &[data-empty],
+    &[data-readonly],
+    &[data-disabled] {
+        padding-right: var(--field-padding);
 
         button[data-clear] {
-            display: flex;
+            display: none;
         }
     }
 
-    &:has(button[data-clear]) {
-        padding-right: 0;
+    &:focus-within {
+        --border-color: var(--stroke-brand-primary);
     }
 }
 

package/src/utils/children.ts

@@ -1,4 +1,4 @@
-import { ReactNode , Children, Fragment, isValidElement } from 'react';
+import { ReactNode, Children, Fragment, isValidElement } from 'react';
 
 export function isValidIcon(child: unknown) {
     return isChildNamed(child, 'Icon');