@ngrok/mantle 0.82.1 → 0.83.1

package/dist/scatter-plot.d.ts

@@ -1,14 +1,14 @@
-import { _ as SeriesColor, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as PointShape, i as GridPrimitiveProps, l as YAxisPrimitiveProps, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps } from "./chart-1cVjAcj8.js";
+import { _ as PointShape, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ChartSeriesSlot, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps, v as SeriesColor } from "./chart-0zcFJh4n.js";
 //#region src/components/scatter-plot/scatter-plot.d.ts
 /**
  * Props for {@link ScatterPlot.Root}. Scatter x values must be continuous
- * (numbers or `Date`s — there is no categorical scatter axis). Providing
- * `zKey` switches the chart into the 3D projection: points render inside a
- * rotatable cube (drag to orbit), depth-sorted with gentle perspective.
+ * (numbers or `Date`s — there is no categorical scatter axis). Set `zKey` to
+ * switch the chart into the 3D projection: points render inside a rotatable
+ * cube (drag to orbit), depth-sorted with gentle perspective.
  *
- * Scatter is an all-pairs chart form — any two marks can sit side by side —
- * so with the default chart tokens keep it to FOUR series or fewer; beyond
- * that, fold into an "Other" series or facet into small multiples.
+ * Scatter is an all-pairs chart form — any two marks can sit side by side. The
+ * eight default chart tokens hold at every pair, so keep it to eight series or
+ * fewer. Past eight, fold into an "Other" series or facet into small multiples.
  */
 type ScatterPlotRootProps<TDatum extends ChartDatum = ChartDatum> = Omit<ChartRootBaseProps, "stacked"> & ChartAccessibilityProps & {
   /** Rows of data; each row is one point per composed `ScatterPlot.Point` series. */
@@ -25,7 +25,7 @@ type ScatterPlotRootProps<TDatum extends ChartDatum = ChartDatum> = Omit<ChartRo
  */
 type ScatterPlotDepthProps<TDatum extends ChartDatum = ChartDatum> = {
   /**
-   * The key of each row's depth value. Providing it renders the scatter in
+   * The key of each row's depth value. When set, the scatter renders in
    * 3D: drag the plot to rotate the cube. Axis parts and reference lines
    * apply to the 2D projection only and are ignored in 3D (the cube frame
    * carries orientation).
@@ -52,20 +52,35 @@ type ScatterPlotPointProps = {
   /** Display name for the legend, tooltip, and data table. Defaults to `dataKey`. */
   label?: string;
   /**
-   * One of the validated chart tokens (`"chart-1"`…`"chart-8"`, `"chart-other"`)
-   * or any CSS color as an escape hatch. Defaults to the next sticky slot in
-   * mount order. Static colors (raw hex) do not adapt across themes; custom
-   * palettes must be validated for colorblind-safe adjacency and surface
-   * contrast, and a series that carries good/bad meaning should wear the
-   * semantic status colors, never a categorical slot.
+   * A fixed visual identity slot. Slots `1` through `8` select a paired chart
+   * color and point shape. `"other"` selects the shared neutral treatment.
+   *
+   * Series receive unreserved slots in composition order. Set `seriesSlot` to
+   * give a series a fixed visual identity.
+   *
+   * @example
+   * ```tsx
+   * <ScatterPlot.Point dataKey="errors" seriesSlot={4} />
+   * ```
+   */
+  seriesSlot?: ChartSeriesSlot;
+  /**
+   * Override the color channel with a chart token or any CSS color. This does
+   * not change the series slot or its paired point shape. When omitted, the
+   * series paints the color from its slot.
+   *
+   * A static color (raw hex) cannot follow the four themes, so prefer a
+   * `var(--your-token)` declared per theme. A series that carries good/bad
+   * meaning should wear the semantic status colors, never a categorical slot.
    */
   color?: SeriesColor;
   /**
-   * The glyph this series' points wear: `"circle"` (default), `"square"`,
-   * `"triangle"`, or `"diamond"`. Give each series a distinct shape on
-   * multi-series scatters — shape is the redundant encoding that keeps
-   * overlapping clouds distinguishable without color vision. The legend key
-   * and hover dot mirror it.
+   * The glyph this series' points wear, mirrored by the legend key and the
+   * hover dot: `"circle"`, `"square"`, `"triangle"`, `"diamond"`,
+   * `"triangle-down"`, `"plus"`, `"cross"`, or `"star"`. Shape is the
+   * redundant encoding that keeps overlapping clouds distinguishable without
+   * color vision. When omitted, the series wears the glyph paired to its
+   * series slot, so both channels name one slot.
    */
   shape?: PointShape;
 };
@@ -104,6 +119,15 @@ type ScatterPlotCopyButtonProps = CopyButtonPrimitiveProps;
  * series, x, y — and z in 3D. With `zKey` the plot becomes a rotatable 3D
  * cube: drag to orbit, with points depth-sorted under gentle perspective.
  *
+ * The Root's own subtree is addressable by slot: `scatter-plot` on the wrapper,
+ * then `scatter-plot-plot`, `scatter-plot-canvas`, `scatter-plot-crosshair`,
+ * `scatter-plot-hover-band`, `scatter-plot-markers`, `scatter-plot-tooltip`,
+ * and `scatter-plot-data-table`. A scatter plot shows one marker dot on the hit
+ * point, and never the crosshair or the band, but all three layers mount on
+ * every kind. That dot carries `chart-active-point` plus a `data-shape` of
+ * `"circle"`, `"square"`, `"triangle"`, `"diamond"`, `"triangle-down"`,
+ * `"plus"`, `"cross"`, or `"star"`, naming the glyph its series wears.
+ *
  * @see https://mantle.ngrok.com/components/charts/scatter-plot#scatterplotroot
  *
  * @example
@@ -223,9 +247,9 @@ declare const YAxis: (props: ScatterPlotYAxisProps) => null;
 declare const ReferenceLine: (props: ScatterPlotReferenceLineProps) => null;
 /**
  * Customizes the hover/keyboard tooltip readout. The tooltip itself is part
- * of `ScatterPlot.Root`'s interaction contract and renders whether or not
- * this part is composed — compose it to format the label or values, append a
- * footer, or replace the content entirely via the render-prop `children`.
+ * of `ScatterPlot.Root`'s interaction contract and renders even when this
+ * part is absent — compose it to format the label or values, append a footer,
+ * or replace the content entirely via the render-prop `children`.
  * In 3D the readout also carries the point's z value.
  *
  * @see https://mantle.ngrok.com/components/charts/scatter-plot#scatterplottooltip
@@ -246,6 +270,13 @@ declare const Tooltip: (props: ScatterPlotTooltipProps) => null;
  * never rely on color-matching alone. It renders nothing for a single series
  * (the chart's title already names it).
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"scatter-plot-legend"` | The legend list. `ScatterPlot.Legend` renders it in flow below the plot. |
+ * | `data-shape` | `"circle"` \| `"square"` \| `"triangle"` \| `"diamond"` \| `"triangle-down"` \| `"plus"` \| `"cross"` \| `"star"` | On each series' swatch, naming the glyph its `ScatterPlot.Point` wears — the `shape` it set, else the one paired to its series slot. The swatch clips itself to that glyph, so target this only to restyle a key. |
+ *
  * @see https://mantle.ngrok.com/components/charts/scatter-plot#scatterplotlegend
  *
  * @example
@@ -285,8 +316,22 @@ declare const CopyButton: (props: ScatterPlotCopyButtonProps) => import("react")
  * the 3D projection (`zKey`), which renders a rotatable, depth-sorted point
  * cloud (drag to orbit). Hover hits the nearest point within 24px; keyboard
  * stepping, polite announcements, and the sr-only data table ship with `Root`
- * unconditionally. Scatter is an all-pairs chart form: with the default chart
- * tokens keep it to four series or fewer.
+ * unconditionally. Scatter is an all-pairs chart form: the eight default chart
+ * tokens hold at every pair, so keep it to eight series or fewer.
+ *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--color-chart-1` … `--color-chart-8` | per theme | The validated categorical series slots, in assignment order. |
+ * | `--color-chart-other` | `--color-neutral-500` | The neutral overflow slot a series wears once every slot is held. |
+ *
+ * Two ways to change a series color, both public API. The `color` prop on
+ * `ScatterPlot.Point` sets one series and takes any CSS color. To restyle a slot itself,
+ * redeclare its token on `Root` —
+ * `className="[--color-chart-1:var(--color-brand)]"`. The engine resolves every
+ * token through a probe inside `Root`, so a declaration scoped there wins for
+ * that chart and leaves every other chart on the page alone.
  *
  * @see https://mantle.ngrok.com/components/charts/scatter-plot
  *

package/dist/scatter-plot.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-B3pAvmkk.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`scatter`,componentName:`ScatterPlot`,slotName:`scatter-plot`,...e}),Point:e=>a(`ScatterPlot.Point`,`scatter`,e),Grid:e=>n(`ScatterPlot.Grid`,e),XAxis:e=>t(`ScatterPlot.XAxis`,e),YAxis:e=>r(`ScatterPlot.YAxis`,e),ReferenceLine:t=>e(`ScatterPlot.ReferenceLine`,t),Tooltip:e=>s(`ScatterPlot.Tooltip`,e),Legend:e=>l(i,{partName:`ScatterPlot.Legend`,slotName:`scatter-plot`,...e}),CopyButton:e=>l(c,{partName:`ScatterPlot.CopyButton`,slotName:`scatter-plot`,...e})};export{u as ScatterPlot};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-DBxT9BNl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`scatter`,componentName:`ScatterPlot`,slotName:`scatter-plot`,...e}),Point:e=>a(`ScatterPlot.Point`,`scatter`,e),Grid:e=>n(`ScatterPlot.Grid`,e),XAxis:e=>t(`ScatterPlot.XAxis`,e),YAxis:e=>r(`ScatterPlot.YAxis`,e),ReferenceLine:t=>e(`ScatterPlot.ReferenceLine`,t),Tooltip:e=>s(`ScatterPlot.Tooltip`,e),Legend:e=>l(i,{partName:`ScatterPlot.Legend`,slotName:`scatter-plot`,...e}),CopyButton:e=>l(c,{partName:`ScatterPlot.CopyButton`,slotName:`scatter-plot`,...e})};export{u as ScatterPlot};

package/dist/{select-0z7HVS6r.d.ts → select-DVHmgih8.d.ts}

@@ -1,5 +1,5 @@
 import { o as WithValidation } from "./field-7QeiTFwl.js";
-import { n as Separator } from "./separator-B5UmkVRL.js";
+import { n as Separator } from "./separator-CNDs98Dv.js";
 import { ComponentProps, FocusEvent, PropsWithChildren, ReactNode, Ref, SelectHTMLAttributes } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 //#region src/components/select/select.d.ts
@@ -80,7 +80,7 @@ type SelectProps = PropsWithChildren & {
 declare const Root: ({ "aria-invalid": _ariaInvalid, children, id, validation, onBlur, onValueChange, onChange, ref, ...props }: SelectProps) => import("react").JSX.Element;
 /**
  * A group of related options within a select menu. Similar to an html `<optgroup>` element.
- * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.
+ * Pair it with `Select.Label`, which gives the group its accessible name.
  *
  * @see https://mantle.ngrok.com/components/forms/select#selectgroup
  *
@@ -145,7 +145,7 @@ declare const Trigger: ({ "aria-invalid": ariaInValidProp, className, children,
 type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content> & {
   /**
    * The width of the content. Defaults to the width of the trigger.
-   * If set to "content", the content will use the intrinsic content width; it will be the width of the longest/widest item.
+   * If set to "content", the content takes its intrinsic width — the width of the widest item.
    * @default "trigger"
    */
   width?: "trigger" | "content";
@@ -218,7 +218,8 @@ type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
 };
 /**
  * An option within a select menu. Similar to an html `<option>` element.
- * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.
+ * Has a required `value` prop. When a user selects this item, `Select.Root`
+ * passes that value to its `onValueChange` handler.
  * Displays the children as the option's text.
  *
  * @see https://mantle.ngrok.com/components/forms/select#selectitem
@@ -399,7 +400,7 @@ declare const Select: {
   readonly Content: typeof Content;
   /**
    * A group of related options within a select menu. Similar to an html `<optgroup>` element.
-   * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.
+   * Pair it with `Select.Label`, which gives the group its accessible name.
    *
    * @see https://mantle.ngrok.com/components/forms/select#selectgroup
    *
@@ -429,7 +430,8 @@ declare const Select: {
   readonly Group: typeof Group;
   /**
    * An option within a select menu. Similar to an html `<option>` element.
-   * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.
+   * Has a required `value` prop. When a user selects this item, `Select.Root`
+   * passes that value to its `onValueChange` handler.
    * Displays the children as the option's text.
    *
    * @see https://mantle.ngrok.com/components/forms/select#selectitem
@@ -546,7 +548,11 @@ declare const Select: {
    */
   readonly Trigger: typeof Trigger;
   /**
-   * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.
+   * The part that reflects the selected value. Renders the selected item's text
+   * by default. For more control, control the select and pass your own children.
+   * Do not style this part — under `Select.Content position="item-aligned"`, Radix
+   * measures its box to align the open list over the selected item. Pass
+   * `placeholder` for the text to show when the select has no value.
    *
    * @see https://mantle.ngrok.com/components/forms/select#selectvalue
    *

package/dist/select-LK9NX-vV.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-lZ48P8Nn.js";import{a as r,r as i}from"./field-Bpptk_9t.js";import{t as a}from"./field-B1wqeZr4.js";import{n as o}from"./separator-D0D6VyyM.js";import{CaretDownIcon as s}from"@phosphor-icons/react/CaretDown";import{createContext as c,useContext as l,useMemo as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckIcon as p}from"@phosphor-icons/react/Check";import{CaretUpIcon as m}from"@phosphor-icons/react/CaretUp";import*as h from"@radix-ui/react-select";const g=c({}),_=({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,ref:s,...c})=>{let l=u(()=>({"aria-invalid":e,id:n,validation:r,onBlur:i,ref:s}),[e,n,r,i,s]);return d(h.Root,{...c,onValueChange:e=>{o?.(e),a?.(e)},children:d(g.Provider,{value:l,children:t})})},v=({className:e,ref:n,...r})=>d(h.Group,{ref:n,"data-slot":`select-group`,className:t(`space-y-px`,e),...r}),y=h.Value,b=({"aria-invalid":o,className:c,children:u,id:p,ref:m,validation:_,...v})=>{let y=l(g),b=l(a),x=r(),S=b?b[`aria-invalid`]:y[`aria-invalid`]??o,C=y.validation??_??x,{ariaInvalid:w,validation:T}=i({"aria-invalid":S,validation:C}),E=b?b.id:y.id??p;return f(h.Trigger,{"data-slot":`select-trigger`,className:t(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,c),"data-validation":T||void 0,id:E,ref:e(m,y.ref),...v,...b?{"aria-describedby":b[`aria-describedby`],"aria-errormessage":b[`aria-errormessage`]}:void 0,"aria-invalid":w,children:[u,d(h.Icon,{asChild:!0,children:d(n,{svg:d(s,{weight:`bold`}),className:`size-4`})})]})},x=({className:e,ref:r,...i})=>d(h.ScrollUpButton,{ref:r,className:t(`flex cursor-default items-center justify-center py-1`,e),...i,children:d(n,{svg:d(m,{weight:`bold`}),className:`size-4`})}),S=({className:e,ref:r,...i})=>d(h.ScrollDownButton,{ref:r,className:t(`flex cursor-default items-center justify-center py-1`,e),...i,children:d(n,{svg:d(s,{weight:`bold`}),className:`size-4`})}),C={Root:_,Content:({className:e,children:n,position:r=`popper`,ref:i,width:a=`trigger`,...o})=>d(h.Portal,{children:f(h.Content,{ref:i,"data-slot":`select-content`,className:t(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,a===`trigger`&&`w-(--radix-select-trigger-width)`,e),position:r,...o,children:[d(x,{}),d(h.Viewport,{className:t(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),d(S,{})]})}),Group:v,Item:({className:e,children:r,icon:i,ref:a,...o})=>f(h.Item,{ref:a,"data-slot":`select-item`,className:t(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,e),...o,children:[i&&d(n,{svg:i}),d(h.ItemText,{children:r}),d(h.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:d(n,{svg:d(p,{weight:`bold`}),className:`size-4 text-accent-600`})})]}),Label:({className:e,ref:n,...r})=>d(h.Label,{ref:n,"data-slot":`select-label`,className:t(`px-2 py-1.5 text-sm font-medium`,e),...r}),Separator:({className:e,ref:n,...r})=>d(o,{ref:n,"data-slot":`select-separator`,className:t(`-mx-1 my-1 h-px w-auto`,e),...r}),Trigger:b,Value:y};export{C as t};

package/dist/select.d.ts

@@ -1,2 +1,2 @@
-import { t as Select } from "./select-0z7HVS6r.js";
+import { t as Select } from "./select-DVHmgih8.js";
 export { Select };

package/dist/select.js

@@ -1 +1 @@
-import{t as e}from"./select-BReznXaw.js";export{e as Select};
+import{t as e}from"./select-LK9NX-vV.js";export{e as Select};

package/dist/selectable-list.d.ts

@@ -1,5 +1,5 @@
-import { t as Choice } from "./choice-BNRQXszu.js";
-import { t as Input } from "./input-BuYDU6CF.js";
+import { t as Choice } from "./choice-CVdQrs-m.js";
+import { t as Input } from "./input-DpnC3Xgj.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 //#region src/components/selectable-list/selectable-list.d.ts
 /**
@@ -62,7 +62,7 @@ type SelectableListOption = {
   labelText: string;
 });
 /**
- * The plain-text form of an option's label: `labelText` when provided,
+ * The plain-text form of an option's label: `labelText` when set,
  * otherwise the `label` itself when it is a string. This is what the default
  * filter matches; reuse it in a custom `filter` predicate to keep label
  * matching consistent while adding your own criteria. The option type requires
@@ -359,7 +359,7 @@ type SelectableListViewportProps = Omit<ComponentProps<"div">, "children"> & {
  * checkbox rows inside the bordered, rounded `bg-popover` viewport. Renders
  * **every** filtered row — the non-virtualized default; for long lists, swap in
  * `SelectableList.VirtualViewport`. Renders nothing when the filter matches
- * nothing — pair with `SelectableList.Empty`. Provide an `aria-label` (or
+ * nothing — pair with `SelectableList.Empty`. Pass an `aria-label` (or
  * `aria-labelledby`) and **bound the height** (`max-h-*`, `h-*`, or
  * `min-h-0 flex-1`).
  *

package/dist/selectable-list.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{n as t,t as n}from"./checkbox-0EoxOyMA.js";import{t as r}from"./choice-CnwfjSEu.js";import{n as i,t as a}from"./input-BnlpQF0c.js";import{n as o,r as s,t as c}from"./list-CJABVHwi.js";import{cloneElement as l,createContext as u,isValidElement as d,useCallback as f,useContext as p,useId as m,useMemo as h,useState as g}from"react";import _ from"tiny-invariant";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{MagnifyingGlassIcon as b}from"@phosphor-icons/react/MagnifyingGlass";function x(e){return e.labelText==null?typeof e.label==`string`?e.label:``:e.labelText}function S(e,t){let n=t.trim().toLowerCase();return n===``?e:e.filter(e=>x(e).toLowerCase().includes(n))}function C(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e,t]}function w(e,t){let n=0,r=0;for(let i of e)i.disabled||(n+=1,t.has(i.value)&&(r+=1));return n===0?{allSelected:!1,someSelected:!1}:{allSelected:r===n,someSelected:r>0}}const T=u(null);function E(e){let t=p(T);return _(t,`SelectableList.${e} must be rendered inside SelectableList.Root.`),t}const D=[],O=({className:t,defaultQuery:n,defaultValue:r,filter:i,onQueryChange:a,onValueChange:o,options:s,query:c,ref:l,value:u,...d})=>{let p=m(),_=u!=null,[y,b]=g(r??D),x=_?u:y,w=c!=null,[E,O]=g(n??``),k=w?c:E,A=f(e=>{_||b(e),o?.(e)},[_,o]),j=f(e=>{w||O(e),a?.(e)},[w,a]),M=h(()=>new Set(x),[x]),N=h(()=>new Set(s.filter(e=>e.disabled).map(e=>e.value)),[s]),P=h(()=>i==null?S(s,k):s.filter(e=>i(e,k)),[s,k,i]),F=h(()=>({listId:p,filteredOptions:P,query:k,setQuery:j,selectedValues:x,selectedSet:M,disabledSet:N,toggle:e=>{N.has(e)||A(C(x,e))},setSelection:A}),[p,P,k,j,x,M,N,A]);return v(T.Provider,{value:F,children:v(`div`,{ref:l,"data-slot":`selectable-list`,className:e(`flex w-full flex-col gap-3`,t),...d})})},k=({"aria-label":e=`Filter`,ref:t,...n})=>{let{query:r,setQuery:o}=E(`Filter`);return y(a,{ref:t,type:`text`,"data-slot":`selectable-list-filter`,"aria-label":e,value:r,onChange:e=>o(e.target.value),...n,children:[v(b,{}),v(i,{})]})},A=({children:r,className:i,ref:a,...o})=>{let{filteredOptions:s,selectedValues:c,selectedSet:l,setSelection:u}=E(`SelectAll`),d=m(),{allSelected:f,someSelected:p}=w(s,l),h=t({allSelected:f,someSelected:p}),g=s.some(e=>!e.disabled),_=()=>{let e=s.filter(e=>!e.disabled).map(e=>e.value);if(f){let t=new Set(e);u(c.filter(e=>!t.has(e)));return}u([...new Set([...c,...e])])};return y(`label`,{ref:a,htmlFor:d,"data-slot":`selectable-list-select-all`,className:e(`text-strong flex cursor-pointer items-center gap-2 text-sm font-medium font-sans`,i),...o,children:[v(n,{id:d,checked:h,onChange:_,disabled:!g}),r]})};function j(e,t){return`${e}-control-${encodeURIComponent(t)}`}const M=({children:t,className:i,ref:a,value:s,...c})=>{let{listId:l,selectedSet:u,disabledSet:d,toggle:f}=E(`Item`),p=j(l,s),m=u.has(s),h=d.has(s);return v(o,{ref:a,asChild:!0,selected:m,disabled:h,className:e(`px-2 py-1.5 text-sm`,`cursor-pointer aria-disabled:cursor-default`,i),...c,"data-slot":`selectable-list-item`,"data-value":s,children:y(r.Root,{id:p,disabled:h,children:[v(r.Indicator,{role:`gridcell`,children:v(n,{checked:m,onChange:()=>f(s),tabIndex:-1})}),v(r.Content,{role:`gridcell`,children:t})]})})},N=e=>v(r.Label,{"data-slot":`selectable-list-item-title`,...e}),P=e=>v(r.Description,{"data-slot":`selectable-list-item-description`,...e});function F(e){return y(M,{value:e.value,children:[v(N,{children:e.label}),e.description!=null&&v(P,{children:e.description})]})}function I(e,t){let n=[],r=[];for(let i of e){let e=t(i);d(e)&&(n.push(l(e,{key:i.value})),r.push(i))}return{items:n,options:r}}function L(e,t){let{filteredOptions:n,listId:r,toggle:i}=E(e),a=t??F,{items:o,options:s}=h(()=>I(n,a),[n,a]),c=f(e=>{let t=s[e];t!=null&&i(t.value)},[s,i]),l=f(e=>{let t=s[e];return t==null?``:j(r,t.value)},[s,r]),u=f(e=>s[e]?.disabled===!0,[s]);return{isEmpty:o.length===0,isItemDisabled:u,onActivate:c,itemId:l,items:o}}const R={Root:O,Filter:k,SelectAll:A,Viewport:({children:e,ref:t,...n})=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:c}=L(`Viewport`,e);return r?null:v(s,{ref:t,"data-slot":`selectable-list-viewport`,semantics:`grid`,...n,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:c})},VirtualViewport:({children:e,ref:t,...n})=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:s}=L(`VirtualViewport`,e);return r?null:v(c,{ref:t,"data-slot":`selectable-list-viewport`,semantics:`grid`,...n,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:s})},Item:M,ItemTitle:N,ItemDescription:P,Empty:({children:t,className:n,ref:r,...i})=>{let{filteredOptions:a}=E(`Empty`),o=a.length===0;return v(`div`,{ref:r,"data-slot":`selectable-list-empty`,role:`status`,className:e(!o&&`sr-only`,o&&`text-muted border-popover bg-popover flex items-center justify-center rounded-md border px-3 py-8 text-center text-sm`,n),...i,children:o?t:null})}};export{R as SelectableList,S as filterSelectableOptions,x as optionLabelText,w as summarizeSelection,C as toggleSelectionValue};
+import{t as e}from"./cx-IiQEAKf5.js";import{n as t,t as n}from"./checkbox-0EoxOyMA.js";import{t as r}from"./choice-CnwfjSEu.js";import{n as i,t as a}from"./input-BnlpQF0c.js";import{n as o,r as s,t as c}from"./list-CwL23L_B.js";import{cloneElement as l,createContext as u,isValidElement as d,useCallback as f,useContext as p,useId as m,useMemo as h,useState as g}from"react";import _ from"tiny-invariant";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{MagnifyingGlassIcon as b}from"@phosphor-icons/react/MagnifyingGlass";function x(e){return e.labelText==null?typeof e.label==`string`?e.label:``:e.labelText}function S(e,t){let n=t.trim().toLowerCase();return n===``?e:e.filter(e=>x(e).toLowerCase().includes(n))}function C(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e,t]}function w(e,t){let n=0,r=0;for(let i of e)i.disabled||(n+=1,t.has(i.value)&&(r+=1));return n===0?{allSelected:!1,someSelected:!1}:{allSelected:r===n,someSelected:r>0}}const T=u(null);function E(e){let t=p(T);return _(t,`SelectableList.${e} must be rendered inside SelectableList.Root.`),t}const D=[],O=({className:t,defaultQuery:n,defaultValue:r,filter:i,onQueryChange:a,onValueChange:o,options:s,query:c,ref:l,value:u,...d})=>{let p=m(),_=u!=null,[y,b]=g(r??D),x=_?u:y,w=c!=null,[E,O]=g(n??``),k=w?c:E,A=f(e=>{_||b(e),o?.(e)},[_,o]),j=f(e=>{w||O(e),a?.(e)},[w,a]),M=h(()=>new Set(x),[x]),N=h(()=>new Set(s.filter(e=>e.disabled).map(e=>e.value)),[s]),P=h(()=>i==null?S(s,k):s.filter(e=>i(e,k)),[s,k,i]),F=h(()=>({listId:p,filteredOptions:P,query:k,setQuery:j,selectedValues:x,selectedSet:M,disabledSet:N,toggle:e=>{N.has(e)||A(C(x,e))},setSelection:A}),[p,P,k,j,x,M,N,A]);return v(T.Provider,{value:F,children:v(`div`,{ref:l,"data-slot":`selectable-list`,className:e(`flex w-full flex-col gap-3`,t),...d})})},k=({"aria-label":e=`Filter`,ref:t,...n})=>{let{query:r,setQuery:o}=E(`Filter`);return y(a,{ref:t,type:`text`,"data-slot":`selectable-list-filter`,"aria-label":e,value:r,onChange:e=>o(e.target.value),...n,children:[v(b,{}),v(i,{})]})},A=({children:r,className:i,ref:a,...o})=>{let{filteredOptions:s,selectedValues:c,selectedSet:l,setSelection:u}=E(`SelectAll`),d=m(),{allSelected:f,someSelected:p}=w(s,l),h=t({allSelected:f,someSelected:p}),g=s.some(e=>!e.disabled),_=()=>{let e=s.filter(e=>!e.disabled).map(e=>e.value);if(f){let t=new Set(e);u(c.filter(e=>!t.has(e)));return}u([...new Set([...c,...e])])};return y(`label`,{ref:a,htmlFor:d,"data-slot":`selectable-list-select-all`,className:e(`text-strong flex cursor-pointer items-center gap-2 text-sm font-medium font-sans`,i),...o,children:[v(n,{id:d,checked:h,onChange:_,disabled:!g}),r]})};function j(e,t){return`${e}-control-${encodeURIComponent(t)}`}const M=({children:t,className:i,ref:a,value:s,...c})=>{let{listId:l,selectedSet:u,disabledSet:d,toggle:f}=E(`Item`),p=j(l,s),m=u.has(s),h=d.has(s);return v(o,{ref:a,asChild:!0,selected:m,disabled:h,className:e(`px-2 py-1.5 text-sm`,`cursor-pointer aria-disabled:cursor-default`,i),...c,"data-slot":`selectable-list-item`,"data-value":s,children:y(r.Root,{id:p,disabled:h,children:[v(r.Indicator,{role:`gridcell`,children:v(n,{checked:m,onChange:()=>f(s),tabIndex:-1})}),v(r.Content,{role:`gridcell`,children:t})]})})},N=e=>v(r.Label,{"data-slot":`selectable-list-item-title`,...e}),P=e=>v(r.Description,{"data-slot":`selectable-list-item-description`,...e});function F(e){return y(M,{value:e.value,children:[v(N,{children:e.label}),e.description!=null&&v(P,{children:e.description})]})}function I(e,t){let n=[],r=[];for(let i of e){let e=t(i);d(e)&&(n.push(l(e,{key:i.value})),r.push(i))}return{items:n,options:r}}function L(e,t){let{filteredOptions:n,listId:r,toggle:i}=E(e),a=t??F,{items:o,options:s}=h(()=>I(n,a),[n,a]),c=f(e=>{let t=s[e];t!=null&&i(t.value)},[s,i]),l=f(e=>{let t=s[e];return t==null?``:j(r,t.value)},[s,r]),u=f(e=>s[e]?.disabled===!0,[s]);return{isEmpty:o.length===0,isItemDisabled:u,onActivate:c,itemId:l,items:o}}const R={Root:O,Filter:k,SelectAll:A,Viewport:({children:e,ref:t,...n})=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:c}=L(`Viewport`,e);return r?null:v(s,{ref:t,"data-slot":`selectable-list-viewport`,semantics:`grid`,...n,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:c})},VirtualViewport:({children:e,ref:t,...n})=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:s}=L(`VirtualViewport`,e);return r?null:v(c,{ref:t,"data-slot":`selectable-list-viewport`,semantics:`grid`,...n,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:s})},Item:M,ItemTitle:N,ItemDescription:P,Empty:({children:t,className:n,ref:r,...i})=>{let{filteredOptions:a}=E(`Empty`),o=a.length===0;return v(`div`,{ref:r,"data-slot":`selectable-list-empty`,role:`status`,className:e(!o&&`sr-only`,o&&`text-muted border-popover bg-popover flex items-center justify-center rounded-md border px-3 py-8 text-center text-sm`,n),...i,children:o?t:null})}};export{R as SelectableList,S as filterSelectableOptions,x as optionLabelText,w as summarizeSelection,C as toggleSelectionValue};

package/dist/{separator-B5UmkVRL.d.ts → separator-CNDs98Dv.d.ts}

@@ -37,9 +37,9 @@ type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
    */
   orientation?: Orientation;
   /**
-   * If `true`, the separator will be rendered with all accessibility-related attributes and role="separator".
+   * If `true`, the separator renders with all accessibility-related attributes and role="separator".
    * If `false`, the separator is purely decorative and all accessibility-related attributes
-   * are updated so that that the rendered element is removed from the accessibility tree.
+   * are updated so that the rendered element is removed from the accessibility tree.
    *
    * @default false
    */

package/dist/separator.d.ts

@@ -1,2 +1,2 @@
-import { n as Separator, t as HorizontalSeparatorGroup } from "./separator-B5UmkVRL.js";
+import { n as Separator, t as HorizontalSeparatorGroup } from "./separator-CNDs98Dv.js";
 export { HorizontalSeparatorGroup, Separator };

package/dist/{sheet-BxvTfPLM.js → sheet-BOSknSN9.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-IlxHhjPK.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-D-9GIFWb.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{XIcon as f}from"@phosphor-icons/react/X";import{cva as p}from"class-variance-authority";const m=o,h=r,g=l,_=n,v=({className:t,ref:n,...r})=>u(i,{"data-slot":`sheet-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs`,t),...r,ref:n}),y=p(`bg-dialog border-dialog inset-y-0 h-full w-full fixed z-50 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in`,{variants:{side:{left:`data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r`,right:`data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l`}},defaultVariants:{side:`right`}}),b={Root:m,Actions:({children:t,className:n,ref:r,...i})=>u(`div`,{"data-slot":`sheet-actions`,className:e(`flex h-full items-center gap-2`,n),...i,ref:r,children:t}),Body:({className:t,...n})=>u(`div`,{"data-slot":`sheet-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n}),Close:g,CloseIconButton:({size:e=`md`,type:n=`button`,label:r=`Close Sheet`,appearance:i=`ghost`,intent:a=`neutral`,...o})=>u(l,{asChild:!0,children:u(t,{"data-slot":`sheet-close-icon-button`,appearance:i,icon:u(f,{}),intent:a,label:r,size:e,type:n,...o})}),Content:({children:t,className:n,preferredWidth:r=`sm:max-w-[30rem]`,side:i=`right`,ref:o,...s})=>d(_,{children:[u(v,{}),u(a,{"data-slot":`sheet-content`,"data-mantle-modal-content":!0,className:e(y({side:i}),r,n),ref:o,...s,children:t})]}),Description:({className:t,ref:n,...r})=>u(s,{"data-slot":`sheet-description`,ref:n,className:e(`text-body text-sm`,t),...r}),Footer:({className:t,...n})=>u(`div`,{"data-slot":`sheet-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5`,t),...n}),Header:({className:t,...n})=>u(`div`,{"data-slot":`sheet-header`,className:e(`border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4`,`has-[.icon-button]:pr-4`,t),...n}),Title:({className:t,ref:n,...r})=>u(c,{"data-slot":`sheet-title`,ref:n,className:e(`text-strong flex-1 truncate text-lg font-medium`,t),...r}),TitleGroup:({children:t,className:n,ref:r,...i})=>u(`div`,{"data-slot":`sheet-title-group`,className:e(`flex items-center justify-between gap-2`,n),...i,ref:r,children:t}),Trigger:h};export{b as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-CCkGqE1t.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-D-9GIFWb.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{XIcon as f}from"@phosphor-icons/react/X";import{cva as p}from"class-variance-authority";const m=o,h=r,g=l,_=n,v=({className:t,ref:n,...r})=>u(i,{"data-slot":`sheet-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs`,t),...r,ref:n}),y=p(`bg-dialog border-dialog inset-y-0 h-full w-full fixed z-50 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in`,{variants:{side:{left:`data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r`,right:`data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l`}},defaultVariants:{side:`right`}}),b={Root:m,Actions:({children:t,className:n,ref:r,...i})=>u(`div`,{"data-slot":`sheet-actions`,className:e(`flex h-full items-center gap-2`,n),...i,ref:r,children:t}),Body:({className:t,...n})=>u(`div`,{"data-slot":`sheet-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n}),Close:g,CloseIconButton:({size:e=`md`,type:n=`button`,label:r=`Close Sheet`,appearance:i=`ghost`,intent:a=`neutral`,...o})=>u(l,{asChild:!0,children:u(t,{"data-slot":`sheet-close-icon-button`,appearance:i,icon:u(f,{}),intent:a,label:r,size:e,type:n,...o})}),Content:({children:t,className:n,preferredWidth:r=`sm:max-w-[30rem]`,side:i=`right`,ref:o,...s})=>d(_,{children:[u(v,{}),u(a,{"data-slot":`sheet-content`,"data-mantle-modal-content":!0,className:e(y({side:i}),r,n),ref:o,...s,children:t})]}),Description:({className:t,ref:n,...r})=>u(s,{"data-slot":`sheet-description`,ref:n,className:e(`text-body text-sm`,t),...r}),Footer:({className:t,...n})=>u(`div`,{"data-slot":`sheet-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5`,t),...n}),Header:({className:t,...n})=>u(`div`,{"data-slot":`sheet-header`,className:e(`border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4`,`has-[.icon-button]:pr-4`,t),...n}),Title:({className:t,ref:n,...r})=>u(c,{"data-slot":`sheet-title`,ref:n,className:e(`text-strong flex-1 truncate text-lg font-medium`,t),...r}),TitleGroup:({children:t,className:n,ref:r,...i})=>u(`div`,{"data-slot":`sheet-title-group`,className:e(`flex items-center justify-between gap-2`,n),...i,ref:r,children:t}),Trigger:h};export{b as t};

package/dist/sheet.d.ts

@@ -1,5 +1,5 @@
 import { t as ButtonIntent } from "./button-DdSKSj1c.js";
-import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C7vAl6lS.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-DJ7AAgII.js";
 import { a as Root, n as Content$1, o as Title$1, r as Description$1 } from "./dialog-BM4wPCft.js";
 import { ComponentProps, HTMLAttributes } from "react";
 import { VariantProps } from "class-variance-authority";

package/dist/sheet.js

@@ -1 +1 @@
-import{t as e}from"./sheet-BxvTfPLM.js";export{e as Sheet};
+import{t as e}from"./sheet-BOSknSN9.js";export{e as Sheet};