@origostudio/origo-design 0.0.50 → 0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "license": "MIT",
   "repository": {
     "type": "git",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 0.0.52 (2026-10-09)
+
+### 🚀 Features
+
+- add divider component for angular renderer ([221ded8](https://github.com/OrigoStudio/origo-design/commit/221ded8))
+- add application layout primitives and update card component implementation ([5153adc](https://github.com/OrigoStudio/origo-design/commit/5153adc))
+- add CardComponent primitive and export it in angular-renderer ([2f62893](https://github.com/OrigoStudio/origo-design/commit/2f62893))
+- **angular-renderer:** add new primitive components including card, container, divider, grid, and stack ([fd14eb4](https://github.com/OrigoStudio/origo-design/commit/fd14eb4))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.51 (2026-10-08)
+
+### 🚀 Features
+
+- add DatePickerComponent primitive for Angular renderer ([6746c8e](https://github.com/OrigoStudio/origo-design/commit/6746c8e))
+- add date-picker, time-picker, and date-range-picker primitive components ([25530e1](https://github.com/OrigoStudio/origo-design/commit/25530e1))
+- add date-picker, date-range-picker, and time-picker primitive components to angular renderer ([649dadc](https://github.com/OrigoStudio/origo-design/commit/649dadc))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.50 (2026-10-08)
 
 ### 🚀 Features

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@origostudio/angular-renderer",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "private": false,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origostudio/core": "0.0.50",
-    "@origostudio/design-tokens": "0.0.50",
+    "@origostudio/core": "0.0.52",
+    "@origostudio/design-tokens": "0.0.52",
     "tslib": "^2.3.0",
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "zone.js": "^0.16.3",

package/packages/angular-renderer/src/adapters/web/adapter.ts

@@ -2,8 +2,11 @@ import { Injectable, ViewContainerRef, Signal, InputSignal } from '@angular/core
 import { ASTNode, InteractionContract } from '@origostudio/core';
 
 export interface ContainerComponent {
-  viewContainerRef?: ViewContainerRef | Signal<ViewContainerRef>;
-  vc?: ViewContainerRef | Signal<ViewContainerRef>;
+  viewContainerRef?:
+    | ViewContainerRef
+    | Signal<ViewContainerRef>
+    | Signal<ViewContainerRef | undefined>;
+  vc?: ViewContainerRef | Signal<ViewContainerRef> | Signal<ViewContainerRef | undefined>;
 }
 
 export interface OrigoAdapter<TProps = Record<string, unknown>> {

package/packages/angular-renderer/src/components/primitives/card/card.component.html

@@ -5,7 +5,7 @@
     </div>
   }
 
-  @if (computedTitle() !== undefined || computedSubtitle() !== undefined) {
+  @if (hasContent()) {
     <div class="origo-card-content">
       @if (computedTitle() !== undefined && computedTitle() !== '') {
         <div class="origo-card-title" role="heading" aria-level="3">{{ computedTitle() }}</div>
@@ -13,6 +13,8 @@
       @if (computedSubtitle() !== undefined && computedSubtitle() !== '') {
         <div class="origo-card-subtitle">{{ computedSubtitle() }}</div>
       }
+      <ng-container #vc></ng-container>
+      <ng-content></ng-content>
     </div>
   }
 </div>

package/packages/angular-renderer/src/components/primitives/card/card.component.scss

@@ -3,14 +3,44 @@
   width: 100%;
 }
 
+:host(.origo-card--elevation-sm) .origo-card-container {
+  box-shadow: var(--origo-shadow-sm);
+}
+:host(.origo-card--elevation-md) .origo-card-container {
+  box-shadow: var(--origo-shadow-md);
+}
+:host(.origo-card--elevation-lg) .origo-card-container {
+  box-shadow: var(--origo-shadow-lg);
+}
+:host(.origo-card--clickable) .origo-card-container {
+  cursor: pointer;
+}
+:host(.origo-card--hoverable) .origo-card-container:hover {
+  box-shadow: var(--origo-shadow-md);
+}
+
 .origo-card-container {
   display: flex;
   flex-direction: column;
   width: 100%;
-  border-radius: var(--origo-radius-sm, 4px);
-  border: 1px solid var(--origo-color-border-default, #ccc);
-  background-color: var(--origo-color-surface-background, #fff);
+  border-radius: var(--origo-radius-sm);
+  border: 1px solid var(--origo-color-border-default);
+  background-color: var(--origo-color-surface-background);
   overflow: hidden;
+  transition:
+    box-shadow var(--origo-transition-fast, 0.2s ease-in-out),
+    border-color var(--origo-transition-fast, 0.2s ease-in-out),
+    background-color var(--origo-transition-fast, 0.2s ease-in-out);
+}
+
+/* Variant Overrides */
+:host(.origo-card--variant-outline) .origo-card-container {
+  background-color: transparent;
+  border-color: var(--origo-color-border-strong, #ccc);
+}
+:host(.origo-card--variant-ghost) .origo-card-container {
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .origo-card-image {
@@ -27,21 +57,21 @@
 .origo-card-content {
   display: flex;
   flex-direction: column;
-  padding-inline-start: var(--origo-spacing-container-padding, 16px);
-  padding-inline-end: var(--origo-spacing-container-padding, 16px);
-  padding-block: var(--origo-spacing-container-padding, 16px);
-  gap: var(--origo-spacing-element-gap, 8px);
+  padding-inline-start: var(--origo-spacing-container-padding);
+  padding-inline-end: var(--origo-spacing-container-padding);
+  padding-block: var(--origo-spacing-container-padding);
+  gap: var(--origo-spacing-element-gap);
   text-align: start;
-  color: var(--origo-color-text-primary, #333);
+  color: var(--origo-color-text-primary);
   font-family: var(--origo-typography-input-font-family, inherit);
 }
 
 .origo-card-title {
-  font-size: calc(var(--origo-typography-input-font-size, 14px) * 1.25);
+  font-size: calc(var(--origo-typography-input-font-size) * 1.25);
   font-weight: 600;
 }
 
 .origo-card-subtitle {
-  font-size: var(--origo-typography-input-font-size, 14px);
+  font-size: var(--origo-typography-input-font-size);
   opacity: 0.8;
 }

package/packages/angular-renderer/src/components/primitives/card/card.component.ts

@@ -6,10 +6,12 @@ import {
   ViewEncapsulation,
   inject,
   SecurityContext,
+  viewChild,
+  ViewContainerRef,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { InteractionContract } from '@origostudio/core';
-import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { OrigoAdapter, ContainerComponent } from '../../../adapters/web/adapter';
 
 export interface CardProps {
   permissions?: Record<string, string>;
@@ -21,6 +23,10 @@ export interface CardProps {
   imageAlt?: string;
   'aria-label'?: string;
   'aria-describedby'?: string;
+  elevation?: 'none' | 'sm' | 'md' | 'lg';
+  variant?: string;
+  clickable?: boolean;
+  hoverable?: boolean;
 }
 
 @Component({
@@ -35,9 +41,22 @@ export interface CardProps {
     '[attr.data-testid]': 'contract().id',
     '[attr.aria-label]': 'computedAriaLabel()',
     '[attr.aria-describedby]': 'computedAriaDescribedBy()',
+    '[attr.tabindex]': 'isClickable() ? "0" : null',
+    '[attr.role]': '"article"',
+    '(keydown.enter)': 'onKeydown($event)',
+    '(keydown.space)': 'onKeydown($event)',
+    '[class.origo-card--elevation-none]': 'computedElevation() === "none"',
+    '[class.origo-card--elevation-sm]': 'computedElevation() === "sm"',
+    '[class.origo-card--elevation-md]': 'computedElevation() === "md"',
+    '[class.origo-card--elevation-lg]': 'computedElevation() === "lg"',
+    '[class.origo-card--variant-solid]': 'computedVariant() === "solid"',
+    '[class.origo-card--variant-outline]': 'computedVariant() === "outline"',
+    '[class.origo-card--variant-ghost]': 'computedVariant() === "ghost"',
+    '[class.origo-card--hoverable]': 'isHoverable()',
+    '[class.origo-card--clickable]': 'isClickable()',
   },
 })
-export class CardComponent implements OrigoAdapter<CardProps> {
+export class CardComponent implements OrigoAdapter<CardProps>, ContainerComponent {
   static readonly contractSchema = {
     permissions: 'object',
     rules: 'object',
@@ -46,10 +65,15 @@ export class CardComponent implements OrigoAdapter<CardProps> {
     subtitle: 'string',
     imageUrl: 'string',
     imageAlt: 'string',
+    elevation: 'string',
+    variant: 'string',
+    clickable: 'boolean',
+    hoverable: 'boolean',
   };
   static readonly strictContract = false;
 
   contract = input.required<InteractionContract<CardProps>>();
+  vc = viewChild('vc', { read: ViewContainerRef });
 
   private sanitizer = inject(DomSanitizer);
 
@@ -86,4 +110,33 @@ export class CardComponent implements OrigoAdapter<CardProps> {
     const desc = this.contract().props?.['aria-describedby'];
     return desc !== undefined && desc !== null ? String(desc) : undefined;
   });
+
+  computedElevation = computed(() => this.contract().props?.elevation || 'none');
+
+  computedVariant = computed(() => this.contract().props?.variant || 'solid');
+
+  hasContent = computed(() => {
+    const hasTitle = !!this.computedTitle();
+    const hasSubtitle = !!this.computedSubtitle();
+    const children = this.contract().children;
+    const hasChildren = children ? children.length > 0 : false;
+    return hasTitle || hasSubtitle || hasChildren;
+  });
+
+  isClickable = computed(() => {
+    const c = this.contract().props?.clickable;
+    return c === true || String(c) === 'true';
+  });
+
+  isHoverable = computed(() => {
+    const h = this.contract().props?.hoverable;
+    return h === true || String(h) === 'true';
+  });
+
+  onKeydown(event: Event) {
+    if (this.isClickable() && event.target === event.currentTarget) {
+      event.preventDefault();
+      (event.target as HTMLElement).click();
+    }
+  }
 }

package/packages/angular-renderer/src/components/primitives/container/container.component.html

@@ -0,0 +1,12 @@
+<div
+  class="origo-container"
+  [class.origo-container--fluid]="props().fluid"
+  [style.max-width]="props().maxWidth || null"
+  [style.padding-inline]="paddingValue || null"
+  [style.padding-block]="paddingValue || null"
+  [attr.aria-label]="props()['aria-label'] || null"
+  [attr.aria-describedby]="props()['aria-describedby'] || null"
+>
+  <ng-container #vc></ng-container>
+  <ng-content></ng-content>
+</div>

package/packages/angular-renderer/src/components/primitives/container/container.component.scss

@@ -0,0 +1,9 @@
+.origo-container {
+  box-sizing: border-box;
+  width: 100%;
+  margin-inline: auto; // Centers horizontally if max-width is applied
+}
+
+.origo-container--fluid {
+  max-width: 100% !important;
+}

package/packages/angular-renderer/src/components/primitives/container/container.component.ts

@@ -0,0 +1,65 @@
+import {
+  Component,
+  input,
+  viewChild,
+  ViewContainerRef,
+  computed,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import {
+  OrigoAdapter,
+  ContainerComponent as IContainerComponent,
+  coerceContractProps,
+} from '../../../adapters/web/adapter';
+
+export interface ContainerProps {
+  fluid?: boolean;
+  maxWidth?: string;
+  padding?: string | number;
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+const contractSchema: Record<
+  keyof ContainerProps,
+  'string' | 'number' | 'boolean' | 'array' | 'object'
+> = {
+  fluid: 'boolean',
+  maxWidth: 'string',
+  padding: 'string',
+  permissions: 'object',
+  rules: 'object',
+  metadata: 'object',
+  'aria-label': 'string',
+  'aria-describedby': 'string',
+};
+
+@Component({
+  selector: 'origo-container',
+  standalone: true,
+  templateUrl: './container.component.html',
+  styleUrl: './container.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+export class ContainerComponent implements OrigoAdapter<ContainerProps>, IContainerComponent {
+  static readonly contractSchema = contractSchema;
+
+  contract = input.required<InteractionContract<ContainerProps>>();
+  vc = viewChild.required('vc', { read: ViewContainerRef });
+
+  protected props = computed(() =>
+    coerceContractProps<ContainerProps>(this.contract().props, contractSchema)
+  );
+
+  protected get paddingValue(): string {
+    const p = this.props().padding;
+    if (typeof p === 'number' || /^\d+$/.test(String(p))) return `${p}px`;
+    return (p as string) || '';
+  }
+}

package/packages/angular-renderer/src/components/primitives/date-picker/date-picker.component.html

@@ -0,0 +1,73 @@
+<div class="origo-date-picker-wrapper">
+  <input
+    type="text"
+    class="origo-date-picker__input"
+    readonly
+    inputmode="none"
+    [value]="displayValue()"
+    (click)="toggleCalendar()"
+    (keydown)="onInputKeyDown($event)"
+    [attr.aria-label]="computedAriaLabel()"
+    aria-haspopup="grid"
+    [attr.aria-expanded]="isOpen()"
+  />
+
+  @if (isOpen()) {
+    <div class="origo-date-picker__calendar" role="grid" aria-label="Calendar">
+      <div class="origo-date-picker__header">
+        <button type="button" (click)="prevMonth()" aria-label="Previous Month">&lt;</button>
+        <span aria-live="polite">{{ currentMonthYear() }}</span>
+        <button type="button" (click)="nextMonth()" aria-label="Next Month">&gt;</button>
+      </div>
+
+      <div role="row" class="origo-date-picker__weekdays">
+        @for (day of weekDays; track day) {
+          <div role="columnheader">{{ day }}</div>
+        }
+      </div>
+
+      <div class="origo-date-picker__days">
+        @for (week of calendarGrid(); track $index) {
+          <div role="row">
+            @for (day of week; track day.date.toISOString()) {
+              <div
+                role="gridcell"
+                [id]="
+                  'day-' +
+                  day.date.getUTCFullYear() +
+                  '-' +
+                  day.date.getUTCMonth() +
+                  '-' +
+                  day.date.getUTCDate()
+                "
+                [class.origo-date-picker__day]="true"
+                [class.origo-date-picker__day--other-month]="!day.isCurrentMonth"
+                [class.origo-date-picker__day--selected]="isSelected(day.date)"
+                [class.origo-date-picker__day--disabled]="day.disabled"
+                [attr.aria-selected]="isSelected(day.date)"
+                [attr.aria-disabled]="day.disabled"
+                [attr.tabindex]="
+                  isSelected(day.date) || (!hasSelection() && day.isToday)
+                    ? 0
+                    : day.isCurrentMonth && !hasSelection() && !day.disabled
+                      ? 0
+                      : -1
+                "
+                (click)="
+                  selectDate(
+                    day.date.getUTCFullYear(),
+                    day.date.getUTCMonth(),
+                    day.date.getUTCDate()
+                  )
+                "
+                (keydown)="onDayKeyDown($event, day.date)"
+              >
+                {{ day.date.getUTCDate() }}
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  }
+</div>

package/packages/angular-renderer/src/components/primitives/date-picker/date-picker.component.scss

@@ -0,0 +1,77 @@
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--origo-typography-body-font-family);
+}
+
+.origo-date-picker__input {
+  width: 100%;
+  padding: var(--origo-spacing-sm) var(--origo-spacing-md);
+  border: 1px solid var(--origo-color-neutral-300);
+  border-radius: var(--origo-border-radius-md);
+  background-color: var(--origo-color-surface-default);
+  cursor: pointer;
+}
+
+.origo-date-picker__calendar {
+  position: absolute;
+  top: calc(100% + var(--origo-spacing-xs));
+  left: 0;
+  z-index: 1000;
+  background: var(--origo-color-surface-default);
+  border: 1px solid var(--origo-color-neutral-200);
+  border-radius: var(--origo-border-radius-md);
+  box-shadow: var(--origo-shadow-md);
+  padding: var(--origo-spacing-md);
+  min-width: 280px;
+}
+
+.origo-date-picker__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--origo-spacing-md);
+  font-weight: bold;
+}
+
+.origo-date-picker__weekdays,
+.origo-date-picker__days > div {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  gap: var(--origo-spacing-xs);
+}
+
+.origo-date-picker__weekdays {
+  font-size: 0.85em;
+  color: var(--origo-color-neutral-500);
+  margin-bottom: var(--origo-spacing-sm);
+}
+
+.origo-date-picker__day {
+  padding: var(--origo-spacing-sm) var(--origo-spacing-xs);
+  border-radius: var(--origo-border-radius-sm);
+  cursor: pointer;
+}
+
+.origo-date-picker__day:hover:not(.origo-date-picker__day--disabled) {
+  background-color: var(--origo-color-neutral-100);
+}
+
+.origo-date-picker__day--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.origo-date-picker__day--other-month {
+  color: var(--origo-color-neutral-400);
+}
+
+.origo-date-picker__day--selected {
+  background-color: var(--origo-color-primary-main);
+  color: var(--origo-color-surface-default);
+}
+
+.origo-date-picker__day--selected:hover:not(.origo-date-picker__day--disabled) {
+  background-color: var(--origo-color-primary-dark);
+}