@pondipondi/mimas 0.1.5 → 0.2.1

package/dist/components/frames/modal.d.ts

@@ -0,0 +1,14 @@
+import { type AsyncComponentBaseArgs } from "@hooks/use-async-component";
+import { DialogContent } from "./dialog";
+import { Button } from "../crumbs/button";
+import type { ComponentProps, ReactNode } from "react";
+export interface ModalProps<I = void, O = void, E = unknown> extends AsyncComponentBaseArgs<I, O, E>, ComponentProps<typeof DialogContent> {
+    title?: string;
+    children?: ReactNode;
+    onConfirm?: (() => Promise<O>) | (() => O);
+    onCancel?: (() => Promise<void>) | (() => void);
+    confirmButtonProps?: ComponentProps<typeof Button>;
+    cancelButtonProps?: ComponentProps<typeof Button>;
+}
+declare function Modal<I = void, O = void, E = unknown>({ isActive, ok, cancel, reject, title, children, onConfirm, onCancel, confirmButtonProps, cancelButtonProps, ...dialogContentProps }: ModalProps<I, O, E>): import("react/jsx-runtime").JSX.Element;
+export { Modal };

package/dist/components/frames/panel.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Merge the panel styles onto the single child element instead of a div. */
+    asChild?: boolean;
+    /** Extra classes on the inner content element. */
+    innerClassName?: string;
+}
+declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Panel };

package/dist/components/index.d.ts

@@ -1,9 +1,38 @@
-export { default as MimasProvider } from "./util/MimasProvider";
-export { default as Noise } from "./util/Noise";
-export { default as Inset } from "./frames/Inset";
-export { default as Panel } from "./frames/Panel";
-export { default as Button } from "./crumbs/Button";
-export { default as ButtonGroup } from "./crumbs/ButtonGroup";
-export { default as LoadingRing } from "./crumbs/LoadingRing";
-export { default as ToggleSet } from "./crumbs/ToggleSet";
-export { default as Flex } from "./layout/Flex";
+export { MimasProvider } from "./util/mimas-provider";
+export { Noise } from "./util/noise";
+export { Palette } from "./util/palette";
+export { Rabbet } from "./util/rabbet";
+export type { RabbetProps } from "./util/rabbet";
+export type { PaletteProps, PaletteValue, Role } from "./util/palette";
+export * from "../config/palettes";
+export { Inset } from "./frames/inset";
+export { Panel } from "./frames/panel";
+export { Drawer, DrawerRoot, DrawerTrigger, DrawerPortal, DrawerClose, DrawerBackdrop, DrawerContent, DrawerTitle, DrawerDescription, } from "./frames/drawer";
+export type { DrawerProps, DrawerContentProps } from "./frames/drawer";
+export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } from "./frames/dialog";
+export type { DialogContentProps } from "./frames/dialog";
+export { Modal } from "./frames/modal";
+export type { ModalProps } from "./frames/modal";
+export { Button } from "./crumbs/button";
+export { InputGroup } from "./crumbs/input-group";
+export { BubbleInput } from "./crumbs/bubble-input";
+export type { BubbleInputProps } from "./crumbs/bubble-input";
+export { Checkbox } from "./crumbs/checkbox";
+export type { CheckboxProps } from "./crumbs/checkbox";
+export type { Corners, LeftCorners } from "../lib/corners";
+export { Input } from "./crumbs/input";
+export type { InputProps } from "./crumbs/input";
+export { LoadingRing } from "./crumbs/loading-ring";
+export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent, } from "./crumbs/tooltip";
+export type { TooltipProps } from "./crumbs/tooltip";
+export { Select, SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectPortal, } from "./crumbs/select";
+export type { SelectOption, SelectProps } from "./crumbs/select";
+export { Heatmap } from "./plates/heatmap";
+export type { HeatmapEntry, HeatmapProps } from "./plates/heatmap";
+export { BarChart } from "./plates/bar-chart";
+export type { BarChartEntry, BarChartProps, BarChartThreshold, } from "./plates/bar-chart";
+export { Flex } from "./layout/flex";
+export { Column } from "./layout/column";
+export { Centre } from "./layout/centre";
+export { Between } from "./layout/between";
+export { Grid } from "./layout/grid";

package/dist/components/layout/between.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+interface BetweenProps extends HTMLAttributes<HTMLDivElement> {
+    /** Merge the layout styles onto the single child element instead of a div. */
+    asChild?: boolean;
+}
+declare const Between: import("react").ForwardRefExoticComponent<BetweenProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Between };

package/dist/components/layout/centre.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+interface CentreProps extends HTMLAttributes<HTMLDivElement> {
+    /** Merge the layout styles onto the single child element instead of a div. */
+    asChild?: boolean;
+}
+declare const Centre: import("react").ForwardRefExoticComponent<CentreProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Centre };

package/dist/components/layout/column.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+interface ColumnProps extends HTMLAttributes<HTMLDivElement> {
+    /** Merge the layout styles onto the single child element instead of a div. */
+    asChild?: boolean;
+}
+declare const Column: import("react").ForwardRefExoticComponent<ColumnProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Column };

package/dist/components/layout/flex.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    /** Merge the layout styles onto the single child element instead of a div. */
+    asChild?: boolean;
+}
+declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Flex };

package/dist/components/layout/grid.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Merge the layout styles onto the single child element instead of a div. */
+    asChild?: boolean;
+}
+declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Grid };

package/dist/components/plates/bar-chart.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { PaletteName, Palette as PaletteRamp } from "../../config/palettes";
+export type BarChartEntry = {
+    label: string;
+    value: number;
+};
+export interface BarChartThreshold {
+    /** Value along the chart's axis where the line sits. */
+    value: number;
+    /** Classes for the line — controls colour, dash style, thickness. */
+    className?: string;
+    /** Optional label rendered above the line's trailing edge. */
+    label?: ReactNode;
+}
+export interface BarChartProps {
+    /** The (label, value) pairs to plot. */
+    data: BarChartEntry[];
+    /** Axis ceiling. Defaults to 1.1x the highest bar or threshold value. */
+    max?: number;
+    /** Height of the plot area in pixels. Default `192`. */
+    height?: number;
+    /** Palette to apply. Accepts any bundled palette name or custom ramp. Default `"violet"`. */
+    palette?: PaletteName | PaletteRamp;
+    /** Reference lines drawn across the plot, e.g. a goal or average. */
+    thresholds?: BarChartThreshold[];
+    /**
+     * Shade each bar by its value/max ratio (as Heatmap does) instead of a
+     * single flat colour. Default `true`; set `false` for a single flat
+     * colour across every bar.
+     */
+    colourByValue?: boolean;
+    /**
+     * Format the tooltip shown on hover/focus. Receives the hovered entry;
+     * return a ReactNode. Defaults to `label: value`.
+     */
+    formatTooltip?: (entry: BarChartEntry) => ReactNode;
+    /** Format the two axis labels (0 and the ceiling). Defaults to a rounded integer. */
+    formatAxisLabel?: (value: number) => ReactNode;
+    /** Called when a bar is clicked. Adds `cursor-pointer` to bars when provided. */
+    onBarClick?: (entry: BarChartEntry) => void;
+    /** Graph title, rotated 90° and centred on the plot's left edge. */
+    title?: ReactNode;
+    /** Extra classes on the root element. */
+    className?: string;
+    /** Extra classes on the plot area (axis, bars and thresholds). */
+    innerClassName?: string;
+    /** Extra classes on each bar. */
+    barClassName?: string;
+    /** Extra classes on the tooltip. */
+    tooltipClassName?: string;
+    /** Extra classes on the title. */
+    titleClassName?: string;
+}
+declare function BarChart({ data, max: maxProp, height, palette, thresholds, colourByValue, formatTooltip, formatAxisLabel, onBarClick, title, className, innerClassName, barClassName, tooltipClassName, titleClassName, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+export { BarChart };

package/dist/components/plates/heatmap.d.ts

@@ -0,0 +1,31 @@
+import { PaletteName, Palette as PaletteRamp } from "../../config/palettes";
+import { ReactNode } from "react";
+export type HeatmapEntry = {
+    date: Date;
+    value: number;
+    /** Show a small marker dot on this pellet. */
+    marker?: boolean;
+};
+export interface HeatmapProps {
+    /** Day-by-day entries for the date range. */
+    entries: HeatmapEntry[];
+    /** Target value per day. Default `1`. */
+    goal?: number;
+    /** Palette to apply. Accepts any bundled palette name or custom ramp. Default `"violet"`. */
+    palette?: PaletteName | PaletteRamp;
+    /** First day to display. Defaults to Jan 1 of the current year. */
+    startDate?: Date;
+    /** Last day to display. Defaults to Dec 31 of the current year. */
+    endDate?: Date;
+    /**
+     * Format the tooltip shown on hover/focus. Receives the entry; return a
+     * ReactNode. Defaults to a localised weekday + date string.
+     */
+    formatTooltip?: (entry: HeatmapEntry) => ReactNode;
+    /** Called when a pellet is clicked. Adds `cursor-pointer` to pellets when provided. */
+    onEntryClick?: (entry: HeatmapEntry) => void;
+    /** Extra classes on the root element. */
+    className?: string;
+}
+declare function Heatmap({ entries, goal, palette, startDate, endDate, formatTooltip, onEntryClick, className, }: HeatmapProps): import("react/jsx-runtime").JSX.Element;
+export { Heatmap };

package/dist/components/util/icons.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Icon aliases.
+ *
+ * The rest of the library imports its icons from here rather than from
+ * `lucide-react` directly, so the underlying icon pack can be swapped in a
+ * single place. To change packs, re-point these exports — usage sites don't
+ * need to change as long as the names and a compatible props shape stay put.
+ */
+export { Check, ChevronDown, X } from "lucide-react";
+export type { LucideProps as IconProps } from "lucide-react";

package/dist/components/util/{MimasProvider.d.ts → mimas-provider.d.ts}

@@ -3,4 +3,4 @@ import "@/index.css";
 declare function MimasProvider({ children }: {
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export default MimasProvider;
+export { MimasProvider };

package/dist/components/util/noise.d.ts

@@ -0,0 +1,5 @@
+export interface NoiseProps {
+    opacity?: number;
+}
+declare function Noise(props: NoiseProps): import("react/jsx-runtime").JSX.Element;
+export { Noise };

package/dist/components/util/palette.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { Palette as PaletteRamp, PaletteName } from "../../config/palettes";
+/** Semantic colour roles a palette can be mapped onto. */
+export type Role = "primary" | "base" | "positive" | "negative" | "warning";
+/**
+ * A palette to apply to a role: either the name of a bundled palette
+ * (e.g. `"violet"`) or a full ramp object for bring-your-own colours.
+ */
+export type PaletteValue = PaletteName | PaletteRamp;
+export interface PaletteProps extends Partial<Record<Role, PaletteValue>> {
+    children?: ReactNode;
+}
+/**
+ * Scopes one or more colour palettes onto semantic roles for everything it wraps.
+ *
+ * It writes the role's `--color-*` CSS variables onto a `display: contents`
+ * carrier, so descendants pick them up through the normal cascade without
+ * introducing a layout box. Nest freely — an inner `<Palette>` overrides an
+ * outer one, and only the roles you pass are changed (the rest keep inheriting).
+ *
+ * Each role accepts either the name of a bundled palette or a custom ramp.
+ *
+ * @example
+ * // Bundled palette by name:
+ * <Palette primary="red">
+ *   <Button colour="primary">Delete</Button>
+ * </Palette>
+ *
+ * @example
+ * // Bring your own ramp, and remap several roles at once:
+ * <Palette primary={myBrandRamp} base="slate">
+ *   …
+ * </Palette>
+ */
+declare function Palette({ children, ...roles }: PaletteProps): import("react/jsx-runtime").JSX.Element;
+export { Palette };

package/dist/components/util/rabbet.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Corners, LeftCorners } from "../../lib/corners";
+export interface RabbetProps extends React.HTMLAttributes<HTMLDivElement> {
+    corners?: Corners;
+    leftCorners?: LeftCorners;
+    /** Extra classes on the outer frame (e.g. fixed size, cursor). */
+    className?: string;
+    children?: ReactNode;
+}
+declare const Rabbet: import("react").ForwardRefExoticComponent<RabbetProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Rabbet };

package/dist/config/palettes.d.ts

@@ -0,0 +1,73 @@
+/**
+ * A color ramp: the 50–950 shades used to build a semantic colour role.
+ *
+ * `text` is an optional contrast colour for content placed on this palette's
+ * main surface. When omitted, the role's existing `--color-*-text` token is
+ * left untouched (the theme default — near-white — which reads well on the
+ * 600–800 shades most surfaces use).
+ */
+export type Palette = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+    text?: string;
+};
+/** The ordered shade steps that make up a {@link Palette} ramp. */
+export declare const STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+export declare const red: Palette;
+export declare const orange: Palette;
+export declare const amber: Palette;
+export declare const yellow: Palette;
+export declare const lime: Palette;
+export declare const green: Palette;
+export declare const emerald: Palette;
+export declare const teal: Palette;
+export declare const cyan: Palette;
+export declare const sky: Palette;
+export declare const blue: Palette;
+export declare const indigo: Palette;
+export declare const violet: Palette;
+export declare const purple: Palette;
+export declare const fuchsia: Palette;
+export declare const pink: Palette;
+export declare const rose: Palette;
+export declare const slate: Palette;
+export declare const gray: Palette;
+export declare const zinc: Palette;
+export declare const neutral: Palette;
+export declare const stone: Palette;
+/** Every bundled palette, keyed by name. */
+export declare const palettes: {
+    red: Palette;
+    orange: Palette;
+    amber: Palette;
+    yellow: Palette;
+    lime: Palette;
+    green: Palette;
+    emerald: Palette;
+    teal: Palette;
+    cyan: Palette;
+    sky: Palette;
+    blue: Palette;
+    indigo: Palette;
+    violet: Palette;
+    purple: Palette;
+    fuchsia: Palette;
+    pink: Palette;
+    rose: Palette;
+    slate: Palette;
+    gray: Palette;
+    zinc: Palette;
+    neutral: Palette;
+    stone: Palette;
+};
+/** The name of a bundled palette, e.g. "red" | "blue" | "violet". */
+export type PaletteName = keyof typeof palettes;

package/dist/hooks/use-async-component.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+export type AsyncComponentCancelled = {
+    result: "cancelled";
+};
+export type AsyncComponentOk<O> = {
+    result: "ok";
+    value: O;
+};
+export type AsyncComponentOutcome<O> = AsyncComponentCancelled | AsyncComponentOk<O>;
+export type OkFunction<O> = [O] extends [void] ? () => void : (value: O) => void;
+type ActivationFunction<I, O> = [I] extends [void] ? () => Promise<AsyncComponentOutcome<O>> : (input: I) => Promise<AsyncComponentOutcome<O>>;
+type RejectionFunction<E> = [E] extends [void] ? () => void : (error?: E) => void;
+export declare function step<O, Next>(outcome: AsyncComponentOutcome<O>, next: (value: O) => Promise<AsyncComponentOutcome<Next>>): Promise<AsyncComponentOutcome<Next>>;
+export type AsyncComponentBaseArgs<I = void, O = void, E = void> = {
+    /** Whether the component is currently active. */
+    isActive: boolean;
+    /** Finish successfully with `{ result: 'ok', value }`. */
+    ok: OkFunction<O>;
+    /** Dismiss without a value (e.g. if the user cancels). */
+    cancel: () => void;
+    /** Reject the promise with `E`. */
+    reject: RejectionFunction<E>;
+    /** The input provided on activation, if any. */
+    input?: I;
+};
+export type AsyncComponentRenderArgs<I = void, O = void, E = void> = [
+    I
+] extends [void] ? Omit<AsyncComponentBaseArgs<void, O, E>, "input"> : AsyncComponentBaseArgs<I, O, E>;
+type AsyncComponentOptions = {
+    /** How long to wait before resetting the component after close. */
+    exitDelay?: number;
+    /** Keep internal state across activations. */
+    persistState?: boolean;
+};
+type UseAsyncComponentResult<I = void, O = void> = {
+    /** Key for the rendered fragment. */
+    key: string;
+    /** Render this node in the tree. */
+    element: ReactNode;
+    /** The input provided on activation, if any. */
+    input?: I;
+    /** Whether the component is currently active. */
+    isActive: boolean;
+    activate: ActivationFunction<I, O>;
+    /** Reset component state without activating. */
+    reset: () => void;
+};
+export declare const useAsyncComponent: <I = void, O = void, E = void>(render: (props: AsyncComponentRenderArgs<I, O, E>) => ReactNode, options?: AsyncComponentOptions) => UseAsyncComponentResult<I, O>;
+export {};

package/dist/hooks/use-container-width.d.ts

@@ -0,0 +1,2 @@
+/** Tracks an element's rendered width, so layout can be driven by whatever CSS the caller applies. */
+export declare function useContainerWidth<T extends HTMLElement>(): readonly [import("react").MutableRefObject<T>, number];

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from "./components";
+export { useAsyncComponent, step, type AsyncComponentBaseArgs, type AsyncComponentRenderArgs, type AsyncComponentOutcome, type AsyncComponentCancelled, type AsyncComponentOk, type OkFunction, } from "./hooks/use-async-component";

package/dist/lib/classnames.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/colour.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Value-to-colour mapping shared by magnitude visualisations (Heatmap,
+ * BarChart, …) so a given ratio always reads as the same intensity
+ * everywhere it appears.
+ */
+/**
+ * Maps a value/goal (or value/max) ratio to a palette shade step. `null`
+ * below zero (nothing to shade); darkest step near empty, saturating to the
+ * lightest step as it climbs past 2.5x.
+ */
+export declare function ratioToShade(ratio: number): number | null;
+/** The darker shade step used for chip accents beneath a fill. */
+export declare function chipShade(shade: number): number;
+/** A shade step's CSS custom-property colour, e.g. `var(--color-primary-500)`. */
+export declare function shadeColour(shade: number | null, role?: string): string | undefined;
+/** Brightness filter (%) for a ratio climbing past its goal/max — undefined once empty. */
+export declare function ratioBrightness(ratio: number): number | undefined;

package/dist/lib/corners.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Single source of truth for corner styles across the library.
+ *
+ * Two scales exist because a Rabbet has 2px of padding between its outer frame
+ * and the inner face — the inner face must use a radius 2px smaller so both
+ * visually appear to share the same curvature centre.
+ *
+ * - outerCornerRadius / outerLeftCornerRadius:
+ *     Rabbet frame, chip shelf, and standalone controls (Input, Select).
+ *
+ * - innerCornerRadius / innerLeftCornerRadius:
+ *     Inner faces inside a Rabbet (Button inner div, Checkbox root).
+ */
+export type Corners = "sharp" | "round" | "circle";
+/** Left-side corner override — used to flatten the leading edge inside a group. */
+export type LeftCorners = "none" | Corners;
+export declare const outerCornerRadius: Record<Corners, string>;
+export declare const innerCornerRadius: Record<Corners, string>;
+export declare const outerLeftCornerRadius: Record<LeftCorners, string>;
+export declare const innerLeftCornerRadius: Record<LeftCorners, string>;