neba 0.0.1 → 1.1.0

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAlignSelf, NebaResponsive } from '../../types';
+export interface GridProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many of the container's columns the item takes. Read against the
+     * container's `columns`, so `span={6}` is a half of the default twelve and a
+     * quarter of `columns={24}`.
+     *
+     * Responsive: `span={{ xs: 12, md: 6, lg: 4 }}` is full width on a phone,
+     * half from 48rem and a third from 64rem. Every entry applies from its own
+     * breakpoint up, so two of them usually describe a whole layout.
+     *
+     * A span wider than the row is clamped to the row rather than overflowing.
+     * @default the container's full width
+     */
+    span?: NebaResponsive<number>;
+    /**
+     * Columns left empty *before* the item — space pushed in ahead of it, not an
+     * absolute position in the row. First in a twelve-column row, `offset={4}`
+     * with `span={4}` is the middle third; after an item that already took four
+     * columns, the same offset skips four more and lands on the last third.
+     *
+     * Responsive in the same way `span` is.
+     * @default 0
+     */
+    offset?: NebaResponsive<number>;
+    /** Overrides the row's `alignItems` for this item alone. */
+    alignSelf?: NebaAlignSelf;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<article />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * One cell of a `GridContainer`.
+ *
+ * It is a width and nothing else — no surface, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a grid cell and a Box
+ * are two components: wrapping something in a layout should not change how it
+ * looks, and a cell that drew a sheet would make `span` a visual decision.
+ *
+ * The column count it divides by is inherited from the container as a custom
+ * property, so a `<Grid>` with no `<GridContainer>` above it falls back to
+ * twelve rather than breaking — but it will be a plain block in a plain parent,
+ * which is not a layout. Always wrap.
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/Grid.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as n,offsetValue as o,responsiveSlots as t,spanValue as s}from"../../internal/grid";export const Grid=e.forwardRef(function({span:e,offset:a,alignSelf:i,render:f,className:l,style:c,children:d,...m},p){const u=["neba-grid-item",i?n[i]:"",l??""].filter(Boolean).join(" ");return r({render:f,ref:p,props:{className:u,style:{...t("span",e,s),...t("offset",a,o),...c},children:d,...m}})});

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

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

package/dist/components/grid/index.js

@@ -0,0 +1 @@
+export{Grid}from"./Grid";

package/dist/components/grid-container/GridContainer.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAlignItems, NebaDensity, NebaJustifyContent, NebaResponsive, NebaSize } from '../../types';
+export interface GridContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many columns a row is divided into. Every `span` and every `offset`
+     * inside is read against this number, so `columns={24}` makes `span={12}` a
+     * half and not a full width.
+     * @default 12
+     */
+    columns?: NebaResponsive<number>;
+    /**
+     * The gutter between items, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     * @default 2
+     */
+    spacing?: NebaResponsive<number>;
+    /** The gutter between rows only. Falls back to `spacing`. */
+    rowSpacing?: NebaResponsive<number>;
+    /** The gutter between columns only. Falls back to `spacing`. */
+    columnSpacing?: NebaResponsive<number>;
+    /** How a row distributes the space its items did not use. */
+    justifyContent?: NebaJustifyContent;
+    /** How items sit against each other across the row. @default 'stretch' */
+    alignItems?: NebaAlignItems;
+    /** Where the rows sit when the grid is shorter than the box holding it. */
+    alignContent?: NebaJustifyContent;
+    /**
+     * Whether a row that runs out of columns continues on the next one. Turning
+     * it off gives one row that overflows, which is what a horizontally
+     * scrolling strip wants.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Inner padding, on the `size`/`density` scale. Turn it off when the grid is
+     * already inside something that pads — a Container, a Card, another grid.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The padding scale. As on Box, this is the size of the *sheet* — it never
+     * touches a height or the type scale, and it has nothing to do with the
+     * gutters, which are `spacing`.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<ul />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * The parent every `Grid` needs.
+ *
+ * It owns the three numbers an item cannot know on its own — how many columns
+ * there are and how wide the two gutters are — and hands them down as inherited
+ * custom properties rather than through a React context. That is not a
+ * shortcut: the values are responsive, and a media query can change an
+ * inherited custom property without React hearing about it, so the column count
+ * an item lays itself out against is always the one that is on screen. A
+ * context would have to re-render the tree at every breakpoint to say the same
+ * thing.
+ *
+ * It deliberately does not take `variant`, `color` or `elevation`. A grid is
+ * not a surface — it is the arrangement of the surfaces inside it, and the
+ * moment it draws its own sheet it stops being usable as the outermost thing on
+ * a page. Wrap it in a Box or a Card when the sheet is wanted.
+ *
+ * Nesting is a `GridContainer` inside a `Grid`, not a `Grid` that is also a
+ * container: the inner grid re-declares the column count for its own subtree
+ * while the item around it keeps the width the outer grid gave it.
+ */
+export declare const GridContainer: React.ForwardRefExoticComponent<GridContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid-container/GridContainer.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as a,columnCount as o,justifyContentClasses as t,responsiveSlots as i,spacingValue as p,withBaseline as s}from"../../internal/grid";import{boxPaddingClasses as l}from"../box/Box";export const GridContainer=e.forwardRef(function({columns:e,spacing:c,rowSpacing:d,columnSpacing:f,justifyContent:m,alignItems:g,alignContent:x,wrap:u=!0,padded:y=!0,size:w="md",density:b="default",render:C,className:h,style:j,children:B,...N},S){const z=["neba-grid flex",u?"flex-wrap":"flex-nowrap","gap-x-(--n-gap-x) gap-y-(--n-gap-y)",y?l[b][w]:"",m?t[m]:"",g?a[g]:"",x?n[x]:"",h??""].filter(Boolean).join(" ");return r({render:C,ref:S,props:{className:z,style:{...i("cols",s(e,12),o),...i("gap-x",s(f??c,2),p),...i("gap-y",s(d??c,2),p),...j},children:B,...N}})});

package/dist/components/grid-container/index.d.ts

@@ -0,0 +1,2 @@
+export { GridContainer } from './GridContainer';
+export type { GridContainerProps } from './GridContainer';

package/dist/components/grid-container/index.js

@@ -0,0 +1 @@
+export{GridContainer}from"./GridContainer";

package/dist/components/highlight/Highlight.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { TypographyWeight } from '../typography/Typography';
+import type { NebaColor, NebaVariant } from '../../types';
+export interface HighlightProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * What to find.
+     *
+     * A string is one term, an array is several — the longest is tried first, so
+     * `['data', 'database']` marks the whole word rather than the first four
+     * letters of it. A `RegExp` is used as written, with the global flag forced
+     * on; `caseSensitive` and `wholeWord` are ignored for it, because a regular
+     * expression already says both of those things itself.
+     */
+    query: string | string[] | RegExp;
+    /**
+     * Weight of the mark.
+     *
+     * - `solid` — filled, the highlighter pen. The default.
+     * - `outline` — a hairline box around the word, for a page where a filled run
+     *   would be too much.
+     * - `text` — the accent colour and nothing else, for marking a word inside a
+     *   heading that is already loud.
+     * @default 'solid'
+     */
+    variant?: NebaVariant;
+    /**
+     * Semantic colour role. `warning` by default, and not arbitrarily: it is the
+     * one family whose fill is light with dark ink on it, so a solid `warning`
+     * mark is a yellow highlighter over black text rather than a white word on a
+     * block of colour.
+     * @default 'warning'
+     */
+    color?: NebaColor;
+    /**
+     * Whether `a` and `A` are different letters.
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Whether a term has to be a word on its own — `cat` marking "cat" but not
+     * "concatenate".
+     *
+     * A word here is a run of letters, digits and underscores in any script, so it
+     * means what it should for `café` and `naïve`. It means very little for Korean
+     * or Japanese, where a phrase is not delimited by spaces at all; that is a
+     * property of the writing system rather than of this prop, and is the reason
+     * it is off by default.
+     * @default false
+     */
+    wholeWord?: boolean;
+    /** Underlines the mark as well. Combines with every variant. */
+    underline?: boolean;
+    /**
+     * Sets the mark's weight. Omit it and the mark is the weight of the text
+     * around it — the surface is already saying "this one", and a bolded word
+     * inside a sentence changes the rhythm of the whole line.
+     */
+    weight?: TypographyWeight;
+    /**
+     * The text to search. Elements are walked into and left otherwise untouched,
+     * so a match inside a `<strong>` is still marked and the `<strong>` survives.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Marks the words a reader is looking for, inside text they were already
+ * reading.
+ *
+ * The component is the search, not just the styling: `query` is what a search
+ * box holds, and everything about *how* the matching is done — case, whole
+ * words, a regular expression — is a prop rather than something a caller has to
+ * pre-compute into a list of offsets.
+ *
+ * The mark is a real `<mark>`, which is the element for "text of relevance to
+ * the reader" and is announced as such. That has one consequence worth knowing:
+ * marking eleven words in a paragraph tells a screen reader that eleven things
+ * are important, which is a way of saying nothing. A highlight is for a handful
+ * of matches.
+ *
+ * Nothing here is stateful and nothing measures — the whole component is a pure
+ * function of `children` and `query`, so it re-marks on its own the moment the
+ * search box changes.
+ */
+export declare const Highlight: React.ForwardRefExoticComponent<HighlightProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/highlight/Highlight.js

@@ -0,0 +1 @@
+import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{transitionClasses as t}from"../../internal/styles";const r={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-accent) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function i(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function a(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!l.test(r)&&!l.test(o)}function s(n,e,t,r){e.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=e.exec(n));){if(""===l[0]){e.lastIndex+=1;continue}const s=l.index,c=s+l[0].length;t&&!a(n,s,c)||(s>i&&o.push(n.slice(i,s)),o.push(r(l[0],`${s}`)),i=c)}return 0===o.length?n:(i<n.length&&o.push(n.slice(i)),o)}function c(n,t,r,o){if("string"==typeof n)return s(n,t,r,o);if("number"==typeof n)return s(String(n),t,r,o);if(Array.isArray(n))return e.Children.map(n,n=>c(n,t,r,o));if(e.isValidElement(n)){const l=n.props.children;return void 0===l||"function"==typeof l?n:e.cloneElement(n,void 0,c(l,t,r,o))}return n}export const Highlight=e.forwardRef(function({query:l,variant:a="solid",color:s="warning",caseSensitive:u=!1,wholeWord:f=!1,underline:d=!1,weight:m,className:p,style:g,children:h,...b},x){const y=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return n.global?n:new RegExp(n.source,`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>n.trim()).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(i).join("|"),e?"gu":"giu")}(l,u),[l,u]),v=["rounded-[0.25rem] px-0.5 -mx-0.5","box-decoration-clone",r[a],d?"underline decoration-2 underline-offset-2":"",m?o[m]:"",t].filter(Boolean).join(" "),$=y?c(h,y,f,(e,t)=>n("mark",{className:v,children:e},t)):h;return n("span",{ref:x,className:p,style:{"--n-fill":`var(--neba-${s}-fill)`,"--n-on-solid":`var(--neba-${s}-on-solid)`,"--n-accent":`var(--neba-${s}-accent)`,"--n-panel":`var(--neba-${s}-panel)`,"--n-line":`var(--neba-${s}-line)`,...g},...b,children:$})});

package/dist/components/highlight/index.d.ts

@@ -0,0 +1,2 @@
+export { Highlight } from './Highlight';
+export type { HighlightProps } from './Highlight';

package/dist/components/highlight/index.js

@@ -0,0 +1 @@
+export{Highlight}from"./Highlight";

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { NebaColor, NebaSize } from '../../types';
+export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The glyph. An `<svg>` element, an `<img>`, a component from an icon set, or
+     * a character — whatever is passed is laid into a box of the right size and
+     * given a colour to inherit.
+     *
+     * It is a prop rather than `children` on purpose. An icon set hands you an
+     * element you did not draw, and the two things you always want to change about
+     * it — how big it is and what colour it is — are the two things you cannot
+     * reach once it is a child of something. As a prop it is content the Icon
+     * *sizes*, not content the Icon merely wraps.
+     */
+    icon: React.ReactNode;
+    /**
+     * The box the glyph is drawn in: 14, 16, 20, 24 and 28px. Its own ladder
+     * rather than the control heights, because an icon is not a control.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * Semantic colour role, or `inherit` — the default — to take the colour of
+     * whatever the icon sits in.
+     *
+     * `inherit` is the default and not `primary`, which is the one place this prop
+     * deviates from every other component in the library. An icon is content, and
+     * the overwhelmingly common case is an icon inside something that has already
+     * decided what colour its content is: a Button's label, a muted caption, an
+     * Alert's own family. An Icon that arrived pre-dyed blue would have to be
+     * turned off again at every one of those.
+     * @default 'inherit'
+     */
+    color?: NebaColor | 'inherit';
+    /**
+     * What the icon says, for a reader who cannot see it.
+     *
+     * Without it the icon is hidden from the accessibility tree entirely, which is
+     * the right default: the overwhelming majority of icons sit next to a word
+     * that already says the same thing, and reading both out loud is worse than
+     * reading one. Pass this only when the glyph is carrying meaning on its own.
+     */
+    label?: string;
+}
+/**
+ * A glyph at a known size, in a known colour.
+ *
+ * The library draws no icons of its own beyond the handful its components need —
+ * an icon set is a font-sized decision that belongs to the app, not to the
+ * component library it installs. What this does is give whatever icon the app
+ * chose the same two axes everything else here has.
+ *
+ * The box is `inline-flex` with the glyph told to fill it, and `font-size` is
+ * set to the same length — so an `<svg>` with its own `width`, an `<svg>` sized
+ * in `em`, and a bare character all come out the same size. That is the whole
+ * component: a box, a length written twice, and a colour.
+ */
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/icon/Icon.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{iconSizeClasses as i}from"../../internal/styles";const n={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=t.forwardRef(function({icon:t,size:r="md",color:l="inherit",label:s,className:a,style:o,...c},m){const f=["inline-flex shrink-0 items-center justify-center align-middle",i[r],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${n[r]}`,"inherit"===l?"":"text-(--n-accent)",a??""].filter(Boolean).join(" ");return e("span",{ref:m,className:f,style:"inherit"===l?o:{"--n-accent":`var(--neba-${l}-accent)`,...o},role:s?"img":void 0,"aria-label":s,"aria-hidden":!s||void 0,...c,children:t})});

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

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

package/dist/components/icon/index.js

@@ -0,0 +1 @@
+export{Icon}from"./Icon";

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type ButtonProps } from '../button/Button';
+export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'startIcon' | 'endIcon'> {
+    /**
+     * The glyph. Wrap it in an `Icon` when it needs a size of its own; passed bare
+     * it is sized in `em` against the button, exactly as a `startIcon` is.
+     */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "an icon button with no
+     * `aria-label`" is the single most common accessibility defect a component
+     * library ships. Making it required is the only fix that survives review.
+     */
+    label: string;
+}
+/**
+ * A round button with a glyph in it and nothing else.
+ *
+ * A [Button] with an icon and no children already goes square — the same height,
+ * the same width, the acrylic corners cut off it. This is the other shape: a
+ * disc.
+ *
+ * That disc is a deliberate exception to the house radius rule, which holds
+ * every corner just short of the 50% that would make a control a pill, because
+ * the flat run along the top and bottom edge is what still reads as a sheet with
+ * its corners cut. The rule is about *labelled* controls: the flat run is there
+ * for the line of text to sit on, and a glyph has no line of text. A circle with
+ * a single mark centred in it is a punched token rather than a moulded key, so
+ * it says the thing the rule exists to protect by a different route.
+ *
+ * Everything else is Button's, unchanged and on purpose: the variants, the
+ * elevation ladder, the pointer light, `loading`, `readOnly`, and the values a
+ * surrounding ButtonGroup sets. Two components that draw the same surface from
+ * two copies of the same table are two components that will eventually disagree.
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../button/Button";export const IconButton=r.forwardRef(function({icon:r,label:e,style:a,...n},s){return t(o,{ref:s,"aria-label":e,startIcon:r,style:{borderRadius:"9999px",...a},...n})});

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';

package/dist/components/icon-button/index.js

@@ -0,0 +1 @@
+export{IconButton}from"./IconButton";

package/dist/components/list/List.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface ListProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Separates the rows with a hairline instead of with space.
+     *
+     * It changes more than it sounds like: with dividers the rules have to reach
+     * both edges of the sheet, so the list gives up its inner padding and the rows
+     * give up their rounded corners. A row cannot be a floating tile and a ruled
+     * line at the same time.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Renders something other than a `<ul>` — `render={<ol />}` for a list where
+     * the order is the point. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface ListItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /**
+     * Passing it is what turns the row into a real `<button>`. It lands on that
+     * button rather than on the `<li>`, which is why the type is loosened from
+     * the list item the shell actually is.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — an icon, an avatar, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area. */
+    endIcon?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row — a switch, a menu button.
+     *
+     * Deliberately outside the pressable area: a row that both navigates and
+     * holds a toggle has two things to press, and nesting one button inside
+     * another is markup the browser rewrites on parse.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
+    href?: string;
+    /** Marks the row as the chosen one — the open page, the current filter. */
+    selected?: boolean;
+    /** Unavailable. Drops the colour family for neutral grey, as everywhere else. */
+    disabled?: boolean;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of rows.
+ *
+ * The list is a sheet and the rows are what is on it, which is the whole reason
+ * the two are separate components: `size` and `density` are properties of the
+ * stack, not of any one line in it, and a context is what carries them down.
+ *
+ * There is no Base UI primitive under this on purpose. A list is not a
+ * composite widget — it has no roving focus, no selection model, no keyboard
+ * contract of its own. Reaching for a menu or a listbox primitive to get one
+ * would hand every consumer's plain list of links the semantics of a menu,
+ * which is the most common way a component library breaks a screen reader.
+ */
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * One row.
+ *
+ * The shell is always an `<li>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` or `href` is given — a real `<button>` or
+ * `<a>` wrapping that content, with `action` sitting outside it as a separate
+ * control. This is the same shape Chip uses, for the same two reasons: a
+ * `<span>` carrying a click handler is invisible to a keyboard, and a
+ * `<button>` inside a `<button>` is markup Chrome silently un-nests.
+ */
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/List.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as s}from"../box/Box";import{focusRingClasses as a,gapClasses as i,hasContent as o,iconClasses as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,surfaceClasses as x,surfaceSlots as p,transitionClasses as u}from"../../internal/styles";const h=t.createContext({size:"md",density:"default",dividers:!1}),b={solid:[x,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[x,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},v={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},g={xs:m.xs,sm:m.xs,md:m.sm,lg:m.sm,xl:m.md};export const List=t.forwardRef(function({variant:n="outline",size:r="md",color:s="primary",density:a="default",elevation:i=0,dividers:o=!1,render:d,className:c,style:f,children:x,...v},g){const y=t.useMemo(()=>({size:r,density:a,dividers:o}),[r,a,o]),N=["flex flex-col",m[r],b[n],u,o?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",c??""].filter(Boolean).join(" "),w=l({render:d,ref:g,props:{role:"list",className:N,style:{...p(s,i),...f},children:x,...v}});return e(h.Provider,{value:y,children:w})});export const ListItem=t.forwardRef(function({startIcon:l,endIcon:m,description:x,action:p,href:b,selected:y=!1,disabled:N=!1,className:w,children:j,onClick:k,...B},C){const{size:z,density:I,dividers:$}=t.useContext(h),L=Boolean(k||b)&&!N,R=s[I][z],F=["flex min-w-0 flex-1 items-center text-start",R,v[I][z],i[z],f[z],u,d,$?"":g[z],N?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-accent)":"",L?`cursor-pointer ${a}`:"",L&&!y?"hover:bg-(--n-soft)":"",L&&y?"hover:bg-(--n-soft-press)":""].filter(Boolean).join(" "),M=n(r,{children:[o(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:l}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[o(j)?e("span",{className:"truncate",children:j}):null,o(x)?e("span",{className:`truncate text-(--neba-muted-fg) ${c[z]}`,children:x}):null]}),o(m)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:m}):null]});return n("li",{ref:C,className:["flex w-full items-center",w??""].filter(Boolean).join(" "),...B,children:[L&&b?e("a",{href:b,className:F,"aria-current":y?"page":void 0,onClick:k,children:M}):L?e("button",{type:"button",className:F,"aria-current":!!y||void 0,onClick:k,children:M}):e("div",{className:F,"aria-disabled":N||void 0,children:M}),o(p)?e("div",{className:`flex shrink-0 items-center ${R}`,children:p}):null]})});

package/dist/components/list/index.d.ts

@@ -0,0 +1,2 @@
+export { List, ListItem } from './List';
+export type { ListItemProps, ListProps } from './List';

package/dist/components/list/index.js

@@ -0,0 +1 @@
+export{List,ListItem}from"./List";