@edsis/ui 0.0.2

package/sheet/README.md

@@ -0,0 +1,183 @@
+# 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/skeleton/README.md

@@ -0,0 +1,158 @@
+# 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 '@edsis/ui/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/slider/README.md

@@ -0,0 +1,207 @@
+# 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 '@edsis/ui/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.