@ojiepermana/angular-component 22.0.27

package/table/README.md

@@ -0,0 +1,291 @@
+# Table
+
+Responsive native table primitives for invoices, product lists, row actions, and compact data summaries.
+
+Use Table when information has real row and column relationships. The Angular primitive keeps shadcn's composition model while preserving semantic `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`, and `<caption>` elements.
+
+shadcn's `data-table` guide maps to this entrypoint rather than a separate Angular package surface. Compose Table with the local button, checkbox, input, badge, and dropdown-menu primitives when you need sorting, filtering, row selection, column visibility, row actions, or pagination.
+
+## Import
+
+```ts
+import {
+  TableBodyComponent,
+  TableCaptionComponent,
+  TableCellComponent,
+  TableComponent,
+  TableFooterComponent,
+  TableHeadComponent,
+  TableHeaderComponent,
+  TableRowComponent,
+} from '@ojiepermana/angular-component/table';
+```
+
+Row action menus can compose with the local button and dropdown-menu primitives.
+
+```ts
+import { ButtonComponent } from '@ojiepermana/angular-component/button';
+import {
+  MenuContentDirective,
+  MenuItemComponent,
+  MenuSeparatorComponent,
+  MenuSurfaceComponent,
+  MenuTriggerDirective,
+} from '@ojiepermana/angular-component/dropdown-menu';
+```
+
+## Composition
+
+Apply the attribute-selector parts to the matching semantic table tags.
+
+```text
+Table
+|-- caption[TableCaption]
+|-- thead[TableHeader]
+|   `-- tr[TableRow]
+|       |-- th[TableHead]
+|       |-- th[TableHead]
+|       |-- th[TableHead]
+|       `-- th[TableHead]
+|-- tbody[TableBody]
+|   `-- tr[TableRow]
+|       |-- td[TableCell]
+|       |-- td[TableCell]
+|       |-- td[TableCell]
+|       `-- td[TableCell]
+`-- tfoot[TableFooter]
+```
+
+## Usage
+
+Use `Table` as the responsive wrapper. Bind rows with Angular control flow and stable tracking.
+
+```html
+<table>
+  <caption TableCaption>
+    A list of your recent invoices.
+  </caption>
+  <thead TableHeader>
+    <tr TableRow>
+      <th TableHead class="w-25">Invoice</th>
+      <th TableHead>Status</th>
+      <th TableHead>Method</th>
+      <th TableHead class="text-right">Amount</th>
+    </tr>
+  </thead>
+  <tbody TableBody>
+    @for (invoice of invoices; track invoice.invoice) {
+    <tr TableRow>
+      <td TableCell class="font-medium">{{ invoice.invoice }}</td>
+      <td TableCell>{{ invoice.status }}</td>
+      <td TableCell>{{ invoice.method }}</td>
+      <td TableCell class="text-right">{{ invoice.amount }}</td>
+    </tr>
+    }
+  </tbody>
+</table>
+```
+
+## Common patterns
+
+### Footer totals
+
+Use `tfoot[TableFooter]` for totals and summaries. `colspan` stays on the native `td`.
+
+```html
+<table>
+  <caption TableCaption>
+    A list of your recent invoices.
+  </caption>
+  <thead TableHeader>
+    ...
+  </thead>
+  <tbody TableBody>
+    ...
+  </tbody>
+  <tfoot TableFooter>
+    <tr TableRow>
+      <td TableCell colspan="3">Total</td>
+      <td TableCell class="text-right">$2,500.00</td>
+    </tr>
+  </tfoot>
+</table>
+```
+
+### Row actions
+
+Compose action menus with `Button`, `MenuTrigger`, and the dropdown-menu surface.
+
+```html
+<ng-template MenuContent #productActionsMenu="MenuContent">
+  <MenuSurface class="w-36">
+    <button MenuItem>Edit</button>
+    <button MenuItem>Duplicate</button>
+    <MenuSeparator />
+    <button MenuItem variant="destructive">Delete</button>
+  </MenuSurface>
+</ng-template>
+
+<table>
+  <thead TableHeader>
+    <tr TableRow>
+      <th TableHead>Product</th>
+      <th TableHead>Price</th>
+      <th TableHead class="text-right">Actions</th>
+    </tr>
+  </thead>
+  <tbody TableBody>
+    @for (product of products; track product.name) {
+    <tr TableRow>
+      <td TableCell class="font-medium">{{ product.name }}</td>
+      <td TableCell>{{ product.price }}</td>
+      <td TableCell class="text-right">
+        <button
+          Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          [attr.aria-label]="'Open actions for ' + product.name"
+          [MenuTrigger]="productActionsMenu">
+          <span aria-hidden="true">...</span>
+        </button>
+      </td>
+    </tr>
+    }
+  </tbody>
+</table>
+```
+
+### Data table guide mapping
+
+The upstream shadcn `data-table` page is a composition guide, not a standalone primitive. In this Angular library the same guidance starts with `@ojiepermana/angular-component/table` and layers behavior around it.
+
+```ts
+import { BadgeComponent } from '@ojiepermana/angular-component/badge';
+import { ButtonComponent } from '@ojiepermana/angular-component/button';
+import { CheckboxComponent } from '@ojiepermana/angular-component/checkbox';
+import {
+  MenuCheckboxItemComponent,
+  MenuContentDirective,
+  MenuGroupComponent,
+  MenuItemComponent,
+  MenuLabelComponent,
+  MenuSeparatorComponent,
+  MenuSurfaceComponent,
+  MenuTriggerDirective,
+} from '@ojiepermana/angular-component/dropdown-menu';
+import { InputComponent } from '@ojiepermana/angular-component/input';
+```
+
+Keep Table as the markup layer and put behavior in Angular signals, services, or a table state library. A small explicit pipeline is usually easier to maintain than a generic catch-all data-table wrapper.
+
+```ts
+readonly filterText = signal('');
+readonly sortState = signal<{ column: 'status' | 'email' | 'amount'; direction: 'asc' | 'desc' } | null>(null);
+readonly selectedIds = signal<ReadonlySet<string>>(new Set());
+
+readonly filteredRows = computed(() => {
+  const query = filterText().trim().toLowerCase();
+  return query ? rows.filter((row) => row.email.toLowerCase().includes(query)) : rows;
+});
+
+readonly sortedRows = computed(() => sortRows(filteredRows(), sortState()));
+readonly pageRows = computed(() => paginateRows(sortedRows(), currentPage(), pageSize));
+```
+
+Selected rows can use the shadcn-compatible `data-state="selected"` hook so row styling stays synchronized with the checkbox state.
+
+```html
+<table>
+  <thead TableHeader>
+    ...
+  </thead>
+  <tbody TableBody>
+    @for (row of filteredRows(); track row.id) {
+    <tr TableRow [attr.data-state]="selectedIds().has(row.id) ? 'selected' : null">
+      <td TableCell>{{ row.title }}</td>
+      <td TableCell>{{ row.status }}</td>
+      <td TableCell class="text-right">{{ row.amount }}</td>
+    </tr>
+    }
+  </tbody>
+</table>
+```
+
+### RTL
+
+Set direction on a wrapper or directly on `Table`. Keep alignment explicit for amount and numeric columns.
+
+```html
+<div dir="rtl" lang="ar" class="text-right">
+  <table>
+    <caption TableCaption>
+      قائمة بفواتيرك الأخيرة.
+    </caption>
+    <thead TableHeader>
+      <tr TableRow>
+        <th TableHead class="w-25 text-right">الفاتورة</th>
+        <th TableHead class="text-right">الحالة</th>
+        <th TableHead class="text-right">الطريقة</th>
+        <th TableHead class="text-right">المبلغ</th>
+      </tr>
+    </thead>
+    <tbody TableBody>
+      ...
+    </tbody>
+  </table>
+</div>
+```
+
+## API reference
+
+### `TableComponent`
+
+| Input   | Type     | Default | Description                                       |
+| ------- | -------- | ------- | ------------------------------------------------- |
+| `class` | `string` | `''`    | Classes applied to the rendered native `<table>`. |
+
+### Attribute parts
+
+| Part                    | Selector                | Input   | Notes                                                   |
+| ----------------------- | ----------------------- | ------- | ------------------------------------------------------- |
+| `TableCaptionComponent` | `caption[TableCaption]` | `class` | Muted caption below the table.                          |
+| `TableHeaderComponent`  | `thead[TableHeader]`    | `class` | Header section with row dividers.                       |
+| `TableBodyComponent`    | `tbody[TableBody]`      | `class` | Body section that removes the final row border.         |
+| `TableFooterComponent`  | `tfoot[TableFooter]`    | `class` | Footer section with muted background and top divider.   |
+| `TableRowComponent`     | `tr[TableRow]`          | `class` | Row hover state and `data-state="selected"` support.    |
+| `TableHeadComponent`    | `th[TableHead]`         | `class` | Header cell with muted foreground and nowrap text.      |
+| `TableCellComponent`    | `td[TableCell]`         | `class` | Body or footer cell with compact padding and alignment. |
+
+## Styling and theming
+
+The root host is `relative block w-full overflow-x-auto`; the rendered table is `w-full caption-bottom text-sm`.
+
+Dividers use the shared `border-border` token, row hover uses `hover:bg-muted/50`, footer uses `bg-muted/50`, and selected rows respond to `data-state="selected"` with `bg-muted`.
+
+Pass utility classes to individual parts for column width, alignment, density, responsive visibility, and typography.
+
+## Accessibility
+
+- Use a `<caption TableCaption>` when the table conveys meaningful data.
+- Keep column headers in native `<th TableHead>` cells so screen readers can announce header relationships.
+- Use `scope`, `colspan`, `rowspan`, and `aria-sort` on native cells when your data model needs them.
+- Do not use Table for non-tabular layout. Use CSS grid or flex layouts for purely visual alignment.
+
+## Keyboard interactions
+
+Static tables do not add custom keyboard behavior. Focusable controls inside cells, such as action menu buttons, keep their own native or primitive-provided keyboard behavior.
+
+When composing a row menu, the trigger uses native button activation and the local menu handles Arrow Up, Arrow Down, Home, End, Tab dismissal, and typeahead.
+
+## Angular notes
+
+- All table parts are standalone components and can be imported directly.
+- The root `Table` wraps projected content in a native `<table>`, so child parts should be direct table descendants in normal HTML order.
+- Prefer Angular `@for` with a stable `track` expression for row rendering.
+- Keep sorting, filtering, pagination, and selection state outside the primitive; Table is intentionally presentational.
+- Attribute-selector primitives must be applied to their semantic tag, for example `th[TableHead]` and `td[TableCell]`.
+
+## Source parity
+
+This Angular implementation follows the shadcn Table docs for preview, usage, composition, footer, actions, data-table guidance, and RTL. React component names map to Angular selectors, React `className` maps to `class`, and row action menus compose with the local Angular dropdown-menu primitives.

package/tabs/README.md

@@ -0,0 +1,214 @@
+# Tabs
+
+A set of layered sections of content, known as tab panels, that are displayed one at a time.
+
+Use Tabs for compact settings surfaces, dashboards, account forms, and any view where related panels should share the same page location.
+
+## Import
+
+```ts
+import { TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent } from '@ojiepermana/angular-component/tabs';
+```
+
+## Composition
+
+The Angular structure mirrors shadcn and Radix while using Angular selectors and native button triggers.
+
+```text
+Tabs
+├── TabsList
+│   ├── button[TabsTrigger]
+│   └── button[TabsTrigger]
+├── TabsContent
+└── TabsContent
+```
+
+## Basic usage
+
+Pair every trigger value with a matching panel value. Bind `[(value)]` when the parent should seed the active tab or observe changes.
+
+```ts
+const activeTab = signal<string | null>('account');
+```
+
+```html
+<Tabs [(value)]="activeTab" class="w-full max-w-md">
+  <TabsList>
+    <button TabsTrigger value="account">Account</button>
+    <button TabsTrigger value="password">Password</button>
+  </TabsList>
+
+  <TabsContent value="account">Make changes to your account here.</TabsContent>
+  <TabsContent value="password">Change your password here.</TabsContent>
+</Tabs>
+```
+
+## Common patterns
+
+### Line variant
+
+Use `variant="line"` on `TabsList` for the underline treatment from the shadcn examples.
+
+```ts
+const lineTab = signal<string | null>('overview');
+```
+
+```html
+<Tabs [(value)]="lineTab">
+  <TabsList variant="line">
+    <button TabsTrigger value="overview">Overview</button>
+    <button TabsTrigger value="analytics">Analytics</button>
+    <button TabsTrigger value="reports">Reports</button>
+  </TabsList>
+
+  <TabsContent value="overview">Overview metrics are selected.</TabsContent>
+  <TabsContent value="analytics">Analytics metrics are selected.</TabsContent>
+  <TabsContent value="reports">Reports metrics are selected.</TabsContent>
+</Tabs>
+```
+
+### Vertical orientation
+
+Set `orientation="vertical"` on `Tabs` when triggers should stack beside the active panel.
+
+```ts
+const verticalTab = signal<string | null>('account');
+```
+
+```html
+<Tabs [(value)]="verticalTab" orientation="vertical" class="w-full max-w-2xl">
+  <TabsList class="min-w-40">
+    <button TabsTrigger value="account">Account</button>
+    <button TabsTrigger value="password">Password</button>
+    <button TabsTrigger value="notifications">Notifications</button>
+  </TabsList>
+
+  <TabsContent value="account" class="mt-0 flex-1 rounded-lg border border-border p-4">
+    Account preferences and details live in this panel.
+  </TabsContent>
+</Tabs>
+```
+
+### Disabled triggers
+
+Disable a trigger with `[disabled]="true"`. Disabled triggers remain visible, expose disabled state, and are skipped by arrow-key navigation.
+
+```ts
+const disabledTab = signal<string | null>('home');
+```
+
+```html
+<Tabs [(value)]="disabledTab">
+  <TabsList>
+    <button TabsTrigger value="home">Home</button>
+    <button TabsTrigger value="settings" [disabled]="true">Disabled</button>
+  </TabsList>
+
+  <TabsContent value="home">Home content stays reachable.</TabsContent>
+  <TabsContent value="settings">Settings is intentionally unavailable.</TabsContent>
+</Tabs>
+```
+
+### Icons
+
+Project icon components or inline SVG before trigger text. The trigger includes icon and label spacing.
+
+```html
+<Tabs value="preview">
+  <TabsList>
+    <button TabsTrigger value="preview">
+      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
+      Preview
+    </button>
+    <button TabsTrigger value="code">
+      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
+      Code
+    </button>
+  </TabsList>
+
+  <TabsContent value="preview">Rendered preview is selected.</TabsContent>
+  <TabsContent value="code">Code sample is selected.</TabsContent>
+</Tabs>
+```
+
+### RTL
+
+Set `dir="rtl"` on the tabs root or an ancestor container when the surrounding interface runs right to left.
+
+```html
+<Tabs value="overview" dir="rtl" lang="ar" class="w-full max-w-md text-right">
+  <TabsList>
+    <button TabsTrigger value="overview">نظرة عامة</button>
+    <button TabsTrigger value="analytics">التحليلات</button>
+    <button TabsTrigger value="reports">التقارير</button>
+    <button TabsTrigger value="settings">الإعدادات</button>
+  </TabsList>
+
+  <TabsContent value="overview">لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.</TabsContent>
+</Tabs>
+```
+
+## API reference
+
+### `TabsComponent`
+
+| Input           | Type                         | Default        |
+| --------------- | ---------------------------- | -------------- |
+| `value` (model) | `string \| null`             | `null`         |
+| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `class`         | `string`                     | `''`           |
+
+### `TabsListComponent`
+
+| Input     | Type                  | Default     |
+| --------- | --------------------- | ----------- |
+| `variant` | `'default' \| 'line'` | `'default'` |
+| `class`   | `string`              | `''`        |
+
+### `TabsTriggerComponent`
+
+| Input      | Type      | Default |
+| ---------- | --------- | ------- |
+| `value`    | `string`  | —       |
+| `disabled` | `boolean` | `false` |
+| `class`    | `string`  | `''`    |
+
+### `TabsContentComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `value` | `string` | —       |
+| `class` | `string` | `''`    |
+
+## Styling and theming
+
+The default list uses `bg-muted` and active triggers use `bg-background`, `text-foreground`, and `shadow-sm` to match the shadcn look.
+
+The line variant uses `border-border` on the list and an active `border-foreground` underline on the trigger. Pass `class` to the root, list, trigger, or content to tune width, grid layouts, spacing, and panel framing.
+
+## Accessibility
+
+- `TabsList` renders `role="tablist"` and `aria-orientation`.
+- `button[TabsTrigger]` renders `role="tab"`, `aria-selected`, roving `tabindex`, `aria-controls`, and `aria-disabled` when disabled.
+- `TabsContent` renders `role="tabpanel"`, `aria-labelledby`, `tabindex="0"`, and `hidden` when inactive.
+- Keep trigger labels concise and unique. Icons inside triggers should be decorative or have their own accessible text outside the icon.
+
+## Keyboard interactions
+
+- `ArrowRight` and `ArrowLeft` move selection and focus through horizontal tabs.
+- `ArrowDown` and `ArrowUp` move selection and focus through vertical tabs.
+- `Home` and `End` jump to the first and last enabled trigger.
+- Disabled triggers are skipped by arrow-key, Home, and End navigation.
+- Enter and Space retain native button activation behavior.
+
+## Angular notes
+
+- The component uses Angular signal-based `model()` binding for `value`.
+- Use `signal<string | null>()` with `[(value)]` as the Angular equivalent of shadcn `defaultValue` when parent state matters.
+- Values are strings and should be unique within a tabs root.
+- `variant="line"` belongs to `TabsList`, matching the upstream shadcn API.
+- Icons are projected content; bring an app icon component or inline SVG where needed.
+
+## Source parity
+
+This Angular implementation follows the current shadcn Tabs docs: preview card tabs, usage, composition, line, vertical, disabled, icons, RTL, and Radix API guidance. React props are translated to Angular selectors, native buttons, and signal-friendly state.

package/textarea/README.md

@@ -0,0 +1,153 @@
+# Textarea
+
+Displays a multiline native `<textarea>` with the shared Angular theme tokens and shadcn-style field composition.
+
+Use Textarea for feedback, notes, comments, support messages, and any form surface that needs multi-line entry while keeping browser-native editing behavior.
+
+## Import
+
+```ts
+import { TextareaComponent } from '@ojiepermana/angular-component/textarea';
+```
+
+Import the `form`, `label`, or `button` entrypoints separately when the page also needs structured field copy or submit actions.
+
+## Composition
+
+Textarea stays intentionally small because it styles the native control instead of wrapping it in a custom value accessor.
+
+```text
+label[Label]
+└── textarea[Textarea]
+```
+
+For the richer shadcn field pattern, compose it with the existing form primitives.
+
+```text
+FormField
+├── FormLabel
+├── textarea[Textarea][FormControl]
+└── FormDescription or FormMessage
+```
+
+## Basic Usage
+
+Use a visible label plus the styled native textarea when you only need the base multiline control.
+
+```html
+<label Label for="bio">Bio</label> <textarea id="bio" Textarea rows="4" placeholder="Tell us about yourself"></textarea>
+```
+
+When the textarea lives inside `FormField`, add `FormControl` so labels, descriptions, and invalid state stay wired together.
+
+```html
+<FormField>
+  <FormLabel>Message</FormLabel>
+  <textarea Textarea FormControl rows="4" placeholder="Type your message here."></textarea>
+  <FormDescription>Enter your message below.</FormDescription>
+</FormField>
+```
+
+## Common Patterns
+
+### Field Composition
+
+The upstream shadcn `Field`, `FieldLabel`, and `FieldDescription` helpers map to the local `form` entrypoint.
+
+```html
+<FormField>
+  <FormLabel>Feedback</FormLabel>
+  <textarea Textarea FormControl rows="4" placeholder="Your feedback helps us improve..."></textarea>
+  <FormDescription>Share your thoughts about our service.</FormDescription>
+</FormField>
+```
+
+### Disabled and Invalid States
+
+Use the native `disabled` attribute for disabled state and `aria-invalid="true"` for validation styling.
+
+```html
+<FormField>
+  <FormLabel>Message</FormLabel>
+  <textarea Textarea FormControl rows="4" disabled></textarea>
+  <FormDescription>This field is currently disabled.</FormDescription>
+</FormField>
+
+<FormField>
+  <FormLabel>Message</FormLabel>
+  <textarea Textarea FormControl rows="4" aria-invalid="true"></textarea>
+  <FormDescription>Please enter a valid message.</FormDescription>
+</FormField>
+```
+
+### Submit Row
+
+Pair the textarea with `button[Button]` to create feedback and messaging layouts.
+
+```html
+<div class="grid w-full max-w-md gap-2">
+  <textarea Textarea rows="5" class="min-h-[140px]" placeholder="Type your message here."></textarea>
+  <button Button type="button" class="w-fit">Send message</button>
+</div>
+```
+
+### RTL
+
+Set `dir="rtl"` on a wrapping container or manage direction globally in your layout. The textarea stays native while labels and helper text follow the document direction.
+
+```html
+<div dir="rtl" lang="ar" class="max-w-md text-right">
+  <FormField>
+    <FormLabel>التعليقات</FormLabel>
+    <textarea Textarea FormControl rows="4" placeholder="تعليقاتك تساعدنا على التحسين..."></textarea>
+    <FormDescription>شاركنا أفكارك حول خدمتنا.</FormDescription>
+  </FormField>
+</div>
+```
+
+## API Reference
+
+### `TextareaComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+### Native Attributes
+
+All standard `<textarea>` attributes such as `rows`, `placeholder`, `disabled`, `required`, `readonly`, `dir`, and `aria-invalid` pass through unchanged.
+
+The component also exposes a `focus()` instance method when accessed through `ViewChild(TextareaComponent)`.
+
+## Styling and Theming
+
+The component uses the shared `border-input`, `ring-ring`, `text-foreground`, `placeholder:text-muted-foreground`, and `aria-[invalid=true]:border-destructive` tokens.
+
+Base styling includes a `min-h-[60px]` guard to avoid collapsed textareas and `resize-y` so users can increase the writing area without breaking width-constrained layouts.
+
+Pass `class` to tune height, spacing, or layout while keeping the base focus, disabled, invalid, and resize treatment.
+
+## Accessibility
+
+- Pair the textarea with a visible label using `label[Label]` or `FormLabel`.
+- Use `FormControl` inside `FormField` so helper and error text participate in the same accessible description chain.
+- Mark validation failures with `aria-invalid="true"` and provide descriptive helper or error text nearby.
+- Keep the native resize handle available so pointer and touch users can increase the input area when needed.
+
+## Keyboard Interactions
+
+- `Tab` and `Shift+Tab` move focus in and out using the normal browser order.
+- `Enter` inserts a new line instead of submitting by itself.
+- Arrow keys, Home, End, selection, and clipboard shortcuts stay browser-native.
+
+## Angular Notes
+
+- Textarea styles the native `<textarea>`, so it works with both `ngModel` and reactive forms.
+- Prefer using `FormControl` when the textarea lives inside `FormField`.
+- Let Angular form state drive invalid styling when possible, but `aria-invalid="true"` also works for externally managed validation.
+
+## Source Parity
+
+This Angular implementation follows the shadcn Textarea page closely for the core textarea, disabled and invalid states, button layout, and RTL guidance.
+
+The upstream `Field` helper family intentionally maps to the existing Angular `form` entrypoint instead of adding a separate `field` runtime surface.