neba 1.0.0 → 1.2.0

package/dist/internal/picker.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import type { PickerLabels } from './calendar';
+import type { NebaColor, NebaElevation, NebaSize, NebaStyleProps } from '../types';
+/**
+ * The shell all four pickers wear: a field-shaped trigger with a popup hanging
+ * off it.
+ *
+ * It is here rather than in one of the components for the reason the calendar
+ * is: four components need it, and none of them should have to import another.
+ * What it draws is deliberately not new — the trigger is `fieldRestClasses`,
+ * which is the same box a TextField and a Select's trigger are drawn on, to the
+ * pixel. A form where the date field is a different height, radius or colour
+ * from the text field beside it is a form that looks assembled rather than
+ * designed.
+ *
+ * The one thing the pickers do *not* offer is typing a date into the trigger.
+ * Parsing a date out of free text is locale-dependent in a way that cannot be
+ * done honestly without a date library, and a field that understands `27/7/26`
+ * in one browser and not the next is worse than one that never claimed to. So
+ * the trigger is a button, exactly as a Select's is, and the calendar is where
+ * the answer comes from.
+ */
+/**
+ * The popup's slots: a container's undyed sheet with the *control* fill added
+ * back on top.
+ *
+ * Neither generator in `internal/styles` says this on its own, and the reason is
+ * that a picker's popup is both things at once. It is a container — it holds a
+ * grid of forty-two days, and dyeing the sheet under them would put every one of
+ * them on a background it was not chosen against — and it also holds the one
+ * filled token in the library that has to be legible without being read, which
+ * is the day you picked. So the sheet stays white and the family arrives in the
+ * four fill slots the chosen cell reads.
+ */
+export declare function popupSlots(color: NebaColor, elevation: NebaElevation): React.CSSProperties;
+/**
+ * The popup. Like every floating surface in the library it carries a shadow by
+ * default, at level 3 — as far as the scale goes without hovering — because it
+ * is genuinely off the page rather than merely on top of it.
+ */
+export declare const pickerPopupClasses: string;
+/** The popup's own padding, one track tighter than a control's. */
+export declare const popupPaddingClasses: Record<NebaSize, string>;
+export interface PickerShellProps extends NebaStyleProps {
+    elevation?: NebaElevation;
+    /** Label above the trigger. */
+    label?: React.ReactNode;
+    /** Helper text below it. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the control invalid. */
+    error?: React.ReactNode;
+    invalid?: boolean;
+    /** The glyph before the value — a calendar or a clock. */
+    startIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface InternalShellProps extends PickerShellProps {
+    /** What the trigger reads. A placeholder when `empty`. */
+    display: React.ReactNode;
+    /**
+     * Every string the display could hold, so the trigger stops changing width
+     * with its value. `displaySamples` in `internal/date` produces them and
+     * `WidthSizer` is what lays them out.
+     */
+    samples?: string[];
+    /** Nothing has been chosen yet, so the display is muted. */
+    empty: boolean;
+    /** Offers the × that empties the control. */
+    clearable?: boolean;
+    onClear: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    labels: PickerLabels;
+    /** `<input type="hidden">` rows, so the control submits with a form. */
+    hiddenValues?: Array<{
+        name: string;
+        value: string;
+    }>;
+    /** How far off the trigger the popup sits. */
+    sideOffset?: number;
+    children: React.ReactNode;
+    triggerRef?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * A trigger, a label, the two lines of text under it, and a popup.
+ *
+ * Everything about it that is visible is a decision already made elsewhere: the
+ * shell classes, the read-only and disabled treatments, the label's type scale
+ * and the way `invalid` re-points the whole colour family at `danger` so the
+ * edge, the ring and the message turn over together.
+ */
+export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, sideOffset, children, triggerRef }: InternalShellProps): React.JSX.Element;
+/**
+ * The row of shortcuts under a picker's panel.
+ *
+ * A hairline above it rather than a gap, because the actions act on the panel
+ * and a gap would read as a second popup stacked under the first.
+ */
+export declare function PickerFooter({ size, children }: {
+    size: NebaSize;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The vertical hairline between a calendar and the clock beside it. */
+export declare function PickerDivider(): React.JSX.Element;
+export {};

package/dist/internal/picker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Field as i}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{CloseIcon as l}from"./icons";import{WidthSizer as r}from"./sizer";import{chipRemoveClasses as o,controlHeightClasses as s,controlTextLeadingClasses as d,cx as c,disabledClasses as p,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as b,iconClasses as h,metaTextClasses as x,paddingXClasses as g,radiusClasses as v,stackGapClasses as y,surfaceClasses as N,surfaceSlots as w,transitionClasses as P}from"./styles";export function popupSlots(e,n){return{...w(e,n),"--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)`}}const k=["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",P,"focus-within:[transition-duration:0ms]",f,h].join(" ");export const pickerPopupClasses=[N,"border bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="outline",size:h="md",color:N="primary",density:P="default",elevation:C=0,label:$,description:j,error:O,invalid:z,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,style:B,display:E,samples:L,empty:T,clearable:V=!1,onClear:W,open:A,onOpenChange:G,labels:H,hiddenValues:J,sideOffset:K=6,children:M,triggerRef:Q}){const U=a.useId(),X=I??`${U}-trigger`,Y=`${U}-label`,Z=`${U}-description`,ee=`${U}-error`,ne=null!=O&&!1!==O&&""!==O,ae=z??ne,ie=ae?"danger":N,te=S||q,le=[j?Z:null,ne?ee:null].filter(Boolean).join(" ")||void 0;return n(i.Root,{disabled:S,invalid:ae,className:c("flex-col align-top",y[h],R?"flex w-full":"inline-flex",_),style:{...w(ie,C),...B},children:[$?e(i.Label,{id:Y,htmlFor:X,className:c(x[h],"font-medium",S?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:$}):null,n(t.Root,{open:A,onOpenChange:e=>G(e),children:[n("span",{className:c(k,s[h],d[h],v[h],b[h],g[P][h],S?p[f]:q?u[f]:m[f]),children:[n(t.Trigger,{id:X,ref:Q,disabled:S,"aria-labelledby":$?Y:void 0,"aria-describedby":le,"aria-required":D||void 0,"aria-invalid":ae||void 0,className:c("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",b[h],"[outline:none]",te?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:F}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:c("w-full truncate",T?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:E}),e(r,{samples:L??[]})]})]}),!V||T||te?null:e("button",{type:"button","aria-label":H.clear,className:c(o,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),W()},children:e(l,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:K,align:"start",children:e(t.Popup,{initialFocus:!1,className:c(pickerPopupClasses,v[h],popupPaddingClasses[h],d[h]),style:popupSlots(ie,3),children:M})})})]}),j?e(i.Description,{id:Z,className:c(x[h],"text-(--neba-muted-fg)"),children:j}):null,ne?e(i.Error,{id:ee,match:!0,className:c(x[h],"text-(--n-accent)"),children:O}):null,J?.map((n,a)=>e("input",{type:"hidden",name:n.name,value:n.value},a))]})}export function PickerFooter({size:n,children:a}){return e("div",{className:c("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",b[n]),children:a})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}

package/dist/internal/sizer.d.ts

@@ -0,0 +1,33 @@
+import type * as React from 'react';
+/**
+ * Holds a control open at the width of the widest thing it could ever say.
+ *
+ * A control that is not `fullWidth` is sized by what it is *currently* saying,
+ * which for anything whose value changes means the box changes with it. A Select
+ * showing `Seoul` is narrower than the same Select showing `Washington DC`; a
+ * DatePicker on the 1st is fourteen pixels narrower than the same picker on the
+ * 28th. Either way the field moves under the pointer that just used it, and the
+ * whole row of controls beside it shuffles along.
+ *
+ * So the alternatives are laid out too, stacked in a box that is clipped to no
+ * height. The control's intrinsic width becomes the widest of them and stops
+ * depending on the value.
+ *
+ * Three things it deliberately is not:
+ *
+ * - **Not `hidden`, and not `display: none`.** Both take the box out of layout,
+ *   and a box that is not laid out reserves nothing.
+ * - **Not read out.** `aria-hidden`, or a screen reader would announce every
+ *   value the control might hold before the one it does.
+ * - **Not text.** A string sample is drawn as generated content off a data
+ *   attribute rather than as a text node. `content: attr(…)` lays out exactly
+ *   like text, so it reserves the same width — but it leaves nothing for
+ *   `getByText` or a screen reader's find-in-page to trip over, and a caller's
+ *   test asking for the option they selected keeps finding one element rather
+ *   than two. Only a sample that is not a string — a Select option whose label
+ *   is a node — has to be rendered for real, because there is nothing to put in
+ *   an attribute.
+ */
+export declare function WidthSizer({ samples }: {
+    samples: readonly React.ReactNode[];
+}): React.JSX.Element | null;

package/dist/internal/sizer.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";export function WidthSizer({samples:a}){return 0===a.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:a.map((a,n)=>"string"==typeof a?e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`):e("span",{className:"block whitespace-nowrap",children:a},n))})}

package/dist/internal/styles.d.ts

@@ -53,6 +53,20 @@ export declare const metaTextClasses: Record<NebaSize, string>;
  * two-pixel nudge.
  */
 export declare const paddingXClasses: Record<NebaDensity, Record<NebaSize, string>>;
+/**
+ * A glyph standing on its own, rather than one riding on a label.
+ *
+ * `iconClasses` below sizes an icon *inside* a control at `1.2em`, which is
+ * right when there is a word next to it to be measured against. An `Icon` on its
+ * own has no word, so it needs a box — and the box is its own ladder rather than
+ * a step off `controlHeightClasses`, because an icon is not a control: at 32px a
+ * `md` glyph would be the size of the button it usually sits in.
+ *
+ * The steps are the sizes icon sets are actually drawn at — 14, 16, 20, 24, 28 —
+ * so a Neba `Icon` lands on the same grid as whatever library the glyph came
+ * from and never has to be resampled.
+ */
+export declare const iconSizeClasses: Record<NebaSize, string>;
 /**
  * A tick box: the square a Checkbox draws and the circle a Radio draws.
  *
@@ -68,6 +82,25 @@ export declare const tickSizeClasses: Record<NebaSize, string>;
  * a sheet with the corners cut off, never a pill.
  */
 export declare const tickRadiusClasses: Record<NebaSize, string>;
+/**
+ * The dot inside a checked Radio.
+ *
+ * Whole pixels at every step rather than a percentage of the ring around it.
+ * `38%` of an 18px box is 6.08px, and a circle whose diameter lands between two
+ * device pixels is antialiased unevenly on its four sides — which is exactly
+ * what reads as "the dot is not centred" even when the box says it is.
+ */
+export declare const tickDotClasses: Record<NebaSize, string>;
+/**
+ * The line box a tick and its label share.
+ *
+ * Both the tick's wrapper and the label are measured against it: the wrapper is
+ * `h-[1lh]` so the box centres on the label's *first* line rather than on the
+ * whole block, and that only lines up if the two agree on what a line is. Left
+ * to inherit, `1lh` picks up whatever leading the host page happens to set and
+ * the tick drifts a pixel or two off the text beside it.
+ */
+export declare const tickRowLeadingClasses = "leading-[1.4]";
 /**
  * The same two tracks again, as raw lengths.
  *

package/dist/internal/styles.js

@@ -1 +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(" ")}
+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 iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};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 tickDotClasses={xs:"size-[0.3125rem]",sm:"size-1.5",md:"size-[0.4375rem]",lg:"size-2",xl:"size-[0.5625rem]"};export const tickRowLeadingClasses="leading-[1.4]";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(" ")}