@bsginstitute/bsg-integra 0.0.1 → 0.0.2

package/index.d.ts

@@ -140,7 +140,7 @@ declare class AccordionContentComponent {
  * Controls the overall alert container layout and colors
  */
 declare const alertVariants: (props?: ({
-    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "info" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Alert icon variants
@@ -200,8 +200,8 @@ declare class AlertComponent {
  * Controls the avatar size and base styles
  */
 declare const avatarVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    type?: "default" | "fallback" | "image" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    type?: "default" | "image" | "fallback" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Avatar initials variants
@@ -209,7 +209,7 @@ declare const avatarVariants: (props?: ({
  * Controls the initials text styles for fallback type
  */
 declare const avatarInitialsVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Avatar icon variants
@@ -305,7 +305,7 @@ declare class BadgeComponent {
 }
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "success" | "destructive" | "secondary" | "outline" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "destructive" | "success" | null | undefined;
     size?: "default" | "dot" | "large" | null | undefined;
     layout?: "text" | "text-icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -320,7 +320,7 @@ type BadgeIconVariantsProps = VariantProps<typeof badgeIconVariants>;
  */
 declare const buttonVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | null | undefined;
     shape?: "rectangular" | "pill" | "icon" | "icon-text" | "icon-only" | null | undefined;
     disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -653,7 +653,7 @@ declare class CarouselComponent implements AfterContentInit {
 }
 
 declare const checkboxVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = VariantProps<typeof checkboxVariants>['size'];
 declare class CheckboxComponent implements ControlValueAccessor {
@@ -661,7 +661,7 @@ declare class CheckboxComponent implements ControlValueAccessor {
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     ariaInvalid: _angular_core.InputSignal<boolean | undefined>;
-    size: _angular_core.InputSignal<"default" | "sm" | "lg" | null | undefined>;
+    size: _angular_core.InputSignal<"sm" | "lg" | "default" | null | undefined>;
     className: _angular_core.InputSignal<string | undefined>;
     get hostClasses(): string;
     checked: _angular_core.WritableSignal<boolean>;
@@ -792,25 +792,156 @@ declare class CollapsibleContentComponent implements AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleContentComponent, "bsg-collapsible-content", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "forceMount": { "alias": "forceMount"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type DialogSize = 'sm' | 'md' | 'lg';
-type DialogHeaderTone = 'brand' | 'info' | 'secondary';
 /**
- * Dialog Component
+ * Combobox wrapper variants
  *
- * A modal dialog component with multiple sizes and header tones.
+ * Controls the overall combobox container layout
+ */
+declare const comboboxWrapperVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Combobox trigger variants
  *
- * Usage:
+ * Controls the clickable trigger button
+ */
+declare const comboboxTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "disabled" | "hover" | "focus" | "error" | null | undefined;
+    open?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Combobox dropdown variants
+ *
+ * Controls the dropdown menu container
+ */
+declare const comboboxDropdownVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Combobox search wrapper variants
+ *
+ * Controls the search input container
+ */
+declare const comboboxSearchWrapperVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Combobox search input variants
+ *
+ * Controls the search input field
+ */
+declare const comboboxSearchInputVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Combobox options container variants
+ *
+ * Controls the scrollable options list
+ */
+declare const comboboxOptionsContainerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Combobox option variants
+ *
+ * Controls individual dropdown options
+ */
+declare const comboboxOptionVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Combobox empty state variants
+ *
+ * Controls the empty state message
+ */
+declare const comboboxEmptyStateVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Combobox error message variants
+ *
+ * Controls the error message display
+ */
+declare const comboboxErrorMessageVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Combobox value text variants
+ *
+ * Controls the selected value display
+ */
+declare const comboboxValueVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Combobox icon variants
+ *
+ * Controls the chevron icon
+ */
+declare const comboboxIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+type ComboboxSize = 'sm' | 'md' | 'lg';
+type ComboboxState = 'default' | 'hover' | 'focus' | 'disabled' | 'error';
+interface ComboboxOption {
+    value: string;
+    label: string;
+}
+type ComboboxWrapperVariantsProps = VariantProps<typeof comboboxWrapperVariants>;
+type ComboboxTriggerVariantsProps = VariantProps<typeof comboboxTriggerVariants>;
+/**
+ * Combobox Component - Searchable dropdown select
+ *
+ * Following shadcn/ui pattern:
  * ```html
- * <bsg-dialog [open]="isOpen" size="md" headerTone="brand" (closeDialog)="onClose()">
- *   <div dialog-header>Dialog Title</div>
- *   <div dialog-body>Dialog content goes here</div>
- *   <div dialog-footer>
- *     <button>Cancel</button>
- *     <button>Confirm</button>
- *   </div>
- * </bsg-dialog>
+ * <bsg-combobox
+ *   [options]="options"
+ *   [placeholder]="'Select...'"
+ *   [size]="'md'"
+ *   (valueChange)="onValueChange($event)"
+ * />
  * ```
  */
+declare class ComboboxComponent {
+    /** Size of the combobox */
+    readonly size: _angular_core.InputSignal<ComboboxSize>;
+    /** Current state */
+    readonly state: _angular_core.InputSignal<ComboboxState>;
+    /** List of options */
+    readonly options: _angular_core.InputSignal<ComboboxOption[]>;
+    /** Currently selected value (two-way binding supported) */
+    readonly selectedValue: _angular_core.ModelSignal<string>;
+    /** Placeholder text */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Dropdown open state (two-way binding supported) */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Error message (shown when state is 'error') */
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    /** Value change event */
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Selection change event */
+    readonly selectionChange: _angular_core.OutputEmitterRef<ComboboxOption>;
+    /** Open state change event */
+    readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Internal open state */
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    /** Search text for filtering */
+    readonly searchText: _angular_core.WritableSignal<string>;
+    constructor();
+    readonly wrapperClasses: _angular_core.Signal<string>;
+    readonly triggerClasses: _angular_core.Signal<string>;
+    readonly dropdownClasses: _angular_core.Signal<string>;
+    readonly searchWrapperClasses: _angular_core.Signal<string>;
+    readonly searchInputClasses: _angular_core.Signal<string>;
+    readonly optionsContainerClasses: _angular_core.Signal<string>;
+    readonly emptyStateClasses: _angular_core.Signal<string>;
+    readonly errorMessageClasses: _angular_core.Signal<string>;
+    readonly valueClasses: _angular_core.Signal<string>;
+    readonly iconClasses: _angular_core.Signal<string>;
+    readonly selectedLabel: _angular_core.Signal<string>;
+    readonly iconColor: _angular_core.Signal<"currentColor" | "#64748B">;
+    readonly filteredOptions: _angular_core.Signal<ComboboxOption[]>;
+    getOptionClasses(value: string): string;
+    toggleDropdown(event: MouseEvent): void;
+    closeDropdown(): void;
+    selectOption(event: MouseEvent, option: ComboboxOption): void;
+    onDocumentClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent, "bsg-combobox", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "selectedValue": { "alias": "selectedValue"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "selectedValue": "selectedValueChange"; "open": "openChange"; "valueChange": "valueChange"; "selectionChange": "selectionChange"; "openChange": "openChange"; }, never, never, true, never>;
+}
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
+type DialogHeaderTone = 'brand' | 'info' | 'secondary';
 declare class DialogComponent {
     /** Controls dialog visibility */
     readonly open: _angular_core.InputSignal<boolean>;
@@ -833,41 +964,34 @@ declare class DialogComponent {
     readonly headerClasses: _angular_core.Signal<string>;
     readonly bodyClasses: _angular_core.Signal<string>;
     readonly footerClasses: _angular_core.Signal<string>;
+    readonly contentMaxWidth: _angular_core.Signal<string>;
     onOverlayClick(): void;
     close(): void;
-    onEscapeKey(event: Event): void;
+    onEscapeKey(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "bsg-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "headerTone": { "alias": "headerTone"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "hasFooter": { "alias": "hasFooter"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "closeDialog": "closeDialog"; }, never, ["[dialog-header]", "[dialog-body]", "[dialog-footer]"], true, never>;
 }
 
 /**
  * Dialog overlay variants
- *
- * Controls the backdrop/overlay layer
  */
 declare const dialogOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 /**
  * Dialog content variants
- *
- * Controls the main dialog container
  */
 declare const dialogContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DialogContentVariantsProps = VariantProps<typeof dialogContentVariants>;
 /**
  * Dialog header variants
- *
- * Controls the header section with tone variants
  */
 declare const dialogHeaderVariants: (props?: ({
-    tone?: "info" | "secondary" | "brand" | null | undefined;
+    tone?: "secondary" | "brand" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DialogHeaderVariantsProps = VariantProps<typeof dialogHeaderVariants>;
 /**
  * Dialog body variants
- *
- * Controls the body/content section
  */
 declare const dialogBodyVariants: (props?: ({
     scrollable?: boolean | null | undefined;
@@ -875,13 +999,12 @@ declare const dialogBodyVariants: (props?: ({
 type DialogBodyVariantsProps = VariantProps<typeof dialogBodyVariants>;
 /**
  * Dialog footer variants
- *
- * Controls the footer section with actions
  */
 declare const dialogFooterVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DialogFooterVariantsProps = VariantProps<typeof dialogFooterVariants>;
 
 declare const inputVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputSize = VariantProps<typeof inputVariants>['size'];
 declare class InputComponent implements ControlValueAccessor, Validator {
@@ -891,7 +1014,7 @@ declare class InputComponent implements ControlValueAccessor, Validator {
     required: _angular_core.InputSignal<boolean>;
     readonly: _angular_core.InputSignal<boolean>;
     ariaInvalid: _angular_core.InputSignal<boolean | undefined>;
-    size: _angular_core.InputSignal<"default" | "sm" | "lg" | null | undefined>;
+    size: _angular_core.InputSignal<"sm" | "lg" | "default" | null | undefined>;
     className: _angular_core.InputSignal<string | undefined>;
     get hostClasses(): string;
     value: _angular_core.WritableSignal<string>;
@@ -947,7 +1070,7 @@ declare const labelVariants: (props?: class_variance_authority_types.ClassProp |
  */
 declare const radioWrapperVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
-    state?: "default" | "disabled" | "hover" | "checked" | "focus" | null | undefined;
+    state?: "default" | "disabled" | "hover" | "focus" | "checked" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Radio focus ring variants
@@ -1013,11 +1136,9 @@ declare class RadioComponent {
     readonly outerClasses: _angular_core.Signal<string>;
     readonly innerClasses: _angular_core.Signal<string>;
     readonly outerSize: _angular_core.Signal<16 | 20>;
-    readonly innerSize: _angular_core.Signal<14 | 10>;
-    readonly focusRingSize: _angular_core.Signal<26 | 22>;
-    readonly outerStrokeColor: _angular_core.Signal<"#7C3AED" | "#64748B" | "#8B5CF6">;
-    readonly outerFillColor: _angular_core.Signal<"none" | "#64748B">;
-    readonly focusRingColor: _angular_core.Signal<"#7C3AED" | "#9333EA">;
+    readonly innerSize: _angular_core.Signal<10 | 14>;
+    readonly focusRingSize: _angular_core.Signal<22 | 26>;
+    readonly outerCircleClasses: _angular_core.Signal<"stroke-muted-foreground fill-muted-foreground" | "stroke-primary/70 fill-none" | "stroke-primary fill-none" | "stroke-muted-foreground fill-none">;
     handleClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "bsg-radio", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "checkedChange": "checkedChange"; "valueChange": "valueChange"; }, never, never, true, never>;
@@ -1405,7 +1526,7 @@ declare const sidebarMenuItemVariants: (props?: class_variance_authority_types.C
  */
 declare const sidebarMenuButtonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Sidebar menu action variants
@@ -1750,7 +1871,7 @@ declare class SidebarMenuButtonComponent {
     /** Visual variant */
     readonly variant: _angular_core.InputSignal<"default" | "outline">;
     /** Size variant */
-    readonly size: _angular_core.InputSignal<"default" | "sm" | "lg">;
+    readonly size: _angular_core.InputSignal<"sm" | "lg" | "default">;
     /** Disabled state */
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** Additional CSS classes */
@@ -2006,7 +2127,7 @@ declare class SidebarInsetComponent {
  * Skeleton variants
  */
 declare const skeletonVariants: (props?: ({
-    type?: "text" | "rectangular" | "circular" | null | undefined;
+    type?: "rectangular" | "text" | "circular" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type SkeletonType = 'text' | 'circular' | 'rectangular';
@@ -2039,7 +2160,7 @@ declare class SkeletonComponent {
 declare const switchRootVariants: (props?: ({
     checked?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Switch thumb variants
@@ -2048,7 +2169,7 @@ declare const switchRootVariants: (props?: ({
  */
 declare const switchThumbVariants: (props?: ({
     checked?: boolean | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type SwitchSize = 'sm' | 'default' | 'lg';
@@ -2088,8 +2209,8 @@ declare class SwitchComponent {
 }
 
 declare const textareaVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
-    resize?: "none" | "horizontal" | "vertical" | "both" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+    resize?: "horizontal" | "vertical" | "none" | "both" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaSize = VariantProps<typeof textareaVariants>['size'];
 type TextareaResize = VariantProps<typeof textareaVariants>['resize'];
@@ -2100,8 +2221,8 @@ declare class TextareaComponent implements ControlValueAccessor, Validator {
     readonly: _angular_core.InputSignal<boolean>;
     rows: _angular_core.InputSignal<number>;
     ariaInvalid: _angular_core.InputSignal<boolean | undefined>;
-    size: _angular_core.InputSignal<"default" | "sm" | "lg" | null | undefined>;
-    resize: _angular_core.InputSignal<"none" | "horizontal" | "vertical" | "both" | null | undefined>;
+    size: _angular_core.InputSignal<"sm" | "lg" | "default" | null | undefined>;
+    resize: _angular_core.InputSignal<"horizontal" | "vertical" | "none" | "both" | null | undefined>;
     className: _angular_core.InputSignal<string | undefined>;
     get hostClasses(): string;
     value: _angular_core.WritableSignal<string>;
@@ -2272,7 +2393,7 @@ declare class TimePickerComponent implements OnInit {
     readonly actionsClasses: _angular_core.Signal<string>;
     readonly actionButtonClasses: _angular_core.Signal<string>;
     readonly errorMessageClasses: _angular_core.Signal<string>;
-    readonly iconColor: _angular_core.Signal<"#DC2626" | "#64748B">;
+    readonly iconColor: _angular_core.Signal<string>;
     getOptionClasses(selected: boolean, disabled: boolean): string;
     ngOnInit(): void;
     parseTime(time: string): {
@@ -2303,7 +2424,7 @@ declare class TimePickerComponent implements OnInit {
  * Controls the overall toast container styles
  */
 declare const toastVariants: (props?: ({
-    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "info" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Toast accent variants
@@ -2311,7 +2432,7 @@ declare const toastVariants: (props?: ({
  * Controls the left accent bar
  */
 declare const toastAccentVariants: (props?: ({
-    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "info" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Toast icon variants
@@ -2460,5 +2581,5 @@ declare class TooltipComponent implements AfterContentInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "bsg-tooltip", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "triggerClassName": { "alias": "triggerClassName"; "required": false; "isSignal": true; }; "contentClassName": { "alias": "contentClassName"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { AccordionComponent, AccordionContentComponent, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerDirective, DialogComponent, InputComponent, LabelComponent, RadioComponent, RadioGroupComponent, SelectComponent, SidebarComponent, SidebarContentComponent, SidebarFooterComponent, SidebarGroupActionComponent, SidebarGroupComponent, SidebarGroupContentComponent, SidebarGroupLabelComponent, SidebarHeaderComponent, SidebarInsetComponent, SidebarMenuActionComponent, SidebarMenuBadgeComponent, SidebarMenuButtonComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuSubButtonComponent, SidebarMenuSubComponent, SidebarMenuSubItemComponent, SidebarProviderComponent, SidebarRailComponent, SidebarSeparatorComponent, SidebarService, SidebarTriggerComponent, SkeletonComponent, SwitchComponent, TextareaComponent, TimePickerComponent, ToastComponent, TooltipComponent, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants, alertCloseVariants, alertContentVariants, alertIconVariants, alertVariants, avatarIconVariants, avatarImgVariants, avatarInitialsVariants, avatarVariants, badgeIconVariants, badgeVariants, buttonIconOnlyVariants, buttonIconVariants, buttonLabelVariants, buttonVariants, cardActionIconVariants, cardCurrencyContentVariants, cardCurrencyIconVariants, cardCurrencyLabelVariants, cardCurrencyTextVariants, cardHeaderRowVariants, cardHeaderVariants, cardHelperDescriptionVariants, cardHelperRowVariants, cardHelperVariants, cardInfoIconVariants, cardInfoLabelVariants, cardInfoTextVariants, cardMetricTitleVariants, cardMetricValueVariants, cardSlotBodyVariants, cardSlotFooterVariants, cardSlotHeaderVariants, cardValueVariants, cardVariants, carouselArrowVariants, carouselChevronVariants, carouselContainerVariants, carouselIndicatorVariants, carouselIndicatorsVariants, carouselRootVariants, carouselTrackVariants, carouselViewportVariants, checkboxVariants, dialogBodyVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, inputVariants, labelVariants, radioFocusRingVariants, radioGroupVariants, radioInnerVariants, radioLabelVariants, radioOptionVariants, radioOuterVariants, radioWrapperVariants, selectDropdownVariants, selectErrorVariants, selectIconVariants, selectOptionVariants, selectTriggerVariants, selectValueVariants, selectWrapperVariants, sidebarChevronVariants, sidebarContentVariants, sidebarFooterVariants, sidebarGroupActionVariants, sidebarGroupContentVariants, sidebarGroupLabelVariants, sidebarGroupVariants, sidebarHeaderVariants, sidebarInsetVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuItemVariants, sidebarMenuSkeletonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubItemVariants, sidebarMenuSubVariants, sidebarMenuVariants, sidebarProviderVariants, sidebarRailVariants, sidebarSeparatorVariants, sidebarTriggerVariants, sidebarVariants, sidebarWrapperVariants, skeletonVariants, switchRootVariants, switchThumbVariants, textareaVariants, timepickerActionButtonVariants, timepickerActionsVariants, timepickerColumnHeaderVariants, timepickerColumnVariants, timepickerDropdownVariants, timepickerErrorMessageVariants, timepickerFieldVariants, timepickerIconButtonVariants, timepickerInputVariants, timepickerLabelVariants, timepickerListVariants, timepickerOptionVariants, timepickerSelectionAreaVariants, timepickerSeparatorVariants, timepickerWrapperVariants, toastAccentVariants, toastCloseVariants, toastContentVariants, toastIconVariants, toastVariants, tooltipArrowVariants, tooltipContentVariants, tooltipTriggerVariants };
-export type { AccordionType, AccordionVariant, AccordionVariantsProps, AlertVariant, AlertVariantsProps, AvatarSize, AvatarType, AvatarVariantsProps, BadgeIconVariantsProps, BadgeLayout, BadgeSize, BadgeVariant, BadgeVariantsProps, ButtonShape, ButtonSize, ButtonVariant, ButtonVariantsProps, CardContentVariant, CardVariant, CardVariantsProps, CarouselArrowVariantsProps, CarouselIndicatorVariantsProps, CheckboxSize, DialogBodyVariantsProps, DialogContentVariantsProps, DialogHeaderTone, DialogHeaderVariantsProps, DialogSize, IconName, InputSize, RadioFocusRingVariantsProps, RadioGroupOption, RadioGroupOrientation, RadioGroupVariantsProps, RadioInnerVariantsProps, RadioLabelVariantsProps, RadioOptionVariantsProps, RadioOuterVariantsProps, RadioSize, RadioState, RadioWrapperVariantsProps, SelectOption, SelectSize, SelectState, SelectTriggerVariantsProps, SidebarCollapsible, SidebarMenuActionVariantsProps, SidebarMenuButtonVariantsProps, SidebarMenuSubButtonVariantsProps, SidebarSide, SidebarState, SidebarVariant, SkeletonType, SkeletonVariantsProps, SwitchSize, SwitchVariantsProps, TextareaResize, TextareaSize, TimePickerSize, TimePickerState, TimePickerWrapperVariantsProps, ToastVariant, ToastVariantsProps, TooltipContentVariantsProps, TooltipPlacement };
+export { AccordionComponent, AccordionContentComponent, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerDirective, ComboboxComponent, DialogComponent, InputComponent, LabelComponent, RadioComponent, RadioGroupComponent, SelectComponent, SidebarComponent, SidebarContentComponent, SidebarFooterComponent, SidebarGroupActionComponent, SidebarGroupComponent, SidebarGroupContentComponent, SidebarGroupLabelComponent, SidebarHeaderComponent, SidebarInsetComponent, SidebarMenuActionComponent, SidebarMenuBadgeComponent, SidebarMenuButtonComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuSubButtonComponent, SidebarMenuSubComponent, SidebarMenuSubItemComponent, SidebarProviderComponent, SidebarRailComponent, SidebarSeparatorComponent, SidebarService, SidebarTriggerComponent, SkeletonComponent, SwitchComponent, TextareaComponent, TimePickerComponent, ToastComponent, TooltipComponent, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants, alertCloseVariants, alertContentVariants, alertIconVariants, alertVariants, avatarIconVariants, avatarImgVariants, avatarInitialsVariants, avatarVariants, badgeIconVariants, badgeVariants, buttonIconOnlyVariants, buttonIconVariants, buttonLabelVariants, buttonVariants, cardActionIconVariants, cardCurrencyContentVariants, cardCurrencyIconVariants, cardCurrencyLabelVariants, cardCurrencyTextVariants, cardHeaderRowVariants, cardHeaderVariants, cardHelperDescriptionVariants, cardHelperRowVariants, cardHelperVariants, cardInfoIconVariants, cardInfoLabelVariants, cardInfoTextVariants, cardMetricTitleVariants, cardMetricValueVariants, cardSlotBodyVariants, cardSlotFooterVariants, cardSlotHeaderVariants, cardValueVariants, cardVariants, carouselArrowVariants, carouselChevronVariants, carouselContainerVariants, carouselIndicatorVariants, carouselIndicatorsVariants, carouselRootVariants, carouselTrackVariants, carouselViewportVariants, checkboxVariants, comboboxDropdownVariants, comboboxEmptyStateVariants, comboboxErrorMessageVariants, comboboxIconVariants, comboboxOptionVariants, comboboxOptionsContainerVariants, comboboxSearchInputVariants, comboboxSearchWrapperVariants, comboboxTriggerVariants, comboboxValueVariants, comboboxWrapperVariants, dialogBodyVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, inputVariants, labelVariants, radioFocusRingVariants, radioGroupVariants, radioInnerVariants, radioLabelVariants, radioOptionVariants, radioOuterVariants, radioWrapperVariants, selectDropdownVariants, selectErrorVariants, selectIconVariants, selectOptionVariants, selectTriggerVariants, selectValueVariants, selectWrapperVariants, sidebarChevronVariants, sidebarContentVariants, sidebarFooterVariants, sidebarGroupActionVariants, sidebarGroupContentVariants, sidebarGroupLabelVariants, sidebarGroupVariants, sidebarHeaderVariants, sidebarInsetVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuItemVariants, sidebarMenuSkeletonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubItemVariants, sidebarMenuSubVariants, sidebarMenuVariants, sidebarProviderVariants, sidebarRailVariants, sidebarSeparatorVariants, sidebarTriggerVariants, sidebarVariants, sidebarWrapperVariants, skeletonVariants, switchRootVariants, switchThumbVariants, textareaVariants, timepickerActionButtonVariants, timepickerActionsVariants, timepickerColumnHeaderVariants, timepickerColumnVariants, timepickerDropdownVariants, timepickerErrorMessageVariants, timepickerFieldVariants, timepickerIconButtonVariants, timepickerInputVariants, timepickerLabelVariants, timepickerListVariants, timepickerOptionVariants, timepickerSelectionAreaVariants, timepickerSeparatorVariants, timepickerWrapperVariants, toastAccentVariants, toastCloseVariants, toastContentVariants, toastIconVariants, toastVariants, tooltipArrowVariants, tooltipContentVariants, tooltipTriggerVariants };
+export type { AccordionType, AccordionVariant, AccordionVariantsProps, AlertVariant, AlertVariantsProps, AvatarSize, AvatarType, AvatarVariantsProps, BadgeIconVariantsProps, BadgeLayout, BadgeSize, BadgeVariant, BadgeVariantsProps, ButtonShape, ButtonSize, ButtonVariant, ButtonVariantsProps, CardContentVariant, CardVariant, CardVariantsProps, CarouselArrowVariantsProps, CarouselIndicatorVariantsProps, CheckboxSize, ComboboxOption, ComboboxSize, ComboboxState, ComboboxTriggerVariantsProps, ComboboxWrapperVariantsProps, DialogBodyVariantsProps, DialogContentVariantsProps, DialogFooterVariantsProps, DialogHeaderTone, DialogHeaderVariantsProps, DialogSize, IconName, InputSize, RadioFocusRingVariantsProps, RadioGroupOption, RadioGroupOrientation, RadioGroupVariantsProps, RadioInnerVariantsProps, RadioLabelVariantsProps, RadioOptionVariantsProps, RadioOuterVariantsProps, RadioSize, RadioState, RadioWrapperVariantsProps, SelectOption, SelectSize, SelectState, SelectTriggerVariantsProps, SidebarCollapsible, SidebarMenuActionVariantsProps, SidebarMenuButtonVariantsProps, SidebarMenuSubButtonVariantsProps, SidebarSide, SidebarState, SidebarVariant, SkeletonType, SkeletonVariantsProps, SwitchSize, SwitchVariantsProps, TextareaResize, TextareaSize, TimePickerSize, TimePickerState, TimePickerWrapperVariantsProps, ToastVariant, ToastVariantsProps, TooltipContentVariantsProps, TooltipPlacement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsginstitute/bsg-integra",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -48,4 +48,4 @@
       "default": "./fesm2022/bsginstitute-bsg-integra.mjs"
     }
   }
-}
+}

package/src/lib/tokens/themes.css

@@ -27,12 +27,26 @@
     --destructive: oklch(0.577 0.245 27.325);
     --destructive-foreground: oklch(0.985 0 0);
 
+    /* Status semantic tokens */
+    --success: oklch(0.596 0.145 163.225);
+    --success-foreground: oklch(0.985 0 0);
+
+    --warning: oklch(0.681 0.162 75.834);
+    --warning-foreground: oklch(0.145 0 0);
+
+    --info: oklch(0.546 0.245 262.881);
+    --info-foreground: oklch(0.985 0 0);
+
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
     --ring: oklch(0.702 0.183 293.541);
 
     --radius: 0.625rem;
 
+    /* Tooltip semantic tokens */
+    --tooltip: oklch(0.145 0 0);
+    --tooltip-foreground: oklch(0.985 0 0);
+
     /* Sidebar tokens (shadcn pattern) */
     --sidebar-background: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
@@ -70,10 +84,24 @@
     --destructive: oklch(0.704 0.191 22.216);
     --destructive-foreground: oklch(0.985 0 0);
 
+    /* Status semantic tokens (dark theme) */
+    --success: oklch(0.696 0.17 162.48);
+    --success-foreground: oklch(0.145 0 0);
+
+    --warning: oklch(0.769 0.188 70.08);
+    --warning-foreground: oklch(0.145 0 0);
+
+    --info: oklch(0.646 0.222 262.881);
+    --info-foreground: oklch(0.145 0 0);
+
     --border: oklch(0.269 0 0);
     --input: oklch(0.269 0 0);
     --ring: oklch(0.439 0 0);
 
+    /* Tooltip semantic tokens (dark theme) */
+    --tooltip: oklch(0.985 0 0);
+    --tooltip-foreground: oklch(0.145 0 0);
+
     /* Sidebar tokens (dark theme) */
     --sidebar-background: oklch(0.205 0 0);
     --sidebar-foreground: oklch(0.985 0 0);
@@ -116,6 +144,16 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
 
+  /* Status color utilities */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -130,6 +168,10 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  /* Tooltip color utilities */
+  --color-tooltip: var(--tooltip);
+  --color-tooltip-foreground: var(--tooltip-foreground);
+
   /* Radius también puede ser usado en utilities */
   --radius: var(--radius);
 }