@ojiepermana/angular 22.0.1 → 22.0.29

package/component/sheet/README.md

@@ -1,183 +0,0 @@
-# Sheet
-
-Edge-anchored overlay surface that extends Dialog into a side panel. The Sheet slides in from the top, right, bottom, or left edge of the viewport and is backed by CDK Overlay plus FocusTrap.
-
-## Import
-
-```ts
-import {
-  SheetCloseDirective,
-  SheetComponent,
-  SheetContentComponent,
-  SheetDescriptionComponent,
-  SheetFooterComponent,
-  SheetHeaderComponent,
-  SheetTitleComponent,
-} from '@your-scope/angular/component/sheet';
-```
-
-## Composition
-
-```text
-button[ui-button] (external trigger; sets the open signal)
-ui-sheet
-├── built-in close button (optional)
-├── ui-sheet-header
-│   ├── ui-sheet-title
-│   └── ui-sheet-description
-├── ui-sheet-content (optional body / scroll region)
-└── ui-sheet-footer
-    └── button[ui-sheet-close] (optional custom close action)
-```
-
-The Angular surface intentionally keeps the trigger outside the overlay component. Instead of a JSX-style `SheetTrigger`, you open the sheet by setting the bound `open` signal from a regular button or link.
-
-## Basic Usage
-
-```ts
-import { signal } from '@angular/core';
-```
-
-```html
-<button type="button" ui-button variant="outline" (click)="open.set(true)">Edit profile</button>
-
-<ui-sheet [(open)]="open" aria-labelledby="sheet-title" aria-describedby="sheet-description" class="sm:max-w-md">
-  <ui-sheet-header>
-    <ui-sheet-title id="sheet-title">Edit profile</ui-sheet-title>
-    <ui-sheet-description id="sheet-description">
-      Make changes to your profile here. Click save when you are done.
-    </ui-sheet-description>
-  </ui-sheet-header>
-
-  <ui-sheet-content class="grid gap-4 py-4">
-    <div class="grid gap-2">
-      <label ui-label for="sheet-name">Name</label>
-      <input ui-input id="sheet-name" value="Pedro Duarte" />
-    </div>
-    <div class="grid gap-2">
-      <label ui-label for="sheet-username">Username</label>
-      <input ui-input id="sheet-username" value="@peduarte" />
-    </div>
-  </ui-sheet-content>
-
-  <ui-sheet-footer>
-    <button type="button" ui-button variant="outline" ui-sheet-close>Cancel</button>
-    <button type="button" ui-button (click)="open.set(false)">Save changes</button>
-  </ui-sheet-footer>
-</ui-sheet>
-```
-
-## Common Patterns
-
-### Side selection
-
-Use `side` to choose where the surface enters from. Right is the default for `ui-sheet`, while the `ui-drawer` alias defaults to bottom.
-
-```html
-<button type="button" ui-button variant="outline" (click)="rightOpen.set(true)">Right</button>
-<button type="button" ui-button variant="outline" (click)="leftOpen.set(true)">Left</button>
-
-<ui-sheet [(open)]="rightOpen" side="right" class="sm:max-w-md">...</ui-sheet>
-<ui-sheet [(open)]="leftOpen" side="left" class="sm:max-w-md">...</ui-sheet>
-```
-
-For `top` and `bottom`, add a height constraint such as `class="max-h-[55vh]"` when the body content can grow on shorter screens.
-
-### No close button
-
-Hide the default corner close affordance with `[showCloseButton]="false"` and own dismissal explicitly through the footer or body.
-
-```html
-<ui-sheet [(open)]="noCloseOpen" [showCloseButton]="false" class="sm:max-w-sm">
-  <ui-sheet-header>
-    <ui-sheet-title>No Close Button</ui-sheet-title>
-    <ui-sheet-description> Hide the top-right control when dismissal should stay in the footer. </ui-sheet-description>
-  </ui-sheet-header>
-
-  <ui-sheet-footer class="sm:justify-start">
-    <button type="button" ui-button variant="outline" ui-sheet-close>Close</button>
-  </ui-sheet-footer>
-</ui-sheet>
-```
-
-### RTL
-
-Because the overlay surface renders through CDK Overlay, set `dir="rtl"` on projected content inside the sheet when the direction should be scoped to the open panel.
-
-```html
-<ui-sheet [(open)]="rtlOpen" [showCloseButton]="false" side="left" class="sm:max-w-md">
-  <div dir="rtl" lang="ar" class="flex flex-1 flex-col gap-4 text-right">
-    <ui-sheet-header>
-      <ui-sheet-title>تعديل الملف الشخصي</ui-sheet-title>
-      <ui-sheet-description>قم بإجراء تغييرات على ملفك الشخصي هنا ثم احفظها.</ui-sheet-description>
-    </ui-sheet-header>
-
-    <ui-sheet-content class="grid gap-4 py-4">
-      <div class="grid gap-2">
-        <label ui-label for="sheet-rtl-name">الاسم</label>
-        <input ui-input id="sheet-rtl-name" value="بيدرو دوارتي" />
-      </div>
-    </ui-sheet-content>
-
-    <ui-sheet-footer class="sm:justify-start">
-      <button type="button" ui-button variant="outline" ui-sheet-close>إغلاق</button>
-      <button type="button" ui-button (click)="rtlOpen.set(false)">حفظ التغييرات</button>
-    </ui-sheet-footer>
-  </div>
-</ui-sheet>
-```
-
-## API Reference
-
-| Input                  | Type            | Default    |
-| ---------------------- | --------------- | ---------- | ----------- | ------- | ---------------------------------------------------- |
-| `open`                 | `boolean` model | `false`    |
-| `side`                 | `'top' \\       | 'right' \\ | 'bottom' \\ | 'left'` | `'right'` for `ui-sheet`, `'bottom'` for `ui-drawer` |
-| `closeOnEscape`        | `boolean`       | `true`     |
-| `closeOnBackdropClick` | `boolean`       | `true`     |
-| `showCloseButton`      | `boolean`       | `true`     |
-| `closeButtonLabel`     | `string`        | `'Close'`  |
-| `aria-labelledby`      | `string \\      | null`      | `null`      |
-| `aria-describedby`     | `string \\      | null`      | `null`      |
-| `class`                | `string`        | `''`       |
-
-| Part                     | Purpose                                                        |
-| ------------------------ | -------------------------------------------------------------- |
-| `ui-sheet-header`        | Title and supporting description wrapper                       |
-| `ui-sheet-title`         | Visible, accessible sheet title                                |
-| `ui-sheet-description`   | Supporting copy that can be referenced from `aria-describedby` |
-| `ui-sheet-content`       | Optional body wrapper for forms, spacing, and scroll regions   |
-| `ui-sheet-footer`        | Action row for primary and secondary controls                  |
-| `button[ui-sheet-close]` | Angular-friendly equivalent of shadcn `SheetClose`             |
-
-## Styling And Theming
-
-- The surface uses theme border tokens such as `border-border` on its edge divider so it stays aligned with the current theme.
-- Left and right sheets default to `w-3/4 sm:max-w-sm`; add width utilities through the `class` input when a broader side panel is needed.
-- Top and bottom sheets stretch across the viewport edge. Use `max-h-*` or spacing utilities on the root `class` input when the body can grow.
-- `ui-sheet-content` is the best place for internal scroll handling. Keep footer actions outside that overflow region when they must stay visible.
-- Entry animation comes from `--ui-sheet-from` and automatically collapses to zero duration under `prefers-reduced-motion`.
-
-## Accessibility
-
-- The surface renders with `role="dialog"` and `aria-modal="true"`.
-- Focus is trapped with `FocusTrap` and restored to the previously focused element on close.
-- `Escape` and backdrop click close the sheet by default and can be disabled independently.
-- Use stable IDs for the visible title and description when the sheet contains forms or longer instructional copy.
-
-## Keyboard Interactions
-
-- `Tab` and `Shift+Tab` move focus within the trapped overlay.
-- `Escape` closes the sheet unless `closeOnEscape` is disabled.
-- `Enter` and `Space` activate the trigger, footer actions, and custom `ui-sheet-close` controls through native button behavior.
-
-## Angular Notes
-
-- `ui-sheet` combines the upstream `Sheet` root and `SheetContent` overlay surface into a single Angular component.
-- `ui-sheet-content` remains available as an internal body wrapper for layout, padding, and scroll regions.
-- `ui-drawer` is exported as a bottom-first alias over the same primitive when the interaction reads more naturally as a drawer.
-- `button[ui-sheet-close]` and `a[ui-sheet-close]` are the Angular-friendly equivalents of shadcn `SheetClose` for internal dismissal actions.
-
-## Source Parity
-
-The local Sheet follows the shadcn component information architecture and behavior, but translates trigger ownership to an external signal instead of a `SheetTrigger` child component. Lower-level dialog semantics and API expectations still map closely to the Radix Dialog reference at https://www.radix-ui.com/primitives/docs/components/dialog#api-reference.

package/component/sheet/package.json

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

package/component/skeleton/README.md

@@ -1,158 +0,0 @@
-# Skeleton
-
-Use Skeleton to show low-contrast placeholders while content is loading.
-
-The component mirrors shadcn/ui's Skeleton primitive: it supplies the pulsing muted surface, while dimensions, shape, and layout are provided by utility classes at the call site.
-
-## Import
-
-```ts
-import { SkeletonComponent } from '@ojiepermana/angular/component/skeleton';
-```
-
-## Usage
-
-Give each skeleton an explicit width, height, and optional radius. Without dimensions, the element exists in the DOM but will not create a visible placeholder.
-
-```html
-<ui-skeleton class="h-5 w-25 rounded-full" />
-```
-
-```html
-<div class="flex items-center gap-4">
-  <ui-skeleton class="h-12 w-12 rounded-full" />
-  <div class="space-y-2">
-    <ui-skeleton class="h-4 w-62.5" />
-    <ui-skeleton class="h-4 w-50" />
-  </div>
-</div>
-```
-
-## Common patterns
-
-### Avatar
-
-Use a round placeholder and two lines when loading profile identity, assignee, or author metadata.
-
-```html
-<div class="flex w-fit items-center gap-4">
-  <ui-skeleton class="size-10 shrink-0 rounded-full" />
-  <div class="grid gap-2">
-    <ui-skeleton class="h-4 w-37.5" />
-    <ui-skeleton class="h-4 w-25" />
-  </div>
-</div>
-```
-
-### Card
-
-Skeleton composes inside `ui-card` parts. Match the final loaded geometry to avoid layout shift.
-
-```html
-<ui-card class="w-full max-w-xs">
-  <ui-card-header>
-    <div class="col-span-2 grid gap-2">
-      <ui-skeleton class="h-4 w-2/3" />
-      <ui-skeleton class="h-4 w-1/2" />
-    </div>
-  </ui-card-header>
-  <ui-card-content>
-    <ui-skeleton class="aspect-video w-full" />
-  </ui-card-content>
-</ui-card>
-```
-
-### Text
-
-Use repeated bars and shorten the final line for paragraph rhythm.
-
-```html
-<div class="flex w-full max-w-xs flex-col gap-2">
-  <ui-skeleton class="h-4 w-full" />
-  <ui-skeleton class="h-4 w-full" />
-  <ui-skeleton class="h-4 w-3/4" />
-</div>
-```
-
-### Form
-
-Pair short label placeholders with wider control placeholders when loading form metadata.
-
-```html
-<div class="flex w-full max-w-xs flex-col gap-7">
-  <div class="flex flex-col gap-3">
-    <ui-skeleton class="h-4 w-20" />
-    <ui-skeleton class="h-8 w-full" />
-  </div>
-  <div class="flex flex-col gap-3">
-    <ui-skeleton class="h-4 w-24" />
-    <ui-skeleton class="h-8 w-full" />
-  </div>
-  <ui-skeleton class="h-8 w-24" />
-</div>
-```
-
-### Table
-
-Repeat rows with matching column proportions so tabular data keeps a stable footprint while loading.
-
-```html
-<div class="flex w-full max-w-sm flex-col gap-2">
-  @for (row of tableRows; track row) {
-  <div class="flex gap-4">
-    <ui-skeleton class="h-4 flex-1" />
-    <ui-skeleton class="h-4 w-24" />
-    <ui-skeleton class="h-4 w-20" />
-  </div>
-  }
-</div>
-```
-
-### RTL
-
-Skeleton is direction-agnostic. Put `dir="rtl"` on the wrapper when the placeholder should reserve right-to-left layout space.
-
-```html
-<div dir="rtl" lang="ar" class="flex items-center gap-4">
-  <ui-skeleton class="h-12 w-12 rounded-full" />
-  <div class="space-y-2">
-    <ui-skeleton class="h-4 w-62.5" />
-    <ui-skeleton class="h-4 w-50" />
-  </div>
-</div>
-```
-
-## API reference
-
-### `SkeletonComponent`
-
-| Input   | Type     | Default | Description                                           |
-| ------- | -------- | ------- | ----------------------------------------------------- |
-| `class` | `string` | `''`    | Supplies visible dimensions, shape, and extra layout. |
-
-## Styling and theming
-
-Base classes: `block animate-pulse rounded-md bg-muted`.
-
-The component consumes the shared muted theme token through `bg-muted`. Pass utility classes for width, height, radius, flex behavior, margins, and responsive variants. Because the host is block-level, width and height utilities behave like they do on the shadcn React `<div>` implementation.
-
-## Accessibility
-
-`ui-skeleton` emits `aria-hidden="true"` because it is decorative loading chrome. Pair it with status text, a live region, or a busy state on the loaded region when the loading state needs to be announced.
-
-Avoid replacing labels or meaningful headings with only skeletons for long periods. Keep the eventual content area stable and announce changes when data arrives.
-
-## Keyboard interactions
-
-Skeleton has no keyboard interaction. It should not receive focus and should not contain interactive content.
-
-## Angular notes
-
-- Import `SkeletonComponent` directly into the standalone component that renders the loading state.
-- The `class` input is intentionally the main API so Angular examples stay close to shadcn utility-class composition.
-- Use Angular control flow for repeated rows: `@for (row of tableRows; track row) { ... }`.
-- Keep placeholder dimensions close to the loaded content to reduce layout shift.
-
-## Source parity
-
-This Angular implementation follows the shadcn Skeleton docs and examples for preview, usage, Avatar, Card, Text, Form, Table, and RTL. React `className` becomes Angular `class`, and the primitive renders as a block-level custom element so sizing utilities match the upstream `<div>` behavior.

package/component/skeleton/package.json

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

package/component/slider/README.md

@@ -1,207 +0,0 @@
-# Slider
-
-Selects one or more numeric values from a bounded range.
-
-This entrypoint now exports two related Angular surfaces:
-
-- `ui-slider` via `SliderRootComponent` for shadcn-style single-thumb, range,
-  multiple-thumb, vertical, disabled, and RTL examples.
-- `input[ui-slider]` via `SliderInputDirective` for browser-native range inputs
-  when labels and forms should stay on the native path.
-
-## Import
-
-```ts
-import { SliderInputDirective, SliderRootComponent } from '@ojiepermana/angular/component/slider';
-```
-
-## Structure
-
-Use `ui-slider` when you want the richer shadcn-style component.
-
-```html
-<ui-slider [value]="[75]" />
-```
-
-Keep `input[ui-slider]` when a plain native range input is still the best fit.
-
-```html
-<input type="range" ui-slider />
-```
-
-## Basic usage
-
-```ts
-const volume = signal<readonly number[]>([75]);
-
-<ui-slider
-  aria-label="Volume"
-  [min]="0"
-  [max]="100"
-  [step]="1"
-  [value]="volume()"
-  (valueChange)="volume.set($event)"
-  class="w-full max-w-sm" />
-```
-
-## Common patterns
-
-### Range
-
-Two values render a range slider.
-
-```ts
-const priceRange = signal<readonly number[]>([25, 50]);
-
-<ui-slider
-  aria-label="Price range"
-  min="0"
-  max="100"
-  step="5"
-  [value]="priceRange()"
-  (valueChange)="priceRange.set($event)"
-  [thumbLabels]="['Minimum price', 'Maximum price']" />
-```
-
-### Multiple thumbs
-
-Three or more values render several thumbs in sorted order.
-
-```ts
-const equalizer = signal<readonly number[]>([10, 20, 70]);
-
-<ui-slider
-  aria-label="Equalizer"
-  min="0"
-  max="100"
-  step="10"
-  [value]="equalizer()"
-  (valueChange)="equalizer.set($event)"
-  [thumbLabels]="['Bass', 'Mid', 'Treble']" />
-```
-
-### Vertical
-
-Set `orientation="vertical"` and provide an explicit height through `class`.
-
-```html
-<div class="flex items-center gap-6">
-  <ui-slider aria-label="Primary level" orientation="vertical" [value]="[50]" class="h-40" />
-  <ui-slider aria-label="Secondary level" orientation="vertical" [value]="[25]" class="h-40" />
-</div>
-```
-
-### Controlled slider
-
-Drive the values from a signal when nearby UI should react immediately.
-
-```ts
-const temperatureRange = signal<readonly number[]>([30, 70]);
-
-<ui-slider
-  aria-label="Temperature range"
-  min="0"
-  max="100"
-  step="5"
-  [value]="temperatureRange()"
-  (valueChange)="temperatureRange.set($event)"
-  [thumbLabels]="['Minimum temperature', 'Maximum temperature']" />
-```
-
-### Disabled state
-
-```html
-<ui-slider aria-label="Disabled notifications volume" [value]="[50]" disabled />
-```
-
-### RTL
-
-The component follows the surrounding document direction automatically.
-
-```html
-<section dir="rtl" lang="ar" class="w-full max-w-sm text-right">
-  <ui-slider aria-label="مستوى الصوت" [value]="[75]" class="w-full" />
-</section>
-```
-
-### Native input companion
-
-Use the exported native directive when the browser-native range input is still
-the best Angular fit for forms and `label[for]` wiring.
-
-```html
-<ui-label for="native-volume" class="mb-2 block">Volume</ui-label>
-<input id="native-volume" type="range" ui-slider min="0" max="100" step="1" class="w-full max-w-sm" />
-```
-
-## API reference
-
-| Input or output                                       | Type                         | Notes                                                                                     |
-| ----------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------- |
-| `value`                                               | `readonly number[]`          | Array of sorted thumb values. One item renders a single thumb.                            |
-| `valueChange`                                         | `readonly number[]`          | Emits the next array whenever a thumb moves.                                              |
-| `min`                                                 | `number`                     | Lower bound for every thumb.                                                              |
-| `max`                                                 | `number`                     | Upper bound for every thumb.                                                              |
-| `step`                                                | `number`                     | Drag and keyboard increment.                                                              |
-| `orientation`                                         | `'horizontal' \| 'vertical'` | Vertical sliders need an explicit height via `class`.                                     |
-| `disabled`                                            | `boolean`                    | Disables drag and keyboard interaction.                                                   |
-| `thumbLabels`                                         | `readonly string[]`          | Optional accessible labels for each thumb.                                                |
-| `aria-label` / `aria-labelledby` / `aria-describedby` | `string \| null`             | Applied to thumb semantics. Prefer `thumbLabels` when several thumbs need distinct names. |
-| `class`                                               | `string`                     | Width and height utilities on the host component.                                         |
-
-`SliderInputDirective` keeps the native `<input type="range">` API and passes
-through ordinary input attributes directly.
-
-## Styling and theming
-
-The rich `ui-slider` component uses:
-
-- `--secondary` for the track.
-- `--primary` for the active range.
-- `--background` for the thumb surface.
-- `--primary` for the thumb border.
-- `--ring` for the focus-visible outline.
-
-Apply width and height utilities through the host `class`, for example
-`w-full`, `max-w-sm`, or `h-40` for vertical sliders.
-
-The native input companion keeps its styling in [slider.component.css](./slider.component.css).
-
-## Accessibility
-
-- Each thumb exposes `role="slider"` with `aria-valuemin`, `aria-valuemax`,
-  `aria-valuenow`, and `aria-orientation`.
-- Provide `thumbLabels` when the slider has several thumbs so each one has a
-  distinct accessible name.
-- Use `aria-describedby` for helper text, units, or validation guidance.
-- The focused thumb stays tabbable while sibling thumbs use roving `tabindex`.
-- When you need browser-native label semantics, use `SliderInputDirective`
-  instead of forcing the rich component into a native-input role.
-
-## Keyboard interactions
-
-For `ui-slider`:
-
-- Arrow keys adjust the value by `step`.
-- `Page Up` and `Page Down` move by a larger increment.
-- `Home` and `End` jump the active thumb to its local minimum or maximum bound.
-- Pointer dragging and track clicks move the nearest thumb.
-
-For `SliderInputDirective`, keyboard behavior follows the browser-native range
-input model.
-
-## Angular notes
-
-- Prefer `ui-slider` when you need shadcn-style parity: range selection,
-  multiple thumbs, vertical layout, or explicit thumb labels.
-- Prefer `SliderInputDirective` when the control should remain a real native
-  input inside Angular forms or a traditional field layout.
-- The two exports are complementary rather than replacements for one another.
-
-## Source parity
-
-This Angular entrypoint now covers the main shadcn Radix slider examples:
-single-thumb preview, range, multiple thumbs, vertical, controlled, disabled,
-and RTL. The native `input[ui-slider]` directive remains intentionally exported
-as an Angular companion for browser-native range inputs instead of disappearing
-behind the richer component.

package/component/slider/package.json

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