@ojiepermana/angular-component 22.0.27

package/package.json

@@ -0,0 +1,291 @@
+{
+  "name": "@ojiepermana/angular-component",
+  "version": "22.0.27",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/edsis/angular.git"
+  },
+  "homepage": "https://github.com/edsis/angular#readme",
+  "bugs": {
+    "url": "https://github.com/edsis/angular/issues"
+  },
+  "peerDependencies": {
+    "@angular/cdk": ">=22.0.0",
+    "@angular/common": ">=22.0.0",
+    "@angular/core": ">=22.0.0",
+    "@angular/forms": ">=22.0.0",
+    "@angular/material": ">=22.0.0",
+    "@angular/platform-browser": ">=22.0.0",
+    "@angular/router": ">=22.0.0",
+    "rxjs": ">=7.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/material": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel": "^8.5.2",
+    "tailwind-merge": "^3.5.0",
+    "tslib": "^2.8.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ojiepermana-angular-component.mjs",
+  "typings": "types/ojiepermana-angular-component.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ojiepermana-angular-component.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component.mjs"
+    },
+    "./accordion": {
+      "types": "./types/ojiepermana-angular-component-accordion.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-accordion.mjs"
+    },
+    "./alert": {
+      "types": "./types/ojiepermana-angular-component-alert.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-alert.mjs"
+    },
+    "./alert-dialog": {
+      "types": "./types/ojiepermana-angular-component-alert-dialog.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-alert-dialog.mjs"
+    },
+    "./aspect-ratio": {
+      "types": "./types/ojiepermana-angular-component-aspect-ratio.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-aspect-ratio.mjs"
+    },
+    "./avatar": {
+      "types": "./types/ojiepermana-angular-component-avatar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-avatar.mjs"
+    },
+    "./badge": {
+      "types": "./types/ojiepermana-angular-component-badge.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-badge.mjs"
+    },
+    "./breadcrumb": {
+      "types": "./types/ojiepermana-angular-component-breadcrumb.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-breadcrumb.mjs"
+    },
+    "./button": {
+      "types": "./types/ojiepermana-angular-component-button.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-button.mjs"
+    },
+    "./button-group": {
+      "types": "./types/ojiepermana-angular-component-button-group.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-button-group.mjs"
+    },
+    "./calendar": {
+      "types": "./types/ojiepermana-angular-component-calendar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-calendar.mjs"
+    },
+    "./card": {
+      "types": "./types/ojiepermana-angular-component-card.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-card.mjs"
+    },
+    "./carousel": {
+      "types": "./types/ojiepermana-angular-component-carousel.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-carousel.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/ojiepermana-angular-component-checkbox.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-checkbox.mjs"
+    },
+    "./collapsible": {
+      "types": "./types/ojiepermana-angular-component-collapsible.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-collapsible.mjs"
+    },
+    "./combobox": {
+      "types": "./types/ojiepermana-angular-component-combobox.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-combobox.mjs"
+    },
+    "./command": {
+      "types": "./types/ojiepermana-angular-component-command.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-command.mjs"
+    },
+    "./composer": {
+      "types": "./types/ojiepermana-angular-component-composer.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-composer.mjs"
+    },
+    "./context-menu": {
+      "types": "./types/ojiepermana-angular-component-context-menu.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-context-menu.mjs"
+    },
+    "./date-picker": {
+      "types": "./types/ojiepermana-angular-component-date-picker.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-date-picker.mjs"
+    },
+    "./dialog": {
+      "types": "./types/ojiepermana-angular-component-dialog.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-dialog.mjs"
+    },
+    "./drawer": {
+      "types": "./types/ojiepermana-angular-component-drawer.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-drawer.mjs"
+    },
+    "./dropdown-menu": {
+      "types": "./types/ojiepermana-angular-component-dropdown-menu.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-dropdown-menu.mjs"
+    },
+    "./editor": {
+      "types": "./types/ojiepermana-angular-component-editor.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-editor.mjs"
+    },
+    "./empty": {
+      "types": "./types/ojiepermana-angular-component-empty.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-empty.mjs"
+    },
+    "./form": {
+      "types": "./types/ojiepermana-angular-component-form.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-form.mjs"
+    },
+    "./hover-card": {
+      "types": "./types/ojiepermana-angular-component-hover-card.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-hover-card.mjs"
+    },
+    "./icon": {
+      "types": "./types/ojiepermana-angular-component-icon.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-icon.mjs"
+    },
+    "./input": {
+      "types": "./types/ojiepermana-angular-component-input.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-input.mjs"
+    },
+    "./input-group": {
+      "types": "./types/ojiepermana-angular-component-input-group.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-input-group.mjs"
+    },
+    "./input-otp": {
+      "types": "./types/ojiepermana-angular-component-input-otp.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-input-otp.mjs"
+    },
+    "./item": {
+      "types": "./types/ojiepermana-angular-component-item.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-item.mjs"
+    },
+    "./kanban": {
+      "types": "./types/ojiepermana-angular-component-kanban.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-kanban.mjs"
+    },
+    "./kbd": {
+      "types": "./types/ojiepermana-angular-component-kbd.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-kbd.mjs"
+    },
+    "./label": {
+      "types": "./types/ojiepermana-angular-component-label.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-label.mjs"
+    },
+    "./menubar": {
+      "types": "./types/ojiepermana-angular-component-menubar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-menubar.mjs"
+    },
+    "./native-select": {
+      "types": "./types/ojiepermana-angular-component-native-select.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-native-select.mjs"
+    },
+    "./navigation-menu": {
+      "types": "./types/ojiepermana-angular-component-navigation-menu.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-navigation-menu.mjs"
+    },
+    "./pagination": {
+      "types": "./types/ojiepermana-angular-component-pagination.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-pagination.mjs"
+    },
+    "./pillbox": {
+      "types": "./types/ojiepermana-angular-component-pillbox.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-pillbox.mjs"
+    },
+    "./popover": {
+      "types": "./types/ojiepermana-angular-component-popover.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-popover.mjs"
+    },
+    "./progress": {
+      "types": "./types/ojiepermana-angular-component-progress.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-progress.mjs"
+    },
+    "./radio": {
+      "types": "./types/ojiepermana-angular-component-radio.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-radio.mjs"
+    },
+    "./resizable": {
+      "types": "./types/ojiepermana-angular-component-resizable.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-resizable.mjs"
+    },
+    "./scroll-area": {
+      "types": "./types/ojiepermana-angular-component-scroll-area.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-scroll-area.mjs"
+    },
+    "./select": {
+      "types": "./types/ojiepermana-angular-component-select.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-select.mjs"
+    },
+    "./separator": {
+      "types": "./types/ojiepermana-angular-component-separator.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-separator.mjs"
+    },
+    "./sheet": {
+      "types": "./types/ojiepermana-angular-component-sheet.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-sheet.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/ojiepermana-angular-component-skeleton.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-skeleton.mjs"
+    },
+    "./slider": {
+      "types": "./types/ojiepermana-angular-component-slider.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-slider.mjs"
+    },
+    "./spinner": {
+      "types": "./types/ojiepermana-angular-component-spinner.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-spinner.mjs"
+    },
+    "./switch": {
+      "types": "./types/ojiepermana-angular-component-switch.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-switch.mjs"
+    },
+    "./table": {
+      "types": "./types/ojiepermana-angular-component-table.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-table.mjs"
+    },
+    "./tabs": {
+      "types": "./types/ojiepermana-angular-component-tabs.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-tabs.mjs"
+    },
+    "./textarea": {
+      "types": "./types/ojiepermana-angular-component-textarea.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-textarea.mjs"
+    },
+    "./timeline": {
+      "types": "./types/ojiepermana-angular-component-timeline.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-timeline.mjs"
+    },
+    "./toast": {
+      "types": "./types/ojiepermana-angular-component-toast.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-toast.mjs"
+    },
+    "./toggle": {
+      "types": "./types/ojiepermana-angular-component-toggle.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-toggle.mjs"
+    },
+    "./toggle-group": {
+      "types": "./types/ojiepermana-angular-component-toggle-group.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-toggle-group.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/ojiepermana-angular-component-tooltip.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-tooltip.mjs"
+    },
+    "./utils": {
+      "types": "./types/ojiepermana-angular-component-utils.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-component-utils.mjs"
+    }
+  },
+  "type": "module"
+}

package/pagination/README.md

@@ -0,0 +1,144 @@
+# Pagination
+
+Compact page navigation with previous and next controls, windowed page numbers, optional icon-only mode, and localized labels.
+
+Use Pagination when a feature page needs to move through a paged API result, a dense table footer, or a navigable list of routes or guides.
+
+## Import
+
+```ts
+import { PaginationComponent } from '@ojiepermana/angular-component/pagination';
+```
+
+## Structure
+
+The Angular package intentionally wraps the shadcn multi-part composition in a single standalone primitive.
+
+```text
+Pagination
+├── previous button
+├── page buttons and ellipsis
+└── next button
+```
+
+## Basic usage
+
+Bind `[(page)]` to a signal and keep your collection, router state, or server request outside the primitive.
+
+```html
+<Pagination [(page)]="currentPage" [total]="totalPages" [siblingCount]="1" (pageChange)="load($event)" />
+```
+
+## Common patterns
+
+### Navigation data
+
+Keep the rendered collection in sync with the pager through `computed()`.
+
+```ts
+const navigationPage = signal(1);
+const pageSize = 4;
+
+const navigationItems = [
+  { title: 'Introduction', route: '/docs/introduction' },
+  { title: 'Accordion', route: '/ui/shadcn/accordion' },
+  { title: 'Button', route: '/ui/shadcn/button' },
+  { title: 'Input', route: '/ui/shadcn/input' },
+  // ...more items
+];
+
+const totalPages = Math.ceil(navigationItems.length / pageSize);
+const visibleItems = computed(() => {
+  const start = (navigationPage() - 1) * pageSize;
+  return navigationItems.slice(start, start + pageSize);
+});
+```
+
+### Icons only
+
+Hide page numbers and visible labels when the pager sits next to a dense table or feed footer.
+
+```html
+<Pagination
+  [(page)]="compactPage"
+  [total]="9"
+  [showPageNumbers]="false"
+  previousText=""
+  nextText=""
+  class="mx-0 w-auto" />
+```
+
+### RTL and translated labels
+
+Translate the previous and next text and provide a page formatter when locale-specific numerals should appear.
+
+```ts
+const arabicDigits = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
+const toArabicNumerals = (page: number): string =>
+  page
+    .toString()
+    .split('')
+    .map((digit) => arabicDigits[Number(digit)] ?? digit)
+    .join('');
+```
+
+```html
+<section dir="rtl" lang="ar" class="text-right">
+  <Pagination
+    [(page)]="rtlPage"
+    [total]="7"
+    previousText="السابق"
+    nextText="التالي"
+    previousAriaLabel="الانتقال إلى الصفحة السابقة"
+    nextAriaLabel="الانتقال إلى الصفحة التالية"
+    [formatPageLabel]="toArabicNumerals" />
+</section>
+```
+
+## API reference
+
+| Input               | Type                       | Default                   | Description                                                            |
+| ------------------- | -------------------------- | ------------------------- | ---------------------------------------------------------------------- |
+| `page` (model)      | `number`                   | `1`                       | Two-way bound current page.                                            |
+| `total`             | `number`                   | `1`                       | Total number of pages available.                                       |
+| `siblingCount`      | `number`                   | `1`                       | Page buttons shown on either side of the active page.                  |
+| `showPageNumbers`   | `boolean`                  | `true`                    | Hide numbered page buttons for compact previous and next only layouts. |
+| `previousText`      | `string`                   | `'Previous'`              | Visible previous label. Set to an empty string for icon-only mode.     |
+| `nextText`          | `string`                   | `'Next'`                  | Visible next label. Set to an empty string for icon-only mode.         |
+| `previousAriaLabel` | `string`                   | `'Go to previous page'`   | Accessible name for the previous button.                               |
+| `nextAriaLabel`     | `string`                   | `'Go to next page'`       | Accessible name for the next button.                                   |
+| `formatPageLabel`   | `(page: number) => string` | `page => page.toString()` | Formats the rendered page label.                                       |
+| `class`             | `string`                   | `''`                      | Extra container classes.                                               |
+
+| Output       | Payload  | Description                                          |
+| ------------ | -------- | ---------------------------------------------------- |
+| `pageChange` | `number` | Emits the next page number after a user interaction. |
+
+## Styling and theming
+
+Pagination reuses `buttonVariants`, so the previous and next controls plus numbered page buttons inherit the same shape, focus ring, and theme tokens as the Button primitive.
+
+Pass `class` to adjust width and alignment, for example `mx-0 w-auto` in a table footer or `justify-start` when the pager should align to the left edge of a card.
+
+## Accessibility
+
+- The root renders as `<nav role="navigation" aria-label="pagination">`.
+- The active page is marked with `aria-current="page"`.
+- Previous and next disable natively at the start and end of the available range.
+- Ellipses are `aria-hidden="true"`.
+- When visible text is removed for icon-only mode, keep meaningful aria labels on the previous and next buttons.
+
+## Keyboard interactions
+
+- Tab moves focus through the previous button, page buttons, and next button in DOM order.
+- Enter and Space activate the focused button through native button semantics.
+
+## Angular notes
+
+- Keep the paged collection outside the component and derive the visible slice with `computed()`.
+- Import `PaginationComponent` into the standalone feature component that renders the pager.
+- `showPageNumbers`, `previousText`, `nextText`, and `formatPageLabel` are deliberate Angular-specific conveniences that cover the upstream icon-only and RTL guidance without exposing React-style child parts.
+
+## Source parity
+
+shadcn documents Pagination as several composable parts such as `PaginationLink`, `PaginationPrevious`, and `PaginationNext`. This Angular implementation intentionally collapses that structure into one primitive so route-driven and data-driven pagination can be wired quickly while still matching the upstream previous, next, ellipsis, compact, and RTL behavior.

package/pillbox/README.md

@@ -0,0 +1,67 @@
+# Pillbox
+
+Multi-value selection primitives inspired by Flux Pillbox and implemented with local shadcn-style Angular patterns.
+
+## Import
+
+```ts
+import {
+  PillboxComponent,
+  PillboxOptionComponent,
+  PillboxOptionCreateComponent,
+  PillboxOptionEmptyComponent,
+  PillboxSelectedDirective,
+} from '@ojiepermana/angular-component/pillbox';
+```
+
+## Usage
+
+```html
+<Pillbox multiple placeholder="Choose tags..." [(ngModel)]="selectedTags">
+  <PillboxOption value="design">Design</PillboxOption>
+  <PillboxOption value="development">Development</PillboxOption>
+  <PillboxOption value="marketing">Marketing</PillboxOption>
+</Pillbox>
+```
+
+## Composition
+
+- `Pillbox` owns the trigger, selected pills, search state, option filtering, and form control integration.
+- `PillboxOption` projects the visible option content and stores the option value.
+- `ng-template[PillboxSelected]` customizes the rendered selected pill content for an option.
+- `PillboxOptionCreate` emits create requests when the search query is long enough and does not match an existing option.
+- `PillboxOptionEmpty` customizes empty and loading messages.
+
+## Inputs
+
+### PillboxComponent
+
+| Input               | Type                      | Default               | Description                                                                |
+| ------------------- | ------------------------- | --------------------- | -------------------------------------------------------------------------- |
+| `placeholder`       | `string`                  | `'Choose options...'` | Text shown when nothing is selected.                                       |
+| `searchPlaceholder` | `string`                  | `'Search...'`         | Placeholder for the dropdown search input.                                 |
+| `size`              | `'default' \| 'sm'`       | `'default'`           | Trigger and pill density.                                                  |
+| `variant`           | `'default' \| 'combobox'` | `'default'`           | Use `combobox` to place the search input directly in the trigger.          |
+| `multiple`          | `boolean`                 | `false`               | Emits an array of selected values when enabled.                            |
+| `searchable`        | `boolean`                 | `false`               | Adds a search input to the dropdown for the default variant.               |
+| `filter`            | `boolean`                 | `true`                | Enables client-side filtering. Disable it for backend-driven option lists. |
+| `clearable`         | `boolean`                 | `true`                | Shows a clear-all control when values are selected.                        |
+| `disabled`          | `boolean`                 | `false`               | Prevents interaction.                                                      |
+| `invalid`           | `boolean`                 | `false`               | Applies error styling and `aria-invalid`.                                  |
+| `loading`           | `boolean`                 | `false`               | Shows loading copy through the empty option when no options match.         |
+
+## Events
+
+| Output         | Payload   | Description                                                               |
+| -------------- | --------- | ------------------------------------------------------------------------- |
+| `valueChange`  | `unknown` | Emits the selected array for `multiple` mode or a single value otherwise. |
+| `searchChange` | `string`  | Emits whenever the search query changes.                                  |
+| `create`       | `string`  | Emits the current query from `PillboxOptionCreate`.                       |
+| `openedChange` | `boolean` | Emits when the option list opens or closes.                               |
+
+## Accessibility
+
+- Use a visible label or `aria-label`/`aria-labelledby` on `Pillbox`.
+- Use `multiple` when binding to an array of values.
+- Provide readable option labels; set `label` or `selectedLabel` when custom option content is not textual.
+- Keep create actions explicit and validate new values in the owning form or backend.

package/popover/README.md

@@ -0,0 +1,43 @@
+# Popover
+
+Anchored floating panel with CDK overlay. Click the trigger to toggle.
+
+## Import
+
+```ts
+import { PopoverTriggerDirective, PopoverContentDirective } from '@ojiepermana/angular-component/popover';
+```
+
+## Usage
+
+```html
+<button Button [PopoverTrigger]="content" side="bottom" align="start">Open</button>
+
+<ng-template PopoverContent #content="PopoverContent">
+  <div class="w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md">Popover body</div>
+</ng-template>
+```
+
+## API
+
+### `PopoverTriggerDirective` (`[PopoverTrigger]`)
+
+| Input            | Type                                     | Default    |
+| ---------------- | ---------------------------------------- | ---------- |
+| `PopoverTrigger` | `PopoverContentDirective`                | —          |
+| `side`           | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` |
+| `align`          | `'start' \| 'center' \| 'end'`           | `'center'` |
+| `disabled`       | `boolean`                                | `false`    |
+
+Exposes `isOpen()` signal. Trigger automatically sets `aria-haspopup="dialog"`
+and `aria-expanded` on the host.
+
+### `PopoverContentDirective` (`ng-template[PopoverContent]`)
+
+Marker directive that exposes the template via `exportAs="PopoverContent"`.
+
+## Accessibility
+
+- Close on `Escape`.
+- Close on backdrop click.
+- Trigger reflects state via `aria-expanded` and `aria-haspopup`.