@jig-ui/react 0.1.0

package/dist/slider/slider.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode, Ref } from 'react';
+export type SliderSize = 'sm' | 'md' | 'lg';
+export interface SliderProps {
+    /** The field's label, rendered as a real `<label>` bound to the control. */
+    label?: ReactNode;
+    /** Hint text below the control. */
+    description?: ReactNode;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** The jump for Page Up/Down and Shift + Arrow. @default 10 */
+    largeStep?: number;
+    /** Controlled value. Leave undefined and pass `defaultValue` instead to let the slider manage its own. */
+    value?: number;
+    defaultValue?: number;
+    disabled?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** `Intl.NumberFormat` options for the value readout. */
+    format?: Intl.NumberFormatOptions;
+    locale?: Intl.LocalesArgument;
+    onValueChange?: (value: number) => void;
+    /** Fires when the interaction ends, rather than on every movement. */
+    onValueCommitted?: (value: number) => void;
+    /**
+     * Show minus and plus buttons flanking the track, for adjusting by exactly
+     * one step without dragging.
+     *
+     * @default false
+     */
+    steppers?: boolean;
+    /**
+     * Sets the row height from the shared control ramp, so a slider lines up
+     * with an Input or Button of the same size.
+     *
+     * @default 'md'
+     */
+    size?: SliderSize;
+    /** Applied to the root, not the track. */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A slider for choosing one number from a range.
+ *
+ * `min`, `max` and `step` bound it; `largeStep` is the jump on Page Up and Page
+ * Down. `steppers` adds decrement and increment buttons at each end.
+ *
+ * `onValueChange` fires continuously while dragging; `onValueCommitted` fires
+ * once the drag or key press ends — use that one for anything expensive.
+ *
+ * `format` takes `Intl.NumberFormat` options, so the value can be shown as a
+ * percentage, a currency or a plain number, and is what assistive technology
+ * announces.
+ *
+ * The control occupies exactly the width you give it, so it lines up with the
+ * fields around it.
+ *
+ * @example
+ * <Slider
+ *   label="Quality"
+ *   min={0}
+ *   max={1}
+ *   step={0.05}
+ *   format={{ style: 'percent' }}
+ *   value={quality}
+ *   onValueCommitted={save}
+ * />
+ */
+export declare function Slider({ label, description, min, max, step, largeStep, value, defaultValue, disabled, name, format, locale, onValueChange, onValueCommitted, steppers, size, className, ref, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/spacing.d.ts

@@ -0,0 +1,35 @@
+import { Responsive } from './responsive';
+declare const shorthandSpacingKeys: readonly ["m", "mx", "my", "mt", "mr", "mb", "ml", "p", "px", "py", "pt", "pr", "pb", "pl"];
+/** The step scale margin and padding props share with Stack/Grid's `spacing`, plus an explicit `none` for clearing one something else already set. */
+export type SpacingScale = 'none' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+/**
+ * Margin and padding props shared by every component that accepts them.
+ * Shorthand only — `mt`, `pr`, and so on. The longhand `marginTop` etc. that
+ * the sprinkles config needs internally to build those shorthands isn't part
+ * of the public surface. Spread into a component's props interface rather
+ * than redeclared, so the set only ever grows in one place.
+ *
+ * Declared by hand against `SpacingScale` rather than derived from the
+ * sprinkles function's inferred parameter type, so tooling that reads these
+ * types — Storybook's props table included — sees a plain scale instead of
+ * Sprinkles' generated conditional-style type.
+ *
+ * @example
+ * <Typography mb="500">Heading</Typography>
+ * <Typography mb={{ xs: '300', md: '500' }}>Heading</Typography>
+ * <Stack p="400">...</Stack>
+ */
+export type SpacingProps = {
+    [K in typeof shorthandSpacingKeys[number]]?: Responsive<SpacingScale>;
+};
+/**
+ * Splits the margin/padding props out of a component's props, returning the
+ * class name they compile to alongside everything left over for the DOM
+ * element. Keeps spacing support to two lines per component instead of a
+ * duplicated prop table.
+ */
+export declare function splitSpacing<P extends object>(props: P): {
+    spacing: string;
+    rest: Omit<P, keyof SpacingProps>;
+};
+export {};

package/dist/stack/index.d.ts

@@ -0,0 +1,2 @@
+export { Stack } from './stack';
+export type { StackProps, StackElement } from './stack';

package/dist/stack/stack.d.ts

@@ -0,0 +1,52 @@
+import { Responsive } from '../responsive';
+import { SpacingProps } from '../spacing';
+import { LayoutChildProps, LayoutAlign, LayoutDirection, LayoutJustify, LayoutSpacing } from '../layout';
+import { PolymorphicProps } from '../polymorphic';
+/**
+ * The elements a Stack is willing to render as. Restricted rather than open:
+ * an arbitrary ElementType would let a Stack render as something that has no
+ * business being a flex container.
+ */
+export type StackElement = 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'ul' | 'ol' | 'li';
+/**
+ * Stack's own props: how it arranges its children, plus the shared child-side
+ * set describing how it sits in whatever contains it. The element's own
+ * attributes are added by PolymorphicProps.
+ *
+ * Note `align` and `alignSelf` are both here and are not the same prop —
+ * `align` is what the Stack does to its children, `alignSelf` is what it does
+ * to itself inside its parent. Spanning changes how wide a Stack is, not how
+ * its children fill it: `align` still defaults to `start`, so a spanning Stack
+ * whose children should fill the column wants `align="stretch"` as well.
+ */
+export interface StackOwnProps extends SpacingProps, LayoutChildProps {
+    direction?: Responsive<LayoutDirection>;
+    spacing?: Responsive<LayoutSpacing>;
+    align?: Responsive<LayoutAlign>;
+    justify?: Responsive<LayoutJustify>;
+}
+export type StackProps<E extends StackElement = 'div'> = PolymorphicProps<E, StackOwnProps>;
+/**
+ * A flex container that spaces its children evenly.
+ *
+ * `direction` defaults to `column`. `spacing` is a step on the shared scale
+ * rather than a length, and `direction`, `spacing`, `align` and `justify` all
+ * take responsive values keyed by breakpoint.
+ *
+ * Children take `grow` to absorb leftover space, either through `Box` or
+ * directly on a nested Stack or Grid. Stack is a layout child itself, so it
+ * also takes `span`, `grow` and `alignSelf` for its own position in a parent.
+ *
+ * Use `as` to make it a real list or section when that is what the content is.
+ *
+ * @example
+ * <Stack direction={{ xs: 'column', md: 'row' }} spacing="400" align="center">
+ *   <Icon icon="user" size="2rem" />
+ *   <Stack spacing="100" grow>
+ *     <Typography with="heading05">Ada Lovelace</Typography>
+ *     <Typography tone="muted">Engineering</Typography>
+ *   </Stack>
+ *   <Button variant="secondary">Message</Button>
+ * </Stack>
+ */
+export declare function Stack<E extends StackElement = 'div'>({ as, direction, spacing: spacingProp, align, justify, span, grow, alignSelf, className, children, ...props }: StackProps<E>): import("react/jsx-runtime").JSX.Element;

package/dist/structuredlist/index.d.ts

@@ -0,0 +1,2 @@
+export { StructuredList, StructuredListRow, StructuredListCell } from './structuredlist';
+export type { StructuredListProps, StructuredListRowProps, StructuredListCellProps, StructuredListLayout, } from './structuredlist';

package/dist/structuredlist/structuredlist.d.ts

@@ -0,0 +1,104 @@
+import { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+import { Responsive } from '../responsive';
+import { TypeStyles } from '../typography';
+/** Which way the list lays itself out. */
+export type StructuredListLayout = 'columns' | 'stacked';
+export interface StructuredListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> {
+    /** The rows. `StructuredListRow` elements. */
+    children?: ReactNode;
+    /**
+     * The column headings. Optional — without them the list is columns of values
+     * with nothing naming them, and cells fall back to their own `label`.
+     *
+     * These are also what a cell reads to label itself when stacked, so a string
+     * heading is what makes `label` unnecessary at the call site.
+     */
+    headers?: ReactNode[];
+    /**
+     * A width per column, applied in the column layout only.
+     *
+     * `'auto'` fills the space left over, a bare length is fixed, and anything
+     * with a space in it is used as a flex shorthand. Omitted columns keep the
+     * default equal share.
+     *
+     * Declared here rather than on the cell because flex rows lay out
+     * independently: the columns line up only while every row's nth cell resolves
+     * to the same width, and one array on the list is what guarantees that
+     * (0018 D2).
+     *
+     * @example
+     * columnWidths={['4.5rem', 'auto', '3rem']}
+     */
+    columnWidths?: string[];
+    /** Column layout, stacked, or one per breakpoint. */
+    layout?: Responsive<StructuredListLayout>;
+    /**
+     * A Typography preset for the whole list, inherited by every row and cell and
+     * overridable per cell. Column headings take this preset at weight 600.
+     */
+    with?: TypeStyles;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Columns of content, laid out as a table on a wide screen and stacked with
+ * their labels on a narrow one.
+ *
+ * Layout only — nothing here is focusable or selectable. It carries ARIA table
+ * roles rather than table elements (0017 D1), so the structure a screen reader
+ * hears is identical in both layouts.
+ *
+ * Cells take their stacked label from `headers` by position; pass `label` on a
+ * cell only to override it. `columnWidths` gives the columns widths, and `with`
+ * sets the type for the list with each cell free to name its own.
+ *
+ * @example
+ * <StructuredList headers={['Plan', 'Requests', 'Price']} columnWidths={['8rem', 'auto', '6rem']}>
+ *   <StructuredListRow>
+ *     <StructuredListCell>Starter</StructuredListCell>
+ *     <StructuredListCell with="caption01">10,000</StructuredListCell>
+ *     <StructuredListCell><Token color="green">Free</Token></StructuredListCell>
+ *   </StructuredListRow>
+ * </StructuredList>
+ */
+export declare function StructuredList({ children, headers, columnWidths, layout, with: typeStyle, className, style, ref, ...props }: StructuredListProps): import("react/jsx-runtime").JSX.Element;
+export interface StructuredListRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
+    /** The cells. `StructuredListCell` elements. */
+    children?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * One row of a `StructuredList`. Carries `role="row"`, and tells each cell which
+ * column it is in — which is what lets a cell find its own heading and width.
+ */
+export declare function StructuredListRow({ children, className, ref, ...props }: StructuredListRowProps): import("react/jsx-runtime").JSX.Element;
+export interface StructuredListCellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
+    /** The cell's content. Anything — a string, a Token, a Link, an Icon. */
+    children?: ReactNode;
+    /**
+     * Overrides the label the cell would take from its column's heading.
+     *
+     * Only needed when the heading is not a plain string, or when the stacked
+     * label should read differently from the column title. Since 0018 D3 the
+     * common case is to omit it.
+     */
+    label?: string;
+    /**
+     * A Typography preset for this cell, overriding the list's. The type a column
+     * wants is usually a property of the column rather than the whole list —
+     * a monospaced value beside prose, a quieter note (0018 D1).
+     */
+    with?: TypeStyles;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * One cell of a `StructuredListRow`. Carries `role="cell"`.
+ *
+ * Its stacked label comes from the column heading above it; `label` overrides.
+ * The label is `aria-hidden` because the `columnheader` already announces the
+ * same words — without that, a screen reader hears the heading twice per cell.
+ */
+export declare function StructuredListCell({ children, label, with: typeStyle, className, ref, ...props }: StructuredListCellProps): import("react/jsx-runtime").JSX.Element;