@kouji-ui/components 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/components",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Opinionated styled Angular components built on @kouji-ui/core directives. Themed at runtime via @kouji-ui/themes.",
   "license": "MIT",
   "repository": {

package/types/kouji-ui-components.d.ts

@@ -485,6 +485,10 @@ declare class KjAvatarGroupComponent {
  *   --kj-badge-dot-size      — Diameter of the leading dot (when `dot` is set).
  *   --kj-badge-dot-color     — Fill of the leading dot. Defaults to currentColor.
  *
+ * Custom colours: the `bg` / `fg` / `dotColor` inputs set these variables as
+ * inline styles on the badge span, so they win over any variant or theme rule.
+ * Use for data-driven colour maps (status pills, role badges).
+ *
  * @doc-category Library/Data display
  * @doc
  * @doc-name badge
@@ -495,8 +499,14 @@ declare class KjBadgeComponent {
     readonly variant: _angular_core.InputSignal<KjBadgeVariant>;
     readonly size: _angular_core.InputSignal<"md" | "xs" | "sm" | "lg">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Custom background — any CSS color/var(). Wins over the variant (inline style). Empty = variant colours. */
+    readonly bg: _angular_core.InputSignal<string>;
+    /** Custom foreground — any CSS color/var(). Wins over the variant (inline style). */
+    readonly fg: _angular_core.InputSignal<string>;
+    /** Custom dot colour (with `dot`). Defaults to currentColor via the theme. */
+    readonly dotColor: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjBadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjBadgeComponent, "kj-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjBadgeComponent, "kj-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "bg": { "alias": "bg"; "required": false; "isSignal": true; }; "fg": { "alias": "fg"; "required": false; "isSignal": true; }; "dotColor": { "alias": "dotColor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -2067,6 +2077,71 @@ declare class KjDatePickerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjDatePickerComponent, "kj-date-picker", never, { "kjValue": { "alias": "kjValue"; "required": false; "isSignal": true; }; "kjOpen": { "alias": "kjOpen"; "required": false; "isSignal": true; }; "kjMin": { "alias": "kjMin"; "required": false; "isSignal": true; }; "kjMax": { "alias": "kjMax"; "required": false; "isSignal": true; }; "kjDisabledDates": { "alias": "kjDisabledDates"; "required": false; "isSignal": true; }; "kjLocale": { "alias": "kjLocale"; "required": false; "isSignal": true; }; "kjFirstDayOfWeek": { "alias": "kjFirstDayOfWeek"; "required": false; "isSignal": true; }; "kjPlaceholder": { "alias": "kjPlaceholder"; "required": false; "isSignal": true; }; "kjReadonly": { "alias": "kjReadonly"; "required": false; "isSignal": true; }; "kjDisabled": { "alias": "kjDisabled"; "required": false; "isSignal": true; }; "kjSize": { "alias": "kjSize"; "required": false; "isSignal": true; }; }, { "kjValue": "kjValueChange"; "kjOpen": "kjOpenChange"; }, never, never, true, never>;
 }
 
+/** Format a Date as a locale short date + HH:mm time. */
+declare function formatDateTime(d: Date, locale: string): string;
+/**
+ * Themed datetime picker — the date-picker's calendar popover plus a time
+ * field in the panel. Value is a single native `Date` carrying both parts.
+ *
+ * Unlike `kj-date-picker`, selecting a calendar day keeps the panel open so
+ * the time can be adjusted; the day merge preserves the current time-of-day
+ * (defaults to 09:00 for a fresh value). Close with Escape or by clicking
+ * outside.
+ *
+ * @doc-example Default
+ *   Pick a meeting date and time — a single `Date` two-way binding.
+ *   @doc-file datetime-picker.example.ts
+ *
+ * @doc-keyboard
+ *   Enter|ArrowDown — Opens the calendar popover from the trigger
+ *   Escape          — Closes the popover and returns focus to the trigger
+ *
+ * @doc-css-var
+ *   --kj-datetime-picker-input-height — Height of the trigger input. Sizes override.
+ *
+ * @doc-related date-picker,calendar,time-picker
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name datetime-picker
+ * @doc-description Themed date + time picker sharing one native Date value; calendar popover with a time field.
+ * @doc-is-main
+ */
+declare class KjDatetimePickerComponent {
+    /** Selected date + time. Two-way bindable — `[(kjValue)]`. `null` clears. */
+    readonly kjValue: _angular_core.ModelSignal<Date | null>;
+    /** Two-way bindable open state for the popover. */
+    readonly kjOpen: _angular_core.ModelSignal<boolean>;
+    /** Earliest selectable date (inclusive). */
+    readonly kjMin: _angular_core.InputSignal<Date | null>;
+    /** Latest selectable date (inclusive). */
+    readonly kjMax: _angular_core.InputSignal<Date | null>;
+    /** BCP-47 locale tag. Defaults to Angular's `LOCALE_ID`. */
+    readonly kjLocale: _angular_core.InputSignal<string>;
+    /** First day of the week override (0=Sun … 6=Sat). */
+    readonly kjFirstDayOfWeek: _angular_core.InputSignal<number | null>;
+    /** Placeholder text for the trigger input. */
+    readonly kjPlaceholder: _angular_core.InputSignal<string>;
+    /** Label for the time row inside the panel. */
+    readonly kjTimeLabel: _angular_core.InputSignal<string>;
+    /** Hour used when a day is picked on a previously-empty value. */
+    readonly kjDefaultHour: _angular_core.InputSignal<number>;
+    readonly kjReadonly: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly kjDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    /** Size preset for the trigger input. */
+    readonly kjSize: _angular_core.InputSignal<"md" | "xs" | "sm" | "lg">;
+    /** Trigger display: locale short date + HH:mm. */
+    readonly displayFormat: typeof formatDateTime;
+    readonly timeText: _angular_core.Signal<string>;
+    /** Merge the picked day into the value, preserving time-of-day. Keeps the
+     *  panel open so the time can be adjusted next. */
+    onCalendarSelect(day: Date | null): void;
+    /** Merge an "HH:mm" time into the value, preserving the date part. */
+    onTimeInput(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjDatetimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjDatetimePickerComponent, "kj-datetime-picker", never, { "kjValue": { "alias": "kjValue"; "required": false; "isSignal": true; }; "kjOpen": { "alias": "kjOpen"; "required": false; "isSignal": true; }; "kjMin": { "alias": "kjMin"; "required": false; "isSignal": true; }; "kjMax": { "alias": "kjMax"; "required": false; "isSignal": true; }; "kjLocale": { "alias": "kjLocale"; "required": false; "isSignal": true; }; "kjFirstDayOfWeek": { "alias": "kjFirstDayOfWeek"; "required": false; "isSignal": true; }; "kjPlaceholder": { "alias": "kjPlaceholder"; "required": false; "isSignal": true; }; "kjTimeLabel": { "alias": "kjTimeLabel"; "required": false; "isSignal": true; }; "kjDefaultHour": { "alias": "kjDefaultHour"; "required": false; "isSignal": true; }; "kjReadonly": { "alias": "kjReadonly"; "required": false; "isSignal": true; }; "kjDisabled": { "alias": "kjDisabled"; "required": false; "isSignal": true; }; "kjSize": { "alias": "kjSize"; "required": false; "isSignal": true; }; }, { "kjValue": "kjValueChange"; "kjOpen": "kjOpenChange"; }, never, never, true, never>;
+}
+
 /**
  * Service-launched modal dialog. Inject `KjDialogService` and call `open()`
  * with a template; mount `[kjDialog]` once near your trigger to host the
@@ -2960,7 +3035,7 @@ declare class KjIconUsageExample {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjIconUsageExample, "kj-icon-usage-example", never, {}, {}, never, never, true, never>;
 }
 
-type KjInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'color';
+type KjInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'color' | 'date' | 'time' | 'datetime-local';
 /** Visual variants — `default` uses the field surface; `sunken` drops to
  *  body bg so the input pops against a card/surface parent. */
 type KjInputVariant = 'default' | 'sunken';
@@ -4180,7 +4255,7 @@ declare class KjNumberInputComponent {
     readonly kjCurrency: _angular_core.InputSignal<string>;
     readonly kjCurrencyDisplay: _angular_core.InputSignal<"symbol" | "name" | "code" | "narrowSymbol">;
     readonly kjUnit: _angular_core.InputSignal<string>;
-    readonly kjUnitDisplay: _angular_core.InputSignal<"short" | "long" | "narrow">;
+    readonly kjUnitDisplay: _angular_core.InputSignal<"long" | "short" | "narrow">;
     readonly kjUseGrouping: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly kjMinimumFractionDigits: _angular_core.InputSignal<number>;
     readonly kjMaximumFractionDigits: _angular_core.InputSignal<number>;
@@ -8032,5 +8107,5 @@ declare class KjTreeSelectComponent {
 
 declare const KJ_COMPONENTS_VERSION = "0.0.1";
 
-export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
+export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDatetimePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
 export type { ExportOptions, KjCellEditEvent, KjChatBubbleSize, KjChatBubbleVariant, KjDateRange, KjEditorContract, KjEmptyStateLevel, KjEmptyStateLive, KjEmptyStateVariant, KjFilterContext, KjInputSize, KjInputType, KjInputVariant, KjNumberRange, KjRowClickEvent, KjSelectEditorOption, KjSelectFilterOption, KjSpeedDialPosition, KjTableDensity, KjTableExportFormat };