neba 0.0.1 → 1.0.0

package/dist/internal/menu.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaSize } from '../types';
+/**
+ * What a menu item inherits from the menu around it.
+ *
+ * The same arrangement `ButtonGroup` uses, and for the same reason: `size`,
+ * `color` and `density` are properties of the *menu*, not of any one row in it,
+ * and passing them per item would be three chances per row to get one wrong —
+ * with a silent failure, a menu where the fourth item is a size bigger.
+ *
+ * It lives in `internal/` rather than in `Menu.tsx` because a submenu is a menu
+ * inside a menu and a context menu is the same rows hung off a right-click, so
+ * three components read this and none of them should have to import the others.
+ */
+export interface MenuContextValue {
+    size: NebaSize;
+    color: NebaColor;
+    density: NebaDensity;
+}
+export declare const MenuContext: React.Context<MenuContextValue>;

package/dist/internal/menu.js

@@ -0,0 +1 @@
+import*as t from"react";export const MenuContext=t.createContext({size:"md",color:"primary",density:"default"});

package/dist/internal/progress.d.ts

@@ -0,0 +1,122 @@
+/**
+ * What the three progress indicators share.
+ *
+ * `ProgressLinear`, `ProgressCircular` and `ProgressBox` are three different
+ * shapes answering one question — how far along is this, and is it moving at
+ * all — so the parts that are *not* the shape belong here: the colour slots,
+ * the size ladders, and the arithmetic that turns `value`/`min`/`max` into a
+ * fraction.
+ *
+ * The shapes themselves are all that is left in each component, which is the
+ * point: they are the only thing that genuinely differs.
+ */
+import type * as React from 'react';
+import type { NebaColor, NebaSize } from '../types';
+/**
+ * The props all three indicators take.
+ *
+ * Declared once and extended rather than copied three times, because the whole
+ * claim being made is that these are the same component in three shapes: a
+ * `value` of `null` has to mean the same thing on a bar, a ring and a row of
+ * plates, or the trio is three components that happen to share a prefix.
+ */
+export interface ProgressSharedProps {
+    /**
+     * How far along, between `min` and `max`.
+     *
+     * `null` — the default — is the indeterminate case: something is happening
+     * and nobody knows how much of it is left. That is the default on purpose. An
+     * indicator that has not been told a value should say so rather than draw an
+     * empty bar, which is a claim that no progress has been made.
+     * @default null
+     */
+    value?: number | null;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is loading. Read out with the value by a screen reader. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the shape. Percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How to format the value when it is shown — `Intl.NumberFormat` options, so
+     * bytes and currencies work as well as plain numbers. Without it the value is
+     * a percentage of `min`…`max`, which is the only formatting that holds for a
+     * range nobody described.
+     */
+    format?: Intl.NumberFormatOptions;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * The slots a progress indicator reads.
+ *
+ * A progress bar *is* the thing being coloured — unlike a Box, which holds
+ * other people's content — so the fill is the family's own. There is no
+ * elevation ladder here on purpose: an indicator is drawn into the surface it
+ * sits on, the way a groove is cut into a sheet, and a groove does not float.
+ */
+export declare function progressSlots(color: NebaColor): React.CSSProperties;
+/**
+ * How thick the linear track is.
+ *
+ * Its own ladder rather than a fraction of `controlHeightClasses`: a bar is not
+ * a control you can put a label inside, and at `md` it wants to be the weight of
+ * a rule between two paragraphs, not a third of a button.
+ */
+export declare const barThicknessClasses: Record<NebaSize, string>;
+/**
+ * The diameter of the ring, in pixels.
+ *
+ * Numbers rather than classes because the same value has to reach the SVG's
+ * `viewBox` arithmetic, and a ring is one of the few things in the library that
+ * cannot be described by a Tailwind class alone.
+ *
+ * They land just under the control ladder at every step — a `md` ring is 20px
+ * inside a 32px control — so a spinner dropped into a button, a field or a
+ * table row never makes the row taller than it already was.
+ */
+export declare const ringDiameters: Record<NebaSize, number>;
+/** The ring's stroke, thickening with the ring so the hole stays in proportion. */
+export declare const ringStrokes: Record<NebaSize, number>;
+/** One plate of a `ProgressBox`, on the tick ladder — an indicator, not a control. */
+export declare const plateSizeClasses: Record<NebaSize, string>;
+/** The corner cut off a plate: the same ~30% the tick boxes use. */
+export declare const plateRadiusClasses: Record<NebaSize, string>;
+/** Between the plates. Tight — they are one object, not a row of squares. */
+export declare const plateGapClasses: Record<NebaSize, string>;
+/**
+ * `value` as a fraction of the range, or `null` when there is nothing to say.
+ *
+ * `null` is the indeterminate case and it is the default: a component that has
+ * not been told how far along it is should say so, not draw an empty bar that
+ * looks like zero progress.
+ *
+ * The clamp is not defensive programming for its own sake — `value` usually
+ * arrives from a division somewhere, and a bar that renders 140% wide because
+ * one request finished twice is a worse bug than a bar that sits full.
+ */
+export declare function progressFraction(value: number | null | undefined, min: number, max: number): number | null;
+/**
+ * What the value reads as, both on screen and to a screen reader.
+ *
+ * Base UI's own default is `${value}%`, which is right only when the range
+ * happens to be 0–100 — "3%" for step 3 of 4 is worse than saying nothing. So
+ * the percentage is computed from the fraction, and a caller who passed
+ * `format` gets Base UI's formatted string instead, because at that point they
+ * have said what the number means.
+ */
+export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean): string | null;
+/**
+ * The same string, shaped for Base UI's `getAriaValueText`.
+ *
+ * `undefined` when there is no value, which hands the indeterminate case back
+ * to Base UI — it already announces "indeterminate progress", and re-inventing
+ * that here would be one more English string the library has to own.
+ */
+export declare function progressAriaText(fraction: number | null, hasFormat: boolean): ((formatted: string | null) => string) | undefined;

package/dist/internal/progress.js

@@ -0,0 +1 @@
+export function progressSlots(e){return{"--n-fill":`var(--neba-${e}-fill)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-line":`var(--neba-${e}-line)`}}export const barThicknessClasses={xs:"h-0.5",sm:"h-[3px]",md:"h-1",lg:"h-1.5",xl:"h-2"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export function progressFraction(e,s,r){return null==e||Number.isNaN(e)||r<=s?null:Math.min(1,Math.max(0,(e-s)/(r-s)))}export function progressText(e,s,r){return null===e?null:r?s:`${Math.round(100*e)}%`}export function progressAriaText(e,s){if(null!==e)return r=>progressText(e,r,s)??""}

package/dist/internal/styles.d.ts

@@ -0,0 +1,224 @@
+/**
+ * The pieces every Neba component is built out of.
+ *
+ * None of this is exported from `src/index.ts` — it is the library talking to
+ * itself. It lives here for one reason: a `size` of `md` has to be 32px on a
+ * Button, a TextField, a Select and a Chip, and a table copied into eleven
+ * files is a table that will disagree with itself by the twelfth.
+ *
+ * The two things that cannot move out of a component are its variant classes
+ * and its layout — those genuinely differ. Heights, radii, type scale, padding
+ * tracks, the frosted surface, the transition and the colour slots do not.
+ *
+ * Tailwind only sees class names written out literally, so everything here is a
+ * complete class string rather than something assembled at runtime. `@source
+ * '.'` in `styles.css` covers this folder in the repository and in `dist/`.
+ */
+import type * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../types';
+/**
+ * Corner radius. ~45% of the control height at every step, held just short of
+ * the 50% that would make it a pill.
+ */
+export declare const radiusClasses: Record<NebaSize, string>;
+/**
+ * The height of a control, and the one number the whole library lines up on:
+ * a Button, a TextField, a Select and a Chip of the same `size` sit on the same
+ * baseline in the same row.
+ *
+ * The steps are deliberately uneven. `md` (32px) is the desktop workhorse,
+ * `xs`/`sm` are for dense toolbars and table rows, `lg`/`xl` are for the one
+ * action a screen is actually about — so the gaps widen at both ends rather
+ * than marching up in equal 4px increments.
+ *
+ * Density never touches these.
+ */
+export declare const controlHeightClasses: Record<NebaSize, string>;
+/** The same numbers as a width, for a control with nothing to pad against. */
+export declare const controlSquareClasses: Record<NebaSize, string>;
+/** A control's label. One line, so the leading comes from `leading-none`. */
+export declare const controlTextClasses: Record<NebaSize, string>;
+/**
+ * The same type scale with an explicit leading, for the controls that hold text
+ * which may wrap — a textarea, a select option, a table cell. The line heights
+ * have to agree with `controlHeightClasses` or a one-row control would stop
+ * lining up with a single-line one.
+ */
+export declare const controlTextLeadingClasses: Record<NebaSize, string>;
+/** Labels, descriptions and error messages: one step below the control's text. */
+export declare const metaTextClasses: Record<NebaSize, string>;
+/**
+ * Horizontal padding, and the only thing `density` is allowed to touch. The two
+ * tracks are roughly 2:1 so the difference is legible at a glance rather than a
+ * two-pixel nudge.
+ */
+export declare const paddingXClasses: Record<NebaDensity, Record<NebaSize, string>>;
+/**
+ * A tick box: the square a Checkbox draws and the circle a Radio draws.
+ *
+ * Its own ladder rather than a step off `controlHeightClasses`, because a tick
+ * is not a control you can put a label inside — it is an indicator next to one,
+ * and it is sized against the text beside it rather than against the row.
+ */
+export declare const tickSizeClasses: Record<NebaSize, string>;
+/**
+ * And its own radius, at ~30% rather than the ~45% the control ladder uses.
+ * `--neba-radius-md` is 14px, which on an 18px box is a circle — and a checkbox
+ * that is round is a radio button. The intent is the same as everywhere else:
+ * a sheet with the corners cut off, never a pill.
+ */
+export declare const tickRadiusClasses: Record<NebaSize, string>;
+/**
+ * The same two tracks again, as raw lengths.
+ *
+ * These exist for one element: a table cell. `<td>` and `<th>` are among the
+ * very few tags that host stylesheets still style by name — VitePress's
+ * `.vp-doc td`, Tailwind Typography's `.prose td`, every CSS framework ever —
+ * and all of those are two-class selectors that a utility cannot outrank. A
+ * Table therefore writes its cell padding inline, where nothing can reach it.
+ *
+ * Keep these in step with `paddingXClasses`. They are the same numbers: the
+ * Tailwind spacing scale is 0.25rem per step.
+ */
+export declare const paddingXValues: Record<NebaDensity, Record<NebaSize, string>>;
+/** Between a control's own parts — an icon and its label. */
+export declare const gapClasses: Record<NebaSize, string>;
+/** Between a label, the control under it and the text under that. */
+export declare const stackGapClasses: Record<NebaSize, string>;
+/**
+ * A sheet's heading: one step above the body, on the same ladder the controls
+ * use, so a card's title lines up with the buttons that end up inside it.
+ */
+export declare const sheetTitleClasses: Record<NebaSize, string>;
+/**
+ * Body copy: the control type scale with the leading opened up, because a
+ * label is one line and a body is a paragraph.
+ */
+export declare const sheetBodyClasses: Record<NebaSize, string>;
+/** Title to subtitle. Tight — they are one block of text, not two sections. */
+export declare const sheetHeaderGapClasses: Record<NebaSize, string>;
+/** Between a sheet's sections, when there are no dividers to separate them. */
+export declare const sheetSectionGapClasses: Record<NebaSize, string>;
+/**
+ * The frosted surface: a translucent fill over a blurred backdrop, a tile of
+ * noise blended into it for tooth, and an angled sheen. The blur makes it a
+ * sheet of something; the noise makes that something acrylic rather than glass.
+ */
+export declare const surfaceClasses = "[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";
+/**
+ * The house transition. Per-property durations in the order the property list
+ * declares them: the fill drains back slowly while edges and shadows keep up
+ * with the pointer.
+ *
+ * No `transform` is in the list, and none should ever be added — scaling a
+ * control resamples its label, and a label that shimmers under the cursor is
+ * what reads as cheap.
+ */
+export declare const transitionClasses: string;
+/**
+ * Press is instant, release is slow — the house interaction signature. Pressing
+ * zeroes every duration, so the whole control lands on the frame of the click
+ * and then decays.
+ */
+export declare const pressTransitionClasses = "active:[transition-duration:0ms]";
+/**
+ * The focus ring, written as the `outline` shorthand rather than Tailwind's
+ * `outline-2` + colour pair: the utilities route the style through
+ * `--tw-outline-style`, which any `outline-none` on the element (ours or a
+ * consumer's) would zero out.
+ */
+export declare const focusRingClasses = "focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";
+/** The same ring, drawn by whichever descendant actually takes focus. */
+export declare const focusWithinRingClasses = "has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2";
+/** Icons track their label rather than carrying a size of their own. */
+export declare const iconClasses = "[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";
+/**
+ * Text for a screen reader and nobody else: the sentence behind a bare number
+ * on a Badge, the page number under a Pagination chevron, the file count a
+ * FilePicker reports.
+ *
+ * Not `hidden`, not `display:none` and not `opacity:0` — the first two take the
+ * text off the accessibility tree along with the screen, and the third leaves a
+ * clickable ghost the size of the words. A 1px clipped box is the one form that
+ * is invisible to a sighted reader and present to every other kind.
+ */
+export declare const srOnlyClasses = "absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";
+/**
+ * Every slot a control reads, with the panel ladder dyed by the family.
+ *
+ * A control's surface *is* the thing being coloured, so it takes the tint. The
+ * two light slots switch with the variant: light thrown onto a filled surface is
+ * white; onto a tinted or bare one it has to be the accent, or the surface
+ * washes out to grey.
+ */
+export declare function controlSlots(color: NebaColor, elevation: NebaElevation, variant: NebaVariant): React.CSSProperties;
+/**
+ * The same slots with the panel ladder left *undyed* — the neutral
+ * `--neba-panel*` steps rather than the family's own.
+ *
+ * This is what a container uses. A Box, a Card, a TextField or a Select popup
+ * holds other people's content, and that content arrives with its own colours;
+ * tinting the sheet under it puts every one of them on a background they were
+ * not chosen against. So the family shows up in the hairline, the focus ring and
+ * the caret, and the sheet stays white.
+ */
+export declare function surfaceSlots(color: NebaColor, elevation: NebaElevation): React.CSSProperties;
+/**
+ * Disabled drops the colour family entirely. Fading the coloured surface would
+ * still read as "this is the primary action", only blurrier.
+ */
+export declare const disabledClasses: Record<NebaVariant, string>;
+/**
+ * The shell a field-shaped control is drawn on — a TextField's box and a
+ * Select's trigger, which have to be indistinguishable or a form looks like two
+ * different forms stacked on each other.
+ *
+ * The variants say the same three things they say on Button — filled, hairline,
+ * bare — with one deliberate difference: `solid` does not flood the control with
+ * `--n-fill`. What a field holds is user data, and a caret, a text selection, a
+ * placeholder and a chosen option all have to stay legible on top of it, which
+ * they are not on an accent fill.
+ *
+ * So the sheet is not dyed at all — `--n-panel` is the *undyed* acrylic, and the
+ * three steps below it are opacity rather than tint. `solid` rests one step up
+ * the ladder from `outline`, and hover and focus climb it; the colour family
+ * shows up in the edge, the ring and the caret instead.
+ */
+export declare const fieldRestClasses: Record<NebaVariant, string>;
+/**
+ * Read-only keeps the colour and the edge, goes flat, and drains most of the
+ * saturation — the same axis Button uses. The caret and the text selection stay,
+ * because a read-only field is still something you copy out of.
+ */
+export declare const fieldReadOnlyClasses: Record<NebaVariant, string>;
+/**
+ * Read-only keeps the shape and the edge but goes flat, loses its sheen and
+ * drains most of the saturation. It reads as a label that happens to be
+ * control-shaped, which is what a read-only control is.
+ *
+ * The desaturation is doing the work: with `elevation` defaulting to 0 there is
+ * no drop shadow on a normal control either, so "flat" alone says nothing.
+ *
+ * The cursor is left to the component. A read-only button stops being something
+ * you click; a read-only field is still something you select text out of.
+ */
+export declare const readOnlyFilterClasses = "[filter:saturate(0.55)]";
+/**
+ * The × that removes a chip.
+ *
+ * Written once because two components draw it: Chip's own `onDelete`, and the
+ * chips a multi-select Combobox puts inside its field. The second one is a Base
+ * UI `Combobox.ChipRemove` rather than a plain button, so what is shared is the
+ * class string and not the element — which is exactly the split the rest of
+ * this file makes.
+ *
+ * Sized in `em` so it tracks the chip's label at every step of the scale, and
+ * it is the one place in the library where `opacity` carries a state: this is
+ * not a control changing what it is, it is an affordance that stays out of the
+ * way of the word beside it until the pointer is on it.
+ */
+export declare const chipRemoveClasses: string;
+/** `false`, `null`, `undefined` and `''` all mean "this slot is not filled". */
+export declare function hasContent(node: React.ReactNode): boolean;
+/** Joins class name fragments, dropping the empty ones. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/internal/styles.js

@@ -0,0 +1 @@
+export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const transitionClasses=["[transition-property:background-color,border-color,box-shadow,color]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ");export const pressTransitionClasses="active:[transition-duration:0ms]";export const focusRingClasses="focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2";export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,r){const n="solid"===r;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]","hover:bg-(--n-panel-press)","focus-within:bg-(--n-panel-press)"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)]"].join(" "),text:["text-(--neba-fg) bg-transparent","hover:bg-(--n-soft)","focus-within:bg-(--n-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]"].join(" "),text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const chipRemoveClasses=["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed"].join(" ");export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function cx(...e){return e.filter(Boolean).join(" ")}