@sewadah/selaras 0.3.0 → 0.3.1

package/dist/runtime/utils/messages.d.ts

@@ -11,11 +11,14 @@ export interface MessageRegistry {
     searchDescription: string;
     columns: string;
     filterPlaceholder: string;
+    filterColumn: (column: string) => string;
     previous: string;
     next: string;
     first: string;
     last: string;
     pagination: string;
+    scrollTabsLeft: string;
+    scrollTabsRight: string;
     datePicker: string;
     datePickerDescription: string;
     dateRangePicker: string;
@@ -39,6 +42,7 @@ export interface MessageRegistry {
     decrement: string;
     noOptions: string;
     noResultsFound: string;
+    createOption: (value: string) => string;
     noData: string;
     expandRow: string;
     collapseRow: string;
@@ -62,6 +66,8 @@ export interface MessageRegistry {
     showHiddenBreadcrumbItems: string;
     commandPalette: string;
     commandPaletteDescription: string;
+    dropdownMenu: string;
+    dropdownMenuDescription: string;
     navigate: string;
     select: string;
     onThisPage: string;

package/dist/runtime/utils/messages.js

@@ -11,11 +11,14 @@ export const defaultMessages = {
   searchDescription: "Type to filter, then use arrow keys and enter to select",
   columns: "Columns",
   filterPlaceholder: "Filter...",
+  filterColumn: (column) => `Filter ${column}`,
   previous: "Previous",
   next: "Next",
   first: "First",
   last: "Last",
   pagination: "Pagination",
+  scrollTabsLeft: "Scroll tabs left",
+  scrollTabsRight: "Scroll tabs right",
   datePicker: "Date picker",
   datePickerDescription: "Use arrow keys to navigate days, enter to select",
   dateRangePicker: "Date range picker",
@@ -39,6 +42,7 @@ export const defaultMessages = {
   decrement: "Decrement",
   noOptions: "No options",
   noResultsFound: "No results found",
+  createOption: (value) => `Create "${value}"`,
   noData: "No data",
   expandRow: "Expand row",
   collapseRow: "Collapse row",
@@ -61,6 +65,8 @@ export const defaultMessages = {
   showHiddenBreadcrumbItems: "Show hidden breadcrumb items",
   commandPalette: "Command palette",
   commandPaletteDescription: "Search for a command and press enter",
+  dropdownMenu: "Actions",
+  dropdownMenuDescription: "Choose an action",
   navigate: "Navigate",
   select: "Select",
   onThisPage: "On this page",

package/dist/runtime/utils/navigation-menu.d.ts

@@ -1,3 +1,4 @@
+import type { HotkeyOptions } from '../directives/hotkey.js';
 export interface NavigationMenuItem {
     label: string;
     icon?: string;
@@ -11,6 +12,10 @@ export interface NavigationMenuItem {
     /** One level for horizontal (Reka's own real limit for its shared-viewport flyout); arbitrary depth for vertical, which falls back to a recursive accordion instead. */
     children?: NavigationMenuItem[];
     onSelect?: (event: Event) => void;
+    /** Display a keyboard shortcut hint beside this item's label. */
+    shortcut?: string;
+    /** Bind `shortcut` page-wide, so the key activates this item from anywhere except while typing in a field. */
+    hotkey?: boolean;
     /** Targets this item's own named slots (`#{slot}`, `#{slot}-leading`, `#{slot}-label`, `#{slot}-trailing`, `#{slot}-content`) ahead of the generic `#item`/`#item-leading`/etc, when the named one is actually provided. */
     slot?: string;
     /**
@@ -33,3 +38,5 @@ export interface NavigationMenuItem {
     description?: string;
 }
 export declare function isNavigationMenuItemActive(item: NavigationMenuItem, currentPath: string): boolean;
+/** The v-hotkey binding for an item that opts in with `hotkey: true`. */
+export declare function navigationMenuHotkey(item: NavigationMenuItem): HotkeyOptions | undefined;

package/dist/runtime/utils/navigation-menu.js

@@ -3,3 +3,6 @@ export function isNavigationMenuItemActive(item, currentPath) {
     return item.active;
   return item.to !== void 0 && item.to === currentPath;
 }
+export function navigationMenuHotkey(item) {
+  return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut } : void 0;
+}

package/dist/runtime/utils/overlay.d.ts

@@ -0,0 +1,17 @@
+import type { ContextMenuContentProps, PopoverContentProps } from 'reka-ui';
+/** Positioning options shared by Selaras's anchored panels. Visual styling stays in `ui.content`. */
+export type OverlayPositioning = Pick<PopoverContentProps, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'arrowPadding' | 'sticky' | 'hideWhenDetached' | 'positionStrategy'>;
+/** A context menu is anchored to the pointer, so it does not accept side or alignment. */
+export type ContextMenuPositioning = Pick<ContextMenuContentProps, 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'positionStrategy'>;
+/** `false` renders inline; a selector or element chooses a teleport target. */
+export type OverlayPortal = boolean | string | HTMLElement;
+export declare function overlayPortalProps(portal: OverlayPortal | undefined): {
+    disabled: boolean;
+    to?: undefined;
+} | {
+    to: string | HTMLElement;
+    disabled?: undefined;
+} | {
+    disabled?: undefined;
+    to?: undefined;
+};

package/dist/runtime/utils/overlay.js

@@ -0,0 +1,7 @@
+export function overlayPortalProps(portal) {
+  if (portal === false)
+    return { disabled: true };
+  if (typeof portal === "string" || typeof HTMLElement !== "undefined" && portal instanceof HTMLElement)
+    return { to: portal };
+  return {};
+}

package/dist/runtime/utils/select-contracts.d.ts

@@ -1,6 +1,8 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
+import type { RoundedArrowConfig } from './arrow.js';
 import type { ColorRole } from './color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from './overlay.js';
 import type { UiProp } from './ui.js';
 export type SelectValue = string | number;
 export interface SelectGroup<Item extends object> {
@@ -62,7 +64,11 @@ export interface SelectProps<Entry extends object = {
     searchTerm?: string;
     resetSearchTermOnBlur?: boolean;
     resetSearchTermOnSelect?: boolean;
-    arrow?: boolean;
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored list (the adaptive Select modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored list, or `false` to render it inline. */
+    portal?: OverlayPortal;
     /**
      * Opts into the control's accessible small-screen presentation. Select uses
      * a centered modal; Autocomplete keeps its editable combobox in a wider

package/dist/runtime/utils/table-columns.js

@@ -54,7 +54,7 @@ export function convertChildrenToColumns(vnodes) {
         accessorKey: props.field,
         header: buildHeaderOrFooter(slots.header, props.header ?? props.field),
         footer: buildHeaderOrFooter(slots.footer, props.footer),
-        enableSorting: toBooleanProp(props.sortable, true),
+        enableSorting: toBooleanProp(props.sortable, false),
         sortFn: "alphanumeric",
         enableColumnFilter: toBooleanProp(props.filterable, false),
         filterFn: "includesString",

package/dist/runtime/utils/table-contracts.d.ts

@@ -1,5 +1,5 @@
 import type { RowData } from '@tanstack/vue-table';
-import type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableRowSelectionState, TableSortingState } from '../composables/use-table.js';
+import type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableGetSubRows, TableRowSelectionState, TableSortingState } from '../composables/use-table.js';
 import type { TableThemeSlots } from '../theme/table.js';
 import type { ColorRole } from './color-registry.js';
 import type { UiProp } from './ui.js';
@@ -7,6 +7,10 @@ export interface TableProps<TData extends RowData = RowData> {
     data: TData[];
     columns?: TableColumnDef<TData>[];
     selectable?: boolean;
+    /** Highlights body rows on hover. @default false */
+    rowHover?: boolean;
+    /** Toggles selection when a selectable body row is clicked. Interactive controls inside cells are ignored. @default false */
+    selectOnRowClick?: boolean;
     pageSize?: number;
     loading?: boolean;
     sorting?: TableSortingState;
@@ -20,6 +24,10 @@ export interface TableProps<TData extends RowData = RowData> {
     gridlines?: boolean;
     striped?: boolean;
     expandable?: boolean;
+    /** Displays hierarchical rows from `subRows` by default. Set `getSubRows` to read children from another field. @default false */
+    tree?: boolean;
+    /** Returns a row's child rows when `tree` is enabled. Defaults to `row.subRows`. */
+    getSubRows?: TableGetSubRows<TData>;
     expanded?: TableExpandedState;
     columnVisibility?: TableColumnVisibilityState;
     columnToggle?: boolean;

package/dist/runtime/utils/timeline-contracts.d.ts

@@ -0,0 +1,42 @@
+import type { TimelineThemeSlots } from '../theme/timeline.js';
+import type { ColorRole } from './color-registry.js';
+import type { UiProp } from './ui.js';
+export interface TimelineItem {
+    id?: string | number;
+    class?: string;
+    date?: string;
+    /** ISO-8601 value for the semantic `<time datetime>` attribute. */
+    datetime?: string;
+    title?: string;
+    description?: string;
+    icon?: string;
+    color?: ColorRole;
+    /** Selects a named slot for this item, replacing its default content. */
+    slot?: string;
+    /** Per-item styling overrides, resolved against the component's theme. */
+    ui?: UiProp<TimelineThemeSlots>;
+    /** Additional application data is passed unchanged to scoped slots. */
+    [key: string]: unknown;
+}
+export interface TimelineProps<TItem extends TimelineItem = TimelineItem> {
+    items: TItem[];
+    orientation?: 'vertical' | 'horizontal';
+    align?: 'start' | 'end' | 'alternate';
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    ui?: UiProp<TimelineThemeSlots>;
+}
+export interface TimelineSlotProps<TItem extends TimelineItem = TimelineItem> {
+    item: TItem;
+    index: number;
+}
+export interface TimelineSlots<TItem extends TimelineItem = TimelineItem> {
+    marker?: (props: TimelineSlotProps<TItem>) => any;
+    connector?: (props: TimelineSlotProps<TItem>) => any;
+    date?: (props: TimelineSlotProps<TItem>) => any;
+    title?: (props: TimelineSlotProps<TItem>) => any;
+    description?: (props: TimelineSlotProps<TItem>) => any;
+    content?: (props: TimelineSlotProps<TItem>) => any;
+    item?: (props: TimelineSlotProps<TItem>) => any;
+    [name: string]: ((props: TimelineSlotProps<TItem>) => any) | undefined;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",
@@ -140,6 +140,7 @@
     "@tanstack/vue-table": "^9.1.2",
     "@tanstack/vue-virtual": "^3.13.36",
     "reka-ui": "^2.2.0",
+    "shiki": "^4.4.3",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.1",
     "tw-animate-css": "^1.4.0"