@jig-ui/react 0.1.0

package/dist/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { Combobox } from './combobox';
+export type { ComboboxProps, ComboboxSingleProps, ComboboxMultipleProps, ComboboxItem, ComboboxGroup, ComboboxSize, } from './combobox';

package/dist/dev.d.ts

@@ -0,0 +1,14 @@
+export declare function warnInDev(message: string): void;
+/**
+ * Whether development-only work should run at all.
+ *
+ * `warnInDev` covers the common case — compute a condition, warn if it holds.
+ * This is for the case where *computing* the condition is itself the cost:
+ * StructuredList walks its rows and cells to check them, which is work worth
+ * skipping in production rather than doing and discarding.
+ *
+ * Exported so that the narrow `process` declaration above stays the only one
+ * in the package. Components must not redeclare it — that is the whole reason
+ * this module exists.
+ */
+export declare function isDev(): boolean;

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,80 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+export type DialogSize = 'sm' | 'md' | 'lg';
+/** Where the close button sits relative to the visible frame. */
+export type DialogClosePlacement = 'inside' | 'outside';
+export interface DialogProps {
+    /**
+     * The body. Scrolls in a ScrollArea when it overflows, between the pinned
+     * header and actions.
+     */
+    children?: ReactNode;
+    /**
+     * The dialog's heading, and what gives it its accessible name. Optional —
+     * pass `aria-label` instead when the dialog has no visible heading.
+     */
+    title?: ReactNode;
+    /** Sub-heading below the title, associated as the accessible description. */
+    description?: ReactNode;
+    /**
+     * The button row, laid out at the trailing edge. Buttons are the caller's:
+     * count, order, variant and handlers.
+     */
+    actions?: ReactNode;
+    /**
+     * A button that opens the dialog. Base UI composes its open-state handlers
+     * onto whatever element is passed, so this is normally a `Button`.
+     */
+    trigger?: ReactElement;
+    /** Controlled open state. Omit to let the dialog manage its own. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    size?: DialogSize;
+    /**
+     * `outside` lifts the close button above the frame, onto the scrim — for a
+     * dialog whose content should reach its own edges, such as an image.
+     */
+    closePlacement?: DialogClosePlacement;
+    /** Names the close button for assistive technology. */
+    closeLabel?: string;
+    /**
+     * The accessible name, when there is no `title` to take it from. A dialog
+     * with neither logs a development warning.
+     */
+    'aria-label'?: string;
+    /** Applied to the visible frame, which is the element a caller would size. */
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A modal panel over a scrim.
+ *
+ * `trigger` takes the element that opens it and is wired for you; pass `open`
+ * and `onOpenChange` instead to drive it from elsewhere, such as a route or
+ * form state.
+ *
+ * `title` gives the dialog its accessible name — set it, or pass `aria-label`
+ * when the design has no visible title. `description` and `actions` are
+ * optional slots; `actions` holds the button row. With none of them set, the
+ * dialog is a plain panel around its children.
+ *
+ * The body scrolls when the content is taller than the viewport, keeping the
+ * title and actions in view. Closes on Escape and on a press outside.
+ *
+ * @example
+ * <Dialog
+ *   trigger={<Button variant="danger">Delete</Button>}
+ *   title="Discard changes?"
+ *   description="Your edits will be lost."
+ *   actions={
+ *     <>
+ *       <Button variant="secondary">Cancel</Button>
+ *       <Button variant="danger" onClick={discard}>Discard</Button>
+ *     </>
+ *   }
+ * >
+ *   Sixteen ingredients and two substitutions will be lost.
+ * </Dialog>
+ */
+export declare function Dialog({ children, title, description, actions, trigger, open, defaultOpen, onOpenChange, size, closePlacement, closeLabel, className, style, ref, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog } from './dialog';
+export type { DialogProps, DialogSize, DialogClosePlacement } from './dialog';

package/dist/focus-ring.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The focus ring, as a style fragment components spread into their own rules.
+ *
+ * This used to be a bare `:focus-visible { … }` in the base stylesheet, which
+ * restyled focus for *every* focusable element in the consuming app — links,
+ * inputs and buttons that have nothing to do with Jig. Carrying it on the
+ * components means importing Jig styles no longer silently changes how the
+ * rest of the host application looks.
+ */
+export declare const focusRing: {
+    readonly ':focus-visible': {
+        readonly outline: `2px solid ${string}`;
+        readonly outlineOffset: "2px";
+    };
+};

package/dist/grid/grid.d.ts

@@ -0,0 +1,54 @@
+import { Responsive } from '../responsive';
+import { SpacingProps } from '../spacing';
+import { GridColumns, LayoutAlign, LayoutChildProps, LayoutJustify, LayoutSpacing } from '../layout';
+import { PolymorphicProps } from '../polymorphic';
+/** The elements a Grid is willing to render as. See StackElement. */
+export type GridElement = 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'ul' | 'ol' | 'li';
+export type { GridColumns };
+/**
+ * Grid's own props: how it arranges its children, plus the shared child-side
+ * set describing how it sits in whatever contains it — a Grid nested in a Grid
+ * claims a `span` of the outer one exactly as a Box does. The element's own
+ * attributes are added by PolymorphicProps.
+ */
+export interface GridOwnProps extends SpacingProps, LayoutChildProps {
+    spacing?: Responsive<LayoutSpacing>;
+    /**
+     * Distributes children evenly across the fixed 24-column grid — every child
+     * that has not claimed a span of its own takes `24 / columns` tracks.
+     *
+     * Only the divisors of 24 are accepted, so the tracks always come out whole.
+     * A `Box` with an explicit `span` overrides the distribution, and the two can
+     * be mixed in one Grid.
+     *
+     * @example
+     * <Grid columns={3}>            // three equal fields
+     * <Grid columns={{ xs: 1, md: 3 }}>  // stacked on a phone
+     */
+    columns?: Responsive<GridColumns>;
+    align?: Responsive<LayoutAlign>;
+    justify?: Responsive<LayoutJustify>;
+}
+export type GridProps<E extends GridElement = 'div'> = PolymorphicProps<E, GridOwnProps>;
+/**
+ * A grid container.
+ *
+ * `columns` sets how many equal tracks the row is divided into — 1, 2, 3, 4, 6,
+ * 8, 12 or 24, all of which divide the 24-column base evenly. Children claim
+ * width with `span`, either through `Box` or directly on a nested Stack or
+ * Grid.
+ *
+ * `spacing` is a step on the shared scale and applies in both directions.
+ * `columns`, `spacing`, `align` and `justify` all take responsive values keyed
+ * by breakpoint.
+ *
+ * Grid is also a layout child, so it takes `span`, `grow` and `alignSelf` for
+ * its own position inside a parent.
+ *
+ * @example
+ * <Grid columns={{ xs: 1, md: 12 }} spacing="500">
+ *   <Box span={{ xs: 1, md: 8 }}><Article /></Box>
+ *   <Box span={{ xs: 1, md: 4 }}><Sidebar /></Box>
+ * </Grid>
+ */
+export declare function Grid<E extends GridElement = 'div'>({ as, spacing: spacingProp, columns, align, justify, span, grow, alignSelf, className, children, ...props }: GridProps<E>): import("react/jsx-runtime").JSX.Element;

package/dist/grid/index.d.ts

@@ -0,0 +1,2 @@
+export { Grid } from './grid';
+export type { GridProps, GridElement, GridColumns } from './grid';

package/dist/icon/generated/arrow-down.d.ts

@@ -0,0 +1,4 @@
+export declare const arrowDown: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/arrow-left.d.ts

@@ -0,0 +1,4 @@
+export declare const arrowLeft: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/arrow-right.d.ts

@@ -0,0 +1,4 @@
+export declare const arrowRight: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/arrow-square-out.d.ts

@@ -0,0 +1,4 @@
+export declare const arrowSquareOut: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/arrow-up.d.ts

@@ -0,0 +1,4 @@
+export declare const arrowUp: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/bell.d.ts

@@ -0,0 +1,4 @@
+export declare const bell: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/calendar.d.ts

@@ -0,0 +1,4 @@
+export declare const calendar: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/caret-down.d.ts

@@ -0,0 +1,4 @@
+export declare const caretDown: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/caret-left.d.ts

@@ -0,0 +1,4 @@
+export declare const caretLeft: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/caret-right.d.ts

@@ -0,0 +1,4 @@
+export declare const caretRight: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/caret-up.d.ts

@@ -0,0 +1,4 @@
+export declare const caretUp: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/check-circle.d.ts

@@ -0,0 +1,4 @@
+export declare const checkCircle: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/check.d.ts

@@ -0,0 +1,4 @@
+export declare const check: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/clock.d.ts

@@ -0,0 +1,4 @@
+export declare const clock: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/copy.d.ts

@@ -0,0 +1,4 @@
+export declare const copy: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/dots-nine.d.ts

@@ -0,0 +1,4 @@
+export declare const dotsNine: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/dots-three.d.ts

@@ -0,0 +1,4 @@
+export declare const dotsThree: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/eye-slash.d.ts

@@ -0,0 +1,4 @@
+export declare const eyeSlash: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/eye.d.ts

@@ -0,0 +1,4 @@
+export declare const eye: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/gear.d.ts

@@ -0,0 +1,4 @@
+export declare const gear: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/github-logo.d.ts

@@ -0,0 +1,4 @@
+export declare const githubLogo: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/heart.d.ts

@@ -0,0 +1,4 @@
+export declare const heart: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/index.d.ts

@@ -0,0 +1,151 @@
+export declare const icons: {
+    'caret-down': {
+        regular: string;
+        fill: string;
+    };
+    'caret-up': {
+        regular: string;
+        fill: string;
+    };
+    'caret-left': {
+        regular: string;
+        fill: string;
+    };
+    'caret-right': {
+        regular: string;
+        fill: string;
+    };
+    'arrow-down': {
+        regular: string;
+        fill: string;
+    };
+    'arrow-up': {
+        regular: string;
+        fill: string;
+    };
+    'arrow-left': {
+        regular: string;
+        fill: string;
+    };
+    'arrow-right': {
+        regular: string;
+        fill: string;
+    };
+    x: {
+        regular: string;
+        fill: string;
+    };
+    check: {
+        regular: string;
+        fill: string;
+    };
+    plus: {
+        regular: string;
+        fill: string;
+    };
+    minus: {
+        regular: string;
+        fill: string;
+    };
+    'dots-three': {
+        regular: string;
+        fill: string;
+    };
+    'dots-nine': {
+        regular: string;
+        fill: string;
+    };
+    copy: {
+        regular: string;
+        fill: string;
+    };
+    'check-circle': {
+        regular: string;
+        fill: string;
+    };
+    warning: {
+        regular: string;
+        fill: string;
+    };
+    'warning-circle': {
+        regular: string;
+        fill: string;
+    };
+    info: {
+        regular: string;
+        fill: string;
+    };
+    question: {
+        regular: string;
+        fill: string;
+    };
+    'magnifying-glass': {
+        regular: string;
+        fill: string;
+    };
+    gear: {
+        regular: string;
+        fill: string;
+    };
+    user: {
+        regular: string;
+        fill: string;
+    };
+    calendar: {
+        regular: string;
+        fill: string;
+    };
+    clock: {
+        regular: string;
+        fill: string;
+    };
+    trash: {
+        regular: string;
+        fill: string;
+    };
+    'pencil-simple': {
+        regular: string;
+        fill: string;
+    };
+    list: {
+        regular: string;
+        fill: string;
+    };
+    'arrow-square-out': {
+        regular: string;
+        fill: string;
+    };
+    sun: {
+        regular: string;
+        fill: string;
+    };
+    moon: {
+        regular: string;
+        fill: string;
+    };
+    star: {
+        regular: string;
+        fill: string;
+    };
+    heart: {
+        regular: string;
+        fill: string;
+    };
+    eye: {
+        regular: string;
+        fill: string;
+    };
+    'eye-slash': {
+        regular: string;
+        fill: string;
+    };
+    bell: {
+        regular: string;
+        fill: string;
+    };
+    'github-logo': {
+        regular: string;
+        fill: string;
+    };
+};
+export type IconName = keyof typeof icons;

package/dist/icon/generated/info.d.ts

@@ -0,0 +1,4 @@
+export declare const info: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/list.d.ts

@@ -0,0 +1,4 @@
+export declare const list: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/magnifying-glass.d.ts

@@ -0,0 +1,4 @@
+export declare const magnifyingGlass: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/minus.d.ts

@@ -0,0 +1,4 @@
+export declare const minus: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/moon.d.ts

@@ -0,0 +1,4 @@
+export declare const moon: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/pencil-simple.d.ts

@@ -0,0 +1,4 @@
+export declare const pencilSimple: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/plus.d.ts

@@ -0,0 +1,4 @@
+export declare const plus: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/question.d.ts

@@ -0,0 +1,4 @@
+export declare const question: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/star.d.ts

@@ -0,0 +1,4 @@
+export declare const star: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/sun.d.ts

@@ -0,0 +1,4 @@
+export declare const sun: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/trash.d.ts

@@ -0,0 +1,4 @@
+export declare const trash: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/user.d.ts

@@ -0,0 +1,4 @@
+export declare const user: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/warning-circle.d.ts

@@ -0,0 +1,4 @@
+export declare const warningCircle: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/warning.d.ts

@@ -0,0 +1,4 @@
+export declare const warning: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/generated/x.d.ts

@@ -0,0 +1,4 @@
+export declare const x: {
+    regular: string;
+    fill: string;
+};

package/dist/icon/icon.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode, Ref, SVGAttributes } from 'react';
+import { IconName } from './generated';
+export type { IconName };
+export type IconWeight = 'regular' | 'fill';
+export interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children' | 'role' | 'aria-label' | 'aria-hidden'> {
+    /** A name from the curated set. Omit when supplying `children` instead. */
+    icon?: IconName;
+    /** `fill` reads as active, selected or pressed against the default `regular`. */
+    weight?: IconWeight;
+    /**
+     * Any CSS length. Defaults to `1em`, so an icon matches the size of the text
+     * it sits in without being told to.
+     */
+    size?: string | number;
+    /**
+     * Names the icon for assistive technology. Leave it off when the icon
+     * repeats an adjacent label or is purely decorative — which is the common
+     * case, and the default.
+     */
+    label?: string;
+    /**
+     * Raw SVG content for artwork outside the curated set. Pass the source's own
+     * `viewBox` alongside it; everything else — sizing, colour, accessibility —
+     * is handled the same way as a built-in icon.
+     */
+    children?: ReactNode;
+    ref?: Ref<SVGSVGElement>;
+}
+/**
+ * An icon from the curated set.
+ *
+ * Sized in `em` and inheriting `currentColor`, so it matches the text it sits
+ * in without being told to. Pass `size` for any CSS length when it should not.
+ *
+ * Icons are decorative by default and kept out of the accessibility tree. Set
+ * `label` only when the icon is the sole carrier of meaning — if there is
+ * adjacent text saying the same thing, leave it off so it is not announced
+ * twice.
+ *
+ * `weight="fill"` reads as active, selected or pressed. For artwork outside
+ * the set, pass raw SVG as `children` along with its own `viewBox`.
+ *
+ * @example
+ * <Icon icon="check-circle" weight="fill" label="Saved" />
+ */
+export declare function Icon({ icon, weight, size, label, viewBox, className, children, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+export type { IconProps, IconName, IconWeight } from './icon';