@sewadah/selaras 0.3.0 → 0.3.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -41,7 +41,10 @@ function createBuiltinColorRegistry(classPrefix) {
         fill,
         fillHover: hover,
         fillPressed: pressed,
-        onFill: foundation("neutral", brightIntent ? 950 : dark ? 950 : 25),
+        // The vivid light-mode intent fills intentionally use white text.
+        // Dark mode restores the shared dark foreground on its lighter fills.
+        // Consumers can override onFill in their own recipe.
+        onFill: brightIntent && !dark ? "#ffffff" : foundation("neutral", dark ? 950 : 25),
         indicator,
         subtle,
         subtleHover: brightIntent ? `color-mix(in oklab, ${subtle} 96%, ${text})` : dark ? `color-mix(in oklab, ${foundation(role, 500)} 32%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 94%, ${text})`,
@@ -135,6 +138,16 @@ const module$1 = defineNuxtModule({
       from: resolver.resolve("./runtime/directives/ripple"),
       meta: { vueDirective: true }
     });
+    addImports({
+      name: "vMask",
+      from: resolver.resolve("./runtime/directives/mask"),
+      meta: { vueDirective: true }
+    });
+    addImports({
+      name: "vHotkey",
+      from: resolver.resolve("./runtime/directives/hotkey"),
+      meta: { vueDirective: true }
+    });
     addTemplate({
       filename: "selaras-class-prefix.mjs",
       getContents: () => `export const classPrefix = ${JSON.stringify(options.classPrefix ?? null)}

package/dist/runtime/components/Autocomplete.vue

@@ -30,7 +30,9 @@ const props = defineProps({
   searchTerm: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
-  arrow: { type: Boolean, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });

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

@@ -0,0 +1,69 @@
+import type { DateValue } from '@internationalized/date';
+import type { CalendarThemeSlots } from '../theme/calendar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = {
+    'day'?: (props: CalendarDaySlotProps) => any;
+    /** Renders beside the date trigger within its grid cell. Safe for event links/buttons. */
+    'day-details'?: (props: {
+        date: DateValue;
+        month: DateValue;
+    }) => any;
+    'footer'?: () => any;
+};
+export interface CalendarProps {
+    modelValue?: DateValue;
+    defaultValue?: DateValue;
+    /** The displayed month when controlled independently of the selected date. */
+    placeholder?: DateValue;
+    defaultPlaceholder?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    locale?: string;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    fixedWeeks?: boolean;
+    disableDaysOutsideCurrentView?: boolean;
+    preventDeselect?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    initialFocus?: boolean;
+    calendarLabel?: string;
+    color?: ColorRole;
+    activeColor?: ColorRole;
+    ui?: UiProp<CalendarThemeSlots>;
+}
+export interface CalendarEmits {
+    'update:modelValue': [value: DateValue | undefined];
+    'update:placeholder': [value: DateValue];
+}
+export interface CalendarDaySlotProps {
+    date: DateValue;
+    month: DateValue;
+    dayValue: string;
+    selected: boolean;
+    today: boolean;
+    disabled: boolean;
+    unavailable: boolean;
+    outsideView: boolean;
+    outsideVisibleView: boolean;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | undefined) => any;
+    "update:placeholder": (value: DateValue) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | undefined) => any) | undefined;
+    "onUpdate:placeholder"?: ((value: DateValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,163 @@
+<script setup>
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot
+} from "reka-ui";
+import { computed, getCurrentInstance, useId, useSlots } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { calendarTheme } from "../theme/calendar";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: Object, required: false },
+  defaultValue: { type: Object, required: false },
+  placeholder: { type: Object, required: false },
+  defaultPlaceholder: { type: Object, required: false },
+  minValue: { type: Object, required: false },
+  maxValue: { type: Object, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  locale: { type: String, required: false },
+  numberOfMonths: { type: Number, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  calendarLabel: { type: String, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  activeColor: { type: null, required: false, default: "primary" },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:placeholder"]);
+defineSlots();
+const slots = useSlots();
+const instance = getCurrentInstance();
+const detailsId = useId();
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("calendar", calendarTheme);
+const ui = computed(() => theme.value());
+const color = computed(() => resolveRegisteredColorRole(props.color, "neutral"));
+const activeColor = computed(() => resolveRegisteredColorRole(props.activeColor, "primary"));
+const rootModelValue = computed(() => {
+  const vnodeProps = instance.vnode.props ?? {};
+  const isControlled = Object.hasOwn(vnodeProps, "modelValue") || Object.hasOwn(vnodeProps, "model-value");
+  return isControlled && props.modelValue === void 0 ? null : props.modelValue;
+});
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const headingProps = computed(() => resolveSlot(ui.value.heading, props.ui?.heading));
+const gridsProps = computed(() => resolveSlot(ui.value.grids, props.ui?.grids));
+const gridProps = computed(() => resolveSlot(ui.value.grid, props.ui?.grid));
+const gridHeadProps = computed(() => resolveSlot(ui.value.gridHead, props.ui?.gridHead));
+const headCellProps = computed(() => resolveSlot(ui.value.headCell, props.ui?.headCell));
+const cellProps = computed(() => resolveSlot(ui.value.cell, props.ui?.cell));
+const dayButtonProps = computed(() => resolveSlot(ui.value.dayButton, props.ui?.dayButton));
+const dayDetailsProps = computed(() => resolveSlot(ui.value.dayDetails, props.ui?.dayDetails));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+const navButtonUi = { leadingIcon: "rtl:-scale-x-100" };
+const dayDetailsId = (month, date) => `${detailsId}-${month.toString()}-${date.toString()}`;
+</script>
+
+<template>
+  <CalendarRoot
+    :model-value="rootModelValue"
+    :default-value="defaultValue"
+    :placeholder="placeholder"
+    :default-placeholder="defaultPlaceholder"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-disabled="isDateDisabled"
+    :is-date-unavailable="isDateUnavailable"
+    :locale="locale"
+    :number-of-months="numberOfMonths"
+    :paged-navigation="pagedNavigation"
+    :week-starts-on="weekStartsOn"
+    :weekday-format="weekdayFormat"
+    :fixed-weeks="fixedWeeks"
+    :disable-days-outside-current-view="disableDaysOutsideCurrentView"
+    :prevent-deselect="preventDeselect"
+    :disabled="disabled"
+    :readonly="readonly"
+    :initial-focus="initialFocus"
+    :calendar-label="calendarLabel"
+    :data-selaras-color="activeColor"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+    @update:placeholder="(value) => emit('update:placeholder', value)"
+  >
+    <template #default="{ grid, weekDays }">
+      <CalendarHeader v-bind="headerProps">
+        <CalendarPrev as-child>
+          <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronLeft" :aria-label="messages.previousMonth" :ui="navButtonUi" />
+        </CalendarPrev>
+        <CalendarHeading v-bind="headingProps" />
+        <CalendarNext as-child>
+          <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronRight" :aria-label="messages.nextMonth" :ui="navButtonUi" />
+        </CalendarNext>
+      </CalendarHeader>
+
+      <div v-bind="gridsProps">
+        <CalendarGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
+          <CalendarGridHead v-bind="gridHeadProps">
+            <CalendarGridRow>
+              <CalendarHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
+                {{ day }}
+              </CalendarHeadCell>
+            </CalendarGridRow>
+          </CalendarGridHead>
+          <CalendarGridBody>
+            <CalendarGridRow v-for="(week, weekIndex) in month.rows" :key="weekIndex">
+              <CalendarCell v-for="date in week" :key="date.toString()" :date="date" v-bind="cellProps">
+                <CalendarCellTrigger
+                  v-slot="dayState"
+                  :day="date"
+                  :month="month.value"
+                  as-child
+                >
+                  <Button
+                    :variant="dayState.selected ? 'solid' : 'ghost'"
+                    :color="dayState.selected ? activeColor : color"
+                    size="sm"
+                    square
+                    :disabled="dayState.disabled"
+                    :aria-describedby="slots['day-details'] ? dayDetailsId(month.value, date) : void 0"
+                    v-bind="dayButtonProps"
+                  >
+                    <slot name="day" :date="date" :month="month.value" v-bind="dayState">
+                      {{ dayState.dayValue }}
+                    </slot>
+                  </Button>
+                </CalendarCellTrigger>
+                <div v-if="slots['day-details']" :id="dayDetailsId(month.value, date)" v-bind="dayDetailsProps">
+                  <slot name="day-details" :date="date" :month="month.value" />
+                </div>
+              </CalendarCell>
+            </CalendarGridRow>
+          </CalendarGridBody>
+        </CalendarGrid>
+      </div>
+      <div v-if="slots.footer" v-bind="footerProps">
+        <slot name="footer" />
+      </div>
+    </template>
+  </CalendarRoot>
+</template>

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

@@ -0,0 +1,69 @@
+import type { DateValue } from '@internationalized/date';
+import type { CalendarThemeSlots } from '../theme/calendar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = {
+    'day'?: (props: CalendarDaySlotProps) => any;
+    /** Renders beside the date trigger within its grid cell. Safe for event links/buttons. */
+    'day-details'?: (props: {
+        date: DateValue;
+        month: DateValue;
+    }) => any;
+    'footer'?: () => any;
+};
+export interface CalendarProps {
+    modelValue?: DateValue;
+    defaultValue?: DateValue;
+    /** The displayed month when controlled independently of the selected date. */
+    placeholder?: DateValue;
+    defaultPlaceholder?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    locale?: string;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    fixedWeeks?: boolean;
+    disableDaysOutsideCurrentView?: boolean;
+    preventDeselect?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    initialFocus?: boolean;
+    calendarLabel?: string;
+    color?: ColorRole;
+    activeColor?: ColorRole;
+    ui?: UiProp<CalendarThemeSlots>;
+}
+export interface CalendarEmits {
+    'update:modelValue': [value: DateValue | undefined];
+    'update:placeholder': [value: DateValue];
+}
+export interface CalendarDaySlotProps {
+    date: DateValue;
+    month: DateValue;
+    dayValue: string;
+    selected: boolean;
+    today: boolean;
+    disabled: boolean;
+    unavailable: boolean;
+    outsideView: boolean;
+    outsideVisibleView: boolean;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | undefined) => any;
+    "update:placeholder": (value: DateValue) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | undefined) => any) | undefined;
+    "onUpdate:placeholder"?: ((value: DateValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Callout.vue

@@ -24,6 +24,13 @@ const iconName = computed(() => {
     return void 0;
   return props.icon ?? icons.value[DEFAULT_ICON[props.type ?? "note"]];
 });
+const colorForType = {
+  note: "info",
+  tip: "success",
+  warning: "warning",
+  danger: "danger"
+};
+const effectiveColor = computed(() => colorForType[props.type ?? "note"]);
 const theme = useComponentTheme("callout", calloutTheme);
 const ui = computed(() => theme.value({ type: props.type }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
@@ -33,7 +40,7 @@ const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 </script>
 
 <template>
-  <div v-bind="rootProps" role="note">
+  <div v-bind="rootProps" data-selaras-callout :data-selaras-color="effectiveColor" role="note">
     <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
     <div v-bind="contentProps">
       <p v-if="title || $slots.title" v-bind="titleProps">
@@ -45,3 +52,7 @@ const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
     </div>
   </div>
 </template>
+
+<style scoped>
+[data-selaras-callout]:before{-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
+</style>

package/dist/runtime/components/CodeGroup.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { cloneVNode, Comment, computed, Fragment, ref, Text, useSlots } from "vue";
 import { useMessages } from "../composables/use-messages";
+import { resolveFileIcon } from "../utils/file-icons";
+import ProsePre from "./ProsePre.vue";
 import Tabs from "./Tabs.vue";
 const slots = useSlots();
 const messages = useMessages();
@@ -22,15 +24,23 @@ function labelFor(child, index) {
   const props = child.props ?? {};
   return props.filename || props.language || messages.value.codeTabFallback(index + 1);
 }
+function iconFor(child) {
+  const props = child.props ?? {};
+  return props.icon ?? resolveFileIcon(props.language, props.filename);
+}
+function cloneForTab(child) {
+  return cloneVNode(child, child.type === ProsePre ? { showHeader: false } : void 0);
+}
 const tabItems = computed(() => children.value.map((child, index) => ({
   label: labelFor(child, index),
-  value: String(index)
+  value: String(index),
+  icon: iconFor(child)
 })));
 const activeTab = ref("0");
 </script>
 
 <template>
-  <Tabs v-model="activeTab" :items="tabItems">
+  <Tabs v-model="activeTab" :items="tabItems" variant="pill">
     <template v-for="(child, index) in children" :key="index" #[String(index)]>
       <!--
         cloneVNode is required, not optional: this vnode was captured from
@@ -40,7 +50,7 @@ const activeTab = ref("0");
         hydration-shape mismatch (Fragment vs text) the first time this
         panel mounts. Cloning gives it a fresh identity for its new spot.
       -->
-      <component :is="() => cloneVNode(child)" />
+      <component :is="() => cloneForTab(child)" />
     </template>
   </Tabs>
 </template>

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

@@ -4,6 +4,8 @@ import type { FileTreeNode } from './FileTree.vue.js';
 export interface CodeTreeFile extends FileTreeNode {
     /** The file's content - read for a leaf node once selected, ignored for a directory. */
     code?: string;
+    /** Overrides the language inferred from the filename. */
+    language?: string;
     children?: CodeTreeFile[];
 }
 export interface CodeTreeProps {

package/dist/runtime/components/CodeTree.vue

@@ -21,6 +21,56 @@ function findFirstFile(nodes) {
   return void 0;
 }
 const selected = ref(findFirstFile(props.items));
+const highlightedCode = ref("");
+const languageByExtension = {
+  bash: "bash",
+  cjs: "javascript",
+  css: "css",
+  htm: "html",
+  html: "html",
+  js: "javascript",
+  jsx: "jsx",
+  json: "json",
+  jsonc: "jsonc",
+  md: "markdown",
+  mjs: "javascript",
+  mts: "typescript",
+  sh: "bash",
+  ts: "typescript",
+  tsx: "tsx",
+  vue: "vue",
+  yaml: "yaml",
+  yml: "yaml"
+};
+function languageFor(file) {
+  if (file.language)
+    return file.language;
+  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+  return languageByExtension[extension] ?? "text";
+}
+watch(selected, async (file, _previous, onCleanup) => {
+  let stale = false;
+  onCleanup(() => {
+    stale = true;
+  });
+  highlightedCode.value = "";
+  if (!file?.code)
+    return;
+  try {
+    const { codeToHtml } = await import("shiki");
+    const html = await codeToHtml(file.code, {
+      lang: languageFor(file),
+      themes: { light: "github-light", dark: "github-dark" },
+      defaultColor: false
+    });
+    if (stale)
+      return;
+    highlightedCode.value = html.match(/<code(?:\s[^>]*)?>([\s\S]*?)<\/code>/)?.[1] ?? "";
+  } catch {
+    if (!stale)
+      highlightedCode.value = "";
+  }
+}, { immediate: true });
 watch(() => props.items, () => {
   selected.value = findFirstFile(props.items);
 });
@@ -28,6 +78,7 @@ const messages = useMessages();
 const theme = useComponentTheme("codeTree", codeTreeTheme);
 const ui = computed(() => theme.value());
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const codeMode = computed(() => rootProps.value["data-selaras-mode"]);
 const treeProps = computed(() => resolveSlot(ui.value.tree, props.ui?.tree));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const preProps = computed(() => resolveSlot(ui.value.pre, props.ui?.pre));
@@ -47,7 +98,7 @@ const fileTreeUi = { root: "rounded-none border-0 bg-transparent p-0" };
       />
     </div>
     <div v-if="selected" v-bind="contentProps">
-      <pre v-bind="preProps">{{ selected.code }}</pre>
+      <pre v-bind="preProps"><code v-if="highlightedCode" class="selaras-code-tree-code" :data-selaras-code-mode="codeMode" v-html="highlightedCode" /><code v-else>{{ selected.code }}</code></pre>
     </div>
     <div v-else v-bind="emptyProps">
       {{ messages.selectFile }}

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

@@ -4,6 +4,8 @@ import type { FileTreeNode } from './FileTree.vue.js';
 export interface CodeTreeFile extends FileTreeNode {
     /** The file's content - read for a leaf node once selected, ignored for a directory. */
     code?: string;
+    /** Overrides the language inferred from the filename. */
+    language?: string;
     children?: CodeTreeFile[];
 }
 export interface CodeTreeProps {

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

@@ -1,6 +1,8 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 import { colorPickerTheme } from '../theme/color-picker.js';
 type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
@@ -21,6 +23,12 @@ export interface ColorPickerProps {
     placeholder?: string;
     /** Opts into the picker's accessible small-screen modal presentation. */
     adaptive?: boolean;
+    /** Shows a pointer on the anchored picker; the adaptive modal has no arrow. */
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored picker (the adaptive modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored picker, or `false` to render it inline. */
+    portal?: OverlayPortal;
     size?: ColorPickerVariants['size'];
     color?: ColorRole;
     ui?: UiProp<ColorPickerThemeSlots>;