@ojiepermana/angular-component 22.0.27

package/button/README.md

@@ -0,0 +1,139 @@
+# Button
+
+Displays a native button or anchor that looks like a shadcn-style button, translated to Angular attribute selectors and standalone imports.
+
+Use Button for primary actions, secondary actions, icon-only controls, and semantic links that should share the same visual language.
+
+## Import
+
+```ts
+import { ButtonComponent } from '@ojiepermana/angular-component/button';
+```
+
+## Usage
+
+```html
+<button Button type="button" variant="default">Save</button>
+<button Button variant="outline" size="sm">Cancel</button>
+<a Button variant="link" href="/learn-more">Learn more</a>
+```
+
+Choose the correct native host for the job: `<button>` for actions and `<a>` for navigation.
+
+## Common patterns
+
+### Variants
+
+Use `variant` for emphasis: `default`, `secondary`, `destructive`, `outline`, `ghost`, or `link`.
+
+```html
+<button Button variant="default">Save</button>
+<button Button variant="secondary">Duplicate</button>
+<button Button variant="destructive">Delete</button>
+<button Button variant="outline">Outline</button>
+<button Button variant="ghost">Ghost</button>
+<a Button variant="link" href="/learn-more">Learn more</a>
+```
+
+### Sizes
+
+Use `size` for compact or icon-only controls: `xs`, `sm`, `default`, `lg`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`.
+
+```html
+<button Button size="xs" variant="outline">Extra small</button>
+<button Button size="sm" variant="outline">Small</button>
+<button Button size="default" variant="outline">Default</button>
+<button Button size="lg" variant="outline">Large</button>
+<button Button size="icon-xs" variant="outline" aria-label="Extra small icon button">+</button>
+<button Button size="icon-sm" variant="outline" aria-label="Small icon button">+</button>
+<button Button size="icon" variant="outline" aria-label="Default icon button">+</button>
+<button Button size="icon-lg" variant="outline" aria-label="Large icon button">+</button>
+```
+
+### Rounded buttons
+
+Pass `class="rounded-full"` when you want a pill or circular button without changing the base API.
+
+```html
+<button Button variant="outline" class="rounded-full px-5">Invite teammate</button>
+<button Button variant="outline" size="icon" class="rounded-full" aria-label="Scroll to top">
+  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="m12 19 0-14" />
+    <path d="m5 12 7-7 7 7" />
+  </svg>
+</button>
+```
+
+### Loading and disabled states
+
+Project a spinner element into the button and set `disabled` while async work is pending.
+
+```html
+<button Button variant="outline" disabled>
+  <span
+    aria-hidden="true"
+    class="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
+  Generating
+</button>
+```
+
+### Semantic host mapping
+
+React's `asChild` pattern maps to choosing the right native host directly in Angular templates.
+
+```html
+<button Button type="button">Save changes</button> <a Button href="/account" variant="link">Go to account</a>
+```
+
+## API reference
+
+| Input     | Type                                                                                 | Default     |
+| --------- | ------------------------------------------------------------------------------------ | ----------- |
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'`        | `'default'` |
+| `size`    | `'xs' \| 'sm' \| 'default' \| 'lg' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg'` | `'default'` |
+| `class`   | `string`                                                                             | `''`        |
+
+The selected variant + size are also exposed via `data-variant` / `data-size`
+attributes on the host for styling overrides.
+
+Hosts: `button[Button]` and `a[Button]`.
+
+Re-exports: `buttonVariants`, `ButtonVariant`, `ButtonSize`.
+
+## Styling and theming
+
+Tokens: `--primary`, `--primary-foreground`, `--secondary`, `--destructive`,
+`--border`, `--accent`, `--ring`.
+
+Every state (hover, focus-visible, active, disabled) is covered by the variants.
+Focus-visible uses a 2px `ring-ring` outline for keyboard users.
+
+Pass `class` to layer width, shape, and spacing overrides such as `rounded-full`, `w-full`, or responsive layout utilities.
+
+The local primitive already opts into `cursor-pointer` for interactive hosts, so you do not need an extra Tailwind base-layer override to restore button cursors.
+
+## Accessibility
+
+Attribute selectors force you to pick a real semantic element:
+
+- Use `<button Button>` for actions that don't navigate.
+- Use `<a Button href="…">` for navigation.
+- Add an `aria-label` to icon-only buttons.
+- Use `type="button"` inside forms unless the button should submit.
+
+Avoid faking buttons with `<div>` — keyboard and screen-reader support depend on
+the native element.
+
+## Keyboard interactions
+
+- Native buttons support Tab, Enter, and Space automatically.
+- Anchors with `href` participate in normal link focus and Enter activation.
+
+## Angular notes
+
+- Import `ButtonComponent` into the standalone component that renders the host element.
+- There is no Angular `asChild` input; pick the semantic host element directly.
+
+## Source parity
+
+This Angular version follows the shadcn Button information architecture while translating examples to native hosts, standalone imports, and Angular-friendly template patterns.

package/button-group/README.md

@@ -0,0 +1,208 @@
+# Button Group
+
+Groups related action buttons, text pills, inputs, and nested control clusters into a single visual control boundary.
+
+Use Button Group for toolbars, split actions, search bars, and compact action clusters where neighboring controls should read as one control family rather than isolated buttons.
+
+## Import
+
+```ts
+import { ButtonComponent } from '@ojiepermana/angular-component/button';
+import {
+  ButtonGroupComponent,
+  ButtonGroupSeparatorComponent,
+  ButtonGroupTextComponent,
+} from '@ojiepermana/angular-component/button-group';
+import { InputComponent } from '@ojiepermana/angular-component/input';
+import {
+  InputGroupAddonComponent,
+  InputGroupComponent,
+  InputGroupInputComponent,
+  InputGroupTextComponent,
+} from '@ojiepermana/angular-component/input-group';
+```
+
+## Composition
+
+The Angular structure mirrors the shadcn composition while translating `asChild` to normal Angular content projection.
+
+```text
+ButtonGroup
+├── button[Button] or a[Button]
+├── input[Input] or textarea[Textarea]
+├── ButtonGroupText
+├── ButtonGroupSeparator
+└── ButtonGroup
+```
+
+## Basic usage
+
+Label the group with `aria-label` or `aria-labelledby` whenever the buttons act as a single tool cluster.
+
+```html
+<ButtonGroup aria-label="Search actions" class="w-full max-w-md">
+  <input Input placeholder="Search..." />
+  <button Button type="button" variant="outline" aria-label="Run search">Search</button>
+</ButtonGroup>
+```
+
+## Common patterns
+
+### Orientation
+
+Use `orientation="vertical"` when the group should stack actions instead of lining them up horizontally.
+
+```html
+<ButtonGroup orientation="vertical" aria-label="Zoom controls" class="h-fit">
+  <button Button type="button" variant="outline" size="icon">+</button>
+  <button Button type="button" variant="outline" size="icon">-</button>
+</ButtonGroup>
+```
+
+### Text and field pairing
+
+`ButtonGroupText` is the Angular translation of shadcn's `ButtonGroupText`. Project any semantic content inside it, including a native label.
+
+```html
+<ButtonGroup class="w-full max-w-lg">
+  <ButtonGroupText>
+    <label for="project-name">Project</label>
+  </ButtonGroupText>
+  <input Input id="project-name" placeholder="Type a name..." />
+</ButtonGroup>
+```
+
+### Separator
+
+Use `ButtonGroupSeparator` when filled or secondary buttons still need a visible division.
+
+```html
+<ButtonGroup aria-label="Clipboard actions">
+  <button Button type="button" variant="secondary" size="sm">Copy</button>
+  <ButtonGroupSeparator />
+  <button Button type="button" variant="secondary" size="sm">Paste</button>
+</ButtonGroup>
+```
+
+### Split action
+
+Split buttons are just two neighboring buttons with a separator between the primary action and the disclosure or icon action.
+
+```html
+<ButtonGroup aria-label="Create actions">
+  <button Button type="button" variant="secondary">Create</button>
+  <ButtonGroupSeparator />
+  <button Button type="button" variant="secondary" size="icon" aria-label="Open create menu">+</button>
+</ButtonGroup>
+```
+
+### Search input
+
+Button Group works directly with the local `Input` primitive because both controls own their border on the host element.
+
+```html
+<ButtonGroup aria-label="Repository search" class="w-full max-w-lg">
+  <input Input placeholder="Search repositories..." />
+  <button Button type="button" variant="outline" aria-label="Search">Search</button>
+</ButtonGroup>
+```
+
+### Nested groups
+
+Nest `ButtonGroup` when you want separate clusters with spacing between them while keeping each inner cluster visually fused.
+
+```html
+<ButtonGroup aria-label="Message composer" class="w-full max-w-xl">
+  <ButtonGroup>
+    <button Button type="button" variant="outline" size="icon" aria-label="Add attachment">+</button>
+  </ButtonGroup>
+
+  <ButtonGroup class="min-w-0 flex-1">
+    <InputGroup>
+      <input InputGroupInput placeholder="Send a message..." />
+      <InputGroupAddon align="inline-end">
+        <InputGroupText>⌘↵</InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  </ButtonGroup>
+</ButtonGroup>
+```
+
+### Popover companion
+
+Use a neighboring popover trigger when the primary button opens a short follow-up form or assistant prompt.
+
+```html
+<ButtonGroup aria-label="Copilot actions">
+  <button Button type="button" variant="outline">Copilot</button>
+  <button Button type="button" variant="outline" size="icon" aria-label="Open Copilot options">⋯</button>
+</ButtonGroup>
+```
+
+## API reference
+
+### `ButtonGroupComponent`
+
+| Input         | Type                         | Default        |
+| ------------- | ---------------------------- | -------------- |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `class`       | `string`                     | `''`           |
+
+Host behavior:
+
+- Renders `role="group"`.
+- Adds `data-orientation` and `data-slot="button-group"`.
+- Collapses adjoining corner radius and internal border width with RTL-safe logical properties.
+
+### `ButtonGroupSeparatorComponent`
+
+| Input         | Type                         | Default      |
+| ------------- | ---------------------------- | ------------ |
+| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` |
+| `class`       | `string`                     | `''`         |
+
+### `ButtonGroupTextComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+Angular mapping note: there is no `asChild` input. Project the semantic element you need, such as `<label>` or `<span>`, inside `ButtonGroupText`.
+
+## Styling and theming
+
+- The root collapses adjacent corners and borders with logical start/end utilities so the same component works in LTR and RTL layouts.
+- Nested `ButtonGroup` children automatically create spacing between groups while preserving the fused inner boundaries of each nested group.
+- `ButtonGroupText` uses `border-border`, `bg-muted`, and shared radius tokens so it matches the rest of the component package.
+- `Input` and `InputGroup` compose cleanly inside Button Group because their border and radius live on the visible host. The current Material-backed `SelectField` does not expose the same host-level border contract yet, so the upstream Select example is intentionally not shipped as a parity demo.
+
+## Accessibility
+
+- `ButtonGroup` renders with `role="group"`; provide an accessible name with `aria-label` or `aria-labelledby` when the controls act as one tool cluster.
+- Button Group is for actions. If the clustered controls represent pressed or selected state, use a toggle-group style pattern instead.
+- Add `aria-label` to icon-only buttons inside the group.
+- `ButtonGroupText` is non-interactive content. Keep labels, helper text, or status copy inside it and leave action handling to the actual button or input controls.
+
+## Keyboard interactions
+
+- Tab order follows the DOM order of the projected controls.
+- Native buttons keep their built-in Enter and Space activation behavior.
+- Inputs and textareas keep their native editing behavior.
+- Popover and menu triggers inside a group keep the keyboard behavior of their own directives; the group container does not intercept those interactions.
+
+## Button Group vs Toggle Group
+
+- Use Button Group when each item performs an immediate action.
+- Use Toggle Group when each item represents persistent pressed, selected, or filter state.
+
+## Angular notes
+
+- Import `ButtonGroupComponent` plus only the child primitives you render on the page.
+- There is no React-style `asChild` prop. Angular templates already let you choose the semantic element directly.
+- Use nested `ButtonGroup` elements for spacing between related clusters rather than adding gap utilities to a single fused group.
+
+## Source parity
+
+This Angular implementation follows the shadcn Button Group surface with a grouped root, text pill, separator, nested-group spacing, dropdown and popover composition, and RTL-friendly border collapsing.
+
+The main documented deviation is the upstream Select example: the local `SelectField` remains Material-backed, so it is better composed next to the group in surrounding layout for now instead of being presented as a fused host-level group item.

package/calendar/README.md

@@ -0,0 +1,135 @@
+# Calendar
+
+Inline single-date calendar built on Angular Material `MatCalendar` and wrapped with shadcn-style theme tokens.
+
+Use Calendar when the date grid should stay visible in the page. Use `DatePickerComponent` when the same selection should live behind an input and popover trigger.
+
+## Import
+
+```ts
+import { CalendarComponent } from '@ojiepermana/angular-component/calendar';
+```
+
+## Date adapter
+
+The component self-provides a native `DateAdapter`, so it works out of the box in any
+consumer — including when federated into a host app that never wired one. You only need
+to add a date adapter at the application root if you want a non-native one or a custom
+locale (`MAT_DATE_LOCALE` flows in from the parent injector):
+
+```ts
+// app.config.ts — optional, only for a custom adapter/locale
+import { provideNativeDateAdapter } from '@angular/material/core';
+
+export const appConfig = {
+  providers: [provideNativeDateAdapter()],
+};
+```
+
+## Usage
+
+Bind `[(value)]` to a `Date | null` signal or component field. Use `startAt` when the first visible month should differ from the selected value.
+
+```html
+<Calendar [(value)]="selectedDate" [startAt]="selectedDate()" />
+```
+
+```ts
+protected readonly selectedDate = signal<Date | null>(new Date(2026, 4, 22));
+```
+
+## Common patterns
+
+### Constrained range
+
+Use `min` and `max` to disable dates outside an allowed window.
+
+```html
+<Calendar [(value)]="billingDate" [min]="minDate" [max]="maxDate" [startAt]="billingDate()" />
+```
+
+```ts
+protected readonly billingDate = signal<Date | null>(new Date(2026, 4, 15));
+protected readonly minDate = new Date(2026, 4, 5);
+protected readonly maxDate = new Date(2026, 4, 25);
+```
+
+### Disabled or booked dates
+
+Pass a `dateFilter` function. Angular Material expects the function to return `true` for selectable dates and `false` for disabled dates.
+
+```html
+<Calendar [(value)]="visitDate" [dateFilter]="availableDateFilter" [startAt]="visitDate()" />
+```
+
+```ts
+protected readonly bookedDates = [new Date(2026, 1, 12), new Date(2026, 1, 13)];
+
+protected readonly availableDateFilter = (candidate: Date | null): boolean =>
+  !!candidate && !this.bookedDates.some((bookedDate) => this.isSameDay(bookedDate, candidate));
+```
+
+### Presets
+
+Compose preset buttons around the calendar and update the same `value` model.
+
+```html
+<Calendar [(value)]="presetDate" [startAt]="presetDate()" class="border-0" />
+
+<button Button type="button" variant="outline" size="sm" (click)="selectPreset(7)">In a week</button>
+```
+
+### Date and time
+
+Calendar owns the date. Native time inputs or `InputGroupComponent` can own the time value next to it.
+
+```html
+<Calendar [(value)]="meetingDate" [startAt]="meetingDate()" />
+
+<InputGroup>
+  <input InputGroupInput type="time" [value]="startTime()" (input)="updateStartTime($event)" />
+</InputGroup>
+```
+
+## API reference
+
+| Input / Model | Type                                | Default   |
+| ------------- | ----------------------------------- | --------- |
+| `value`       | `Date \| null`                      | `null`    |
+| `min`         | `Date \| null`                      | `null`    |
+| `max`         | `Date \| null`                      | `null`    |
+| `startAt`     | `Date \| null`                      | `null`    |
+| `startView`   | `'month' \| 'year' \| 'multi-year'` | `'month'` |
+| `dateFilter`  | `(date: Date \| null) => boolean`   | `null`    |
+| `disabled`    | `boolean`                           | `false`   |
+| `class`       | `string`                            | `''`      |
+
+Implements `ControlValueAccessor` — usable with `[(ngModel)]` and reactive forms.
+
+## Styling and theming
+
+The host uses `--border`, `--background`, `--foreground`, and `--radius`. Pass `class` for layout utilities such as `shadow-sm`, `border-0`, or `[--calendar-width:20rem]`.
+
+The inner Material calendar keeps Angular Material's a11y and navigation behavior while sitting inside the shadcn token wrapper. Use `DatePickerComponent` for popover input flows; this primitive intentionally stays inline.
+
+## Accessibility
+
+`MatCalendar` supplies the ARIA grid semantics, focus management, active date state, and disabled date handling. Provide a visible label or surrounding section heading when the calendar appears in a form-like surface.
+
+## Keyboard interactions
+
+- Arrow keys move between dates.
+- Page Up and Page Down move by month.
+- Home and End move to the start or end of the row.
+- Enter selects the focused date.
+
+## Angular notes
+
+- A native date adapter is built in; provide one at app bootstrap only for a custom adapter/locale.
+- `dateFilter` returns `true` for enabled dates, unlike some predicate APIs that return `true` for blocked dates.
+- `disabled` marks the host as inert and updates the CVA disabled state.
+- This component is a single-date primitive. Range selection is best modeled as a separate range primitive or by composing two calendars with application state.
+
+## Source parity
+
+The shadcn Calendar is built on React DayPicker. This Angular implementation maps the same inline calendar concept to `MatCalendar`, standalone imports, signal-friendly `[(value)]` binding, `min` and `max` constraints, `dateFilter` disabled dates, preset composition, and RTL-friendly container usage.