@brickclay-org/ui 0.0.14 → 0.0.17

package/index.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnInit, OnDestroy, OnChanges, EventEmitter, SimpleChanges, AfterViewInit, QueryList, ElementRef } from '@angular/core';
 import * as rxjs from 'rxjs';
 import * as i1 from '@angular/common';
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 
 declare const BrickclayIcons: {
     readonly arrowleft: "assets/icons/chevron-left.svg";
@@ -416,5 +416,141 @@ declare class RadioComponent implements ControlValueAccessor {
     static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "brickclay-radio-button", never, { "radioClass": { "alias": "radioClass"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelClass": { "alias": "labelClass"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }
 
-export { BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, RadioComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
-export type { CalendarRange, CalendarSelection, ScheduledDateSelection, TimeConfiguration };
+type PillVariant = 'Light' | 'Solid' | 'Outline' | 'Transparent';
+type PillColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Success' | 'Purple' | 'Cyan';
+type PillSize = 'xsm' | 'sm' | 'md' | 'lg';
+declare class PillComponent {
+    label: string;
+    variant: PillVariant;
+    color: PillColor;
+    size: PillSize;
+    dot: 'left' | 'right' | 'none';
+    removable: boolean;
+    customClass: string;
+    clicked: EventEmitter<string>;
+    get containerClasses(): string;
+    onRemove(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PillComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PillComponent, "brickclay-pill", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+type BadgeVariant = 'Light' | 'Solid' | 'Outline' | 'Transparent';
+type BadgeColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Success' | 'Purple' | 'Cyan';
+type BadgeSize = 'xsm' | 'sm' | 'md' | 'lg';
+declare class BadgeComponent {
+    label: string;
+    variant: BadgeVariant;
+    color: BadgeColor;
+    size: BadgeSize;
+    dot: 'left' | 'right' | 'none';
+    removable: boolean;
+    customClass: string;
+    clicked: EventEmitter<string>;
+    get containerClasses(): string;
+    onRemove(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "brickclay-badge", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+type SpinnerSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
+declare class Spinner {
+    size: SpinnerSize;
+    show: boolean;
+    color: string;
+    get classes(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Spinner, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Spinner, "brickclay-spinner", never, { "size": { "alias": "size"; "required": false; }; "show": { "alias": "show"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type ButtonSize = 'xxsm' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type ButtonVariant = 'primary' | 'secondary';
+declare class UiButton {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    label: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    iconAlt: string;
+    type: 'button' | 'submit' | 'reset';
+    loading: boolean;
+    disabled: boolean;
+    buttonClass: string;
+    textClass: string;
+    spinnerClass: string;
+    clicked: EventEmitter<boolean>;
+    onClick(event: Event): void;
+    get buttonClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiButton, "brickclay-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "type": { "alias": "type"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; "textClass": { "alias": "textClass"; "required": false; }; "spinnerClass": { "alias": "spinnerClass"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+type IconButtonSize = 'xxsm' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type IconButtonVariant = 'primary' | 'secondary';
+declare class UiIconButton {
+    icon: string;
+    alt: string;
+    variant: IconButtonVariant;
+    size: IconButtonSize;
+    disabled: boolean;
+    buttonClass: string;
+    clicked: EventEmitter<boolean>;
+    onClick(event: Event): void;
+    get buttonClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiIconButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiIconButton, "brickclay-icon-button", never, { "icon": { "alias": "icon"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+interface GroupItem {
+    label: string;
+    value: any;
+}
+type GroupMode = 'single' | 'multiple';
+declare class ButtonGroup {
+    items: GroupItem[];
+    mode: GroupMode;
+    disabled: boolean;
+    value: any | any[];
+    valueChange: EventEmitter<any>;
+    onItemClick(itemValue: any): void;
+    isActive(itemValue: any): boolean;
+    get containerClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroup, "brickclay-button-group", never, { "items": { "alias": "items"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+declare class Textarea implements ControlValueAccessor {
+    private ngControl;
+    name: string;
+    id?: string;
+    label: string;
+    placeholder: string;
+    rows: number;
+    hint: string;
+    required: boolean;
+    maxLength: number | null;
+    hasError: boolean | null;
+    errorMessage: string;
+    trimWhiteSpaces: boolean;
+    eventType: 'input' | 'change' | 'blur';
+    value: string;
+    isDisabled: boolean;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    constructor(ngControl: NgControl);
+    get effectiveId(): string;
+    get control(): any;
+    get touched(): boolean;
+    get dirty(): boolean;
+    get errors(): any;
+    get showError(): boolean;
+    handleEvent(event: Event): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Textarea, [{ optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Textarea, "brickclay-textarea", never, { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "required": { "alias": "required"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "trimWhiteSpaces": { "alias": "trimWhiteSpaces"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { BadgeComponent, BrickclayIcons, BrickclayLib, ButtonGroup, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, PillComponent, RadioComponent, ScheduledDatePickerComponent, Spinner, Textarea, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
+export type { BadgeColor, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, PillColor, PillSize, PillVariant, ScheduledDateSelection, SpinnerSize, TimeConfiguration };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "peerDependencies": {
     "@angular/common": ">=17.0.0 <=21.0.0",
     "@angular/core": ">=17.0.0 <=21.0.0",

package/src/lib/badge/badge.css

@@ -0,0 +1,85 @@
+/* --- BASE --- */
+.badge {
+  @apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];
+}
+
+/* --- SHAPES --- */
+.isBadge {
+  @apply rounded-[4px]; /* ≈ 4px */
+}
+
+.isPill {
+  @apply rounded-full;
+}
+
+
+/* --- SIZES --- */
+.badge-xsm { @apply px-2 py-0.5 text-[10px] leading-[14px]; }
+.badge-sm  { @apply px-2 py-0.5 text-xs leading-[18px]; }
+.badge-md  { @apply px-2 py-0.5 text-sm; }
+.badge-lg  { @apply px-3 py-1 text-sm; }
+
+
+/* --- DYNAMIC ELEMENTS (Dots & Close) --- */
+
+/* OPTIMIZATION: 'bg-current' makes the dot the same color as the text.
+   This works for Solids (Text is white -> Dot is white)
+   and Outlines (Text is Blue -> Dot is Blue).
+*/
+.dot {
+  @apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;
+}
+
+/* Inherit text color for the SVG stroke */
+.badge-close {
+  @apply flex items-center justify-center rounded-full text-inherit transition-colors;
+}
+
+/* Sizes for close button based on parent size */
+.badge-xsm .badge-close { @apply w-3 h-3; }
+.badge-sm .badge-close  { @apply w-3 h-3; }
+.badge-md .badge-close,
+.badge-lg .badge-close  { @apply w-3.5 h-3.5; }
+
+
+/* --- VARIANTS: SOLID --- */
+.Gray-Solid    { @apply bg-[#6B7080] border-[#6B7080] text-white; }
+.Primary-Solid { @apply bg-[#294FFF] border-[#294FFF] text-white; }
+.Error-Solid   { @apply bg-[#FA727A] border-[#FA727A] text-[#4C0513]; }
+.Warning-Solid { @apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04]; }
+/* Fixed Custom Dot color for Success Solid if you want it darker than text, otherwise remove next line */
+.Success-Solid { @apply bg-[#57D175] border-[#57D175] text-[#461C04]; }
+.Success-Solid .dot { @apply bg-[#082B13]; } /* Override bg-current only here */
+
+.Purple-Solid  { @apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04]; }
+.Cyan-Solid    { @apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04]; }
+
+
+/* --- VARIANTS: LIGHT --- */
+.Gray-Light    { @apply bg-[#F4F4F6] border-transparent text-[#363C51]; }
+.Primary-Light { @apply bg-[#E5F3FF] border-transparent text-[#1434CB]; }
+.Error-Light   { @apply bg-[#FFF1F1] border-transparent text-[#CB1432]; }
+.Warning-Light { @apply bg-[#FFEED7] border-transparent text-[#A04C02]; }
+.Success-Light { @apply bg-[#F1FCF3] border-transparent text-[#1E7735]; }
+.Purple-Light  { @apply bg-[#F6EAFD] border-transparent text-[#9130C0]; }
+.Cyan-Light    { @apply bg-[#F1FAFE] border-transparent text-[#096E9B]; }
+
+
+/* --- VARIANTS: OUTLINE --- */
+.Gray-Outline    { @apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51]; }
+.Primary-Outline { @apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB]; }
+.Error-Outline   { @apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432]; }
+.Warning-Outline { @apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02]; }
+.Success-Outline { @apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735]; }
+.Purple-Outline  { @apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0]; }
+.Cyan-Outline    { @apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B]; }
+
+
+/* --- VARIANTS: TRANSPARENT --- */
+.Gray-Transparent    { @apply bg-transparent border-[#BBBDC5] text-[#363C51]; }
+.Primary-Transparent { @apply bg-transparent border-[#3F71FF] text-[#1434CB]; }
+.Error-Transparent   { @apply bg-transparent border-[#FA727A] text-[#CB1432]; }
+.Warning-Transparent { @apply bg-transparent border-[#FBAE58] text-[#A04C02]; }
+.Success-Transparent { @apply bg-transparent border-[#57D175] text-[#1E7735]; }
+.Purple-Transparent  { @apply bg-transparent border-[#CE8EF2] text-[#9130C0]; }
+.Cyan-Transparent    { @apply bg-transparent border-[#3FC2F1] text-[#096E9B]; }

package/src/lib/button-group/button-group.css

@@ -0,0 +1,34 @@
+/* Main Container */
+/* Simulates the border box surrounding the buttons */
+.group-container {
+  @apply inline-flex items-center border border-[#E1E3EA] bg-white rounded-md p-1 gap-2.5 select-none transition-all;
+}
+
+/* Individual Button Item */
+.group-item {
+  @apply flex items-center justify-center font-medium rounded-md transition-all duration-200 cursor-pointer text-center relative;
+}
+
+/* --- STATES --- */
+
+/* Active State (Black Background) */
+.group-item.active {
+  @apply bg-black text-white shadow-sm;
+}
+
+/* Inactive State (Transparent/Gray) */
+.group-item.inactive {
+  @apply text-[#6B7080] hover:bg-gray-50;
+}
+
+/* --- SIZES --- */
+
+/* Small */
+.group-container .group-item {
+  @apply px-4 py-[3px] text-[13px] leading-5;
+}
+.group-container.disabled .group-item {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+

package/src/lib/pill/pill.css

@@ -0,0 +1,77 @@
+/* --- BASE --- */
+.pill {
+  @apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;
+}
+
+
+
+/* --- SIZES --- */
+.pill-xsm { @apply px-2 py-0.5 text-[10px] leading-[14px]; }
+.pill-sm  { @apply px-2 py-0.5 text-xs leading-[18px]; }
+.pill-md  { @apply px-2 py-0.5 text-sm; }
+.pill-lg  { @apply px-3 py-1 text-sm; }
+
+
+/* --- DYNAMIC ELEMENTS (Dots & Close) --- */
+
+/* OPTIMIZATION: 'bg-current' makes the dot the same color as the text.
+   This works for Solids (Text is white -> Dot is white)
+   and Outlines (Text is Blue -> Dot is Blue).
+*/
+.dot {
+  @apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;
+}
+
+/* Inherit text color for the SVG stroke */
+.pill-close {
+  @apply flex items-center justify-center rounded-full text-inherit transition-colors;
+}
+
+/* Sizes for close button based on parent size */
+.pill-xsm .pill-close { @apply w-3 h-3; }
+.pill-sm .pill-close  { @apply w-3 h-3; }
+.pill-md .pill-close,
+.pill-lg .pill-close  { @apply w-3.5 h-3.5; }
+
+
+/* --- VARIANTS: SOLID --- */
+.Gray-Solid    { @apply bg-[#6B7080] border-[#6B7080] text-white; }
+.Primary-Solid { @apply bg-[#294FFF] border-[#294FFF] text-white; }
+.Error-Solid   { @apply bg-[#FA727A] border-[#FA727A] text-[#4C0513]; }
+.Warning-Solid { @apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04]; }
+/* Fixed Custom Dot color for Success Solid if you want it darker than text, otherwise remove next line */
+.Success-Solid { @apply bg-[#57D175] border-[#57D175] text-[#461C04]; }
+.Success-Solid .dot { @apply bg-[#082B13]; } /* Override bg-current only here */
+
+.Purple-Solid  { @apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04]; }
+.Cyan-Solid    { @apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04]; }
+
+
+/* --- VARIANTS: LIGHT --- */
+.Gray-Light    { @apply bg-[#F4F4F6] border-transparent text-[#363C51]; }
+.Primary-Light { @apply bg-[#E5F3FF] border-transparent text-[#1434CB]; }
+.Error-Light   { @apply bg-[#FFF1F1] border-transparent text-[#CB1432]; }
+.Warning-Light { @apply bg-[#FFEED7] border-transparent text-[#A04C02]; }
+.Success-Light { @apply bg-[#F1FCF3] border-transparent text-[#1E7735]; }
+.Purple-Light  { @apply bg-[#F6EAFD] border-transparent text-[#9130C0]; }
+.Cyan-Light    { @apply bg-[#F1FAFE] border-transparent text-[#096E9B]; }
+
+
+/* --- VARIANTS: OUTLINE --- */
+.Gray-Outline    { @apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51]; }
+.Primary-Outline { @apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB]; }
+.Error-Outline   { @apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432]; }
+.Warning-Outline { @apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02]; }
+.Success-Outline { @apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735]; }
+.Purple-Outline  { @apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0]; }
+.Cyan-Outline    { @apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B]; }
+
+
+/* --- VARIANTS: TRANSPARENT --- */
+.Gray-Transparent    { @apply bg-transparent border-[#BBBDC5] text-[#363C51]; }
+.Primary-Transparent { @apply bg-transparent border-[#3F71FF] text-[#1434CB]; }
+.Error-Transparent   { @apply bg-transparent border-[#FA727A] text-[#CB1432]; }
+.Warning-Transparent { @apply bg-transparent border-[#FBAE58] text-[#A04C02]; }
+.Success-Transparent { @apply bg-transparent border-[#57D175] text-[#1E7735]; }
+.Purple-Transparent  { @apply bg-transparent border-[#CE8EF2] text-[#9130C0]; }
+.Cyan-Transparent    { @apply bg-transparent border-[#3FC2F1] text-[#096E9B]; }

package/src/lib/spinner/spinner.css

@@ -0,0 +1,32 @@
+/* Base Animation & Shape */
+.spinner {
+  @apply inline-block rounded-full animate-spin border-current border-t-transparent;
+  border-style: solid;
+}
+
+/* --- EXACT SIZES --- */
+
+/* 1. 15px */
+.spinner.xsm {
+  @apply w-[15px] h-[15px] border-[1.5px];
+}
+
+/* 2. 25px */
+.spinner.sm {
+  @apply w-[25px] h-[25px] border-[2.34px];
+}
+
+/* 3. 35px */
+.spinner.md {
+  @apply w-[35px] h-[35px] border-[3.28px];
+}
+
+/* 4. 50px */
+.spinner.lg {
+  @apply w-[50px] h-[50px] border-[4.7px];
+}
+
+/* 5. 64px */
+.spinner.xl {
+  @apply w-[64px] h-[64px] border-[6px];
+}

package/src/lib/ui-button/ui-button.css

@@ -0,0 +1,72 @@
+/* Base Button Style */
+.btn {
+  @apply border rounded transition-colors duration-200 cursor-pointer;
+}
+
+/* --- VARIANTS --- */
+
+.btn-primary {
+  @apply
+  font-medium flex justify-center gap-2 items-center bg-black text-white
+
+    /* FOCUS */
+  focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black
+
+    /* ACTIVE */
+  active:bg-[#242424]
+
+    /* DISABLED */
+  disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];
+}
+.btn-primary.xxl {
+  @apply gap-3
+}
+
+.btn-secondary {
+  @apply
+  font-medium flex justify-center gap-2 items-center
+  bg-white text-[#6B7080]
+
+    /* FOCUS */
+  focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA]
+
+    /* ACTIVE */
+  active:bg-[#F4F4F6]
+
+    /* DISABLED */
+  disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];
+}
+
+/* --- SIZES --- */
+/* These classes define padding, text size, AND icon/spinner size */
+
+.xxsm { @apply px-2 py-1 text-xs leading-[18px]; }
+.xsm  { @apply px-3 py-2 text-xs leading-[18px]; }
+.sm   { @apply px-[14px] py-2 text-sm; }
+.md   { @apply px-4 py-2.5 text-sm; }
+.lg   { @apply px-[18px] py-2.5 text-base; }
+.xl   { @apply px-5 py-3 text-base; }
+.xxl  { @apply px-7 py-4 text-lg leading-[26px]; }
+
+/* --- ICON SIZING (Nested) --- */
+.xxsm .icon { @apply size-[11px]; }
+.xsm .icon  { @apply size-[15px]; }
+.sm .icon   { @apply size-4; }
+.md .icon   { @apply size-4; }
+.lg .icon   { @apply size-4; }
+.xl .icon   { @apply size-4; }
+.xxl .icon  { @apply size-5; }
+
+/* --- SPINNER --- */
+.spinner {
+  @apply shrink-0 border-t-transparent rounded-full animate-spin border-current;
+}
+
+/* Spinner sizing per button size */
+.xxsm .spinner { @apply size-[14px] border-[1.5px]; }
+.xsm .spinner  { @apply size-[15px] border-[1.5px]; }
+.sm .spinner   { @apply size-[15px] border-[1.5px]; }
+.md .spinner   { @apply size-[15px] border-[1.5px]; }
+.lg .spinner   { @apply size-[15px] border-[1.5px]; }
+.xl .spinner   { @apply size-[15px] border-[1.5px]; }
+.xxl .spinner  { @apply size-[24px] border-[2.34px]; }

package/src/lib/ui-icon-button/ui-icon-button.css

@@ -0,0 +1,51 @@
+/* Base Shape */
+.btn-icon {
+  @apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;
+}
+
+/* --- VARIANTS --- */
+
+/* 1. Primary: Solid Black (Matches your top row) */
+.btn-icon.primary {
+  @apply bg-black text-white
+  focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black
+  active:bg-[#242424]
+  disabled:opacity-80 disabled:cursor-not-allowed;
+}
+
+/* 2. Secondary: White with Gray Border (Matches your existing secondary) */
+.btn-icon.secondary {
+  @apply bg-white border-[#E3E3E7] text-[#6B7080]
+    /* FOCUS */
+  focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA]
+    /* ACTIVE */
+  active:bg-[#F4F4F6]
+
+    /* DISABLED */
+  disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];
+
+}
+
+
+/* --- SIZES (Square Dimensions) --- */
+/* These specific heights match the calculated height of your text buttons */
+
+.btn-icon.xxsm { @apply p-1.5;}
+.btn-icon.xsm  { @apply p-1.5;}
+.btn-icon.sm   { @apply p-2;}
+.btn-icon.md   { @apply p-2.5;}
+.btn-icon.lg   { @apply p-3;}
+.btn-icon.xl   { @apply p-[14px];}
+.btn-icon.xxl  { @apply p-4;}
+
+/* --- ICON SIZING --- */
+/* Ensures icons scale nicely within the square */
+.btn-icon.xxsm .icon { @apply size-[14px]; }
+.btn-icon.xsm .icon  { @apply size-[18px]; }
+.btn-icon.sm .icon   { @apply size-[20px]; }
+.btn-icon.md .icon   { @apply size-[20px]; }
+.btn-icon.lg .icon   { @apply size-[20px]; }
+.btn-icon.xl .icon   { @apply size-[20px]; }
+.btn-icon.xxl .icon  { @apply size-[26px]; }
+
+

package/src/styles.css

@@ -2,3 +2,10 @@
 @import './lib/toggle/toggle.css';
 @import './lib/checkbox/checkbox.css';
 @import './lib/radio/radio.css';
+@import './lib/pill/pill.css';
+@import './lib/badge/badge.css';
+@import './lib/spinner/spinner.css';
+@import './lib/ui-button/ui-button.css';
+@import './lib/ui-icon-button/ui-icon-button.css';
+@import './lib/button-group/button-group.css';
+@import './lib/textarea/textarea.css';