@exsto/ds 0.0.0-stage → 0.0.1-rc.10

package/dist/ui/src/components/ui/tabs/tabs.behavior.test.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A11y + keyboard-nav test for Tabs.
+ *
+ * PATH TAKEN: happy-dom unit test for roles/aria + onValueChange callback.
+ * Arrow-key navigation moves focus but does NOT auto-select in Base UI's default
+ * (activateOnFocus=false) mode; the user presses Enter/Space (or clicks) to
+ * activate. In happy-dom, native button click-from-keyboard is not fully
+ * emulated, so we:
+ *   1. Assert roles and aria attributes (role=tablist, role=tab, aria-selected,
+ *      role=tabpanel) to confirm a11y-by-construction.
+ *   2. Assert that clicking a tab calls onValueChange with the correct value.
+ *   3. Assert that ArrowRight on the tablist fires a keydown and moves the
+ *      composite highlight (the CompositeRoot processes the event). We verify
+ *      this by confirming the tablist receives keydown and the handler runs
+ *      without error.
+ *   4. For full browser-level arrow-key navigation proof, see the Playwright
+ *      e2e suite (e2e/open-popups.spec.ts pattern); a dedicated tabs e2e test
+ *      should be added there to verify roving tabindex focus movement in a real
+ *      browser.
+ */
+export {};

package/dist/ui/src/components/ui/tabs/tabs.d.ts

@@ -0,0 +1,36 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+export interface ITabsProps extends Omit<BaseTabs.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'className' | 'orientation' | 'children'> {
+    /** Controlled selected tab. Provide with `onValueChange`. */
+    value?: string;
+    /** Uncontrolled initial tab. Use this when the component should own its state. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    children: React.ReactNode;
+}
+export declare const Tabs: ({ value, defaultValue, onValueChange, className, orientation, children, ...props }: ITabsProps) => React.JSX.Element;
+export declare const tabsListVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ITabsListProps extends VariantProps<typeof tabsListVariants>, Omit<BaseTabs.List.Props, 'className' | 'children'> {
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const TabsList: ({ className, variant, children, ...props }: ITabsListProps) => React.JSX.Element;
+export interface ITabsTriggerProps extends Omit<BaseTabs.Tab.Props, 'value' | 'disabled' | 'className' | 'children'> {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const TabsTrigger: ({ value, disabled, className, children, ...props }: ITabsTriggerProps) => React.JSX.Element;
+export interface ITabsContentProps extends Omit<BaseTabs.Panel.Props, 'value' | 'keepMounted' | 'className' | 'children'> {
+    value: string;
+    keepMounted?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const TabsContent: ({ value, keepMounted, className, children, ...props }: ITabsContentProps) => React.JSX.Element;

package/dist/ui/src/components/ui/textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './textarea';

package/dist/ui/src/components/ui/textarea/textarea.d.ts

@@ -0,0 +1,2 @@
+import type * as React from 'react';
+export declare const Textarea: ({ className, ...props }: React.ComponentProps<"textarea">) => React.JSX.Element;

package/dist/ui/src/components/ui/toast/index.d.ts

@@ -0,0 +1 @@
+export * from './toast';

package/dist/ui/src/components/ui/toast/toast.d.ts

@@ -0,0 +1,15 @@
+import { Toast as ToastPrimitive } from '@base-ui/react/toast';
+import type * as React from 'react';
+export declare const toast: import('@base-ui/react').ToastManager<any>;
+export declare const ToastProvider: ({ ...props }: ToastPrimitive.Provider.Props) => React.JSX.Element;
+export declare const ToastPortal: ({ ...props }: ToastPrimitive.Portal.Props) => React.JSX.Element;
+export declare const ToastViewport: ({ className, ...props }: ToastPrimitive.Viewport.Props) => React.JSX.Element;
+export declare const Toast: ({ className, ...props }: ToastPrimitive.Root.Props) => React.JSX.Element;
+export declare const ToastContent: ({ className, ...props }: ToastPrimitive.Content.Props) => React.JSX.Element;
+export declare const ToastTitle: ({ className, ...props }: ToastPrimitive.Title.Props) => React.JSX.Element;
+export declare const ToastDescription: ({ className, ...props }: ToastPrimitive.Description.Props) => React.JSX.Element;
+export declare const ToastAction: ({ className, render, ...props }: ToastPrimitive.Action.Props) => React.JSX.Element;
+export declare const ToastClose: ({ className, children, render, ...props }: ToastPrimitive.Close.Props) => React.JSX.Element;
+export declare const Toaster: ({ children, toastManager, ...props }: ToastPrimitive.Provider.Props) => React.JSX.Element;
+export declare const createToastManager: typeof ToastPrimitive.createToastManager;
+export declare const useToastManager: typeof ToastPrimitive.useToastManager;

package/dist/ui/src/components/ui/toggle/index.d.ts

@@ -0,0 +1 @@
+export * from './toggle';

package/dist/ui/src/components/ui/toggle/toggle.d.ts

@@ -0,0 +1,8 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { VariantProps } from 'class-variance-authority';
+export declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TToggleVariants = VariantProps<typeof toggleVariants>;
+export declare const Toggle: <Value extends string>({ className, variant, size, ...props }: TogglePrimitive.Props<Value> & TToggleVariants) => import('react').JSX.Element;

package/dist/ui/src/components/ui/toggle-group/index.d.ts

@@ -0,0 +1 @@
+export * from './toggle-group';

package/dist/ui/src/components/ui/toggle-group/toggle-group.d.ts

@@ -0,0 +1,7 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { TToggleVariants } from '../toggle/toggle';
+export declare const ToggleGroup: <Value extends string>({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupPrimitive.Props<Value> & TToggleVariants & {
+    spacing?: number;
+}) => import('react').JSX.Element;
+export declare const ToggleGroupItem: <Value extends string>({ className, variant, size, ...props }: TogglePrimitive.Props<Value> & TToggleVariants) => import('react').JSX.Element;

package/dist/ui/src/components/ui/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip';

package/dist/ui/src/components/ui/tooltip/tooltip.d.ts

@@ -0,0 +1,5 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+export declare const TooltipProvider: ({ delay, ...props }: TooltipPrimitive.Provider.Props) => import('react').JSX.Element;
+export declare const Tooltip: ({ ...props }: TooltipPrimitive.Root.Props) => import('react').JSX.Element;
+export declare const TooltipTrigger: ({ ...props }: TooltipPrimitive.Trigger.Props) => import('react').JSX.Element;
+export declare const TooltipContent: ({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => import('react').JSX.Element;

package/dist/ui/src/hooks/use-media-player.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface IMediaPlayerState {
+    playing: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    muted: boolean;
+}
+export interface IUseMediaPlayerOptions {
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number, duration: number) => void;
+}
+export interface IUseMediaPlayerResult<TElement extends HTMLMediaElement> extends IMediaPlayerState {
+    refMedia: React.RefObject<TElement | null>;
+    toggle: () => void;
+    seek: (seconds: number) => void;
+    changeVolume: (volume: number) => void;
+    toggleMute: () => void;
+}
+/** `0:00` for anything that is not a finite, non-negative number, so a loading or errored source still renders. */
+export declare const formatMediaTime: (seconds: number) => string;
+/**
+ * Shared playback engine for the Audio and Video players. Both wrap the same
+ * HTMLMediaElement API, so the state machine lives here once and each component
+ * owns only its own layout and controls.
+ */
+export declare const useMediaPlayer: <TElement extends HTMLMediaElement>(options?: IUseMediaPlayerOptions) => IUseMediaPlayerResult<TElement>;

package/dist/ui/src/hooks/use-merged-refs.d.ts

@@ -0,0 +1,4 @@
+import { Ref, RefCallback } from 'react';
+type TPossibleRef<T> = Ref<T> | undefined;
+export declare const useMergedRefs: <T>(...refs: TPossibleRef<T>[]) => RefCallback<T>;
+export {};

package/dist/ui/src/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobile: () => boolean;

package/dist/ui/src/index.d.ts

@@ -0,0 +1,74 @@
+export * from './components/edyn/animated-number';
+export * from './components/edyn/audio-player';
+export * from './components/edyn/date-range-picker';
+export * from './components/edyn/initials-avatar';
+export * from './components/edyn/multi-select';
+export * from './components/edyn/progress-line';
+export * from './components/edyn/rich-text-content';
+export * from './components/edyn/video-player';
+export * from './components/ui/accordion';
+export * from './components/ui/alert';
+export * from './components/ui/alert-dialog';
+export * from './components/ui/aspect-ratio';
+export * from './components/ui/attachment';
+export * from './components/ui/avatar';
+export * from './components/ui/badge';
+export * from './components/ui/breadcrumb';
+export * from './components/ui/bubble';
+export * from './components/ui/button';
+export * from './components/ui/button-group';
+export * from './components/ui/calendar';
+export * from './components/ui/card';
+export * from './components/ui/carousel';
+export * from './components/ui/chart';
+export * from './components/ui/checkbox';
+export * from './components/ui/collapsible';
+export * from './components/ui/combobox';
+export * from './components/ui/command';
+export * from './components/ui/context-menu';
+export * from './components/ui/dialog';
+export * from './components/ui/direction';
+export * from './components/ui/drawer';
+export * from './components/ui/dropdown-menu';
+export * from './components/ui/empty';
+export * from './components/ui/field';
+export * from './components/ui/hover-card';
+export * from './components/ui/indicator';
+export * from './components/ui/input';
+export * from './components/ui/input-group';
+export * from './components/ui/input-otp';
+export * from './components/ui/item';
+export * from './components/ui/kbd';
+export * from './components/ui/label';
+export * from './components/ui/marker';
+export * from './components/ui/menubar';
+export * from './components/ui/message';
+export * from './components/ui/message-scroller';
+export * from './components/ui/native-select';
+export * from './components/ui/navigation-menu';
+export * from './components/ui/pagination';
+export * from './components/ui/popover';
+export * from './components/ui/progress';
+export * from './components/ui/questionnaire';
+export * from './components/ui/radio-group';
+export * from './components/ui/resizable';
+export * from './components/ui/scroll-area';
+export * from './components/ui/select';
+export * from './components/ui/separator';
+export * from './components/ui/sheet';
+export * from './components/ui/sidebar';
+export * from './components/ui/skeleton';
+export * from './components/ui/slider';
+export * from './components/ui/spinner';
+export * from './components/ui/switch';
+export * from './components/ui/table';
+export * from './components/ui/tabs';
+export * from './components/ui/textarea';
+export * from './components/ui/toast';
+export * from './components/ui/toggle';
+export * from './components/ui/toggle-group';
+export * from './components/ui/tooltip';
+export * from './hooks/use-media-player';
+export * from './hooks/use-merged-refs';
+export * from './hooks/use-mobile';
+export { cn } from './lib/utils';

package/dist/ui/src/lib/first-weekday.d.ts

@@ -0,0 +1,6 @@
+export type TWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on
+ * Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.
+ */
+export declare const firstWeekdayOf: (locale: string) => TWeekday;

package/dist/ui/src/lib/first-weekday.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/src/lib/focus-ring.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The default focus ring must be visible, not just present. WCAG 1.4.11 asks 3:1 for the
+ * parts of a control that show its state, and the ring is drawn outside the control, on
+ * whatever surface it sits on. This reads the real tokens.css, converts OKLCH to sRGB and
+ * measures the default --ring against every surface a control sits on, in both themes.
+ * An app that sets its own --ring (a brand) is outside this: it owns that colour.
+ */
+export {};

package/dist/ui/src/lib/popup-list.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The one look for a list in a popup or a menu: the command palette, Select,
+ * Combobox, MultiSelect and the dropdown menus.
+ *
+ * These lists used to disagree with each other in every detail that shows:
+ * three different radii, two different paddings, a grey fill for the highlight
+ * in one and the accent in another, and the chosen item marked by a check on
+ * the left in Select and on the right in the menus. Picking something from one
+ * list then felt like a different product from picking something in the next.
+ *
+ * It lives here as classes rather than as a stylesheet so a caller's own
+ * className still wins: an unlayered rule would beat every utility, including
+ * the one someone passes for a single list.
+ *
+ * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by
+ * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or
+ * the keyboard it takes one translucent fill of the text colour, and its icons
+ * the text colour. Chosen is medium weight with a check at the END, never a
+ * fill, so "where I am" and "what I picked" can be told apart at a glance.
+ */
+/**
+ * Which primitive renders the item, because the two disagree about the same
+ * attribute names in a way that silently breaks the styling:
+ *
+ * - cmdk writes `data-selected="false"` and `data-disabled="false"` on items
+ *   that are neither, so a bare `data-selected:` variant matches EVERY item and
+ *   highlights the whole list. Its states have to be matched by value.
+ * - Base UI omits the attribute instead, so presence is the test there. That
+ *   needs the BRACKET form for `selected`: shadcn redefines the bare
+ *   `data-selected:` variant to match only data-selected="true" (for the
+ *   calendar), and Base UI writes it as an empty string, so the bare form
+ *   compiles and silently never applies. `highlighted` and `disabled` have no
+ *   such override, so those stay bare.
+ * - And the same name means different things: cmdk's `data-selected` is the
+ *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is
+ *   `data-checked`, which the DS's own CommandItem sets.
+ */
+export type TPopupItemFlavor = 'base-ui' | 'cmdk';
+/** The shared item look. `checkable` leaves room at the end for the check. */
+export declare const popupItemClass: (flavor?: TPopupItemFlavor, checkable?: boolean) => string;
+/**
+ * The check's slot, at the end of the item and the same size whether or not the
+ * check is in it, so a list does not shift as the choice moves.
+ */
+export declare const POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground";
+/** A group's heading in any of these lists. */
+export declare const POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";

package/dist/ui/src/lib/popup-list.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The shared popup list style, and the trap it exists to keep closed.
+ *
+ * PATH TAKEN: the look itself is measured in a real browser across the lists and
+ * both themes (e2e/popup-lists.spec.ts), because computed padding and radius are
+ * the only honest proof of "one look". What is checked here is the part a
+ * stylesheet cannot: that each list takes its item look from one place, and that
+ * the two primitives' disagreeing attribute conventions are matched correctly.
+ */
+export {};

package/dist/ui/src/lib/utils.d.ts

@@ -0,0 +1,13 @@
+import { ClassValue } from 'clsx';
+export declare const cn: (...inputs: ClassValue[]) => string;
+/** A CSS length as a component prop: a number is px, a string is used verbatim. */
+export type TCssLength = number | string;
+/**
+ * Normalise a size prop to a CSS length.
+ *
+ * Bare numbers become px, which is also what a bare numeric *string* means: an
+ * element attribute arrives as a string, so `width="480"` and `width={480}` have
+ * to land on the same value. Anything with a unit, a percentage or a keyword
+ * passes through untouched.
+ */
+export declare const cssLength: (value: TCssLength | null | undefined) => string | undefined;

package/package.json

@@ -1,6 +1,97 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1-rc.10",
+  "description": "The eDynamix design system: React components and design tokens.",
+  "license": "Apache-2.0",
+  "keywords": [
+    "exsto",
+    "edynamix",
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "tailwind"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/ds/src/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./date-picker": {
+      "types": "./dist/ds/src/date-picker.d.ts",
+      "default": "./dist/date-picker.js"
+    },
+    "./rich-text-editor": {
+      "types": "./dist/ds/src/rich-text-editor.d.ts",
+      "default": "./dist/rich-text-editor.js"
+    },
+    "./styles.css": {
+      "types": "./dist/styles.css.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./theme.css": {
+      "types": "./dist/theme.css.d.ts",
+      "default": "./dist/theme.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "~1.8.0",
+    "@shadcn/react": "^0.3.1",
+    "@tabler/icons-react": "^3.44.0",
+    "@tanstack/react-virtual": "^3.13.0",
+    "@tiptap/core": "3.32.2",
+    "@tiptap/extension-bold": "3.32.2",
+    "@tiptap/extension-document": "3.32.2",
+    "@tiptap/extension-hard-break": "3.32.2",
+    "@tiptap/extension-horizontal-rule": "3.32.2",
+    "@tiptap/extension-italic": "3.32.2",
+    "@tiptap/extension-link": "3.32.2",
+    "@tiptap/extension-list": "3.32.2",
+    "@tiptap/extension-mention": "3.32.2",
+    "@tiptap/extension-paragraph": "3.32.2",
+    "@tiptap/extension-text": "3.32.2",
+    "@tiptap/extension-underline": "3.32.2",
+    "@tiptap/extensions": "3.32.2",
+    "@tiptap/pm": "3.32.2",
+    "@tiptap/react": "3.32.2",
+    "@tiptap/suggestion": "3.32.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "react-day-picker": "^10.0.1",
+    "react-resizable-panels": "^4.12.4",
+    "recharts": "3.8.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@edyn/theme": "workspace:*",
+    "@edyn/ui": "workspace:*",
+    "@tailwindcss/node": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-dts": "^5.1.2"
+  }
+}