@kouji-ui/components 0.1.1 → 0.1.2

package/src/example-components.ts

@@ -1,396 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// Map of folder → lazy loader for that folder's example components,
-// plus a static exportName → folder owner index.
-//
-// Consumers (apps/docs ExampleRegistryService) look up an export name in
-// EXAMPLE_OWNER to find its folder chunk, then call EXAMPLE_LOADERS[folder]()
-// to import the (code-split) module containing it.
-//
-// Each entry below produces its own chunk in the build output — opening
-// the docs page for component X only pulls component X's examples, not the
-// entire library.
-
-import type { Type } from '@angular/core';
-
-export const EXAMPLE_LOADERS: Record<string, () => Promise<Record<string, Type<unknown>>>> = {
-  'accordion': () => import('./accordion/_examples') as Promise<Record<string, Type<unknown>>>,
-  'alert': () => import('./alert/_examples') as Promise<Record<string, Type<unknown>>>,
-  'avatar': () => import('./avatar/_examples') as Promise<Record<string, Type<unknown>>>,
-  'badge': () => import('./badge/_examples') as Promise<Record<string, Type<unknown>>>,
-  'breadcrumb': () => import('./breadcrumb/_examples') as Promise<Record<string, Type<unknown>>>,
-  'button': () => import('./button/_examples') as Promise<Record<string, Type<unknown>>>,
-  'button-group': () => import('./button-group/_examples') as Promise<Record<string, Type<unknown>>>,
-  'calendar': () => import('./calendar/_examples') as Promise<Record<string, Type<unknown>>>,
-  'card': () => import('./card/_examples') as Promise<Record<string, Type<unknown>>>,
-  'carousel': () => import('./carousel/_examples') as Promise<Record<string, Type<unknown>>>,
-  'cascade-select': () => import('./cascade-select/_examples') as Promise<Record<string, Type<unknown>>>,
-  'chat': () => import('./chat/_examples') as Promise<Record<string, Type<unknown>>>,
-  'checkbox': () => import('./checkbox/_examples') as Promise<Record<string, Type<unknown>>>,
-  'color-picker': () => import('./color-picker/_examples') as Promise<Record<string, Type<unknown>>>,
-  'combobox': () => import('./combobox/_examples') as Promise<Record<string, Type<unknown>>>,
-  'command-palette': () => import('./command-palette/_examples') as Promise<Record<string, Type<unknown>>>,
-  'confirm-popup': () => import('./confirm-popup/_examples') as Promise<Record<string, Type<unknown>>>,
-  'date-picker': () => import('./date-picker/_examples') as Promise<Record<string, Type<unknown>>>,
-  'dialog': () => import('./dialog/_examples') as Promise<Record<string, Type<unknown>>>,
-  'divider': () => import('./divider/_examples') as Promise<Record<string, Type<unknown>>>,
-  'drawer': () => import('./drawer/_examples') as Promise<Record<string, Type<unknown>>>,
-  'dropdown-menu': () => import('./dropdown-menu/_examples') as Promise<Record<string, Type<unknown>>>,
-  'empty-state': () => import('./empty-state/_examples') as Promise<Record<string, Type<unknown>>>,
-  'field': () => import('./field/_examples') as Promise<Record<string, Type<unknown>>>,
-  'file-upload': () => import('./file-upload/_examples') as Promise<Record<string, Type<unknown>>>,
-  'form': () => import('./form/_examples') as Promise<Record<string, Type<unknown>>>,
-  'icon': () => import('./icon/_examples') as Promise<Record<string, Type<unknown>>>,
-  'input': () => import('./input/_examples') as Promise<Record<string, Type<unknown>>>,
-  'input-group': () => import('./input-group/_examples') as Promise<Record<string, Type<unknown>>>,
-  'input-mask': () => import('./input-mask/_examples') as Promise<Record<string, Type<unknown>>>,
-  'input-otp': () => import('./input-otp/_examples') as Promise<Record<string, Type<unknown>>>,
-  'kbd': () => import('./kbd/_examples') as Promise<Record<string, Type<unknown>>>,
-  'link': () => import('./link/_examples') as Promise<Record<string, Type<unknown>>>,
-  'list': () => import('./list/_examples') as Promise<Record<string, Type<unknown>>>,
-  'menubar': () => import('./menubar/_examples') as Promise<Record<string, Type<unknown>>>,
-  'number-input': () => import('./number-input/_examples') as Promise<Record<string, Type<unknown>>>,
-  'overlay-badge': () => import('./overlay-badge/_examples') as Promise<Record<string, Type<unknown>>>,
-  'pagination': () => import('./pagination/_examples') as Promise<Record<string, Type<unknown>>>,
-  'password-input': () => import('./password-input/_examples') as Promise<Record<string, Type<unknown>>>,
-  'popover': () => import('./popover/_examples') as Promise<Record<string, Type<unknown>>>,
-  'progress-bar': () => import('./progress-bar/_examples') as Promise<Record<string, Type<unknown>>>,
-  'radio': () => import('./radio/_examples') as Promise<Record<string, Type<unknown>>>,
-  'select': () => import('./select/_examples') as Promise<Record<string, Type<unknown>>>,
-  'skeleton': () => import('./skeleton/_examples') as Promise<Record<string, Type<unknown>>>,
-  'slider': () => import('./slider/_examples') as Promise<Record<string, Type<unknown>>>,
-  'speed-dial': () => import('./speed-dial/_examples') as Promise<Record<string, Type<unknown>>>,
-  'spinner': () => import('./spinner/_examples') as Promise<Record<string, Type<unknown>>>,
-  'stepper': () => import('./stepper/_examples') as Promise<Record<string, Type<unknown>>>,
-  'table': () => import('./table/_examples') as Promise<Record<string, Type<unknown>>>,
-  'tabs': () => import('./tabs/_examples') as Promise<Record<string, Type<unknown>>>,
-  'tag': () => import('./tag/_examples') as Promise<Record<string, Type<unknown>>>,
-  'textarea': () => import('./textarea/_examples') as Promise<Record<string, Type<unknown>>>,
-  'time-picker': () => import('./time-picker/_examples') as Promise<Record<string, Type<unknown>>>,
-  'toast': () => import('./toast/_examples') as Promise<Record<string, Type<unknown>>>,
-  'toggle': () => import('./toggle/_examples') as Promise<Record<string, Type<unknown>>>,
-  'tooltip': () => import('./tooltip/_examples') as Promise<Record<string, Type<unknown>>>,
-  'tree-select': () => import('./tree-select/_examples') as Promise<Record<string, Type<unknown>>>,
-  'typography': () => import('./typography/_examples') as Promise<Record<string, Type<unknown>>>,
-};
-
-export const EXAMPLE_OWNER: Record<string, string> = {
-  KjAccordionDefaultExample: 'accordion',
-  KjAccordionDisabledExample: 'accordion',
-  KjAccordionMultipleExample: 'accordion',
-  KjAccordionRichContentExample: 'accordion',
-  KjAlertBannerExample: 'alert',
-  KjAlertDismissibleExample: 'alert',
-  KjAlertExample: 'alert',
-  KjAlertVariantsExample: 'alert',
-  KjAlertWithActionsExample: 'alert',
-  KjAvatarDefaultExample: 'avatar',
-  KjAvatarGroupExample: 'avatar',
-  KjAvatarGroupListExample: 'avatar',
-  KjAvatarGroupOverflowExample: 'avatar',
-  KjAvatarGroupShapesExample: 'avatar',
-  KjAvatarGroupSizesExample: 'avatar',
-  KjAvatarInitialsExample: 'avatar',
-  KjAvatarShapesExample: 'avatar',
-  KjAvatarSizesExample: 'avatar',
-  KjAvatarWithImageExample: 'avatar',
-  KjBadgeDefaultExample: 'badge',
-  KjBadgeSizesExample: 'badge',
-  KjBadgeVariantsExample: 'badge',
-  KjBadgeWithIconExample: 'badge',
-  KjBreadcrumbCustomSeparatorExample: 'breadcrumb',
-  KjBreadcrumbExample: 'breadcrumb',
-  KjBreadcrumbLongPathExample: 'breadcrumb',
-  KjBreadcrumbTruncatedExample: 'breadcrumb',
-  KjBreadcrumbWithIconsExample: 'breadcrumb',
-  KjButtonAnchorExample: 'button',
-  KjButtonConfiguredExample: 'button',
-  KjButtonDisabledExample: 'button',
-  KjButtonExample: 'button',
-  KjButtonGroupExample: 'button-group',
-  KjButtonGroupIconOnlyExample: 'button-group',
-  KjButtonGroupToggleExample: 'button-group',
-  KjButtonGroupVariantsExample: 'button-group',
-  KjButtonGroupVerticalExample: 'button-group',
-  KjButtonIconExample: 'button',
-  KjButtonLoadingExample: 'button',
-  KjButtonPressedExample: 'button',
-  KjButtonSizesExample: 'button',
-  KjButtonUsageExample: 'button',
-  KjButtonVariantsExample: 'button',
-  KjCalendarExample: 'calendar',
-  KjCardCoverExample: 'card',
-  KjCardExample: 'card',
-  KjCardFullExample: 'card',
-  KjCarouselAutoplayExample: 'carousel',
-  KjCarouselExample: 'carousel',
-  KjCarouselIndicatorsExample: 'carousel',
-  KjCarouselLazyLoadExample: 'carousel',
-  KjCarouselTabsPatternExample: 'carousel',
-  KjCascadeSelectDataDrivenExample: 'cascade-select',
-  KjCascadeSelectDisabledExample: 'cascade-select',
-  KjCascadeSelectExample: 'cascade-select',
-  KjCascadeSelectFieldExample: 'cascade-select',
-  KjCascadeSelectPathExample: 'cascade-select',
-  KjChatBubbleExample: 'chat',
-  KjChatBubbleGroupedExample: 'chat',
-  KjChatBubbleSidesExample: 'chat',
-  KjChatBubbleVariantsExample: 'chat',
-  KjChatBubbleWithStateExample: 'chat',
-  KjCheckboxCheckedExample: 'checkbox',
-  KjCheckboxDefaultExample: 'checkbox',
-  KjCheckboxDisabledExample: 'checkbox',
-  KjCheckboxIndeterminateExample: 'checkbox',
-  KjCheckboxUsageExample: 'checkbox',
-  KjColorPickerAlphaExample: 'color-picker',
-  KjColorPickerExample: 'color-picker',
-  KjColorPickerHexInputExample: 'color-picker',
-  KjColorPickerInFormExample: 'color-picker',
-  KjColorPickerUsageExample: 'color-picker',
-  KjColorPickerWithPresetsExample: 'color-picker',
-  KjComboboxAsyncExample: 'combobox',
-  KjComboboxEmptyStateExample: 'combobox',
-  KjComboboxExample: 'combobox',
-  KjComboboxFreeTextExample: 'combobox',
-  KjComboboxUsageExample: 'combobox',
-  KjComboboxWithIconsExample: 'combobox',
-  KjCommandPaletteAsyncExample: 'command-palette',
-  KjCommandPaletteDialogExample: 'command-palette',
-  KjCommandPaletteExample: 'command-palette',
-  KjCommandPaletteFuzzyExample: 'command-palette',
-  KjCommandPaletteGroupsExample: 'command-palette',
-  KjCommandPaletteUsageExample: 'command-palette',
-  KjConfirmPopupDestructiveExample: 'confirm-popup',
-  KjConfirmPopupExample: 'confirm-popup',
-  KjConfirmPopupPlacementExample: 'confirm-popup',
-  KjConfirmPopupUsageExample: 'confirm-popup',
-  KjConfirmPopupWithMessageExample: 'confirm-popup',
-  KjDatePickerDisabledDatesExample: 'date-picker',
-  KjDatePickerExample: 'date-picker',
-  KjDatePickerLocaleExample: 'date-picker',
-  KjDatePickerReadonlyExample: 'date-picker',
-  KjDatePickerUsageExample: 'date-picker',
-  KjDatePickerWithMinMaxExample: 'date-picker',
-  KjDialogConfirmationExample: 'dialog',
-  KjDialogDefaultExample: 'dialog',
-  KjDialogNestedExample: 'dialog',
-  KjDialogScrollableExample: 'dialog',
-  KjDialogUsageExample: 'dialog',
-  KjDialogWithFormExample: 'dialog',
-  KjDividerExample: 'divider',
-  KjDividerSizesExample: 'divider',
-  KjDividerStructuralExample: 'divider',
-  KjDividerUsageExample: 'divider',
-  KjDividerVariantsExample: 'divider',
-  KjDividerVerticalExample: 'divider',
-  KjDividerWithContentExample: 'divider',
-  KjDrawerExample: 'drawer',
-  KjDrawerModalVsNonModalExample: 'drawer',
-  KjDrawerScrollableExample: 'drawer',
-  KjDrawerSidesExample: 'drawer',
-  KjDrawerUsageExample: 'drawer',
-  KjDrawerWithFormExample: 'drawer',
-  KjDropdownMenuDisabledExample: 'dropdown-menu',
-  KjDropdownMenuExample: 'dropdown-menu',
-  KjDropdownMenuShortcutsExample: 'dropdown-menu',
-  KjDropdownMenuSidesExample: 'dropdown-menu',
-  KjDropdownMenuUsageExample: 'dropdown-menu',
-  KjDropdownMenuWithIconsExample: 'dropdown-menu',
-  KjDropdownMenuWithSeparatorExample: 'dropdown-menu',
-  KjEmptyStateErrorExample: 'empty-state',
-  KjEmptyStateExample: 'empty-state',
-  KjEmptyStateSearchExample: 'empty-state',
-  KjEmptyStateSizesExample: 'empty-state',
-  KjEmptyStateUsageExample: 'empty-state',
-  KjEmptyStateWithActionsExample: 'empty-state',
-  KjFieldDisabledExample: 'field',
-  KjFieldExample: 'field',
-  KjFieldRequiredExample: 'field',
-  KjFieldWithErrorExample: 'field',
-  KjFieldWithPrefixSuffixExample: 'field',
-  KjFileUploadDropzoneExample: 'file-upload',
-  KjFileUploadExample: 'file-upload',
-  KjFileUploadImagePreviewExample: 'file-upload',
-  KjFileUploadMultipleExample: 'file-upload',
-  KjFileUploadWithProgressExample: 'file-upload',
-  KjFormAsyncSubmitExample: 'form',
-  KjFormCompoundExample: 'form',
-  KjFormExample: 'form',
-  KjFormValidationExample: 'form',
-  KjIconGalleryExample: 'icon',
-  KjInputColorExample: 'input',
-  KjInputExample: 'input',
-  KjInputGroupButtonExample: 'input-group',
-  KjInputGroupExample: 'input-group',
-  KjInputGroupIconExample: 'input-group',
-  KjInputGroupUrlExample: 'input-group',
-  KjInputGroupVariantsExample: 'input-group',
-  KjInputMaskCreditCardExample: 'input-mask',
-  KjInputMaskCustomTokensExample: 'input-mask',
-  KjInputMaskDateExample: 'input-mask',
-  KjInputMaskExample: 'input-mask',
-  KjInputMaskValidationExample: 'input-mask',
-  KjInputOtpAutosubmitExample: 'input-otp',
-  KjInputOtpExample: 'input-otp',
-  KjInputOtpLengthsExample: 'input-otp',
-  KjInputOtpMaskedExample: 'input-otp',
-  KjInputOtpReactiveExample: 'input-otp',
-  KjInputOtpSeparatorExample: 'input-otp',
-  KjKbdComboExample: 'kbd',
-  KjKbdExample: 'kbd',
-  KjKbdInTooltipExample: 'kbd',
-  KjKbdSizesExample: 'kbd',
-  KjLinkDisabledExample: 'link',
-  KjLinkExample: 'link',
-  KjLinkExternalExample: 'link',
-  KjLinkInProseExample: 'link',
-  KjLinkSizesExample: 'link',
-  KjLinkVariantsExample: 'link',
-  KjListDividedExample: 'list',
-  KjListExample: 'list',
-  KjListInteractiveExample: 'list',
-  KjListNavExample: 'list',
-  KjListWithIconsExample: 'list',
-  KjMenubarDisabledItemExample: 'menubar',
-  KjMenubarExample: 'menubar',
-  KjMenubarWithShortcutsExample: 'menubar',
-  KjMenubarWithSubmenuExample: 'menubar',
-  KjNumberInputCurrencyExample: 'number-input',
-  KjNumberInputDecimalExample: 'number-input',
-  KjNumberInputExample: 'number-input',
-  KjNumberInputMinMaxExample: 'number-input',
-  KjNumberInputWithStepperExample: 'number-input',
-  KjOverlayBadgeDescribedExample: 'overlay-badge',
-  KjOverlayBadgeDotExample: 'overlay-badge',
-  KjOverlayBadgeExample: 'overlay-badge',
-  KjOverlayBadgeOnAvatarExample: 'overlay-badge',
-  KjOverlayBadgePositionsExample: 'overlay-badge',
-  KjPaginationBoundariesExample: 'pagination',
-  KjPaginationCompactExample: 'pagination',
-  KjPaginationExample: 'pagination',
-  KjPaginationLargeExample: 'pagination',
-  KjPaginationWithInfoExample: 'pagination',
-  KjPasswordInputExample: 'password-input',
-  KjPasswordInputStrengthExample: 'password-input',
-  KjPasswordInputToggleExample: 'password-input',
-  KjPasswordInputWithRulesExample: 'password-input',
-  KjPopoverCancellableExample: 'popover',
-  KjPopoverExample: 'popover',
-  KjPopoverModalExample: 'popover',
-  KjPopoverSidesExample: 'popover',
-  KjPopoverWithFormExample: 'popover',
-  KjProgressBarExample: 'progress-bar',
-  KjProgressBarIndeterminateExample: 'progress-bar',
-  KjProgressBarSizesExample: 'progress-bar',
-  KjProgressBarVariantsExample: 'progress-bar',
-  KjProgressBarWithLabelExample: 'progress-bar',
-  KjRadioDefaultExample: 'radio',
-  KjRadioDisabledExample: 'radio',
-  KjRadioGroupExample: 'radio',
-  KjRadioInlineExample: 'radio',
-  KjSelectDefaultExample: 'select',
-  KjSelectDisabledExample: 'select',
-  KjSelectGroupedExample: 'select',
-  KjSelectPlaceholderExample: 'select',
-  KjSkeletonAnimationsExample: 'skeleton',
-  KjSkeletonCardExample: 'skeleton',
-  KjSkeletonExample: 'skeleton',
-  KjSkeletonShapesExample: 'skeleton',
-  KjSliderExample: 'slider',
-  KjSliderFormattedExample: 'slider',
-  KjSliderRangeExample: 'slider',
-  KjSliderVerticalExample: 'slider',
-  KjSliderWithMarksExample: 'slider',
-  KjSpeedDialDirectionsExample: 'speed-dial',
-  KjSpeedDialDisabledExample: 'speed-dial',
-  KjSpeedDialExample: 'speed-dial',
-  KjSpeedDialUsageExample: 'speed-dial',
-  KjSpeedDialWithTooltipsExample: 'speed-dial',
-  KjSpinnerAnimationsExample: 'spinner',
-  KjSpinnerExample: 'spinner',
-  KjSpinnerInButtonExample: 'spinner',
-  KjSpinnerSizesExample: 'spinner',
-  KjSpinnerUsageExample: 'spinner',
-  KjSpinnerVariantsExample: 'spinner',
-  KjStepperExample: 'stepper',
-  KjStepperNonLinearExample: 'stepper',
-  KjStepperOptionalStepExample: 'stepper',
-  KjStepperUsageExample: 'stepper',
-  KjStepperVerticalExample: 'stepper',
-  KjStepperWithErrorExample: 'stepper',
-  KjTableColumnPinningExample: 'table',
-  KjTableColumnResizeExample: 'table',
-  KjTableColumnVisibilityExample: 'table',
-  KjTableDensityExample: 'table',
-  KjTableEditableExample: 'table',
-  KjTableEmptyAndErrorExample: 'table',
-  KjTableExample: 'table',
-  KjTableExportExample: 'table',
-  KjTableFilterableExample: 'table',
-  KjTableGroupingExample: 'table',
-  KjTableKeyboardExample: 'table',
-  KjTableMasterDetailExample: 'table',
-  KjTablePersistenceExample: 'table',
-  KjTablePlayground: 'table',
-  KjTableRowPinningExample: 'table',
-  KjTableSelectionExample: 'table',
-  KjTableServerModeExample: 'table',
-  KjTableSortableExample: 'table',
-  KjTableThemingExample: 'table',
-  KjTableUsageExample: 'table',
-  KjTableVirtualizedExample: 'table',
-  KjTabsControlledExample: 'tabs',
-  KjTabsDisabledExample: 'tabs',
-  KjTabsExample: 'tabs',
-  KjTabsManualActivationExample: 'tabs',
-  KjTabsUsageExample: 'tabs',
-  KjTabsVerticalExample: 'tabs',
-  KjTagExample: 'tag',
-  KjTagListExample: 'tag',
-  KjTagRemovableExample: 'tag',
-  KjTagSelectableExample: 'tag',
-  KjTagSizesExample: 'tag',
-  KjTagUsageExample: 'tag',
-  KjTagVariantsExample: 'tag',
-  KjTextareaAutoresizeExample: 'textarea',
-  KjTextareaCharacterCountExample: 'textarea',
-  KjTextareaExample: 'textarea',
-  KjTextareaNoResizeExample: 'textarea',
-  KjTextareaUsageExample: 'textarea',
-  KjTextareaWithFieldExample: 'textarea',
-  KjTimePicker12HourExample: 'time-picker',
-  KjTimePickerExample: 'time-picker',
-  KjTimePickerFormattedExample: 'time-picker',
-  KjTimePickerRangeExample: 'time-picker',
-  KjTimePickerUsageExample: 'time-picker',
-  KjTimePickerWithSecondsExample: 'time-picker',
-  KjToastDefaultExample: 'toast',
-  KjToastDismissibleExample: 'toast',
-  KjToastUsageExample: 'toast',
-  KjToastVariantsExample: 'toast',
-  KjToastWithActionExample: 'toast',
-  KjToggleCheckedExample: 'toggle',
-  KjToggleDefaultExample: 'toggle',
-  KjToggleDisabledExample: 'toggle',
-  KjToggleUsageExample: 'toggle',
-  KjToggleWithLabelExample: 'toggle',
-  KjTooltipDelaysExample: 'tooltip',
-  KjTooltipDisabledExample: 'tooltip',
-  KjTooltipExample: 'tooltip',
-  KjTooltipGroupExample: 'tooltip',
-  KjTooltipRichExample: 'tooltip',
-  KjTooltipSidesExample: 'tooltip',
-  KjTooltipUsageExample: 'tooltip',
-  KjTreeSelectDisabledExample: 'tree-select',
-  KjTreeSelectExample: 'tree-select',
-  KjTreeSelectExpandedExample: 'tree-select',
-  KjTreeSelectFieldExample: 'tree-select',
-  KjTreeSelectMultiExample: 'tree-select',
-  KjTreeSelectUsageExample: 'tree-select',
-  KjTypographyBlockquoteExample: 'typography',
-  KjTypographyCodeExample: 'typography',
-  KjTypographyExample: 'typography',
-  KjTypographyLeadExample: 'typography',
-  KjTypographyMutedExample: 'typography',
-  KjTypographyTruncateExample: 'typography',
-  KjTypographyUsageExample: 'typography',
-};

package/src/field/_examples/field.disabled.example.ts

@@ -1,49 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAriaDescribedBy } from '@kouji-ui/core';
-import { KjFieldComponent, KjFieldHelpComponent, KjFieldLabelComponent } from '../field';
-
-/**
- * Disabled field. The wrapper dims the whole row and forwards the disabled
- * state to the inner control.
- */
-@Component({
-  selector: 'kj-field-disabled-example',
-  standalone: true,
-  imports: [KjFieldComponent, KjFieldLabelComponent, KjFieldHelpComponent, KjAriaDescribedBy],
-  styles: [
-    `
-      :host {
-        display: block;
-        max-width: 400px;
-      }
-      .kj-input {
-        color: var(--kj-fg-default);
-        border: var(--kj-border) solid var(--kj-border-default);
-        border-radius: var(--kj-radius-field);
-        padding: var(--kj-space-sm) var(--kj-space-md);
-        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
-        width: 100%;
-      }
-      .kj-input:disabled {
-        cursor: not-allowed;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-field #f="kjField" [kjDisabled]="true">
-      <kj-field-label>Username</kj-field-label>
-      <input
-        kjAriaDescribedBy
-        class="kj-input"
-        type="text"
-        value="ada.lovelace"
-        [id]="f.controlId()"
-        [disabled]="f.disabled()"
-        [kjDescribedBy]="$any(f.describedByIds())"
-      />
-      <kj-field-help>Contact support to change your username.</kj-field-help>
-    </kj-field>
-  `,
-})
-export class KjFieldDisabledExample {}

package/src/field/_examples/field.example.ts

@@ -1,51 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAriaDescribedBy } from '@kouji-ui/core';
-import { KjFieldComponent, KjFieldHelpComponent, KjFieldLabelComponent } from '../field';
-
-/**
- * Default usage example for `kj-field` — label + input + help text.
- * The help id is auto-wired into the input's `aria-describedby` via the
- * `kjField` template ref's `describedByIds` signal.
- */
-@Component({
-  selector: 'kj-field-default-example',
-  standalone: true,
-  imports: [KjFieldComponent, KjFieldLabelComponent, KjFieldHelpComponent, KjAriaDescribedBy],
-  styles: [
-    `
-      :host {
-        display: block;
-        max-width: 400px;
-      }
-      .kj-input {
-        color: var(--kj-fg-default);
-        border: var(--kj-border) solid var(--kj-border-default);
-        border-radius: var(--kj-radius-field);
-        padding: var(--kj-space-sm) var(--kj-space-md);
-        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
-        width: 100%;
-      }
-      .kj-input:focus-visible {
-        outline: 2px solid var(--kj-bg-primary);
-        outline-offset: 2px;
-        border-color: var(--kj-bg-primary);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-field #f="kjField">
-      <kj-field-label>Email</kj-field-label>
-      <input
-        kjAriaDescribedBy
-        class="kj-input"
-        type="email"
-        placeholder="you@example.com"
-        [id]="f.controlId()"
-        [kjDescribedBy]="$any(f.describedByIds())"
-      />
-      <kj-field-help>We'll never share your email.</kj-field-help>
-    </kj-field>
-  `,
-})
-export class KjFieldExample {}

package/src/field/_examples/field.required.example.ts

@@ -1,46 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAriaDescribedBy } from '@kouji-ui/core';
-import { KjFieldComponent, KjFieldHelpComponent, KjFieldLabelComponent } from '../field';
-
-/**
- * Required field. Adds the visual `*` next to the label via `data-required`
- * and reflects `aria-required` on the inner input.
- */
-@Component({
-  selector: 'kj-field-required-example',
-  standalone: true,
-  imports: [KjFieldComponent, KjFieldLabelComponent, KjFieldHelpComponent, KjAriaDescribedBy],
-  styles: [
-    `
-      :host {
-        display: block;
-        max-width: 400px;
-      }
-      .kj-input {
-        color: var(--kj-fg-default);
-        border: var(--kj-border) solid var(--kj-border-default);
-        border-radius: var(--kj-radius-field);
-        padding: var(--kj-space-sm) var(--kj-space-md);
-        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
-        width: 100%;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-field #f="kjField" [kjRequired]="true">
-      <kj-field-label>Full name</kj-field-label>
-      <input
-        kjAriaDescribedBy
-        class="kj-input"
-        type="text"
-        placeholder="Ada Lovelace"
-        [id]="f.controlId()"
-        [attr.aria-required]="f.required() ? 'true' : null"
-        [kjDescribedBy]="$any(f.describedByIds())"
-      />
-      <kj-field-help>As it appears on your ID.</kj-field-help>
-    </kj-field>
-  `,
-})
-export class KjFieldRequiredExample {}

package/src/field/_examples/field.with-error.example.ts

@@ -1,73 +0,0 @@
-import { Component, computed, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjAriaDescribedBy } from '@kouji-ui/core';
-import {
-  KjFieldComponent,
-  KjFieldErrorComponent,
-  KjFieldHelpComponent,
-  KjFieldLabelComponent,
-} from '../field';
-
-/**
- * `kj-field` showing an error message. The error registers its id with the
- * field; when `kjInvalid` is true the field swaps the help-id for the
- * error-id in the inner input's `aria-describedby` and toggles the help /
- * error visibility.
- */
-@Component({
-  selector: 'kj-field-with-error-example',
-  standalone: true,
-  imports: [
-    KjFieldComponent,
-    KjFieldLabelComponent,
-    KjFieldHelpComponent,
-    KjFieldErrorComponent,
-    KjAriaDescribedBy,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-        max-width: 400px;
-      }
-      .kj-input {
-        color: var(--kj-fg-default);
-        border: var(--kj-border) solid var(--kj-border-default);
-        border-radius: var(--kj-radius-field);
-        padding: var(--kj-space-sm) var(--kj-space-md);
-        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
-        width: 100%;
-      }
-      .kj-input[aria-invalid='true'] {
-        border-color: var(--kj-fg-danger);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-field #f="kjField" [kjInvalid]="invalid()">
-      <kj-field-label>Email</kj-field-label>
-      <input
-        kjAriaDescribedBy
-        class="kj-input"
-        type="email"
-        [id]="f.controlId()"
-        [value]="value()"
-        [attr.aria-invalid]="invalid() ? 'true' : null"
-        [kjDescribedBy]="$any(f.describedByIds())"
-        (input)="onInput($event)"
-      />
-      <kj-field-help>Format: name@example.com</kj-field-help>
-      <kj-field-error>Please enter a valid email address.</kj-field-error>
-    </kj-field>
-  `,
-})
-export class KjFieldWithErrorExample {
-  readonly value = signal('not-an-email');
-  // Derive invalid from the value — a real form would use FormControl +
-  // Validators; this keeps the example dependency-free.
-  readonly invalid = computed(() => !this.value().includes('@'));
-
-  protected onInput(e: Event): void {
-    this.value.set((e.target as HTMLInputElement).value);
-  }
-}