@dimaan/ui 0.0.30 → 0.0.32

package/dist/index.d.cts

@@ -386,8 +386,9 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
     /**
-     * Visual tone. `'solid'` (default) is a full-color fill; `'soft'` is a calmer
-     * tinted fill — preferred for status columns in dense data tables.
+     * Visual tone. `'soft'` (default) is a calmer, modern tinted fill — great for
+     * status columns and category labels; `'solid'` is a full-color fill for
+     * stronger emphasis.
      */
     tone?: BadgeTone;
     /** Render a small dot before the label (useful for online/status indicators). */
@@ -534,7 +535,7 @@ declare const datePickerTriggerVariantClass: Record<DatePickerVariant, string>;
  * Logical properties keep RTL working free.
  */
 declare const datePickerTriggerSizeClass: Record<DatePickerSize, string>;
-declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
 /** Empty-state trigger text (placeholder color). */
 declare const datePickerPlaceholderClass = "truncate text-muted-foreground";
 /** Filled-state trigger text. */
@@ -1373,7 +1374,7 @@ type InputVariant = 'default' | 'filled' | 'ghost';
 type InputSize = 'sm' | 'md' | 'lg';
 declare const inputVariantClass: Record<InputVariant, string>;
 declare const inputSizeClass: Record<InputSize, string>;
-declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     variant?: InputVariant;
@@ -1568,6 +1569,15 @@ interface TableProps<T> {
     striped?: boolean;
     /** Optional row click handler. */
     onRowClick?: (row: T, rowIndex: number) => void;
+    /**
+     * Optional per-row accent colour. When it returns a colour string, Table draws a
+     * thin rounded bar at the row's leading (inline-start) edge — e.g. to colour-code
+     * rows by category/department. Return `undefined` for no accent. Off by default,
+     * so existing consumers are unaffected.
+     *
+     * @example getRowAccent={(row) => DEPARTMENT_COLOR[row.department]}
+     */
+    getRowAccent?: (row: T, index: number) => string | undefined;
     /** Optional ref to the underlying <table> element. */
     tableRef?: Ref<HTMLTableElement>;
     'aria-label'?: string;
@@ -1592,7 +1602,7 @@ declare const selectVariantClass: Record<SelectVariant, string>;
  * properties keep RTL working free.
  */
 declare const selectSizeClass: Record<SelectSize, string>;
-declare const selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
+declare const selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:border-primary focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
 
 interface SelectOption {
     value: string;
@@ -2421,7 +2431,7 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare const textareaVariantClass: Record<TextareaVariant, string>;
 declare const textareaSizeClass: Record<TextareaSize, string>;
 declare const textareaResizeClass: Record<TextareaResize, string>;
-declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     variant?: TextareaVariant;

package/dist/index.d.ts

@@ -386,8 +386,9 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
     /**
-     * Visual tone. `'solid'` (default) is a full-color fill; `'soft'` is a calmer
-     * tinted fill — preferred for status columns in dense data tables.
+     * Visual tone. `'soft'` (default) is a calmer, modern tinted fill — great for
+     * status columns and category labels; `'solid'` is a full-color fill for
+     * stronger emphasis.
      */
     tone?: BadgeTone;
     /** Render a small dot before the label (useful for online/status indicators). */
@@ -534,7 +535,7 @@ declare const datePickerTriggerVariantClass: Record<DatePickerVariant, string>;
  * Logical properties keep RTL working free.
  */
 declare const datePickerTriggerSizeClass: Record<DatePickerSize, string>;
-declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
 /** Empty-state trigger text (placeholder color). */
 declare const datePickerPlaceholderClass = "truncate text-muted-foreground";
 /** Filled-state trigger text. */
@@ -1373,7 +1374,7 @@ type InputVariant = 'default' | 'filled' | 'ghost';
 type InputSize = 'sm' | 'md' | 'lg';
 declare const inputVariantClass: Record<InputVariant, string>;
 declare const inputSizeClass: Record<InputSize, string>;
-declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     variant?: InputVariant;
@@ -1568,6 +1569,15 @@ interface TableProps<T> {
     striped?: boolean;
     /** Optional row click handler. */
     onRowClick?: (row: T, rowIndex: number) => void;
+    /**
+     * Optional per-row accent colour. When it returns a colour string, Table draws a
+     * thin rounded bar at the row's leading (inline-start) edge — e.g. to colour-code
+     * rows by category/department. Return `undefined` for no accent. Off by default,
+     * so existing consumers are unaffected.
+     *
+     * @example getRowAccent={(row) => DEPARTMENT_COLOR[row.department]}
+     */
+    getRowAccent?: (row: T, index: number) => string | undefined;
     /** Optional ref to the underlying <table> element. */
     tableRef?: Ref<HTMLTableElement>;
     'aria-label'?: string;
@@ -1592,7 +1602,7 @@ declare const selectVariantClass: Record<SelectVariant, string>;
  * properties keep RTL working free.
  */
 declare const selectSizeClass: Record<SelectSize, string>;
-declare const selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
+declare const selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:border-primary focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
 
 interface SelectOption {
     value: string;
@@ -2421,7 +2431,7 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare const textareaVariantClass: Record<TextareaVariant, string>;
 declare const textareaSizeClass: Record<TextareaSize, string>;
 declare const textareaResizeClass: Record<TextareaResize, string>;
-declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     variant?: TextareaVariant;