@ansh-ui/react 0.2.0 → 0.3.0

package/dist/chunk-WGYNCSTP.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/index.tsx","../src/components/layout/resizable.tsx"],"names":["forwardRef","Stack","jsx","cx","HStack","VStack","Grid","GridItem","Container","Divider","jsxs","Center","AspectRatio","ScrollArea","useControllableState","useRef","useState","useCallback","useEffect"],"mappings":"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","file":"chunk-WGYNCSTP.cjs","sourcesContent":["import {\n  type CSSProperties,\n  type ElementType,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from 'react'\nimport { cx } from '../../primitives/compose'\n\n/**\n * Layout primitives.\n *\n * These exist because every application rebuilds them, badly. The rebuilt versions hardcode gaps in\n * pixels, so they don't respond to a density setting; they use margins, so they collapse\n * unpredictably; and they don't handle the RTL case.\n *\n * Everything here takes a **token key**, not a raw value: `gap={4}` means `--ansh-space-4`, so a\n * layout is guaranteed to sit on the spacing scale. Passing an arbitrary string is still possible\n * for the genuine one-off, but the type nudges toward the scale first.\n */\n\n/** A key into the spacing scale, or a raw CSS length for the rare exception. */\nexport type SpaceToken =\n  0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | (string & {})\n\nfunction space(value: SpaceToken | undefined): string | undefined {\n  if (value === undefined) return undefined\n  if (typeof value === 'string') return value\n  return `var(--ansh-space-${value})`\n}\n\ninterface BaseProps extends HTMLAttributes<HTMLElement> {\n  as?: ElementType\n  children?: ReactNode\n}\n\n// --- Stack ----------------------------------------------------------------\n\nexport interface StackProps extends BaseProps {\n  /** Default `'vertical'` — the direction that needs a helper more often. */\n  direction?: 'horizontal' | 'vertical'\n  gap?: SpaceToken\n  align?: CSSProperties['alignItems']\n  justify?: CSSProperties['justifyContent']\n  wrap?: boolean\n  /** Grow to fill the cross axis. */\n  stretch?: boolean\n  /** Insert a hairline divider between children. */\n  divide?: boolean\n}\n\n/**\n * One-dimensional flex layout.\n *\n * ```tsx\n * <Stack direction=\"horizontal\" gap={3} align=\"center\">\n *   <Avatar src={user.avatar} name={user.name} />\n *   <Stack gap={0.5}>\n *     <strong>{user.name}</strong>\n *     <Text tone=\"secondary\">{user.email}</Text>\n *   </Stack>\n * </Stack>\n * ```\n */\nexport const Stack = forwardRef(function Stack(\n  {\n    as: Component = 'div',\n    direction = 'vertical',\n    gap = 4,\n    align,\n    justify,\n    wrap = false,\n    stretch = false,\n    divide = false,\n    className,\n    style,\n    ...rest\n  }: StackProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={cx('ansh-stack', divide && 'ansh-stack--divide', className)}\n      data-direction={direction}\n      style={{\n        display: 'flex',\n        flexDirection: direction === 'horizontal' ? 'row' : 'column',\n        gap: space(gap),\n        alignItems: align ?? (stretch ? 'stretch' : undefined),\n        justifyContent: justify,\n        flexWrap: wrap ? 'wrap' : undefined,\n        ...style,\n      }}\n      {...rest}\n    />\n  )\n})\n\n/** Horizontal `Stack`, for readability at call sites. */\nexport const HStack = forwardRef(function HStack(\n  props: Omit<StackProps, 'direction'>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return <Stack ref={ref} direction=\"horizontal\" {...props} />\n})\n\n/** Vertical `Stack`, for symmetry with `HStack`. */\nexport const VStack = forwardRef(function VStack(\n  props: Omit<StackProps, 'direction'>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return <Stack ref={ref} direction=\"vertical\" {...props} />\n})\n\n// --- Grid -----------------------------------------------------------------\n\nexport interface GridProps extends BaseProps {\n  /** Fixed column count, or `'auto'` for a responsive `auto-fill` track. */\n  columns?: number | 'auto'\n  /** Minimum column width when `columns=\"auto\"`. Default `'16rem'`. */\n  minColumnWidth?: string\n  gap?: SpaceToken\n  /** Row gap, when it should differ from the column gap. */\n  rowGap?: SpaceToken\n  align?: CSSProperties['alignItems']\n}\n\n/**\n * Two-dimensional layout.\n *\n * `columns=\"auto\"` uses `repeat(auto-fill, minmax(min(N, 100%), 1fr))`. The inner `min()` is what\n * stops the grid overflowing on a phone: without it, a 16rem minimum on a 15rem-wide viewport\n * produces a track wider than the screen and a horizontal scrollbar.\n */\nexport const Grid = forwardRef(function Grid(\n  {\n    as: Component = 'div',\n    columns = 'auto',\n    minColumnWidth = '16rem',\n    gap = 4,\n    rowGap,\n    align,\n    className,\n    style,\n    ...rest\n  }: GridProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={cx('ansh-grid', className)}\n      style={{\n        display: 'grid',\n        gridTemplateColumns:\n          columns === 'auto'\n            ? `repeat(auto-fill, minmax(min(${minColumnWidth}, 100%), 1fr))`\n            : `repeat(${columns}, minmax(0, 1fr))`,\n        gap: space(gap),\n        rowGap: space(rowGap),\n        alignItems: align,\n        ...style,\n      }}\n      {...rest}\n    />\n  )\n})\n\nexport interface GridItemProps extends BaseProps {\n  /** Columns to span. `'full'` spans the whole row. */\n  span?: number | 'full'\n  rowSpan?: number\n}\n\nexport const GridItem = forwardRef(function GridItem(\n  { as: Component = 'div', span, rowSpan, className, style, ...rest }: GridItemProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={className}\n      style={{\n        gridColumn: span === 'full' ? '1 / -1' : span ? `span ${span} / span ${span}` : undefined,\n        gridRow: rowSpan ? `span ${rowSpan} / span ${rowSpan}` : undefined,\n        // `minWidth: 0` on every grid child. Without it a child containing a long unbroken string\n        // or a table refuses to shrink below its content width and blows out the track.\n        minWidth: 0,\n        ...style,\n      }}\n      {...rest}\n    />\n  )\n})\n\n// --- Container ------------------------------------------------------------\n\nexport interface ContainerProps extends BaseProps {\n  /** Max content width. Default `'lg'` (72rem). */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** Horizontal padding. Default `6`. */\n  padding?: SpaceToken\n}\n\nconst CONTAINER_WIDTH = {\n  sm: '40rem',\n  md: '56rem',\n  lg: '72rem',\n  xl: '90rem',\n  full: '100%',\n} as const\n\n/** Centred, width-constrained page content. */\nexport const Container = forwardRef(function Container(\n  { as: Component = 'div', size = 'lg', padding = 6, className, style, ...rest }: ContainerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={cx('ansh-container', className)}\n      style={{\n        width: '100%',\n        maxWidth: CONTAINER_WIDTH[size],\n        marginInline: 'auto',\n        paddingInline: space(padding),\n        ...style,\n      }}\n      {...rest}\n    />\n  )\n})\n\n// --- Divider --------------------------------------------------------------\n\nexport interface DividerProps extends Omit<BaseProps, 'children'> {\n  orientation?: 'horizontal' | 'vertical'\n  /** Optional label rendered in the middle of the rule. */\n  label?: ReactNode\n}\n\n/**\n * A rule.\n *\n * With a label it becomes a labelled separator — the \"or continue with\" divider on a sign-in form.\n * `role=\"separator\"` is set only when there's no label; with one, it's a heading-like element and\n * announcing it as a separator loses the text.\n */\nexport const Divider = forwardRef(function Divider(\n  { orientation = 'horizontal', label, className, ...rest }: DividerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  if (label) {\n    return (\n      <div\n        ref={ref}\n        className={cx('ansh-divider', 'ansh-divider--labelled', className)}\n        {...(rest as HTMLAttributes<HTMLDivElement>)}\n      >\n        <span className=\"ansh-divider__line\" />\n        <span className=\"ansh-divider__label\">{label}</span>\n        <span className=\"ansh-divider__line\" />\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={cx('ansh-divider', `ansh-divider--${orientation}`, className)}\n      {...(rest as HTMLAttributes<HTMLDivElement>)}\n    />\n  )\n})\n\n// --- Spacer ---------------------------------------------------------------\n\nexport interface SpacerProps {\n  size?: SpaceToken\n  /** Grow to absorb free space in a flex container. */\n  grow?: boolean\n}\n\n/** Explicit empty space. `grow` pushes siblings apart in a flex row. */\nexport function Spacer({ size, grow = false }: SpacerProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      style={{\n        display: 'block',\n        flexGrow: grow ? 1 : 0,\n        flexShrink: 0,\n        ...(size !== undefined ? { width: space(size), height: space(size) } : null),\n      }}\n    />\n  )\n}\n\n// --- Center ---------------------------------------------------------------\n\n/** Centre a child on both axes. */\nexport const Center = forwardRef(function Center(\n  { as: Component = 'div', className, style, ...rest }: BaseProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={className}\n      style={{ display: 'grid', placeItems: 'center', ...style }}\n      {...rest}\n    />\n  )\n})\n\n// --- AspectRatio ----------------------------------------------------------\n\nexport interface AspectRatioProps extends BaseProps {\n  /** Width ÷ height. `16 / 9` reads better than `1.777`. Default `16 / 9`. */\n  ratio?: number\n}\n\n/**\n * Reserve space at a fixed aspect ratio.\n *\n * Uses the `aspect-ratio` property rather than the padding-top hack. The reserved space is what\n * matters: an image that loads without it shifts everything below, which is a Cumulative Layout\n * Shift penalty and the most common cause of a failing Core Web Vitals score.\n */\nexport const AspectRatio = forwardRef(function AspectRatio(\n  { as: Component = 'div', ratio = 16 / 9, className, style, ...rest }: AspectRatioProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={cx('ansh-aspect', className)}\n      style={{ aspectRatio: String(ratio), ...style }}\n      {...rest}\n    />\n  )\n})\n\n// --- ScrollArea -----------------------------------------------------------\n\nexport interface ScrollAreaProps extends BaseProps {\n  /** Max height before scrolling starts. */\n  maxHeight?: string\n  axis?: 'y' | 'x' | 'both'\n  /** Fade the content at the scrollable edges. Default `true`. */\n  fade?: boolean\n}\n\n/**\n * A scroll container with styled scrollbars and edge fades.\n *\n * The native scrollbar is kept — a JavaScript-rendered one breaks keyboard scrolling, mobile\n * momentum, and the OS \"scroll bar is always visible\" accessibility setting. It is only *styled*,\n * via `scrollbar-width`/`scrollbar-color` with a `::-webkit-scrollbar` fallback.\n *\n * The edge fade is a mask that appears only when there is more content in that direction. It is\n * driven by `animation-timeline: scroll()` where supported, so it costs nothing on the main thread\n * and degrades to no fade where it isn't.\n */\nexport const ScrollArea = forwardRef(function ScrollArea(\n  {\n    as: Component = 'div',\n    maxHeight,\n    axis = 'y',\n    fade = true,\n    className,\n    style,\n    ...rest\n  }: ScrollAreaProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={cx('ansh-scroll', fade && 'ansh-scroll--fade', className)}\n      data-axis={axis}\n      style={{\n        maxHeight,\n        overflowY: axis === 'x' ? 'hidden' : 'auto',\n        overflowX: axis === 'y' ? 'hidden' : 'auto',\n        ...style,\n      }}\n      {...rest}\n    />\n  )\n})\n","import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport { cx } from '../../primitives/compose'\nimport { useControllableState } from '../../primitives/use-controllable-state'\n\nexport interface ResizableProps {\n  /** Exactly two children: the two panes. */\n  children: [ReactNode, ReactNode]\n  direction?: 'horizontal' | 'vertical'\n  /** First pane's size as a percentage, `0`–`100`. Default `50`. */\n  defaultSize?: number\n  size?: number\n  onSizeChange?: (size: number) => void\n  /** Clamp, as percentages. Defaults `10` and `90`. */\n  minSize?: number\n  maxSize?: number\n  /** Snap points in percent, e.g. `[25, 50, 75]`. Within 3% the handle snaps. */\n  snapPoints?: readonly number[]\n  className?: string\n  /** Accessible name for the handle — \"Resize sidebar\", not \"Resize\". */\n  label?: string\n}\n\n/**\n * A two-pane split with a draggable divider.\n *\n * The layout every IDE, mail client and admin console needs, and the one most often shipped as\n * mouse-only. The handle here is a real `role=\"separator\"` with `aria-valuenow`, and arrow keys\n * move it in 2% steps — WAI-ARIA calls this a window splitter and it is a documented pattern, not\n * an invention.\n *\n * Sizes are percentages rather than pixels so the split survives a window resize proportionally.\n * Dragging writes to a CSS custom property directly, bypassing React: a re-render per pointer move\n * makes the drag feel heavy on a complex page, and the value is only committed to state on release.\n */\nexport function Resizable({\n  children,\n  direction = 'horizontal',\n  defaultSize = 50,\n  size,\n  onSizeChange,\n  minSize = 10,\n  maxSize = 90,\n  snapPoints,\n  className,\n  label = 'Resize panes',\n}: ResizableProps) {\n  const [value, setValue] = useControllableState<number>({\n    value: size,\n    defaultValue: defaultSize,\n    onChange: onSizeChange,\n  })\n\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const [dragging, setDragging] = useState(false)\n\n  const clamp = useCallback(\n    (next: number) => {\n      let result = Math.min(Math.max(next, minSize), maxSize)\n      if (snapPoints) {\n        for (const point of snapPoints) {\n          if (Math.abs(result - point) < 3) {\n            result = point\n            break\n          }\n        }\n      }\n      return result\n    },\n    [minSize, maxSize, snapPoints],\n  )\n\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    const container = containerRef.current\n    if (!container) return\n\n    // Pointer capture keeps events coming to the handle even when the pointer outruns it, which\n    // it will — a fast drag easily leaves the 8px handle behind and the drag would otherwise stop\n    // dead mid-gesture.\n    event.currentTarget.setPointerCapture(event.pointerId)\n    setDragging(true)\n\n    let latest = value\n\n    const onMove = (moveEvent: PointerEvent) => {\n      const rect = container.getBoundingClientRect()\n      const fraction =\n        direction === 'horizontal'\n          ? (moveEvent.clientX - rect.left) / rect.width\n          : (moveEvent.clientY - rect.top) / rect.height\n\n      latest = clamp(fraction * 100)\n      // Written straight to the DOM. React state is updated once, on release.\n      container.style.setProperty('--ansh-split', `${latest}%`)\n    }\n\n    const onUp = () => {\n      setDragging(false)\n      setValue(latest)\n      window.removeEventListener('pointermove', onMove)\n      window.removeEventListener('pointerup', onUp)\n      window.removeEventListener('pointercancel', onUp)\n    }\n\n    window.addEventListener('pointermove', onMove)\n    window.addEventListener('pointerup', onUp)\n    window.addEventListener('pointercancel', onUp)\n  }\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const step = event.shiftKey ? 10 : 2\n    const forward = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n    const backward = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n\n    let next: number | null = null\n    if (event.key === forward) next = value + step\n    else if (event.key === backward) next = value - step\n    else if (event.key === 'Home') next = minSize\n    else if (event.key === 'End') next = maxSize\n    // Enter toggles between collapsed and the midpoint — the shortcut people expect from a\n    // collapsible sidebar, and the only way to fully collapse without a mouse.\n    else if (event.key === 'Enter') next = value <= minSize + 1 ? 50 : minSize\n\n    if (next === null) return\n    event.preventDefault()\n    setValue(clamp(next))\n  }\n\n  // Keep the custom property in sync when the value changes from outside a drag (controlled\n  // updates, keyboard steps). During a drag the pointer handler owns it.\n  useEffect(() => {\n    if (dragging) return\n    containerRef.current?.style.setProperty('--ansh-split', `${value}%`)\n  }, [value, dragging])\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        'ansh-split',\n        `ansh-split--${direction}`,\n        dragging && 'ansh-split--dragging',\n        className,\n      )}\n      style={{ ['--ansh-split' as string]: `${value}%` }}\n    >\n      <div className=\"ansh-split__pane\">{children[0]}</div>\n\n      <div\n        role=\"separator\"\n        tabIndex={0}\n        aria-label={label}\n        aria-orientation={direction === 'horizontal' ? 'vertical' : 'horizontal'}\n        aria-valuenow={Math.round(value)}\n        aria-valuemin={minSize}\n        aria-valuemax={maxSize}\n        className=\"ansh-split__handle ansh-focusable\"\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n        // Double-click resets to centre. Undocumented in the UI but universally expected, and\n        // harmless to discover by accident.\n        onDoubleClick={() => setValue(50)}\n      >\n        <span className=\"ansh-split__grip\" aria-hidden=\"true\" />\n      </div>\n\n      <div className=\"ansh-split__pane\">{children[1]}</div>\n    </div>\n  )\n}\n"]}