@tempots/beatui 0.9.0 → 0.10.0

package/dist/types/components/form/control/combobox-control.d.ts

@@ -0,0 +1,11 @@
+import { ControlOptions } from './control-options';
+import { ComboboxOption } from '../input/combobox';
+import { TNode, Value } from '@tempots/dom';
+export type ComboboxControlOptions<T> = ControlOptions<T> & {
+    options: Value<ComboboxOption<T>[]>;
+    unselectedLabel?: Value<string>;
+    equality?: (a: T, b: T) => boolean;
+    placeholder?: Value<string>;
+    searchable?: Value<boolean>;
+};
+export declare const ComboboxControl: <T>(options: ComboboxControlOptions<T>, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/control-input-wrapper.d.ts

@@ -4,4 +4,4 @@ import { ControlWrapperOptions } from './control-options';
 export type ControlInputWrapperOptions<S> = Merge<ControlWrapperOptions<S>, {
     content: TNode;
 }>;
-export declare const ControlInputWrapper: <S>({ required, label, context, description, content, controller, }: ControlInputWrapperOptions<S>, ...children: TNode[]) => import("@tempots/dom").Renderable;
+export declare const ControlInputWrapper: <S>({ required, label, context, description, content, controller, horizontal, }: ControlInputWrapperOptions<S>, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/control-options.d.ts

@@ -7,6 +7,7 @@ export type ControlWrapperOptions<S> = {
     label?: TNode;
     context?: TNode;
     description?: TNode;
+    horizontal?: Value<boolean>;
 };
 export type ControlOptions<S> = Merge<ControlWrapperOptions<S>, {
     onBlur?: () => void;

package/dist/types/components/form/control/index.d.ts

@@ -1,3 +1,4 @@
+export * from './combobox-control';
 export * from './control-input-wrapper';
 export * from './control-options';
 export * from './date-control';

package/dist/types/components/form/input/combobox.d.ts

@@ -0,0 +1,39 @@
+import { Renderable, Value, TNode } from '@tempots/dom';
+import { InputOptions } from './input-options';
+export type ComboboxValueOption<T> = {
+    type: 'value';
+    value: T;
+    label: string;
+    disabled?: boolean;
+    before?: TNode;
+    after?: TNode;
+};
+export type ComboboxGroupOption<T> = {
+    type: 'group';
+    group: string;
+    options: ComboboxValueOption<T>[];
+    disabled?: boolean;
+};
+export type ComboboxBreakOption = {
+    type: 'break';
+};
+export type ComboboxOption<T> = ComboboxValueOption<T> | ComboboxGroupOption<T> | ComboboxBreakOption;
+export declare const ComboboxOption: {
+    value: <T>(value: T, label: string, options?: {
+        disabled?: boolean;
+        before?: TNode;
+        after?: TNode;
+    }) => ComboboxValueOption<T>;
+    group: <T>(group: string, options: (ComboboxValueOption<T> | ComboboxBreakOption)[], disabled?: boolean) => ComboboxGroupOption<T>;
+    break: ComboboxBreakOption;
+    getOptionValues: <T>(options: ComboboxOption<T>[]) => T[];
+    contains: <T>(options: ComboboxOption<T>[], value: T, equality?: (a: T, b: T) => boolean) => boolean;
+};
+export type ComboboxOptions<T> = InputOptions<T> & {
+    options: Value<ComboboxOption<T>[]>;
+    unselectedLabel?: Value<string>;
+    equality?: (a: T, b: T) => boolean;
+    placeholder?: Value<string>;
+    searchable?: Value<boolean>;
+};
+export declare const Combobox: <T>(options: ComboboxOptions<T>) => Renderable;

package/dist/types/components/form/input/index.d.ts

@@ -1,5 +1,6 @@
 export * from './appearance-selector';
 export * from './checkbox-input';
+export * from './combobox';
 export * from './date-input';
 export * from './date-time-input';
 export * from './editable-text';

package/dist/types/components/form/input/input-wrapper.d.ts

@@ -10,5 +10,6 @@ export type InputWrapperOptions = {
     labelFor?: Value<string>;
     hasError?: Value<boolean>;
     disabled?: Value<boolean>;
+    horizontal?: Value<boolean>;
 };
-export declare const InputWrapper: ({ required, label, context, description, content, error, labelFor, hasError, disabled, }: InputWrapperOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;
+export declare const InputWrapper: ({ required, label, context, description, content, error, labelFor, hasError, disabled, horizontal, }: InputWrapperOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/navigation/flyout.d.ts

@@ -25,7 +25,7 @@ export interface FlyoutOptions {
     crossAxisOffset?: Value<number>;
     /** How to show the flyout */
     showOn?: Value<FlyoutTrigger> | FlyoutTriggerFunction;
-    /** Whether the flyout can be closed with Escape key */
+    /** Whether the flyout can be closed with Escape key or clicking outside */
     closable?: Value<boolean>;
     /** Optional arrow configuration - receives a signal with PopOver positioning data */
     arrow?: (signal: any) => TNode;

package/dist/types/components/navigation/index.d.ts

@@ -1,3 +1,4 @@
 export * from './flyout';
 export * from './link';
+export * from './menu';
 export * from './sidebar/index';

package/dist/types/components/navigation/menu.d.ts

@@ -0,0 +1,106 @@
+import { TNode, Value } from '@tempots/dom';
+import { Placement } from '@tempots/ui';
+import { FlyoutTrigger } from './flyout';
+export type MenuTrigger = FlyoutTrigger;
+export interface MenuOptions {
+    /** The menu items to display */
+    items: () => TNode[];
+    /** Placement of the menu relative to the trigger element */
+    placement?: Value<Placement>;
+    /** Delay in milliseconds before showing the menu on hover */
+    showDelay?: Value<number>;
+    /** Delay in milliseconds before hiding the menu after mouse leave */
+    hideDelay?: Value<number>;
+    /** Offset in pixels from the main axis */
+    mainAxisOffset?: Value<number>;
+    /** Offset in pixels from the cross axis */
+    crossAxisOffset?: Value<number>;
+    /** How to show the menu */
+    showOn?: Value<MenuTrigger>;
+    /** Whether the menu can be closed with Escape key */
+    closable?: Value<boolean>;
+    /** Callback when menu is closed */
+    onClose?: () => void;
+    /** Callback when a menu item is selected */
+    onAction?: (key: string) => void;
+    /** Accessible label for the menu */
+    ariaLabel?: Value<string>;
+    /** ID of element that labels the menu */
+    ariaLabelledBy?: Value<string>;
+}
+export interface MenuItemOptions {
+    /** Unique identifier for the menu item */
+    key?: Value<string>;
+    /** The text content of the menu item */
+    content: TNode;
+    /** Content to display at the start of the menu item (icons, indicators) */
+    startContent?: TNode;
+    /** Content to display at the end of the menu item (shortcuts, badges) */
+    endContent?: TNode;
+    /** Whether the menu item is disabled */
+    disabled?: Value<boolean>;
+    /** Callback when the menu item is clicked */
+    onClick?: () => void;
+    /** ARIA label for accessibility */
+    ariaLabel?: Value<string>;
+    /** Submenu items for nested menus */
+    submenu?: () => TNode[];
+    /** Placement of submenu relative to parent item */
+    submenuPlacement?: Value<Placement>;
+}
+export interface MenuSeparatorOptions {
+    /** Optional label for the separator */
+    label?: TNode;
+}
+/**
+ * Menu component that provides a list of actions or options.
+ * Built on top of the Flyout component for positioning and overlay behavior.
+ *
+ * Follows WAI-ARIA menu pattern with proper keyboard navigation and accessibility.
+ *
+ * @example
+ * ```typescript
+ * Button(
+ *   { onClick: () => {} },
+ *   'Actions',
+ *   Menu({
+ *     items: () => [
+ *       MenuItem({ content: 'Edit', onClick: () => console.log('edit') }),
+ *       MenuItem({ content: 'Delete', onClick: () => console.log('delete') }),
+ *     ]
+ *   })
+ * )
+ * ```
+ */
+export declare function Menu(options: MenuOptions): TNode;
+/**
+ * MenuItem component for individual menu items.
+ *
+ * @example
+ * ```typescript
+ * MenuItem({
+ *   content: 'Edit',
+ *   startContent: Icon({ icon: 'edit' }),
+ *   endContent: html.span('⌘E'),
+ *   onClick: () => console.log('edit clicked')
+ * })
+ * ```
+ */
+export declare function MenuItem(options: MenuItemOptions): TNode;
+/**
+ * MenuSeparator component for visual grouping of menu items.
+ * Creates a visual divider between groups of menu items.
+ *
+ * @example
+ * ```typescript
+ * Menu({
+ *   items: () => [
+ *     MenuItem({ content: 'Cut' }),
+ *     MenuItem({ content: 'Copy' }),
+ *     MenuSeparator(),
+ *     MenuItem({ content: 'Paste' }),
+ *   ]
+ * })
+ * ```
+ */
+export declare function MenuSeparator(options?: MenuSeparatorOptions): TNode;

package/dist/types/components/navigation/sidebar/index.d.ts

@@ -2,3 +2,4 @@ export * from './sidebar';
 export * from './collapsible-sidebar-group';
 export * from './sidebar-link';
 export * from './sidebar-group';
+export * from './sidebar-separator';

package/dist/types/components/navigation/sidebar/sidebar-separator.d.ts

@@ -0,0 +1 @@
+export declare function SidebarSeparator(): import("@tempots/dom").Renderable;

package/dist/types/tokens/colors.d.ts

@@ -5,7 +5,7 @@ export declare const colorShades: ColorShade[];
 export type SemanticColorName = 'primary' | 'secondary' | 'base' | 'success' | 'warning' | 'error' | 'info';
 export type ThemeColorName = ColorName | SemanticColorName;
 export declare const semanticColorNames: readonly ["primary", "secondary", "base", "success", "warning", "error", "info"];
-export declare const themeColorNames: ("error" | "base" | "success" | "primary" | "secondary" | "warning" | "info" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone")[];
+export declare const themeColorNames: ("error" | "base" | "primary" | "secondary" | "success" | "warning" | "info" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone")[];
 export declare const semanticColors: Record<SemanticColorName, ColorName>;
 export type BackgroundColorName = 'background' | 'surface' | 'subtle' | 'elevated' | 'raised' | 'overlay';
 export declare const bgColors: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -54,9 +54,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@tempots/dom": "28.2.2",
+    "@tempots/dom": "28.3.0",
     "@tempots/std": "0.22.1",
-    "@tempots/ui": "6.1.0"
+    "@tempots/ui": "6.2.0"
   },
   "peerDependenciesMeta": {
     "@tempots/dom": {