plass-ui 1.0.0 → 1.0.2

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -1,291 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { controlHeightClasses, controlSlots, controlSquareClasses, cx, focusRingClasses, glassClasses, hasContent, iconSizeClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
-const FloatingBarContext = /* @__PURE__ */ React.createContext({
-    value: null,
-    change: () => { },
-    size: 'md',
-    disabled: false
-});
-/** How far off the floor the capsule sits, on the size ladder. */
-const floatGapClasses = {
-    xs: 'pb-2',
-    sm: 'pb-3',
-    md: 'pb-4',
-    lg: 'pb-5',
-    xl: 'pb-6'
-};
-/** The same, with the home indicator added underneath it. */
-const floatGapSafeClasses = {
-    xs: 'pb-[calc(env(safe-area-inset-bottom)+0.5rem)]',
-    sm: 'pb-[calc(env(safe-area-inset-bottom)+0.75rem)]',
-    md: 'pb-[calc(env(safe-area-inset-bottom)+1rem)]',
-    lg: 'pb-[calc(env(safe-area-inset-bottom)+1.25rem)]',
-    xl: 'pb-[calc(env(safe-area-inset-bottom)+1.5rem)]'
-};
-/** The air inside the capsule, around the discs. */
-const capsulePaddingClasses = {
-    default: { xs: 'p-1', sm: 'p-1', md: 'p-1.5', lg: 'p-2', xl: 'p-2.5' },
-    compact: { xs: 'p-0.5', sm: 'p-0.5', md: 'p-1', lg: 'p-1', xl: 'p-1.5' }
-};
-/** Between two discs. */
-const discGapClasses = {
-    default: { xs: 'gap-1', sm: 'gap-1', md: 'gap-1.5', lg: 'gap-2', xl: 'gap-2.5' },
-    compact: { xs: 'gap-0.5', sm: 'gap-0.5', md: 'gap-1', lg: 'gap-1', xl: 'gap-1.5' }
-};
-const positionClasses = {
-    static: '',
-    sticky: 'sticky bottom-0 z-20',
-    fixed: 'fixed inset-x-0 bottom-0 z-30'
-};
-/**
- * The capsule.
- *
- * `rounded-full` is one of the very few places the library allows a pill, and it
- * is allowed for the reason a `PlSegmentedButton`'s groove is: this is not a
- * sheet lying on the page, it is an object floating clear of one. The house
- * fillet is about a sheet with its corners cut, and a sheet that is not on
- * anything has no corners to cut.
- */
-const capsuleClasses = {
-    solid: /* @__PURE__ */ [
-        glassClasses,
-        'bg-(--plass-glass-press)',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: ''
-};
-/**
- * The key that slides.
- *
- * Always the family's own gradient with that family's tinted shadow under it,
- * whatever the capsule is made of — a key of tinted glass riding in a clear
- * sheet is the design language's own sentence, and `variant` is a statement
- * about the *capsule*. A `ghost` bar is a row of discs with no sheet behind
- * them; the one that is current is still the one that is current.
- *
- * `left`, `top`, `width` and `height` rather than a `translate`: the key is
- * measured off the disc it belongs under, and moving it by its own box is what
- * keeps every glyph in the row unresampled while it travels. `left` and not
- * `inset-inline-start`, because `offsetLeft` is a distance from the left edge
- * and stays one under RTL — pairing a physical measurement with a logical
- * property is what would break the direction.
- *
- * `data-quiet` is the current destination being unavailable, which is the one
- * state the key cannot read off its own props: the light goes out on the key
- * the same way it goes out on the disc over it, or a disabled destination is a
- * dimmed glyph on a fully lit gradient.
- */
-const keyClasses = /* @__PURE__ */ [
-    'pointer-events-none absolute rounded-full',
-    'top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)',
-    '[background-image:var(--p-fill)]',
-    '[box-shadow:var(--plass-shadow-1),var(--p-lift)]',
-    'data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]',
-    '[transition-property:left,top,width,height,opacity,filter]',
-    '[transition-timing-function:var(--plass-ease)]',
-    // Nothing until the first measurement has landed; the house duration from
-    // then on.
-    '[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]'
-].join(' ');
-/**
- * A row of round destinations floating clear of the bottom edge of the window.
- *
- * The other half of `PlBottomNavigation`, and a different object rather than a
- * variant of one: that bar is **attached** to the edge of the window — full
- * width, a hairline against the content, its sheet running under the home
- * indicator — and this one is **not part of the page at all**. Everything that
- * follows comes from that one difference: the capsule, the gap under it, the
- * shadow it defaults to, and the pill corners it is allowed.
- *
- * Every destination is a disc with a glyph in it and no name drawn, which is
- * what keeps a row of five inside the width of a phone. The name is still
- * required and still read out — a row of glyphs with no accessible names is the
- * defect `PlIconButton`'s `label` exists to make impossible, and it would be
- * exactly as easy to ship here.
- *
- * The current destination is a key of **tinted glass** riding in the clear
- * sheet, which is the design language's own sentence with nothing added to it.
- * The key is **one element that travels**, measured off whichever disc is
- * current and animated the way a `PlSegmentedButton`'s tile is — not a fill
- * that appears on one disc while it disappears from another. Two discs
- * cross-fading is two objects; a bar with a key in it has one, and where it
- * goes is the whole of what the component has to say.
- *
- * Nothing is transformed: the key is an empty box, and no glyph is resampled
- * while it travels. That is what lets the house no-transform rule survive a
- * component whose entire point is that something moves.
- *
- * It reads `controlSlots` and not the `surfaceSlots` every other container
- * takes, which is the one place this bar is not a container: the slots a
- * container is given are deliberately undyed — no `--p-fill`, no `--p-on-solid`
- * and no `--p-lift` — and the key is made of all three. Asking a container's
- * slot set for a control's colours is asking for `var(--p-fill)` to resolve to
- * nothing, which is a `background-image` the browser drops on the floor and a
- * current destination that looks exactly like the four beside it.
- */
-export const PlFloatingBottomNavigation = /* @__PURE__ */ React.forwardRef(function PlFloatingBottomNavigation({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 2, value: valueProp, defaultValue = null, onValueChange, position = 'fixed', safeArea = true, disabled = false, label, render, className, style, children, ...props }, ref) {
-    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
-    const controlled = valueProp !== undefined;
-    const value = controlled ? valueProp : uncontrolled;
-    const capsuleRef = React.useRef(null);
-    const keyRef = React.useRef(null);
-    /**
-     * Writes the current disc's box onto the key as four custom properties.
-     *
-     * Written straight to the element rather than held in state, exactly as
-     * `PlSegmentedButton` writes its tile: a `setState` here would re-render
-     * every disc on every resize, and nothing in the tree depends on the numbers
-     * except four CSS declarations.
-     *
-     * `animate` is what separates the two callers. A change of destination is the
-     * thing this exists to animate; a resize is the capsule moving under a key
-     * that was already in the right place, and animating that is a key that lags
-     * behind the window being dragged.
-     */
-    const measure = React.useCallback((animate) => {
-        const capsule = capsuleRef.current;
-        const disc = keyRef.current;
-        if (!capsule || !disc) {
-            return;
-        }
-        const current = capsule.querySelector('[data-disc][data-current]');
-        if (!current) {
-            return;
-        }
-        // A key that has only just mounted has nowhere to travel *from*, so its
-        // first placement is instant however it was asked for — that is what makes
-        // the first destination appear under its disc rather than fly in from the
-        // left edge of the capsule.
-        const instant = !animate || !disc.hasAttribute('data-ready');
-        if (instant) {
-            disc.removeAttribute('data-ready');
-        }
-        // `offsetLeft`/`offsetTop` are measured from the offsetParent's padding
-        // edge, and `left`/`top` on an absolutely positioned child resolve against
-        // the same box — so the capsule's own padding is already accounted for and
-        // must not be subtracted again.
-        disc.style.setProperty('--p-disc-x', `${current.offsetLeft}px`);
-        disc.style.setProperty('--p-disc-y', `${current.offsetTop}px`);
-        disc.style.setProperty('--p-disc-w', `${current.offsetWidth}px`);
-        disc.style.setProperty('--p-disc-h', `${current.offsetHeight}px`);
-        // Read off the disc rather than off a prop, because the bar does not know
-        // which of its children is unavailable — the items are `children` and the
-        // disabled one is whichever of them said so. The same query that measures
-        // the box answers it, so there is no second pass.
-        disc.toggleAttribute('data-quiet', current.hasAttribute('data-disabled'));
-        if (instant) {
-            // Reading a layout property commits the four writes above while the
-            // duration is still 0ms, so turning the transition back on cannot
-            // animate a move that has already happened.
-            void disc.offsetWidth;
-        }
-        disc.setAttribute('data-ready', '');
-    }, []);
-    // Before the browser paints, or the key is visibly at nothing for a frame.
-    React.useLayoutEffect(() => {
-        measure(true);
-    }, [measure, value, variant, size, density, disabled, children]);
-    React.useEffect(() => {
-        const capsule = capsuleRef.current;
-        if (!capsule || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const observer = new ResizeObserver(() => measure(false));
-        observer.observe(capsule);
-        return () => observer.disconnect();
-    }, [measure]);
-    const change = React.useCallback((next) => {
-        if (!controlled) {
-            setUncontrolled(next);
-        }
-        onValueChange?.(next);
-    }, [controlled, onValueChange]);
-    const context = React.useMemo(() => ({ value: value ?? null, change, size, disabled }), [value, change, size, disabled]);
-    const classNames = cx('flex w-full justify-center px-4', 
-    // The strip the capsule is centred in spans the window, and a transparent
-    // band across the bottom of a page that swallowed presses would be a band
-    // nobody could scroll through. Only the capsule takes them back.
-    position === 'static' ? '' : 'pointer-events-none', safeArea ? floatGapSafeClasses[size] : floatGapClasses[size], positionClasses[position], className);
-    return useRender({
-        render: render ?? _jsx("nav", {}),
-        ref,
-        props: {
-            'aria-label': label,
-            className: classNames,
-            // `controlSlots` and not `surfaceSlots`: the capsule is undyed like every
-            // other container, but the key riding in it is a control's surface and is
-            // made of three slots a container's set does not carry.
-            style: { ...controlSlots(color, elevation, 'solid'), ...style },
-            children: (_jsx(FloatingBarContext.Provider, { value: context, children: _jsxs("div", { ref: capsuleRef, className: cx(
-                    // `relative` is load-bearing twice over: it is what makes the
-                    // capsule the discs' offsetParent, and what the key is positioned
-                    // in.
-                    'pointer-events-auto relative inline-flex items-center rounded-full', capsuleClasses[variant], capsulePaddingClasses[density][size], discGapClasses[density][size], transitionClasses), children: [value !== null && value !== undefined ? (_jsx("span", { ref: keyRef, "aria-hidden": "true", className: keyClasses })) : null, children] }) })),
-            ...props
-        }
-    });
-});
-/**
- * One destination, as a disc.
- *
- * It has no `size`, no `color` and no `variant` of its own: all three belong to
- * the bar, which is the only place they can be set once and mean the same thing
- * for every disc.
- */
-export const PlFloatingBottomNavigationItem = /* @__PURE__ */ React.forwardRef(function PlFloatingBottomNavigationItem({ value, icon, href, disabled: disabledProp = false, className, children, onClick, ...props }, ref) {
-    const bar = React.useContext(FloatingBarContext);
-    const disabled = disabledProp || bar.disabled;
-    const selected = bar.value !== null && bar.value === value;
-    const classNames = cx(
-    // `z-10` and a stacking context of its own: the key is painted behind the
-    // discs, and without this it would cover the glyph it is under.
-    'relative z-10 inline-flex shrink-0 items-center justify-center rounded-full', controlHeightClasses[bar.size], controlSquareClasses[bar.size], '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]', transitionClasses, 
-    // Offset rather than inset: a disc inside a capsule that is only padding has
-    // room around it, and a flush ring on a circle is the circle's own edge
-    // thickening — which is the one shape where that reads as a border rather
-    // than as focus.
-    focusRingClasses, disabled
-        ? 'cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)'
-        : selected
-            ? // No surface of its own. What is under the glyph is the key, which
-                // belongs to the bar and is the one thing in the row that travels;
-                // a disc that drew its own fill would be a second key appearing
-                // wherever the first one had just left.
-                'cursor-pointer text-(--p-on-solid)'
-            : 'cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)', className);
-    const body = (_jsxs(_Fragment, { children: [hasContent(icon) ? (_jsx("span", { className: cx('flex shrink-0 items-center justify-center', iconSizeClasses[bar.size]), children: icon })) : null, hasContent(children) ? _jsx("span", { className: srOnlyClasses, children: children }) : null] }));
-    /**
-     * The hooks the key is measured from.
-     *
-     * Attributes rather than a ref per disc, for the reason a `PlSegment` carries
-     * `data-segment`: a ref array would mean keeping it in step with however the
-     * caller composed the items — through a `.map()`, through a fragment, through
-     * a component of their own — and an attribute is the version of that which
-     * cannot fall out of step.
-     */
-    const discAttributes = {
-        'data-disc': '',
-        'data-current': selected ? '' : undefined,
-        'data-disabled': disabled ? '' : undefined
-    };
-    const press = (event) => {
-        if (disabled) {
-            event.preventDefault();
-            return;
-        }
-        bar.change(value);
-        onClick?.(event);
-    };
-    if (href) {
-        return (_jsx("a", { ref: ref, href: disabled ? undefined : href, "aria-current": selected ? 'page' : undefined, "aria-disabled": disabled || undefined, ...discAttributes, className: classNames, onClick: press, ...props, children: body }));
-    }
-    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, "aria-current": selected ? 'page' : undefined, ...discAttributes, className: classNames, onClick: press, ...props, children: body }));
-});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useRender as r}from"@base-ui/react/use-render";import{controlHeightClasses as i,controlSlots as l,controlSquareClasses as o,cx as n,focusRingClasses as d,glassClasses as c,hasContent as p,iconSizeClasses as u,srOnlyClasses as f,transitionClasses as m}from"../../internal/styles.js";const g=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},b={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},h={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},x={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},y={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},w={solid:/* @__PURE__ */[c,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},N=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:i="md",color:o="primary",density:d="default",elevation:c=2,value:p,defaultValue:u=null,onValueChange:f,position:k="fixed",safeArea:z=!0,disabled:j=!1,label:P,render:C,className:A,style:R,children:F,...q},B){const[$,E]=s.useState(u),I=void 0!==p,L=I?p:$,O=s.useRef(null),S=s.useRef(null),V=s.useCallback(e=>{const t=O.current,a=S.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{V(!0)},[V,L,a,i,d,j,F]),s.useEffect(()=>{const e=O.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>V(!1));return t.observe(e),()=>t.disconnect()},[V]);const W=s.useCallback(e=>{I||E(e),f?.(e)},[I,f]),D=s.useMemo(()=>({value:L??null,change:W,size:i,disabled:j}),[L,W,i,j]),H=n("flex w-full justify-center px-4","static"===k?"":"pointer-events-none",z?b[i]:v[i],y[k],A);return r({render:C??e("nav",{}),ref:B,props:{"aria-label":P,className:H,style:{...l(o,c,"solid"),...R},children:e(g.Provider,{value:D,children:t("div",{ref:O,className:n("pointer-events-auto relative inline-flex items-center rounded-full",w[a],h[d][i],x[d][i],m),children:[null!=L?e("span",{ref:S,"aria-hidden":"true",className:N}):null,F]})}),...q}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:l,href:c,disabled:v=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(g),k=v||N.disabled,z=null!==N.value&&N.value===r,j=n("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",i[N.size],o[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":z?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[p(l)?e("span",{className:n("flex shrink-0 items-center justify-center",u[N.size]),children:l}):null,p(h)?e("span",{className:f,children:h}):null]}),C={"data-disc":"","data-current":z?"":void 0,"data-disabled":k?"":void 0},press=e=>{k?e.preventDefault():(N.change(r),x?.(e))};return c?e("a",{ref:w,href:k?void 0:c,"aria-current":z?"page":void 0,"aria-disabled":k||void 0,...C,className:j,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:k,"aria-current":z?"page":void 0,...C,className:j,onClick:press,...y,children:P})});

package/dist/components/floating-bottom-navigation/index.js

@@ -1 +1 @@
-export { PlFloatingBottomNavigation, PlFloatingBottomNavigationItem } from './PlFloatingBottomNavigation.js';
+export{PlFloatingBottomNavigation,PlFloatingBottomNavigationItem}from"./PlFloatingBottomNavigation.js";

package/dist/components/grid/PlGrid.js

@@ -1,51 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { alignContentClasses, alignItemsClasses, columnCount, justifyClasses, responsiveSlots, spacingValue, withBaseline } from '../../internal/grid.js';
-import { cx } from '../../internal/styles.js';
-const DEFAULT_COLUMNS = 12;
-/** Two Tailwind steps, and the reason a bare `PlGrid` already looks like one. */
-const DEFAULT_SPACING = 2;
-/**
- * A twelve-column row, and the parent every `PlGridItem` needs.
- *
- * It owns the three numbers an item cannot know on its own — how many columns
- * there are and how wide the two gutters are — and hands them down as inherited
- * custom properties rather than through a React context. That is not a
- * shortcut: the values are responsive, and a media query can change an inherited
- * custom property without React hearing about it, so the column count an item
- * lays itself out against is always the one that is actually on screen. A
- * context would have to re-render the tree at every breakpoint to say the same
- * thing.
- *
- * It draws nothing, and it takes no `variant`, `color`, `elevation`, `size` or
- * `density`. A grid is not a surface — it is the arrangement of the surfaces
- * inside it — and there is no padding here either: the gutter round a page is a
- * `PlContainer`'s and the padding round content is a `PlCard`'s, and a grid that
- * had a track of its own would be a third one to keep in step. `spacing` is the
- * only measurement it owns, and it is the space *between* items.
- *
- * Nesting is a `PlGrid` inside a `PlGridItem`, not an item that is also a grid:
- * the inner grid re-declares the column count for its own subtree while the item
- * around it keeps the width the outer grid gave it.
- */
-export const PlGrid = /* @__PURE__ */ React.forwardRef(function PlGrid({ columns, spacing, rowSpacing, columnSpacing, justify, alignItems, alignContent, wrap = true, render, className, style, children, ...props }, ref) {
-    const classNames = cx('plass-grid flex', wrap ? 'flex-wrap' : 'flex-nowrap', 
-    // Both gutters are read from the slots below, which is what lets a media
-    // query change them without React re-rendering.
-    'gap-x-(--p-gap-x) gap-y-(--p-gap-y)', justify ? justifyClasses[justify] : '', alignItems ? alignItemsClasses[alignItems] : '', alignContent ? alignContentClasses[alignContent] : '', className);
-    return useRender({
-        render,
-        ref,
-        props: {
-            className: classNames,
-            style: {
-                ...responsiveSlots('cols', withBaseline(columns, DEFAULT_COLUMNS), columnCount),
-                ...responsiveSlots('gap-x', withBaseline(columnSpacing ?? spacing, DEFAULT_SPACING), spacingValue),
-                ...responsiveSlots('gap-y', withBaseline(rowSpacing ?? spacing, DEFAULT_SPACING), spacingValue),
-                ...style
-            },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as a,alignItemsClasses as n,columnCount as s,justifyClasses as p,responsiveSlots as i,spacingValue as l,withBaseline as t}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGrid=/* @__PURE__ */r.forwardRef(function PlGrid({columns:r,spacing:c,rowSpacing:g,columnSpacing:m,justify:f,alignItems:d,alignContent:u,wrap:x=!0,render:y,className:w,style:j,children:h,...G},N){const P=o("plass-grid flex",x?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",f?p[f]:"",d?n[d]:"",u?a[u]:"",w);return e({render:y,ref:N,props:{className:P,style:{...i("cols",t(r,12),s),...i("gap-x",t(m??c,2),l),...i("gap-y",t(g??c,2),l),...j},children:h,...G}})});

package/dist/components/grid/PlGridItem.js

@@ -1,34 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { alignSelfClasses, offsetValue, responsiveSlots, spanValue } from '../../internal/grid.js';
-import { cx } from '../../internal/styles.js';
-/**
- * One cell of a `PlGrid`.
- *
- * It is a width and nothing else — no sheet, no padding, no typography. What
- * goes inside brings its own, which is the whole reason a cell and a `PlCard`
- * are two components: wrapping something in a layout must not change how it
- * looks, and a cell that drew a sheet would make `span` a visual decision.
- *
- * The column count it divides by is inherited from the grid as a custom
- * property, so an item with no `PlGrid` above it falls back to twelve rather
- * than breaking — but it will be a lone width in a plain parent, which is not a
- * layout. Always wrap.
- */
-export const PlGridItem = /* @__PURE__ */ React.forwardRef(function PlGridItem({ span, offset, alignSelf, render, className, style, children, ...props }, ref) {
-    const classNames = cx('plass-grid-item', alignSelf ? alignSelfClasses[alignSelf] : '', className);
-    return useRender({
-        render,
-        ref,
-        props: {
-            className: classNames,
-            style: {
-                ...responsiveSlots('span', span, spanValue),
-                ...responsiveSlots('offset', offset, offsetValue),
-                ...style
-            },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as t,responsiveSlots as n,spanValue as i}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGridItem=/* @__PURE__ */e.forwardRef(function PlGridItem({span:e,offset:a,alignSelf:l,render:f,className:m,style:c,children:d,...p},u){const g=o("plass-grid-item",l?s[l]:"",m);return r({render:f,ref:u,props:{className:g,style:{...n("span",e,i),...n("offset",a,t),...c},children:d,...p}})});

package/dist/components/grid/index.js

@@ -1,2 +1 @@
-export { PlGrid } from './PlGrid.js';
-export { PlGridItem } from './PlGridItem.js';
+export{PlGrid}from"./PlGrid.js";export{PlGridItem}from"./PlGridItem.js";

package/dist/components/highlight/PlHighlight.js

@@ -1,185 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { transitionClasses } from '../../internal/styles.js';
-/**
- * There is no `size` here on purpose, and it is the one prop a reader will look
- * for. A mark sits inside running text and has to be the size of the text it is
- * inside; a `size` prop would only offer ways to be wrong.
- */
-const variantClasses = {
-    solid: '[background-image:var(--p-fill)] text-(--p-on-solid)',
-    glass: 'border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]',
-    // Both properties are still set. A `<mark>` arrives from the browser's own
-    // stylesheet with a yellow background and black ink, and "no surface" has to
-    // be said out loud or it turns into the UA's surface.
-    ghost: 'bg-transparent text-(--p-accent)'
-};
-const weightClasses = {
-    regular: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold'
-};
-/** Letters, digits and underscores in any script — what `wholeWord` counts. */
-const wordCharacter = /[\p{L}\p{N}_]/u;
-/** The characters a regular expression treats as syntax. */
-function escapeRegExp(text) {
-    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-/**
- * Turns the `query` prop into one expression, or `null` when there is nothing to
- * look for — an empty search box should leave the text exactly as it was, not
- * mark every character in it.
- *
- * Terms are sorted longest first because alternation in a regular expression is
- * first-match-wins: without it `['data', 'database']` would mark `data` and
- * stop, leaving `base` outside the mark.
- */
-function buildPattern(query, caseSensitive) {
-    if (query instanceof RegExp) {
-        // Always a copy, even when the flags are already right. A global regular
-        // expression carries a `lastIndex` that `markString` moves, and mutating one
-        // the caller is holding — and may be matching with elsewhere — is not this
-        // component's to do.
-        return new RegExp(query.source, query.global ? query.flags : `${query.flags}g`);
-    }
-    const terms = (Array.isArray(query) ? query : [query])
-        .map((term) => term.trim())
-        .filter(Boolean)
-        .sort((a, b) => b.length - a.length);
-    if (terms.length === 0) {
-        return null;
-    }
-    return new RegExp(terms.map(escapeRegExp).join('|'), caseSensitive ? 'gu' : 'giu');
-}
-/**
- * Whether a match is a whole word.
- *
- * Checked here rather than with a lookbehind in the pattern, because lookbehind
- * is the one regular-expression feature this library would have to think about
- * shipping — Safari only grew it in 16.4. Two character tests cost nothing and
- * work everywhere.
- */
-function isWholeWord(text, start, end) {
-    const before = start > 0 ? text[start - 1] : '';
-    const after = end < text.length ? text[end] : '';
-    return !wordCharacter.test(before) && !wordCharacter.test(after);
-}
-/**
- * Splits one string into plain runs and marked ones.
- *
- * Returns the string itself when nothing matched, so an unmatched text node
- * stays a text node rather than becoming an array of one.
- */
-function markString(text, pattern, wholeWord, mark) {
-    pattern.lastIndex = 0;
-    const parts = [];
-    let cursor = 0;
-    let match;
-    while ((match = pattern.exec(text)) !== null) {
-        // A pattern that can match nothing — `/x*/` — would otherwise never advance.
-        if (match[0] === '') {
-            pattern.lastIndex += 1;
-            continue;
-        }
-        const start = match.index;
-        const end = start + match[0].length;
-        if (wholeWord && !isWholeWord(text, start, end)) {
-            continue;
-        }
-        if (start > cursor) {
-            parts.push(text.slice(cursor, start));
-        }
-        parts.push(mark(match[0], `${start}`));
-        cursor = end;
-    }
-    if (parts.length === 0) {
-        return text;
-    }
-    if (cursor < text.length) {
-        parts.push(text.slice(cursor));
-    }
-    return parts;
-}
-/**
- * Walks the tree, marking the text in it and leaving everything else alone.
- *
- * The alternative — requiring `children` to be a string — is what most libraries
- * do, and it fails on the first search result that has a `<strong>` in it. An
- * element is cloned with its children marked, which keeps its type, its props
- * and its key; anything that is not a string, a number, an array or an element
- * with children is returned untouched.
- */
-function markNode(node, pattern, wholeWord, mark) {
-    if (typeof node === 'string') {
-        return markString(node, pattern, wholeWord, mark);
-    }
-    if (typeof node === 'number') {
-        return markString(String(node), pattern, wholeWord, mark);
-    }
-    if (Array.isArray(node)) {
-        return React.Children.map(node, (child) => markNode(child, pattern, wholeWord, mark));
-    }
-    if (React.isValidElement(node)) {
-        const children = node.props.children;
-        // A component whose children are a render prop, and every void element:
-        // there is no text in either, and cloning one with a `children` it never
-        // declared is how an `<input>` ends up with a child.
-        if (children === undefined || typeof children === 'function') {
-            return node;
-        }
-        return React.cloneElement(node, undefined, markNode(children, pattern, wholeWord, mark));
-    }
-    return node;
-}
-/**
- * Marks the words a reader is looking for, inside text they were already
- * reading.
- *
- * The component is the search, not just the styling: `query` is what a search
- * box holds, and everything about *how* the matching is done — case, whole
- * words, a regular expression — is a prop rather than something a caller has to
- * pre-compute into a list of offsets.
- *
- * The mark is a real `<mark>`, which is the element for "text of relevance to
- * the reader" and is announced as such. That has one consequence worth knowing:
- * marking eleven words in a paragraph tells a screen reader that eleven things
- * are important, which is a way of saying nothing. A highlight is for a handful
- * of matches.
- *
- * Nothing here is stateful and nothing measures — the whole component is a pure
- * function of `children` and `query`, so it re-marks on its own the moment the
- * search box changes.
- */
-export const PlHighlight = /* @__PURE__ */ React.forwardRef(function PlHighlight({ query, variant = 'solid', color = 'warning', caseSensitive = false, wholeWord = false, underline = false, weight, className, style, children, ...props }, ref) {
-    const pattern = React.useMemo(() => buildPattern(query, caseSensitive), [query, caseSensitive]);
-    const markClasses = [
-        // A hair of padding so the surface does not sit flush against the letters,
-        // and the same hair back out as a negative margin so the marked line is the
-        // same length as it was before. A mark must not move the text around it.
-        '-mx-0.5 rounded-[0.25rem] px-0.5',
-        // A mark that wraps across two lines gets its corners on both fragments
-        // rather than one long box with two square ends.
-        'box-decoration-clone',
-        variantClasses[variant],
-        // `decoration-2` and the offset so the rule sits under the descenders rather
-        // than through them, which is the whole difference between an underline and
-        // a strikethrough that missed.
-        underline ? 'underline decoration-2 underline-offset-2' : '',
-        weight ? weightClasses[weight] : '',
-        transitionClasses
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const marked = pattern
-        ? markNode(children, pattern, wholeWord, (matched, key) => (_jsx("mark", { className: markClasses, children: matched }, key)))
-        : children;
-    return (_jsx("span", { ref: ref, className: className, style: {
-            '--p-fill': `var(--plass-${color}-fill)`,
-            '--p-on-solid': `var(--plass-${color}-on-solid)`,
-            '--p-accent': `var(--plass-${color}-accent)`,
-            '--p-soft': `var(--plass-${color}-soft)`,
-            '--p-line': `var(--plass-${color}-line)`,
-            ...style
-        }, ...props, children: marked }));
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{transitionClasses as r}from"../../internal/styles.js";const t={solid:"[background-image:var(--p-fill)] text-(--p-on-solid)",glass:"border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]",ghost:"bg-transparent text-(--p-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,n,r){const t=n>0?e[n-1]:"",o=r<e.length?e[r]:"";return!l.test(t)&&!l.test(o)}function markString(e,n,r,t){n.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=n.exec(e));){if(""===l[0]){n.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;r&&!isWholeWord(e,s,a)||(s>i&&o.push(e.slice(i,s)),o.push(t(l[0],`${s}`)),i=a)}return 0===o.length?e:(i<e.length&&o.push(e.slice(i)),o)}function markNode(e,r,t,o){if("string"==typeof e)return markString(e,r,t,o);if("number"==typeof e)return markString(String(e),r,t,o);if(Array.isArray(e))return n.Children.map(e,e=>markNode(e,r,t,o));if(n.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:n.cloneElement(e,void 0,markNode(l,r,t,o))}return e}export const PlHighlight=/* @__PURE__ */n.forwardRef(function PlHighlight({query:l,variant:i="solid",color:s="warning",caseSensitive:a=!1,wholeWord:c=!1,underline:p=!1,weight:u,className:d,style:f,children:g,...m},h){const x=n.useMemo(()=>function buildPattern(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const r=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===r.length?null:new RegExp(r.map(escapeRegExp).join("|"),n?"gu":"giu")}(l,a),[l,a]),b=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",t[i],p?"underline decoration-2 underline-offset-2":"",u?o[u]:"",r].filter(Boolean).join(" "),v=x?markNode(g,x,c,(n,r)=>e("mark",{className:b,children:n},r)):g;return e("span",{ref:h,className:d,style:{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-line":`var(--plass-${s}-line)`,...f},...m,children:v})});

package/dist/components/highlight/index.js

@@ -1 +1 @@
-export { PlHighlight } from './PlHighlight.js';
+export{PlHighlight}from"./PlHighlight.js";