@origostudio/origo-design 0.0.49 → 0.0.51

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

@@ -0,0 +1,65 @@
+<div class="origo-time-picker-wrapper">
+  <input
+    type="text"
+    class="origo-time-picker__input"
+    readonly
+    inputmode="none"
+    [value]="displayValue()"
+    (click)="toggleOverlay()"
+    (keydown)="onInputKeyDown($event)"
+    [attr.aria-label]="computedAriaLabel()"
+    aria-haspopup="listbox"
+    [attr.aria-expanded]="isOpen()"
+  />
+
+  @if (isOpen()) {
+    <div class="origo-time-picker__overlay" role="listbox" aria-label="Time Selector">
+      <div class="origo-time-picker__columns">
+        <div class="origo-time-picker__column">
+          @for (hour of hours(); track hour) {
+            <div
+              role="option"
+              class="origo-time-picker__option"
+              [class.origo-time-picker__option--selected]="isSelectedHour(hour)"
+              [attr.aria-selected]="isSelectedHour(hour)"
+              (click)="selectHour(hour)"
+            >
+              {{ pad(hour) }}
+            </div>
+          }
+        </div>
+        <div class="origo-time-picker__column">
+          @for (minute of minutes(); track minute) {
+            <div
+              role="option"
+              class="origo-time-picker__option"
+              [class.origo-time-picker__option--selected]="isSelectedMinute(minute)"
+              [attr.aria-selected]="isSelectedMinute(minute)"
+              (click)="selectMinute(minute)"
+            >
+              {{ pad(minute) }}
+            </div>
+          }
+        </div>
+        @if (is12h()) {
+          <div class="origo-time-picker__column">
+            @for (period of periods(); track period) {
+              <div
+                role="option"
+                class="origo-time-picker__option"
+                [class.origo-time-picker__option--selected]="isSelectedPeriod(period)"
+                [attr.aria-selected]="isSelectedPeriod(period)"
+                (click)="selectPeriod(period)"
+              >
+                {{ period }}
+              </div>
+            }
+          </div>
+        }
+      </div>
+      <div class="origo-time-picker__actions">
+        <button type="button" (click)="confirmTime()">OK</button>
+      </div>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--origo-typography-body-font-family);
+}
+
+.origo-time-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-time-picker__overlay {
+  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-sm);
+  display: flex;
+  flex-direction: column;
+}
+
+.origo-time-picker__columns {
+  display: flex;
+  gap: var(--origo-spacing-sm);
+  height: 200px;
+}
+
+.origo-time-picker__column {
+  overflow-y: auto;
+  flex: 1;
+  border-right: 1px solid var(--origo-color-neutral-200);
+}
+.origo-time-picker__column:last-child {
+  border-right: none;
+}
+
+.origo-time-picker__option {
+  padding: var(--origo-spacing-sm);
+  text-align: center;
+  cursor: pointer;
+}
+
+.origo-time-picker__option:hover {
+  background-color: var(--origo-color-neutral-100);
+}
+
+.origo-time-picker__option--selected {
+  background-color: var(--origo-color-primary-main);
+  color: var(--origo-color-surface-default);
+}
+
+.origo-time-picker__actions {
+  margin-top: var(--origo-spacing-sm);
+  text-align: right;
+  border-top: 1px solid var(--origo-color-neutral-200);
+  padding-top: var(--origo-spacing-sm);
+}

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

@@ -0,0 +1,229 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  model,
+  signal,
+  computed,
+  inject,
+  effect,
+  untracked,
+  HostListener,
+  ElementRef,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface TimePickerProps {
+  format?: '12h' | '24h';
+  value?: string; // ISO 8601 UTC
+  'aria-label'?: string;
+}
+
+@Component({
+  selector: 'origo-time-picker',
+  standalone: true,
+  templateUrl: './time-picker.component.html',
+  styleUrls: ['./time-picker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+export class TimePickerComponent implements OrigoAdapter<TimePickerProps> {
+  static readonly contractSchema = {
+    format: 'string',
+    value: 'string',
+    'aria-label': 'string',
+    permissions: 'array',
+    rules: 'array',
+    metadata: 'object',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<TimePickerProps>>();
+  value = model<string | null>(null);
+
+  isOpen = signal<boolean>(false);
+  selectedHour = signal<number>(0);
+  selectedMinute = signal<number>(0);
+  selectedPeriod = signal<'AM' | 'PM'>('AM');
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+  private elementRef = inject(ElementRef);
+
+  is12h = computed(() => this.contract().props?.format === '12h');
+  computedAriaLabel = computed(() => this.contract().props?.['aria-label'] || 'Time Picker');
+
+  hours = computed(() => {
+    return this.is12h()
+      ? Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i))
+      : Array.from({ length: 24 }, (_, i) => i);
+  });
+
+  minutes = computed(() => Array.from({ length: 60 }, (_, i) => i));
+  periods = computed(() => ['AM', 'PM'] as const);
+
+  displayValue = computed(() => {
+    const val = this.value();
+    if (!val) return '';
+    const d = this.parseSafeUTC(val);
+    if (!d) return '';
+
+    let h = d.getUTCHours();
+    const m = d.getUTCMinutes();
+
+    if (this.is12h()) {
+      const period = h >= 12 ? 'PM' : 'AM';
+      h = h % 12;
+      if (h === 0) h = 12;
+      return `${this.pad(h)}:${this.pad(m)} ${period}`;
+    }
+    return `${this.pad(h)}:${this.pad(m)}`;
+  });
+
+  private parseSafeUTC(timeStr: string): Date | null {
+    if (!timeStr) return null;
+
+    // Check for HH:MM format
+    const timeMatch = timeStr.trim().match(/^(\d{2}):(\d{2})/);
+    if (timeMatch && timeStr.trim().length <= 8) {
+      const d = new Date(
+        Date.UTC(1970, 0, 1, parseInt(timeMatch[1], 10), parseInt(timeMatch[2], 10), 0, 0)
+      );
+      return d;
+    }
+
+    const d = new Date(timeStr);
+    if (isNaN(d.getTime())) return null;
+    return d;
+  }
+
+  constructor() {
+    effect(() => {
+      const val = this.contract().props?.value;
+      untracked(() => {
+        if (val === undefined || val === null) {
+          this.value.set(null);
+          this.syncInternalStateFromValue(null);
+        } else {
+          this.value.set(String(val));
+          this.syncInternalStateFromValue(String(val));
+        }
+      });
+    });
+  }
+
+  @HostListener('document:mousedown', ['$event'])
+  onClickOutside(event: MouseEvent) {
+    if (this.isOpen() && !this.elementRef.nativeElement.contains(event.target)) {
+      this.isOpen.set(false);
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscape() {
+    if (this.isOpen()) {
+      this.isOpen.set(false);
+    }
+  }
+
+  private syncInternalStateFromValue(val: string | null) {
+    if (!val) {
+      this.selectedHour.set(this.is12h() ? 12 : 0);
+      this.selectedMinute.set(0);
+      this.selectedPeriod.set('AM');
+      return;
+    }
+
+    const d = this.parseSafeUTC(val);
+    if (d) {
+      let h = d.getUTCHours();
+      this.selectedMinute.set(d.getUTCMinutes());
+      if (this.is12h()) {
+        this.selectedPeriod.set(h >= 12 ? 'PM' : 'AM');
+        h = h % 12;
+        if (h === 0) h = 12;
+      }
+      this.selectedHour.set(h);
+    } else {
+      this.selectedHour.set(this.is12h() ? 12 : 0);
+      this.selectedMinute.set(0);
+      this.selectedPeriod.set('AM');
+    }
+  }
+
+  toggleOverlay() {
+    this.isOpen.update(v => !v);
+  }
+
+  pad(n: number): string {
+    return String(n).padStart(2, '0');
+  }
+
+  isSelectedHour(h: number) {
+    return this.selectedHour() === h;
+  }
+  isSelectedMinute(m: number) {
+    return this.selectedMinute() === m;
+  }
+  isSelectedPeriod(p: string) {
+    return this.selectedPeriod() === p;
+  }
+
+  selectHour(h: number) {
+    this.selectedHour.set(h);
+  }
+  selectMinute(m: number) {
+    this.selectedMinute.set(m);
+  }
+  selectPeriod(p: 'AM' | 'PM') {
+    this.selectedPeriod.set(p);
+  }
+
+  selectTime(h: number, m: number, p?: 'AM' | 'PM') {
+    this.selectedHour.set(h);
+    this.selectedMinute.set(m);
+    if (p) this.selectedPeriod.set(p);
+    this.confirmTime();
+  }
+
+  confirmTime() {
+    let h = this.selectedHour();
+    const m = this.selectedMinute();
+
+    if (this.is12h()) {
+      const p = this.selectedPeriod();
+      if (p === 'PM' && h !== 12) h += 12;
+      else if (p === 'AM' && h === 12) h = 0;
+    }
+
+    let year = 1970;
+    let month = 0;
+    let day = 1;
+
+    const currentVal = this.value();
+    if (currentVal) {
+      const parsed = this.parseSafeUTC(currentVal);
+      if (parsed) {
+        year = parsed.getUTCFullYear();
+        month = parsed.getUTCMonth();
+        day = parsed.getUTCDate();
+      }
+    }
+
+    const selectedDate = new Date(Date.UTC(year, month, day, h, m, 0, 0));
+    const isoString = selectedDate.toISOString();
+
+    this.value.set(isoString);
+    this.experienceAdapter.updateState(this.contract().id, 'value', isoString);
+    this.isOpen.set(false);
+  }
+
+  onInputKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      this.isOpen.set(true);
+    }
+  }
+}

package/packages/angular-renderer/src/index.ts

@@ -10,6 +10,9 @@ export * from './components/primitives/button-group/button-group.component';
 export * from './components/primitives/floating-action-button/floating-action-button.component';
 export * from './devtools';
 export * from './components/primitives/select/select.component';
+export * from './components/primitives/multi-select/multi-select.component';
+export * from './components/primitives/autocomplete/autocomplete.component';
+export * from './components/primitives/combobox/combobox.component';
 export * from './components/primitives/checkbox/checkbox.component';
 export * from './components/primitives/radio-group/radio-group.component';
 export * from './components/primitives/textarea/textarea.component';
@@ -25,3 +28,6 @@ export * from './components/primitives/tabs/tabs.component';
 export * from './components/primitives/breadcrumbs/breadcrumbs.component';
 export * from './adapters/web/experience-adapter.service';
 export * from './components/primitives/input-number/input-number.component';
+export * from './components/primitives/date-picker/date-picker.component';
+export * from './components/primitives/time-picker/time-picker.component';
+export * from './components/primitives/date-range-picker/date-range-picker.component';

package/packages/angular-renderer/src/lib/primitives.provider.ts

@@ -4,6 +4,9 @@ import { IconButtonComponent } from '../components/primitives/icon-button/icon-b
 import { ButtonGroupComponent } from '../components/primitives/button-group/button-group.component';
 import { FloatingActionButtonComponent } from '../components/primitives/floating-action-button/floating-action-button.component';
 import { SelectComponent } from '../components/primitives/select/select.component';
+import { MultiSelectComponent } from '../components/primitives/multi-select/multi-select.component';
+import { AutocompleteComponent } from '../components/primitives/autocomplete/autocomplete.component';
+import { ComboboxComponent } from '../components/primitives/combobox/combobox.component';
 import { CheckboxComponent } from '../components/primitives/checkbox/checkbox.component';
 import { RadioGroupComponent } from '../components/primitives/radio-group/radio-group.component';
 import { TextareaComponent } from '../components/primitives/textarea/textarea.component';
@@ -22,6 +25,9 @@ import { TextInputComponent } from '../components/primitives/text-input/text-inp
 import { ButtonComponent } from '../components/primitives/button/button.component';
 import { VBoxComponent } from '../components/primitives/vbox/vbox.component';
 import { InputNumberComponent } from '../components/primitives/input-number/input-number.component';
+import { DatePickerComponent } from '../components/primitives/date-picker/date-picker.component';
+import { TimePickerComponent } from '../components/primitives/time-picker/time-picker.component';
+import { DateRangePickerComponent } from '../components/primitives/date-range-picker/date-range-picker.component';
 
 export function provideOrigo9Primitives(): EnvironmentProviders {
   const registryMap = new Map<string, unknown>([
@@ -29,6 +35,9 @@ export function provideOrigo9Primitives(): EnvironmentProviders {
     ['ButtonGroup', ButtonGroupComponent],
     ['FloatingActionButton', FloatingActionButtonComponent],
     ['Select', SelectComponent],
+    ['MultiSelect', MultiSelectComponent],
+    ['Autocomplete', AutocompleteComponent],
+    ['Combobox', ComboboxComponent],
     ['Checkbox', CheckboxComponent],
     ['RadioGroup', RadioGroupComponent],
     ['Textarea', TextareaComponent],
@@ -48,6 +57,9 @@ export function provideOrigo9Primitives(): EnvironmentProviders {
     ['Button', ButtonComponent],
     ['VBox', VBoxComponent],
     ['InputNumber', InputNumberComponent],
+    ['DatePicker', DatePickerComponent],
+    ['TimePicker', TimePickerComponent],
+    ['DateRangePicker', DateRangePickerComponent],
     ['vbox', VBoxComponent], // For backward compatibility with 'vbox' in preview-root
   ]);
 

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.51 (2026-10-08)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for cli to align it with other projects, there were no code changes.

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/cli",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origostudio/core": "0.0.49",
+    "@origostudio/core": "0.0.51",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
   },

package/packages/core/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.51 (2026-10-08)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for core to align it with other projects, there were no code changes.

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/core",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.51 (2026-10-08)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for design-tokens to align it with other projects, there were no code changes.

package/packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/design-tokens",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/devtools/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.0.51 (2026-10-08)
+
+This was a version bump only for devtools to align it with other projects, there were no code changes.
+
+## 0.0.50 (2026-10-08)
+
+### 🚀 Features
+
+- add core selection control primitives including select, multi-select, combobox, and autocomplete components ([3866703](https://github.com/OrigoStudio/origo-design/commit/3866703))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for devtools to align it with other projects, there were no code changes.

package/packages/devtools/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":159.0430180000003,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":179.4777580000009,"failed":false}]]}

package/packages/devtools/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@origostudio/devtools",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "type": "module",
   "dependencies": {
-    "@origostudio/core": "0.0.49",
-    "@origostudio/cli": "0.0.49",
+    "@origostudio/core": "0.0.51",
+    "@origostudio/cli": "0.0.51",
     "@angular/core": "18.1.0",
     "@angular/common": "18.1.0"
   },

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.51 (2026-10-08)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for playground to align it with other projects, there were no code changes.

package/packages/playground/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/editor/badl-editor.component.spec.ts",{"duration":355.58316600000035,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":3910.8276769999975,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":552.2895629999985,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":23.031402000000526,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":53.45418900000004,"failed":false}],[":src/app/app.component.spec.ts",{"duration":232.5201330000018,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":124.97693900000013,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/preview/preview-root.component.spec.ts",{"duration":511.31507599999895,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":560.8525979999977,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":6044.724211000001,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":39.81070399999953,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":140.87093800000002,"failed":false}],[":src/app/app.component.spec.ts",{"duration":580.886137999998,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":345.5656220000019,"failed":false}]]}

package/packages/playground/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@origostudio/playground",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "private": true,
   "dependencies": {
-    "@origostudio/core": "0.0.49",
-    "@origostudio/cli": "0.0.49"
+    "@origostudio/core": "0.0.51",
+    "@origostudio/cli": "0.0.51"
   },
   "peerDependencies": {
     "@angular/common": "^18.0.0",