@ojiepermana/angular 22.0.1 → 22.0.29

package/component/menubar/README.md

@@ -1,269 +0,0 @@
-# Menubar
-
-Persistent desktop-style command strip with horizontal roving focus for top-level triggers and explicit projected menu content.
-
-This Angular implementation follows the shadcn Menubar information architecture while intentionally reusing the existing dropdown-menu content primitives for rows, checkbox items, radio groups, labels, shortcuts, and nested submenu triggers.
-
-## Import
-
-```ts
-import {
-  MenubarComponent,
-  MenubarContentDirective,
-  MenubarMenuComponent,
-  MenubarTriggerDirective,
-} from '@ojiepermana/angular/component/menubar';
-import {
-  MenuCheckboxItemComponent,
-  MenuContentDirective,
-  MenuGroupComponent,
-  MenuItemComponent,
-  MenuLabelComponent,
-  MenuRadioGroupComponent,
-  MenuRadioItemComponent,
-  MenuSeparatorComponent,
-  MenuShortcutComponent,
-  MenuSurfaceComponent,
-  MenuTriggerDirective,
-} from '@ojiepermana/angular/component/dropdown-menu';
-```
-
-## Structure
-
-```text
-ui-menubar
-├── ui-menubar-menu
-│   ├── button[uiMenubarTrigger]
-│   └── ng-template[uiMenubarContent]
-│       └── ui-menu-surface
-│           ├── ui-menu-group
-│           │   ├── button[ui-menu-item]
-│           │   └── button[ui-menu-item][uiMenuTrigger]
-│           │       └── ng-template[uiMenuContent]
-│           │           └── ui-menu-surface
-│           ├── ui-menu-separator
-│           ├── button[ui-menu-checkbox-item]
-│           └── ui-menu-radio-group
-│               └── button[ui-menu-radio-item]
-└── ui-menubar-menu
-    ├── button[uiMenubarTrigger]
-    └── ng-template[uiMenubarContent]
-```
-
-## Basic usage
-
-```html
-<ui-menubar>
-  <ui-menubar-menu>
-    <button type="button" [uiMenubarTrigger]="fileMenu">File</button>
-    <ng-template uiMenubarContent #fileMenu="uiMenubarContent">
-      <ui-menu-surface class="w-56">
-        <ui-menu-group>
-          <button ui-menu-item type="button">
-            New Tab
-            <span ui-menu-shortcut>⌘T</span>
-          </button>
-          <button ui-menu-item type="button" [uiMenuTrigger]="shareMenu" side="right" align="start">
-            Share
-            <span class="ml-auto text-xs text-muted-foreground">›</span>
-          </button>
-        </ui-menu-group>
-      </ui-menu-surface>
-    </ng-template>
-  </ui-menubar-menu>
-</ui-menubar>
-```
-
-## Common patterns
-
-### Basic command strip
-
-Use one `ui-menubar-menu` per top-level trigger. The root owns horizontal roving focus, so only one trigger participates in tab order at a time.
-
-```html
-<ui-menubar>
-  <ui-menubar-menu>
-    <button type="button" [uiMenubarTrigger]="basicFileMenu">File</button>
-    <ng-template uiMenubarContent #basicFileMenu="uiMenubarContent">
-      <ui-menu-surface class="w-48">
-        <button ui-menu-item type="button">New Tab</button>
-        <button ui-menu-item type="button">Open Recent</button>
-        <button ui-menu-item type="button" [disabled]="true">Import from iCloud</button>
-      </ui-menu-surface>
-    </ng-template>
-  </ui-menubar-menu>
-</ui-menubar>
-```
-
-### Checkbox and radio rows
-
-The top-level strip stays on `menubar`, while toggleable content rows remain on the dropdown-menu primitives that already own those semantics.
-
-```ts
-const showSidebar = signal(true);
-const editorTheme = signal<'light' | 'dark' | 'system'>('system');
-```
-
-```html
-<ui-menubar>
-  <ui-menubar-menu>
-    <button type="button" [uiMenubarTrigger]="viewMenu">View</button>
-    <ng-template uiMenubarContent #viewMenu="uiMenubarContent">
-      <ui-menu-surface class="w-56">
-        <ui-menu-group>
-          <button ui-menu-checkbox-item type="button" [(checked)]="showSidebar">Sidebar</button>
-        </ui-menu-group>
-        <ui-menu-separator />
-        <ui-menu-label [inset]="true">Theme</ui-menu-label>
-        <ui-menu-radio-group [(value)]="editorTheme">
-          <button ui-menu-radio-item type="button" value="light">Light</button>
-          <button ui-menu-radio-item type="button" value="dark">Dark</button>
-          <button ui-menu-radio-item type="button" value="system">System</button>
-        </ui-menu-radio-group>
-      </ui-menu-surface>
-    </ng-template>
-  </ui-menubar-menu>
-</ui-menubar>
-```
-
-### Submenus
-
-Map shadcn `MenubarSub` to `[uiMenuTrigger]` on a `button[ui-menu-item]`. This keeps overlay ownership explicit and lets the shared menu trigger keep submenu keyboard behavior in one place.
-
-```html
-<ng-template uiMenuContent #findMenu="uiMenuContent">
-  <ui-menu-surface class="w-44">
-    <button ui-menu-item type="button">Search the web</button>
-    <button ui-menu-item type="button">Find...</button>
-    <button ui-menu-item type="button">Find Next</button>
-  </ui-menu-surface>
-</ng-template>
-
-<ui-menubar>
-  <ui-menubar-menu>
-    <button type="button" [uiMenubarTrigger]="editMenu">Edit</button>
-    <ng-template uiMenubarContent #editMenu="uiMenubarContent">
-      <ui-menu-surface class="w-56">
-        <button ui-menu-item type="button" [uiMenuTrigger]="findMenu" side="right" align="start">
-          Find
-          <span class="ml-auto text-xs text-muted-foreground">›</span>
-        </button>
-      </ui-menu-surface>
-    </ng-template>
-  </ui-menubar-menu>
-</ui-menubar>
-```
-
-### Icons and shortcuts
-
-Project inline icons and shortcut hints directly into the row content.
-
-```html
-<ui-menu-surface class="w-56">
-  <button ui-menu-item type="button">
-    <ui-nav-icon name="description" [size]="16" class="text-muted-foreground" />
-    New File
-    <span ui-menu-shortcut>⌘N</span>
-  </button>
-  <button ui-menu-item type="button" variant="destructive">
-    <ui-nav-icon name="delete" [size]="16" class="text-current" />
-    Delete
-  </button>
-</ui-menu-surface>
-```
-
-### RTL
-
-The root menubar respects computed direction for left and right movement. Apply `dir="rtl"` directly to the projected menu surface when the content itself should render right-to-left.
-
-```html
-<section dir="rtl" lang="ar" class="text-right">
-  <ui-menubar>
-    <ui-menubar-menu>
-      <button type="button" [uiMenubarTrigger]="rtlFileMenu">ملف</button>
-      <ng-template uiMenubarContent #rtlFileMenu="uiMenubarContent">
-        <ui-menu-surface dir="rtl" lang="ar" class="w-56 text-right">
-          <button ui-menu-item type="button">تبويب جديد <span ui-menu-shortcut>⌘T</span></button>
-          <button ui-menu-item type="button">نافذة جديدة <span ui-menu-shortcut>⌘N</span></button>
-        </ui-menu-surface>
-      </ng-template>
-    </ui-menubar-menu>
-  </ui-menubar>
-</section>
-```
-
-## API Reference
-
-### `MenubarComponent`
-
-| Input   | Type      | Default |
-| ------- | --------- | ------- |
-| `class` | `string`  | `''`    |
-| `loop`  | `boolean` | `true`  |
-
-Role: `menubar`.
-
-### `MenubarMenuComponent`
-
-Structural wrapper for one top-level trigger plus its `uiMenubarContent` template.
-
-### `MenubarTriggerDirective`
-
-| Input              | Type                           | Default   |
-| ------------------ | ------------------------------ | --------- |
-| `uiMenubarTrigger` | `MenubarContentDirective`      | required  |
-| `align`            | `'start' \| 'center' \| 'end'` | `'start'` |
-| `disabled`         | `boolean`                      | `false`   |
-
-Output: `openedChange: boolean`.
-
-Methods: `open()`, `close()`, `toggle()`, `focus()`.
-
-### `MenubarContentDirective`
-
-Projected overlay template for a top-level menubar trigger.
-
-### Dropdown-menu parts reused in content
-
-Import these from `@ojiepermana/angular/component/dropdown-menu`:
-
-- `MenuSurfaceComponent`
-- `MenuItemComponent`
-- `MenuCheckboxItemComponent`
-- `MenuRadioGroupComponent`
-- `MenuRadioItemComponent`
-- `MenuLabelComponent`
-- `MenuSeparatorComponent`
-- `MenuShortcutComponent`
-- `MenuTriggerDirective`
-- `MenuContentDirective`
-
-## Styling and theming
-
-- Pass `class` to `ui-menubar` when the root needs width, border, or layout changes.
-- Style content surfaces on `ui-menu-surface`, not on the root menubar strip.
-- Use shared theme tokens such as `border-border`, `bg-background`, `bg-accent`, and `text-muted-foreground` for visual consistency.
-
-## Accessibility
-
-- Top-level triggers expose `role="menuitem"`, `aria-haspopup="menu"`, and `aria-expanded`.
-- The root menubar keeps one active tab stop, matching desktop menubar behavior.
-- Projected content rows keep the accessible menu, checkbox, and radio roles from dropdown-menu.
-- Disabled rows stay visible, announce their disabled state, and are skipped by roving focus.
-
-## Keyboard interactions
-
-- `ArrowLeft` and `ArrowRight` move across top-level triggers.
-- `Home` and `End` jump to the first and last top-level trigger.
-- `ArrowDown` opens the active menu and focuses its first enabled item.
-- `ArrowRight` opens right-side submenu rows built with `[uiMenuTrigger] side="right"`.
-
-## Angular Notes
-
-- Menubar is intentionally split across two entrypoints: `menubar` for the persistent strip, `dropdown-menu` for the shared content rows.
-- This avoids duplicating the same menu item semantics in two packages while still exposing a dedicated shadcn-style top-level component.
-- Use native buttons for triggers so keyboard activation and disabled behavior stay predictable.
-
-## Source parity
-
-This slice keeps the shadcn Menubar command patterns, examples, keyboard expectations, and RTL guidance while making Angular overlay ownership explicit through `uiMenubarContent` and the existing dropdown-menu primitives.

package/component/menubar/package.json

@@ -1,4 +0,0 @@
-{
-  "module": "../../fesm2022/ojiepermana-angular-component-menubar.mjs",
-  "typings": "../../types/ojiepermana-angular-component-menubar.d.ts"
-}

package/component/native-select/README.md

@@ -1,176 +0,0 @@
-# Native Select
-
-Styled native HTML select for browser-native dropdown behavior, mobile-friendly pickers, and lightweight form integrations.
-
-Use Native Select when you want the platform select interaction rather than the custom overlay behavior of `ui-select`.
-
-## Import
-
-```ts
-import {
-  NativeSelectComponent,
-  NativeSelectOptGroupDirective,
-  NativeSelectOptionDirective,
-} from '@ojiepermana/angular/component/native-select';
-import {
-  FormControlDirective,
-  FormDescriptionComponent,
-  FormFieldComponent,
-  FormLabelComponent,
-  FormMessageComponent,
-} from '@ojiepermana/angular/component/form';
-```
-
-## Composition
-
-The Angular structure keeps the native `<select>`, `<option>`, and `<optgroup>` elements in the DOM while adding shadcn-style design tokens.
-
-```text
-select[ui-native-select]
-├── option[ui-native-select-option]
-├── option[ui-native-select-option]
-└── optgroup[ui-native-select-opt-group]
-    ├── option[ui-native-select-option]
-    └── option[ui-native-select-option]
-```
-
-## Basic usage
-
-Use the directive on a real `<select>` so Angular forms continue to work through the native control.
-
-```html
-<label ui-label for="status-select">Status</label>
-<select id="status-select" ui-native-select [(ngModel)]="status">
-  <option ui-native-select-option value="">Select status</option>
-  <option ui-native-select-option value="todo">Todo</option>
-  <option ui-native-select-option value="in-progress">In progress</option>
-  <option ui-native-select-option value="done">Done</option>
-</select>
-```
-
-## Common patterns
-
-### Grouped options
-
-Use `optgroup[ui-native-select-opt-group]` when the options belong to clear categories.
-
-```html
-<select ui-native-select [(ngModel)]="department">
-  <option ui-native-select-option value="">Select department</option>
-
-  <optgroup ui-native-select-opt-group label="Engineering">
-    <option ui-native-select-option value="frontend">Frontend</option>
-    <option ui-native-select-option value="backend">Backend</option>
-  </optgroup>
-
-  <optgroup ui-native-select-opt-group label="Operations">
-    <option ui-native-select-option value="support">Support</option>
-    <option ui-native-select-option value="product">Product</option>
-  </optgroup>
-</select>
-```
-
-### Form-field integration
-
-When you want label, helper text, and invalid state wiring similar to the newer shadcn `Field` examples, compose the native select with the existing form primitives.
-
-```html
-<ui-form-field>
-  <ui-form-label>Timezone</ui-form-label>
-  <select ui-native-select uiFormControl [(ngModel)]="timezone">
-    <option ui-native-select-option value="">Select timezone</option>
-    <option ui-native-select-option value="utc">UTC</option>
-    <option ui-native-select-option value="gmt-plus-7">GMT+7</option>
-  </select>
-  <ui-form-description>Used for scheduling and invoice timestamps.</ui-form-description>
-</ui-form-field>
-```
-
-### Invalid state
-
-Forward `aria-invalid="true"` when validation is managed outside Angular forms, or let `uiFormControl` mirror the state from `NgControl`.
-
-```html
-<ui-form-field invalid>
-  <ui-form-label>Department</ui-form-label>
-  <select ui-native-select uiFormControl aria-invalid="true">
-    <option ui-native-select-option value="">Choose department</option>
-    <option ui-native-select-option value="engineering">Engineering</option>
-    <option ui-native-select-option value="sales">Sales</option>
-  </select>
-  <ui-form-message>Select a department before continuing.</ui-form-message>
-</ui-form-field>
-```
-
-### Disabled and RTL
-
-Disabled state stays fully native, and right-to-left layouts only need a wrapping `dir="rtl"` container or a direct `dir` attribute on the select.
-
-```html
-<section dir="rtl" lang="ar" class="max-w-sm text-right">
-  <select ui-native-select disabled>
-    <option ui-native-select-option value="">اختر الحالة</option>
-    <option ui-native-select-option value="todo">مهام</option>
-    <option ui-native-select-option value="done">منجز</option>
-  </select>
-</section>
-```
-
-## API reference
-
-### `NativeSelectComponent`
-
-| Input   | Type     | Default |
-| ------- | -------- | ------- |
-| `class` | `string` | `''`    |
-
-Public methods:
-
-- `focus()` focuses the underlying native select element.
-
-All native `<select>` attributes and Angular form bindings such as `name`, `required`, `disabled`, `multiple`, `[(ngModel)]`, and `formControlName` pass through unchanged.
-
-### `NativeSelectOptionDirective`
-
-| Input   | Type     | Default |
-| ------- | -------- | ------- |
-| `class` | `string` | `''`    |
-
-All native `<option>` attributes such as `value`, `disabled`, and `selected` pass through unchanged.
-
-### `NativeSelectOptGroupDirective`
-
-| Input   | Type     | Default |
-| ------- | -------- | ------- |
-| `class` | `string` | `''`    |
-
-All native `<optgroup>` attributes such as `label` and `disabled` pass through unchanged.
-
-## Styling and theming
-
-The control uses the shared border, ring, foreground, muted, and destructive theme tokens so it matches the rest of the library. The chevron is decorative and hidden automatically for multi-select or listbox-style `size` configurations.
-
-Pass `class` when a layout needs custom width, margin, or grid placement utilities around the native select.
-
-## Accessibility
-
-- Prefer a visible label or another accessible name source for every select.
-- Use grouped options only when the categories help people scan the choices faster.
-- Keep the placeholder option descriptive when the empty value is a valid initial state.
-- `uiFormControl` can synchronize `id`, `aria-describedby`, and invalid state when the select lives inside `ui-form-field`.
-
-## Keyboard interactions
-
-- Native browser select keyboard interactions stay intact.
-- Closed single selects open and cycle according to the platform behavior.
-- Multi-select and `size` listbox modes keep the browser's built-in selection model.
-
-## Angular notes
-
-- `select[ui-native-select]` works with template-driven and reactive forms without a custom value accessor.
-- The directive is the Angular mapping for upstream `NativeSelect`; the local API intentionally keeps the real HTML elements instead of wrapping them in another component tree.
-- Use `ui-select` when you need the Material-backed custom panel rather than the native browser picker.
-
-## Source parity
-
-This Angular entrypoint follows the shadcn Native Select information architecture while staying honest about local differences: the runtime surface is a styled native `<select>`, and the upstream `Field` examples map to the existing form primitives instead of a new field package.

package/component/native-select/package.json

@@ -1,4 +0,0 @@
-{
-  "module": "../../fesm2022/ojiepermana-angular-component-native-select.mjs",
-  "typings": "../../types/ojiepermana-angular-component-native-select.d.ts"
-}

package/component/navigation-menu/README.md

@@ -1,160 +0,0 @@
-# Navigation Menu
-
-Horizontal website navigation primitive with top-level triggers, direct links, and explicit Angular content templates.
-
-This implementation follows the shadcn Navigation Menu information architecture while keeping the panel layout owned by the consuming template through `ng-template[uiNavigationMenuContent]`.
-
-## Import
-
-```ts
-import {
-  NavigationMenuComponent,
-  NavigationMenuContentDirective,
-  NavigationMenuItemComponent,
-  NavigationMenuLinkDirective,
-  NavigationMenuListComponent,
-  NavigationMenuTriggerDirective,
-} from '@ojiepermana/angular/component/navigation-menu';
-```
-
-## Composition
-
-```text
-ui-navigation-menu
-└── ui-navigation-menu-list
-    ├── ui-navigation-menu-item
-    │   ├── button[uiNavigationMenuTrigger]
-    │   └── ng-template[uiNavigationMenuContent]
-    │       └── custom panel markup with a[uiNavigationMenuLink]
-    └── ui-navigation-menu-item
-        └── a[uiNavigationMenuLink] variant="trigger"
-```
-
-## Basic usage
-
-```html
-<ui-navigation-menu ariaLabel="Primary documentation navigation">
-  <ui-navigation-menu-list>
-    <ui-navigation-menu-item>
-      <button type="button" [uiNavigationMenuTrigger]="gettingStartedMenu">Getting started</button>
-      <ng-template uiNavigationMenuContent #gettingStartedMenu="uiNavigationMenuContent">
-        <div class="w-[540px] rounded-xl border border-border bg-popover p-4 shadow-md">
-          <div class="grid gap-3 md:grid-cols-[1.05fr_1.25fr]">
-            <a
-              uiNavigationMenuLink
-              href="/docs/introduction"
-              class="flex min-h-[220px] flex-col justify-end rounded-lg bg-gradient-to-b from-muted/80 to-muted/40 p-6">
-              <span class="text-sm font-semibold text-foreground">Acme UI</span>
-              <p class="text-sm leading-5 text-muted-foreground">
-                Build consistent interfaces with Angular-first primitives and theme tokens.
-              </p>
-            </a>
-            <div class="grid gap-2">
-              <a uiNavigationMenuLink href="/docs/getting-started/installation">
-                <div class="text-sm font-medium">Installation</div>
-                <p class="text-sm leading-5 text-muted-foreground">Set up the package, providers, and theme layer.</p>
-              </a>
-              <a uiNavigationMenuLink href="/docs/components/shadcn/navigation-menu">
-                <div class="text-sm font-medium">Navigation Menu docs</div>
-                <p class="text-sm leading-5 text-muted-foreground">
-                  Learn the Angular composition and API surface of this entrypoint.
-                </p>
-              </a>
-            </div>
-          </div>
-        </div>
-      </ng-template>
-    </ui-navigation-menu-item>
-
-    <ui-navigation-menu-item>
-      <a uiNavigationMenuLink variant="trigger" href="/docs/introduction">Docs</a>
-    </ui-navigation-menu-item>
-  </ui-navigation-menu-list>
-</ui-navigation-menu>
-```
-
-## Common patterns
-
-### Dropdown groups
-
-Use `uiNavigationMenuTrigger` for top-level items that should open a content panel. The panel layout is just template markup, so you can mix hero cards, compact lists, grids, and external links without a rigid viewport component.
-
-### Direct links
-
-Use `a[uiNavigationMenuLink] variant="trigger"` when a top-level item should navigate immediately instead of opening a panel.
-
-### RTL
-
-Wrap the root in `dir="rtl"` when the page runs in a right-to-left language. The root uses computed direction to reverse left and right keyboard movement.
-
-## API reference
-
-### `NavigationMenuComponent`
-
-| Input       | Type      | Default             |
-| ----------- | --------- | ------------------- |
-| `class`     | `string`  | `''`                |
-| `ariaLabel` | `string`  | `'Main navigation'` |
-| `loop`      | `boolean` | `true`              |
-
-Role: `navigation`.
-
-### `NavigationMenuListComponent`
-
-Top-level row wrapper with `role="menubar"`.
-
-### `NavigationMenuItemComponent`
-
-Structural wrapper for one trigger or direct-link item.
-
-### `NavigationMenuTriggerDirective`
-
-| Input                     | Type                             | Default   |
-| ------------------------- | -------------------------------- | --------- |
-| `uiNavigationMenuTrigger` | `NavigationMenuContentDirective` | required  |
-| `align`                   | `'start' \| 'center' \| 'end'`   | `'start'` |
-| `class`                   | `string`                         | `''`      |
-| `disabled`                | `boolean`                        | `false`   |
-
-Output: `openedChange: boolean`.
-
-Methods: `open()`, `close()`, `toggle()`.
-
-### `NavigationMenuContentDirective`
-
-Template hook for dropdown panel markup.
-
-### `NavigationMenuLinkDirective`
-
-| Input      | Type                     | Default     |
-| ---------- | ------------------------ | ----------- |
-| `variant`  | `'trigger' \| 'content'` | `'content'` |
-| `class`    | `string`                 | `''`        |
-| `disabled` | `boolean`                | `false`     |
-
-Use the default content variant for panel cards and `variant="trigger"` for top-level direct links.
-
-## Styling and theming
-
-- Pass `class` to the root, list, item, trigger, or link primitives when the layout needs local adjustments.
-- Style panel width, grid, and card composition inside the `ng-template` block.
-- Use shared tokens such as `border-border`, `bg-popover`, and `text-muted-foreground` inside panel cards.
-
-## Accessibility
-
-- Set `ariaLabel` when the page contains more than one navigation landmark.
-- Use real anchors for destinations so browser and assistive-technology link semantics stay intact.
-- Keep panel cards concise and descriptive so trigger-to-content relationships stay understandable.
-
-## Keyboard interactions
-
-- `ArrowLeft` and `ArrowRight` move focus across the top-level items.
-- `Home` and `End` jump to the first and last top-level item.
-- `ArrowDown` opens the active trigger and moves focus into the first focusable panel item.
-- `Escape` closes the active panel and returns focus to the trigger.
-
-## Angular notes
-
-- The Angular surface uses `ng-template[uiNavigationMenuContent]` instead of a JSX-style child component so overlay ownership stays explicit.
-- There is no `asChild` prop. Compose anchors and buttons directly with the provided directives.
-- Use `variant="trigger"` on `uiNavigationMenuLink` when the top-level item should navigate immediately.

package/component/navigation-menu/package.json

@@ -1,4 +0,0 @@
-{
-  "module": "../../fesm2022/ojiepermana-angular-component-navigation-menu.mjs",
-  "typings": "../../types/ojiepermana-angular-component-navigation-menu.d.ts"
-}