@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/ContextMenu.vue

@@ -2,7 +2,7 @@
 import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger } from "reka-ui";
 import { computed } from "vue";
 import { contextMenuTheme } from "../theme/context-menu";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 const props = defineProps({
   items: { type: Array, required: true },
@@ -10,6 +10,7 @@ const props = defineProps({
 });
 defineSlots();
 const theme = useComponentTheme("contextMenu", contextMenuTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 function itemPropsFor(item) {
@@ -27,7 +28,7 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal>
-      <ContextMenuContent v-bind="contentProps">
+      <ContextMenuContent :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <template v-for="(group, groupIndex) in items" :key="groupIndex">
           <ContextMenuSeparator v-if="groupIndex > 0" v-bind="separatorProps" />
           <ContextMenuItem

package/dist/runtime/components/DashboardSidebar.vue

@@ -103,7 +103,7 @@ const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer
     overlay reads differently from an inline panel anyway, so there's
     no real reason to force the split-pane's exact classes onto it.
   -->
-  <Drawer v-else v-model:open="mobileOpen" side="left" :handle="false" :ui="{ content: 'bg-[var(--ui-bg-elevated)]' }">
+  <Drawer v-else v-model:open="mobileOpen" side="left" :handle="false" :ui="{ content: 'bg-[var(--selaras-resolved-surface-elevated)]' }">
     <template v-if="$slots.header" #header>
       <slot name="header" :is-collapsed="false" />
     </template>

package/dist/runtime/components/DashboardSidebarToggle.d.vue.ts

@@ -8,6 +8,7 @@ export interface DashboardSidebarToggleSlots {
     default?: (props: {
         toggle: () => void;
         isCollapsed: boolean;
+        attrs: Record<string, unknown>;
     }) => any;
 }
 declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -6,6 +6,7 @@ import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
 import { applyClassPrefix } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   icon: { type: String, required: false }
 });
@@ -20,8 +21,9 @@ const messages = useMessages();
     v-if="dashboard?.toggleSidebar.value"
     :toggle="dashboard.toggleSidebar.value"
     :is-collapsed="dashboard.isSidebarCollapsed.value"
+    :attrs="$attrs"
   >
-    <Button variant="ghost" color="neutral" :aria-label="messages.toggleSidebar" @click="dashboard.toggleSidebar.value?.()">
+    <Button variant="ghost" color="neutral" :aria-label="messages.toggleSidebar" v-bind="$attrs" @click="dashboard.toggleSidebar.value?.()">
       <!--
         A slot override (not Button's own `icon` prop + `:ui.leadingIcon`) -
         that `:ui` object would collide with a consumer's own fallthrough

package/dist/runtime/components/DashboardSidebarToggle.vue.d.ts

@@ -8,6 +8,7 @@ export interface DashboardSidebarToggleSlots {
     default?: (props: {
         toggle: () => void;
         isCollapsed: boolean;
+        attrs: Record<string, unknown>;
     }) => any;
 }
 declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DatePicker.d.vue.ts

@@ -1,18 +1,24 @@
 import type { DateValue } from '@internationalized/date';
 import type { DateRange } from 'reka-ui';
 import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { DatePickerThemeSlots } from '../theme/date-picker.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { Time } from '@internationalized/date';
 import { datePickerTheme } from '../theme/date-picker.js';
 type DatePickerVariants = VariantProps<typeof datePickerTheme>;
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface DatePickerProps {
     id?: string;
     name?: string;
+    /** ID of an associated form outside the component's ancestors. */
+    form?: string;
+    open?: boolean;
+    /** Initial uncontrolled open state. */
+    defaultOpen?: boolean;
     /** A single DateValue, Reka's own `{ start?, end? }` DateRange shape when `range` is set, or a bare date-less Time when `timeOnly` is set - Vue props can't express a type that depends on a sibling prop's value, so this stays a plain union documented here rather than enforced by the type checker. */
     modelValue?: DateValue | DateRange | Time;
+    /** Initial uncontrolled value and native form-reset target. */
+    defaultValue?: DateValue | DateRange | Time;
     /** Switches to picking a start+end pair instead of one date - a real fork in which Reka primitive family renders (RangeCalendar/DateRangePicker vs Calendar/DatePicker), not just a different modelValue shape. */
     range?: boolean;
     /** Drops the date entirely - just a time-of-day picker. modelValue becomes a bare `Time` (no date component at all, not a DateValue). A third top-level mode alongside `range`; every date-grid-specific prop below (minValue/maxValue/isDateUnavailable/isDateDisabled/numberOfMonths/pagedNavigation/weekStartsOn/weekdayFormat/fixedWeeks/view) is simply inert here. `granularity` still applies ('hour'/'minute' only - defaults to 'minute' for a dedicated time picker). */
@@ -62,17 +68,18 @@ export interface DatePickerProps {
     invalid?: boolean;
     clearable?: boolean;
     /** Chrome color - the clear/trigger buttons and prev/next month nav. Only the color changes; each button keeps its own deliberately-different variant (icon-only buttons use `text`, nav arrows use `ghost`). */
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     /** The color of whatever's currently "active" - the selected day/month/year cell and the Done button. */
-    activeColor?: ButtonVariants['color'];
+    activeColor?: ColorRole;
     size?: DatePickerVariants['size'];
     /** Shows a small pointer triangle connecting the panel to its trigger. */
     arrow?: boolean;
-    /** Below 768px viewport width, presents the calendar as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
-    mobileModal?: boolean;
+    /** Opts into the calendar's accessible small-screen modal presentation. It is selected when the calendar opens and held until close. */
+    adaptive?: boolean;
     ui?: UiProp<DatePickerThemeSlots>;
 }
 export interface DatePickerEmits {
+    'update:open': [value: boolean];
     'update:modelValue': [value: DateValue | DateRange | Time | undefined];
     'update:view': [view: 'date' | 'month' | 'year'];
 }
@@ -92,17 +99,17 @@ declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
     selectionStart: boolean;
     selectionEnd: boolean;
     highlighted: boolean;
-}, __VLS_148: {}, __VLS_186: {}, __VLS_206: {}, __VLS_226: {}, __VLS_242: {}, __VLS_268: {}, __VLS_291: {}, __VLS_329: {}, __VLS_349: {}, __VLS_369: {}, __VLS_385: {}, __VLS_405: {
+}, __VLS_148: {}, __VLS_187: {}, __VLS_207: {}, __VLS_227: {}, __VLS_243: {}, __VLS_269: {}, __VLS_292: {}, __VLS_330: {}, __VLS_350: {}, __VLS_370: {}, __VLS_386: {}, __VLS_406: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_408: {}, __VLS_431: {
+}, __VLS_409: {}, __VLS_432: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_434: {};
+}, __VLS_435: {};
 type __VLS_Slots = {} & {
     'clear-icon'?: (props: typeof __VLS_43) => any;
 } & {
@@ -120,39 +127,41 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_148) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_186) => any;
+    'clear-icon'?: (props: typeof __VLS_187) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_206) => any;
+    'trigger-icon'?: (props: typeof __VLS_207) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_226) => any;
+    'trigger-icon'?: (props: typeof __VLS_227) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_242) => any;
+    'clear-icon'?: (props: typeof __VLS_243) => any;
 } & {
-    footer?: (props: typeof __VLS_268) => any;
+    footer?: (props: typeof __VLS_269) => any;
 } & {
-    footer?: (props: typeof __VLS_291) => any;
+    footer?: (props: typeof __VLS_292) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_329) => any;
+    'clear-icon'?: (props: typeof __VLS_330) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_349) => any;
+    'trigger-icon'?: (props: typeof __VLS_350) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_369) => any;
+    'trigger-icon'?: (props: typeof __VLS_370) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_385) => any;
+    'clear-icon'?: (props: typeof __VLS_386) => any;
 } & {
-    day?: (props: typeof __VLS_405) => any;
+    day?: (props: typeof __VLS_406) => any;
 } & {
-    footer?: (props: typeof __VLS_408) => any;
+    footer?: (props: typeof __VLS_409) => any;
 } & {
-    day?: (props: typeof __VLS_431) => any;
+    day?: (props: typeof __VLS_432) => any;
 } & {
-    footer?: (props: typeof __VLS_434) => any;
+    footer?: (props: typeof __VLS_435) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: DateValue | DateRange | Time | undefined) => any;
+    "update:open": (value: boolean) => any;
     "update:view": (view: "month" | "year" | "date") => any;
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: DateValue | DateRange | Time | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:view"?: ((view: "month" | "year" | "date") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;