@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-main.fcc0d83b33

package/dist/types/src/{styles/fragments → util}/elevation.d.ts

@@ -1,10 +1,4 @@
 import { type ComponentFragment, type Elevation, type SurfaceLevel } from '@dxos/ui-types';
-/**
- * @deprecated
- */
-export declare const contentShadow: ComponentFragment<{
-    elevation?: Elevation;
-}>;
 export declare const surfaceShadow: ComponentFragment<{
     elevation?: Elevation;
 }>;

package/dist/types/src/util/elevation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../../../src/util/elevation.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3F,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,SAAS,CAAA;CAAE,CAMtE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAE,KAAK,CAAC,EAAE,YAAY,CAAC;IAAC,SAAS,CAAC,EAAE,SAAS,CAAA;CAAE,CAY5F,CAAC"}

package/dist/types/src/util/hash-styles.d.ts

@@ -2,14 +2,17 @@ import { type ChromaticPalette } from '@dxos/ui-types';
 export type Hue = ChromaticPalette | 'neutral';
 export type ColorStyles = {
     hue: Hue;
-    text: string;
-    icon: string;
-    bg: string;
+    fill: string;
     surface: string;
+    surfaceText: string;
+    text: string;
     border: string;
 };
-export declare const styles: ColorStyles[];
+export declare const palette: {
+    neutral: ColorStyles;
+    hues: ColorStyles[];
+};
 export declare const getStyles: (hue: string) => ColorStyles;
-export declare const getHashHue: (id: string | undefined) => Hue;
 export declare const getHashStyles: (id: string | undefined) => ColorStyles;
+export declare const getHashHue: (id: string | undefined) => Hue;
 //# sourceMappingURL=hash-styles.d.ts.map

package/dist/types/src/util/hash-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hash-styles.d.ts","sourceRoot":"","sources":["../../../../src/util/hash-styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,MAAM,GAAG,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAG/C,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAcF,eAAO,MAAM,MAAM,EAAE,WAAW,EAyH/B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,KAAK,MAAM,KAAG,WAEvC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,IAAI,MAAM,GAAG,SAAS,KAAG,GAEnD,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,GAAG,SAAS,KAAG,WAGtD,CAAC"}
+{"version":3,"file":"hash-styles.d.ts","sourceRoot":"","sources":["../../../../src/util/hash-styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,MAAM,GAAG,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAG/C,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAwJF,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAGF,eAAO,MAAM,SAAS,QAAS,MAAM,KAAG,WAEvC,CAAC;AAGF,eAAO,MAAM,aAAa,OAAQ,MAAM,GAAG,SAAS,KAAG,WAEtD,CAAC;AAEF,eAAO,MAAM,UAAU,OAAQ,MAAM,GAAG,SAAS,KAAG,GAEnD,CAAC"}

package/dist/types/src/util/index.d.ts

@@ -1,3 +1,6 @@
+export * from './elevation';
 export * from './hash-styles';
 export * from './mx';
+export * from './size';
+export * from './valence';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

package/dist/types/src/util/mx.d.ts

@@ -1,2 +1,58 @@
+import { type ForwardRefExoticComponent, type ForwardedRef, type HTMLAttributes, type ReactNode, type RefAttributes, CSSProperties } from 'react';
+import { ThemedClassName, type ComposableProps, type SlottableProps } from '@dxos/ui-types';
 export declare const mx: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+/**
+ * Reconciles className properties from a parent slot.
+ * - `className` is set by the Slot merge mechanism.
+ * - `classNames` is the consumer-facing prop for theming overrides.
+ * Use `composableProps` to reconcile both into a single `className`.
+ */
+export declare const composableProps: <P extends HTMLElement = HTMLElement>({ className, classNames, role, style, ...props }: ComposableProps, { classNames: defaultClassNames, ...defaults }?: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined) => {
+    children?: ReactNode | undefined;
+    role: import("react").AriaRole;
+    style: CSSProperties;
+    className: string;
+};
+/**
+ * Factory for slottable components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `SlottableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, `asChild`, and the custom props `P`.
+ *
+ * @example
+ * ```tsx
+ * const MyPanel = slottable<HTMLDivElement, { border?: boolean }>(
+ *   ({ children, asChild, border, ...props }, forwardedRef) => {
+ *     const Comp = asChild ? Slot : Primitive.div;
+ *     return (
+ *       <Comp {...composableProps(props, { classNames: border && 'border' })} ref={forwardedRef}>
+ *         {children}
+ *       </Comp>
+ *     );
+ *   },
+ * );
+ * ```
+ */
+export declare function slottable<E extends HTMLElement, P extends object = {}>(render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>>;
+/**
+ * Factory for composable (leaf) components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `ComposableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, and the custom props `P`.
+ *
+ * For generic components, use `any` for the type parameter inside `composable` and
+ * cast the result to restore the generic signature for consumers.
+ *
+ * @example
+ * ```tsx
+ * const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
+ *   return (
+ *     <button {...composableProps(props, { classNames: 'btn' })} ref={forwardedRef}>
+ *       {children}
+ *     </button>
+ *   );
+ * });
+ * ```
+ */
+export declare function composable<E extends HTMLElement, P extends object = {}>(render: (props: ComposableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode): ForwardRefExoticComponent<ComposableProps<P> & RefAttributes<E>>;
 //# sourceMappingURL=mx.d.ts.map

package/dist/types/src/util/mx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mx.d.ts","sourceRoot":"","sources":["../../../../src/util/mx.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,EAAE,sEAwCd,CAAC"}
+{"version":3,"file":"mx.d.ts","sourceRoot":"","sources":["../../../../src/util/mx.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,KAAK,yBAAyB,EAC9B,KAAK,YAAY,EACjB,KAAK,cAAc,EAEnB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,aAAa,EACd,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAI5F,eAAO,MAAM,EAAE,sEAuCb,CAAC;AAEH;;;;;GAKG;AAEH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,kEACD,eAAe,mDACjB,eAAe,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;;;WAY7D,aAAa;;CAIvD,CAAC;AAKH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,MAAM,GAAG,EAAE,EACpE,MAAM,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,GACjG,yBAAyB,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CA4BjE;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,MAAM,GAAG,EAAE,EACrE,MAAM,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,GAClG,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAIlE"}

package/dist/types/src/util/size.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties } from 'react';
+import { type Size } from '@dxos/ui-types';
+export declare const getHeight: (size: Size) => string;
+export declare const getWidth: (size: Size) => string;
+export declare const getSize: (size: Size) => string;
+export declare const sizeValue: (size: Size) => number;
+export declare const sizeToRem: (size: Size) => string;
+export declare const iconSize: (size: Size | null) => CSSProperties;
+/**
+ * Snaps an arbitrary numeric value to the nearest valid Tailwind size token.
+ *
+ * The function tries progressively coarser series in order until a match is found:
+ * 1. Exact match — returns the value as-is if it is already a valid `Size`.
+ * 2. Zero or negative — clamps to `0`.
+ * 3. Sub-half values (`< 0.5`) — maps to the `'px'` token (1 px).
+ * 4. Half-step series (0.5 increments, e.g. 1.5, 2.5 …).
+ * 5. Whole-number series (1, 2, 3 …).
+ * 6. Double series (even numbers: 2, 4, 6 …).
+ * 7. Quadruple series (multiples of 4: 4, 8, 12 …).
+ * 8. Falls back to `defaultSize` if no series matches.
+ *
+ * @param value - Numeric size to snap (in Tailwind spacing units, where 1 unit = 0.25 rem).
+ * @param defaultSize - Fallback `Size` token used when no series produces a valid match.
+ * @returns The nearest valid `Size` token.
+ */
+export declare const snapSize: (value: number, defaultSize: Size) => Size;
+//# sourceMappingURL=size.d.ts.map

package/dist/types/src/util/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../src/util/size.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,gBAAgB,CAAC;AA6C3C,eAAO,MAAM,SAAS,SAAU,IAAI,WAAqB,CAAC;AAC1D,eAAO,MAAM,QAAQ,SAAU,IAAI,WAAqB,CAAC;AACzD,eAAO,MAAM,OAAO,SAAU,IAAI,WAAwC,CAAC;AAE3E,eAAO,MAAM,SAAS,SAAU,IAAI,KAAG,MAAoC,CAAC;AAC5E,eAAO,MAAM,SAAS,SAAU,IAAI,KAAG,MAAmE,CAAC;AAE3G,eAAO,MAAM,QAAQ,SAAU,IAAI,GAAG,IAAI,KAAG,aAC6B,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,UAAW,MAAM,eAAe,IAAI,KAAG,IAwB3D,CAAC"}

package/dist/types/src/util/valence.d.ts

@@ -0,0 +1,4 @@
+import { type MessageValence } from '@dxos/ui-types';
+export declare const textValence: (valence?: MessageValence) => "font-medium text-error-text" | "font-medium text-info-text" | "font-medium text-success-text" | "font-medium text-warning-text" | undefined;
+export declare const messageValence: (valence?: MessageValence) => "font-medium text-error-text border-error-text bg-error-surface" | "font-medium text-info-text border-info-text bg-info-surface" | "font-medium text-neutral-text border-neutral-text bg-neutral-surface" | "font-medium text-success-text border-success-text bg-success-surface" | "font-medium text-warning-text border-warning-text bg-warning-surface";
+//# sourceMappingURL=valence.d.ts.map

package/dist/types/src/util/valence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"valence.d.ts","sourceRoot":"","sources":["../../../../src/util/valence.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,WAAW,aAAc,cAAc,iJAWnD,CAAC;AAEF,eAAO,MAAM,cAAc,aAAc,cAAc,gWAatD,CAAC"}