@vireo-ai/trellis-ui 0.1.1 → 0.1.4

package/types/components/tabs/index.d.ts

@@ -22,6 +22,7 @@ type TabsData = {
     cleanup: Array<() => void>;
     root: BindingObject;
     owner(): string;
+    ownsElement(element: Element): boolean;
     lists(): HTMLElement[];
     primaryList(): HTMLElement | null;
     listVariant(): TabsVariant;

package/types/components/text/contract.d.ts

@@ -1,10 +1,11 @@
+import { type TypographyColor } from '../common';
 declare const TEXT_AS_VALUES: readonly ["span", "p", "div", "label", "kbd", "code", "strong"];
 declare const TEXT_SIZE_VALUES: readonly ["xs", "sm", "base", "lg", "xl", "2xl"];
 declare const TEXT_WEIGHT_VALUES: readonly ["normal", "medium", "semibold", "bold"];
-declare const TEXT_COLOR_VALUES: readonly ["default", "muted", "subtle", "danger", "inherit"];
+declare const TEXT_COLOR_VALUES: readonly ["inherit", "muted", "subtle", "accent", "danger"];
 type TextAs = typeof TEXT_AS_VALUES[number];
 type TextSize = typeof TEXT_SIZE_VALUES[number];
 type TextWeight = typeof TEXT_WEIGHT_VALUES[number];
-type TextColor = typeof TEXT_COLOR_VALUES[number];
+type TextColor = TypographyColor;
 export { TEXT_AS_VALUES, TEXT_COLOR_VALUES, TEXT_SIZE_VALUES, TEXT_WEIGHT_VALUES, };
 export type { TextAs, TextColor, TextSize, TextWeight };

package/types/components/textarea/contract.d.ts

@@ -7,6 +7,7 @@ declare const textareaSchema: {
     placeholder: import("../../runtime/codecs").StringCodec;
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
     variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
+    radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
     rows: import("../../runtime/codecs").NumberCodec;
     resize: import("../../runtime/codecs").OneOfCodec<"none" | "vertical" | "horizontal" | "both">;
     disabled: import("../../runtime/codecs").BoolCodec;

package/types/components/toast/contract.d.ts

@@ -1,11 +1,15 @@
 import { type PropState } from '../../runtime';
 declare const TOAST_LEVELS: readonly ["info", "success", "warning", "danger", "debug"];
-declare const TOAST_VARIANTS: readonly ["default", "info", "success", "warning", "danger", "debug"];
+declare const TOAST_COLORS: readonly ["auto", "neutral", "accent", "success", "warning", "danger"];
+declare const TOAST_RESOLVED_COLORS: readonly ["neutral", "accent", "success", "warning", "danger"];
+declare const TOAST_VARIANTS: readonly ["default", "soft", "surface", "solid", "outline"];
 declare const TOAST_POSITIONS: readonly ["top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center"];
 declare const toastSchema: {
-    level: import("../../runtime/codecs").OneOfCodec<"success" | "warning" | "danger" | "info" | "debug">;
-    variant: import("../../runtime/codecs").OneOfCodec<"default" | "success" | "warning" | "danger" | "info" | "debug">;
+    level: import("../../runtime/codecs").OneOfCodec<"danger" | "success" | "warning" | "info" | "debug">;
+    color: import("../../runtime/codecs").OneOfCodec<"accent" | "danger" | "neutral" | "success" | "warning" | "auto">;
+    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "default" | "solid" | "soft" | "surface">;
     title: import("../../runtime/codecs").StringCodec;
+    description: import("../../runtime/codecs").StringCodec;
     duration: import("../../runtime/codecs").NumberCodec;
     dismissible: import("../../runtime/codecs").BoolCodec;
     class: import("../../runtime/codecs").StringCodec;
@@ -20,9 +24,11 @@ declare const toastOutletSchema: {
     class: import("../../runtime/codecs").StringCodec;
 };
 type ToastLevel = typeof TOAST_LEVELS[number];
+type ToastColor = typeof TOAST_COLORS[number];
+type ToastResolvedColor = typeof TOAST_RESOLVED_COLORS[number];
 type ToastVariant = typeof TOAST_VARIANTS[number];
 type ToastPosition = typeof TOAST_POSITIONS[number];
 type ToastProps = PropState<typeof toastSchema>;
 type ToastOutletProps = PropState<typeof toastOutletSchema>;
-export { TOAST_LEVELS, TOAST_POSITIONS, TOAST_VARIANTS, toastOutletSchema, toastSchema };
-export type { ToastLevel, ToastOutletProps, ToastPosition, ToastProps, ToastVariant };
+export { TOAST_COLORS, TOAST_LEVELS, TOAST_POSITIONS, TOAST_RESOLVED_COLORS, TOAST_VARIANTS, toastOutletSchema, toastSchema };
+export type { ToastColor, ToastLevel, ToastOutletProps, ToastPosition, ToastProps, ToastResolvedColor, ToastVariant };

package/types/components/toast/index.d.ts

@@ -2,8 +2,9 @@ import type Alpine from 'alpinejs';
 import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
 import { type ToastOutletProps, type ToastProps } from './contract';
 type ToastDetail = {
-    message?: unknown;
+    description?: unknown;
     title?: unknown;
+    color?: unknown;
     level?: unknown;
     variant?: unknown;
     duration?: unknown;

package/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { Alpine as AlpineType } from 'alpinejs';
 import { motion } from './motion';
-import { bool, className, create, createResizable, cx, defineManifest, defineProps, defineStyles, json, number, oneOf, props, propsFromSchema, resolveStyle, string } from './runtime';
+import { bool, className, create, createResizable, cx, defineManifest, defineProps, defineStyles, json, mergeBindings, number, oneOf, propsFromSchema, resolveStyle, string } from './runtime';
 type TrellisUIPlugin = (AlpineInstance: AlpineType) => void;
 declare const ui: {
     readonly bool: import("./runtime/codecs").BoolCodec;
@@ -12,6 +12,7 @@ declare const ui: {
     readonly defineProps: <T extends Record<string, import("./runtime").CodecFn<unknown>>>({ el, schema, }: import("./runtime/codecs").DefinePropsOptions<T>) => import("./runtime").PropState<T>;
     readonly defineStyles: <const T extends import("./runtime").StyleDefinition>({ definition }: import("./runtime").DefineStylesOptions<T>) => Readonly<T>;
     readonly json: import("./runtime/codecs").JsonCodecFactory;
+    readonly mergeBindings: ({ inputs }: import("./runtime").MergeBindingsOptions) => import("./runtime").BindingObject;
     readonly motion: {
         readonly createAnimator: <T extends string | number>(value: import("motion").MotionValue<T> | T, defaultOptions?: import("motion").ValueAnimationTransition<T>) => import("./motion").Animator<T>;
         readonly parallel: (...handles: import("./motion").MotionHandle[]) => import("./motion").MotionHandle;
@@ -31,7 +32,6 @@ declare const ui: {
     };
     readonly number: import("./runtime/codecs").NumberCodec;
     readonly oneOf: <T extends string>(allowed: readonly T[], fallback: T) => import("./runtime/codecs").OneOfCodec<T>;
-    readonly props: ({ inputs }: import("./runtime").PropsOptions) => import("./runtime").BindingObject;
     readonly propsFromSchema: <const T extends Record<string, import("./runtime").CodecFn<unknown>>>({ schema, details, }: import("./runtime").PropsFromSchemaOptions<T>) => Record<string, import("./runtime").ManifestProp>;
     readonly resolveStyle: ({ part, props, className: override, }: import("./runtime").ResolveStyleOptions) => string;
     readonly string: import("./runtime/codecs").StringCodec;
@@ -41,6 +41,6 @@ export { trellisUi, ui };
 export default trellisUi;
 export type { TrellisUIPlugin };
 export { motion };
-export { bool, className, create, createResizable, cx, defineManifest, defineProps, defineStyles, json, number, oneOf, props, propsFromSchema, resolveStyle, string, };
-export type { ClassArray, ClassDictionary, ClassNameOptions, ClassValue, CodecFn, ComponentManifest, CreateOptions, DefineManifestOptions, DefineStylesOptions, ManifestPart, ManifestProp, ManifestPropDetails, ManifestToken, PropInput, PropState, PropsFromSchemaOptions, PropsOptions, ResizableOptions, ResizeAxis, ResizeEvent, ResizeMode, ResizePhase, ResolveStyleOptions, SchemaPropDetails, SchemaToProps, StyleDefinition, StylePart, StyleProps, StyleTree, TrellisAlpineComponent, } from './runtime';
+export { bool, className, create, createResizable, cx, defineManifest, defineProps, defineStyles, json, mergeBindings, number, oneOf, propsFromSchema, resolveStyle, string, };
+export type { ClassArray, ClassDictionary, ClassNameOptions, ClassValue, CodecFn, ComponentManifest, CreateOptions, DefineManifestOptions, DefineStylesOptions, ManifestPart, ManifestProp, ManifestPropDetails, ManifestToken, BindingInput, PropState, PropsFromSchemaOptions, MergeBindingsOptions, ResizableOptions, ResizeAxis, ResizeEvent, ResizeMode, ResizePhase, ResolveStyleOptions, SchemaPropDetails, SchemaToProps, StyleDefinition, StylePart, StyleProps, StyleTree, TrellisAlpineComponent, } from './runtime';
 export type { AnimateStreamPatchOptions, AnimateViewOptions, Animator, MotionHandle, MotionPreference, MotionTarget, PresenceDefinition, PresenceLifecycle, PresenceLifecycleCallbacks, PresenceLifecycleOptions, PresenceOptions, PresencePhase, PresencePreset, ResolvedViewTarget, TransformComposer, TransformContext, ViewPreset, ViewScope, } from './motion';

package/types/motion/animate.d.ts

@@ -44,6 +44,10 @@ declare const presenceOptions: {
         duration: 0.24;
         ease: readonly [0.23, 1, 0.32, 1];
     };
+    sheet: {
+        duration: 0.24;
+        ease: readonly [0.23, 1, 0.32, 1];
+    };
 };
 export { bindStyle, bindTransform, createAnimator, motionDurations, motionEasings, noopHandle, parallel, presenceOptions, sequential, toMotionHandle, };
 export type { Animator, MotionHandle, TransformComposer, TransformContext };

package/types/motion/presence.d.ts

@@ -2,7 +2,7 @@ import { type AnimationOptions, type DOMKeyframesDefinition } from 'motion';
 import { type MotionHandle } from './animate';
 import { type MotionPreference } from './reduced-motion';
 type PresencePhase = 'enter' | 'exit';
-type PresencePreset = 'popover' | 'menu' | 'modal' | 'toast' | 'sidebar' | 'fade';
+type PresencePreset = 'popover' | 'menu' | 'modal' | 'toast' | 'sidebar' | 'sheet' | 'fade';
 type PresenceDefinition = PresencePreset | DOMKeyframesDefinition;
 type PresenceOptions = AnimationOptions & {
     reducedMotion?: MotionPreference;

package/types/runtime/index.d.ts

@@ -4,7 +4,7 @@ export { className, cx, type ClassArray, type ClassDictionary, type ClassNameOpt
 export { createCollectionNavigation, type CollectionElementOptions, type CollectionItemsOptions, type CollectionKeydownOptions, type CollectionNavigation, type CollectionNavigationOptions, } from './collection-navigation';
 export { registerConfirm, unregisterConfirm, type ConfirmEventDetail, type ConfirmRuntimeOptions } from './confirm';
 export { create, type CreateOptions, type StyleTree } from './create';
-export { props, type BindingObject, type PropInput, type PropsOptions } from './props';
+export { mergeBindings, type BindingInput, type BindingObject, type MergeBindingsOptions } from './merge-bindings';
 export { defineProps, string, number, bool, json, oneOf, type CodecFn, type PropState, type SchemaToProps } from './codecs';
 export { addListener, asBool, dispatch, isRtl, removeAttribute, setAttribute, setPresence, type AddListenerOptions, type AttributeOptions, type BoolOptions, type CleanupStack, type DispatchOptions, type ElementOptions, type PresenceOptions, } from './dom';
 export { addDismissableLayer, type DismissableLayerOptions } from './dismissable-layer';
@@ -14,7 +14,7 @@ export { createResizable, registerResizable, type ResizableOptions, type ResizeA
 export { defineManifest, propsFromSchema, type ComponentManifest, type DefineManifestOptions, type ManifestPart, type ManifestProp, type ManifestPropDetails, type ManifestToken, type PropsFromSchemaOptions, type SchemaPropDetails, } from './manifest';
 export { defineStyles, resolveStyle, type DefineStylesOptions, type ResolveStyleOptions, type StyleDefinition, type StylePart, type StyleProps, } from './styles';
 export { applyStreamPatch, applyStreamPatches, applyUiEffect, applyUiEffects, connectStream, dispatchStreamEvent, registerStream, type PatchMode, type StreamEventPayload, type StreamPatchPayload, type UiEffectPayload, } from './stream';
-export { applyThemeMode, createDarkModeStore, registerThemeStore, type DarkModeStore, type ThemeChangeDetail, type ThemeMode, } from './theme';
+export { applyThemeMode, createThemeStore, registerThemeStore, type ResolvedThemeMode, type ThemeChangeDetail, type ThemeStore, type ThemeMode, } from './theme';
 export { lockDocumentScroll, unlockDocumentScroll } from './scroll-lock';
 type TrellisAlpineComponent<T> = Alpine.AlpineComponent<T> & {
     init(): void;
@@ -42,7 +42,7 @@ declare const ui: {
     readonly parseItemData: (raw: string | undefined) => unknown;
     readonly splitControlValues: (value: string) => string[];
     readonly createResizable: ({ element, handle, axis, min, max, step, mode, hitArea, coarseHitArea, disabled, onStart, onResize, onEnd, }: import("./resizable").ResizableOptions) => (() => void);
-    readonly props: ({ inputs }: import("./props").PropsOptions) => import("./props").BindingObject;
+    readonly mergeBindings: ({ inputs }: import("./merge-bindings").MergeBindingsOptions) => import("./merge-bindings").BindingObject;
     readonly propsFromSchema: <const T extends Record<string, import("./codecs").CodecFn<unknown>>>({ schema, details, }: import("./manifest").PropsFromSchemaOptions<T>) => Record<string, import("./manifest").ManifestProp>;
     readonly resolveStyle: ({ part, props, className: override, }: import("./styles").ResolveStyleOptions) => string;
     readonly className: ({ values }: import("./class-name").ClassNameOptions) => string;
@@ -68,12 +68,12 @@ declare const ui: {
     readonly applyStreamPatches: (AlpineInstance: import("./stream").StreamAlpine, payload: import("./stream").StreamPatchPayload | import("./stream").StreamPatchPayload[]) => void;
     readonly applyUiEffect: (AlpineInstance: import("./stream").StreamAlpine, effect: import("./stream").UiEffectPayload) => void;
     readonly applyUiEffects: (AlpineInstance: import("./stream").StreamAlpine, effects: import("./stream").UiEffectPayload | import("./stream").UiEffectPayload[]) => void;
-    readonly connectStream: (AlpineInstance: import("./stream").StreamAlpine, url: string) => Promise<{
+    readonly connectStream: (AlpineInstance: import("./stream").StreamAlpine, url: string) => {
         abort(reason?: string): void;
-    }>;
+    };
     readonly dispatchStreamEvent: (payload: import("./stream").StreamEventPayload) => void;
     readonly applyThemeMode: (mode: import("./theme").ThemeMode) => import("./theme").ThemeChangeDetail;
-    readonly createDarkModeStore: () => import("./theme").DarkModeStore;
+    readonly createThemeStore: () => import("./theme").ThemeStore;
     readonly lockDocumentScroll: () => void;
     readonly registerConfirm: ({ root }?: import("./confirm").ConfirmRuntimeOptions) => void;
     readonly registerResizable: (AlpineInstance: Alpine.Alpine) => void;

package/types/runtime/manifest.d.ts

@@ -18,10 +18,14 @@ type ManifestAcceptedEvent = {
     description: string;
     detail?: Record<string, string>;
 };
+type ComponentManifestMeta = {
+    group?: string;
+};
 type ComponentManifest = {
     name: string;
     title: string;
     description: string;
+    meta?: ComponentManifestMeta;
     props?: Record<string, ManifestProp>;
     propSchema?: Record<string, CodecFn<unknown>>;
     slots?: Record<string, string>;
@@ -46,4 +50,4 @@ type PropsFromSchemaOptions<T extends Record<string, CodecFn<unknown>>> = {
 declare const defineManifest: <const T extends ComponentManifest>({ manifest }: DefineManifestOptions<T>) => Readonly<T>;
 declare const propsFromSchema: <const T extends Record<string, CodecFn<unknown>>>({ schema, details, }: PropsFromSchemaOptions<T>) => Record<string, ManifestProp>;
 export { defineManifest, propsFromSchema };
-export type { ComponentManifest, DefineManifestOptions, ManifestPart, ManifestProp, ManifestPropDetails, ManifestAcceptedEvent, ManifestToken, PropsFromSchemaOptions, PropKind, SchemaPropDetails, };
+export type { ComponentManifest, DefineManifestOptions, ManifestPart, ManifestProp, ManifestPropDetails, ManifestAcceptedEvent, ComponentManifestMeta, ManifestToken, PropsFromSchemaOptions, PropKind, SchemaPropDetails, };

package/types/runtime/merge-bindings.d.ts

@@ -0,0 +1,9 @@
+import { type ClassValue } from './class-name';
+type AttributeValue = unknown;
+export type BindingObject = Record<string, AttributeValue>;
+export type BindingInput = ClassValue | BindingObject;
+export type MergeBindingsOptions = {
+    inputs: readonly BindingInput[];
+};
+export declare const mergeBindings: ({ inputs }: MergeBindingsOptions) => BindingObject;
+export {};

package/types/runtime/stream.d.ts

@@ -41,7 +41,7 @@ declare const dispatchStreamEvent: (payload: StreamEventPayload) => void;
 declare const isManagedHistoryState: (state: unknown) => state is ManagedHistoryState;
 declare const applyUiEffect: (AlpineInstance: StreamAlpine, effect: UiEffectPayload) => void;
 declare const applyUiEffects: (AlpineInstance: StreamAlpine, effects: UiEffectPayload | UiEffectPayload[]) => void;
-declare const connectStream: (AlpineInstance: StreamAlpine, url: string) => Promise<StreamController>;
+declare const connectStream: (AlpineInstance: StreamAlpine, url: string) => StreamController;
 declare const registerStream: (AlpineInstance: Alpine.Alpine) => void;
 export { applyUiEffect, applyUiEffects, applyStreamPatch, applyStreamPatchNow, applyStreamPatches, connectStream, dispatchStreamEvent, isManagedHistoryState, registerStream, };
 export type { LocationPayload, PatchMode, StreamAlpine, StreamEventPayload, StreamPatchPayload, UiEffectPayload };

package/types/runtime/theme.d.ts

@@ -1,17 +1,22 @@
 import type { Alpine as AlpineType } from 'alpinejs';
 declare const THEME_VALUES: readonly ["light", "dark", "system"];
 type ThemeMode = typeof THEME_VALUES[number];
+type ResolvedThemeMode = Exclude<ThemeMode, 'system'>;
 type ThemeChangeDetail = {
     mode: ThemeMode;
+    resolved: ResolvedThemeMode;
+    dark: boolean;
     on: boolean;
 };
-type DarkModeStore = {
+type ThemeStore = {
     mode: ThemeMode;
+    resolved: ResolvedThemeMode;
+    dark: boolean;
     on: boolean;
     set: (mode: ThemeMode) => void;
     toggle: () => void;
 };
 declare const applyThemeMode: (mode: ThemeMode) => ThemeChangeDetail;
-declare const createDarkModeStore: () => DarkModeStore;
+declare const createThemeStore: () => ThemeStore;
 declare const registerThemeStore: (AlpineInstance: AlpineType) => void;
-export { applyThemeMode, createDarkModeStore, registerThemeStore, type DarkModeStore, type ThemeChangeDetail, type ThemeMode, };
+export { applyThemeMode, createThemeStore, registerThemeStore, type ResolvedThemeMode, type ThemeChangeDetail, type ThemeStore, type ThemeMode, };

package/src/components/image/styles.css

@@ -1,10 +0,0 @@
-@layer components {
-  .ui-image-outline {
-    outline: 1px solid rgba(0, 0, 0, 0.1);
-    outline-offset: -1px;
-  }
-
-  .dark .ui-image-outline {
-    outline-color: rgba(255, 255, 255, 0.1);
-  }
-}

package/src/components/theme/styles.css

@@ -1,13 +0,0 @@
-@layer components {
-  [data-ui-theme-icon] [data-ui-theme-icon-when],
-  [data-ui-theme-text] [data-ui-theme-text-when] {
-    display: none;
-  }
-
-  html:not(.dark) [data-ui-theme-icon] [data-ui-theme-icon-when="light"],
-  html.dark [data-ui-theme-icon] [data-ui-theme-icon-when="dark"],
-  html:not(.dark) [data-ui-theme-text] [data-ui-theme-text-when="light"],
-  html.dark [data-ui-theme-text] [data-ui-theme-text-when="dark"] {
-    display: block;
-  }
-}