plass-ui 1.0.0 → 1.0.2

package/dist/components/otp-field/PlOtpField.js

@@ -1,109 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Field } from '@base-ui/react/field';
-import { OTPField } from '@base-ui/react/otp-field';
-import { cx, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, hasContent, metaTextClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/** How many slots a code may have. Two is the shortest thing worth splitting. */
-const MIN_LENGTH = 2;
-const MAX_LENGTH = 12;
-/**
- * A slot's box.
- *
- * Its own ladder rather than `controlHeightClasses`, for the reason a tick box
- * has one: a slot is not a control in a row of controls, it is a character
- * standing on its own, and an `md` slot the height of an `md` `PlButton` would
- * be too small to read a code out of across a desk. Every step is taller than it
- * is wide, which is what makes a row of them read as places for one character
- * each rather than as a row of tiny fields.
- */
-const slotSizeClasses = {
-    xs: 'h-7 w-6',
-    sm: 'h-8 w-7',
-    md: 'h-10 w-8',
-    lg: 'h-12 w-10',
-    xl: 'h-14 w-12'
-};
-/**
- * And its own radius, for the reason a tick box has one.
- *
- * `radiusClasses` is a percentage of a *control's height*, which is a cut corner
- * on something wide and a lozenge on something nearly square: `md` is 12px, and
- * a 12px corner on a 32px-wide box is most of the way to a pill. These are
- * ~22% of the slot's width instead, which is the same amount of cut on this
- * shape — a sheet with the corners taken off, never a pill.
- */
-const slotRadiusClasses = {
-    xs: 'rounded-[0.3125rem]',
-    sm: 'rounded-[0.375rem]',
-    md: 'rounded-[0.4375rem]',
-    lg: 'rounded-[0.5625rem]',
-    xl: 'rounded-[0.6875rem]'
-};
-/**
- * And its own type scale, two steps up the control ladder. A verification code
- * is read out loud off a phone and typed with the other hand; it is the one
- * piece of text in a form that should be bigger than the label above it.
- */
-const slotTextClasses = {
-    xs: 'text-[0.8125rem]',
-    sm: 'text-[0.9375rem]',
-    md: 'text-[1.0625rem]',
-    lg: 'text-[1.25rem]',
-    xl: 'text-[1.5rem]'
-};
-/**
- * Between the slots, and the only thing `density` touches here — spacing, never
- * the box and never the type scale, exactly as everywhere else in the library.
- */
-const slotGapClasses = {
-    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' }
-};
-/** `charset` is the library's word; Base UI's is `validationType`. */
-const validationTypes = {
-    numeric: 'numeric',
-    alpha: 'alpha',
-    alphanumeric: 'alphanumeric',
-    any: 'none'
-};
-/**
- * A row of one-character slots: a PIN, a texted verification code, an invite
- * key.
- *
- * Base UI owns everything that makes this harder than it looks — one hidden
- * value behind however many inputs, paste spread across the slots from wherever
- * the caret was, backspace stepping back a box, a click landing on the first
- * empty slot rather than the one under the pointer, and the autofill hook that
- * lets a phone offer the code straight from the message.
- *
- * What is here is the ladder a slot is drawn on and the field shell it shares
- * with `PlTextField` and `PlSelect` — a slot is a field-shaped box, and a form
- * holding both should not look like two form kits stacked on each other.
- */
-export const PlOtpField = /* @__PURE__ */ React.forwardRef(function PlOtpField({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, length = 6, charset = 'numeric', mask = false, groupSize, separator = '–', value, defaultValue, onValueChange, onComplete, onValueInvalid, autoSubmit = false, label, description, error, invalid, name, required = false, disabled = false, readOnly = false, autoFocus = false, className, style, ...props }, ref) {
-    const slots = Math.min(MAX_LENGTH, Math.max(MIN_LENGTH, Math.round(length)));
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    // Invalid re-points the whole slot family at `danger`, exactly as on
-    // PlTextField, so the edge, the ring, the caret and the message all turn over
-    // together and no state needs tokens of its own.
-    const family = isInvalid ? 'danger' : color;
-    const slotClassNames = cx(
-    // `font-family` rather than the `font` shorthand: the shorthand would take
-    // the inherited font *size* with it and undo the ladder set on the next
-    // line.
-    'text-center font-medium [font-family:inherit]', slotSizeClasses[size], slotTextClasses[size], slotRadiusClasses[size], transitionClasses, 'caret-(--p-accent) selection:bg-(--p-soft-press)', 
-    // `focus` rather than `focus-visible`: a slot is put in focus by clicking it
-    // as often as by typing into it, and the ring is the only thing saying which
-    // character the next keystroke lands on.
-    'focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]', 'focus:[transition-duration:0ms]', 
-    // An if/else rather than stacked variants: two Tailwind classes of equal
-    // specificity resolve by their order in the generated stylesheet.
-    disabled
-        ? disabledClasses[variant]
-        : readOnly
-            ? fieldReadOnlyClasses[variant]
-            : fieldRestClasses[variant]);
-    const separatorEvery = groupSize && groupSize > 0 ? Math.round(groupSize) : 0;
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: cx('inline-flex flex-col align-top', stackGapClasses[size], className), style: { ...surfaceSlots(family, elevation), ...style }, children: [hasContent(label) ? (_jsx(Field.Label, { className: cx(metaTextClasses[size], 'font-medium', disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'), children: label })) : null, _jsx(OTPField.Root, { ref: ref, length: slots, validationType: validationTypes[charset], mask: mask, name: name, required: required, disabled: disabled, readOnly: readOnly, autoSubmit: autoSubmit, value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), onValueComplete: (next) => onComplete?.(next), onValueInvalid: (next) => onValueInvalid?.(next), className: cx('flex items-center', slotGapClasses[density][size]), ...props, children: Array.from({ length: slots }, (_, index) => (_jsxs(React.Fragment, { children: [separatorEvery > 0 && index > 0 && index % separatorEvery === 0 ? (_jsx("span", { "aria-hidden": "true", className: cx('select-none px-0.5 text-(--plass-muted-fg)', slotTextClasses[size]), children: separator })) : null, _jsx(OTPField.Input, { className: slotClassNames, autoFocus: autoFocus && index === 0 })] }, index))) }), hasContent(description) ? (_jsx(Field.Description, { className: cx(metaTextClasses[size], 'text-(--plass-muted-fg)'), children: description })) : null, hasError ? (_jsx(Field.Error, { match: true, className: cx(metaTextClasses[size], 'text-(--p-accent)'), children: error })) : null] }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as l}from"@base-ui/react/field";import{OTPField as r}from"@base-ui/react/otp-field";import{cx as n,disabledClasses as s,fieldReadOnlyClasses as i,fieldRestClasses as o,hasContent as m,metaTextClasses as d,stackGapClasses as u,surfaceSlots as c,transitionClasses as p}from"../../internal/styles.js";const f={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={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={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:b="glass",size:v="md",color:N="primary",density:V="default",elevation:w=0,length:F=6,charset:j="numeric",mask:C=!1,groupSize:M,separator:O="–",value:I,defaultValue:R,onValueChange:S,onComplete:k,onValueInvalid:q,autoSubmit:z=!1,label:P,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,style:J,...K},Q){const U=Math.min(12,Math.max(2,Math.round(F))),W=m(A),X=D??W,Y=X?"danger":N,Z=n("text-center font-medium [font-family:inherit]",f[v],g[v],x[v],p,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",T?s[b]:B?i[b]:o[b]),$=M&&M>0?Math.round(M):0;return a(l.Root,{disabled:T,invalid:X,className:n("inline-flex flex-col align-top",u[v],H),style:{...c(Y,w),...J},children:[m(P)?e(l.Label,{className:n(d[v],"font-medium",T?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:P}):null,e(r.Root,{ref:Q,length:U,validationType:y[j],mask:C,name:E,required:L,disabled:T,readOnly:B,autoSubmit:z,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>k?.(e),onValueInvalid:e=>q?.(e),className:n("flex items-center",h[V][v]),...K,children:Array.from({length:U},(l,s)=>a(t.Fragment,{children:[$>0&&s>0&&s%$===0?e("span",{"aria-hidden":"true",className:n("select-none px-0.5 text-(--plass-muted-fg)",g[v]),children:O}):null,e(r.Input,{className:Z,autoFocus:G&&0===s})]},s))}),m(_)?e(l.Description,{className:n(d[v],"text-(--plass-muted-fg)"),children:_}):null,W?e(l.Error,{match:!0,className:n(d[v],"text-(--p-accent)"),children:A}):null]})});

package/dist/components/otp-field/index.js

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

package/dist/components/overlay/PlOverlay.js

@@ -1,77 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import { surfaceSlots } from '../../internal/styles.js';
-/**
- * The four tones.
- *
- * `scrim` matches `PlModal`'s backdrop exactly — the two have to, or a modal
- * opened over an overlay would show a seam. `clear` draws nothing and still
- * covers the viewport, so it goes on catching pointer events.
- */
-const toneClasses = {
-    scrim: 'bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]',
-    glass: /* @__PURE__ */ [
-        '[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]',
-        '[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]'
-    ].join(' '),
-    solid: 'bg-(--plass-surface)',
-    clear: ''
-};
-const alignClasses = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end'
-};
-/** The padding between the content and the edge of the viewport. */
-const insetClasses = {
-    xs: 'p-3',
-    sm: 'p-4',
-    md: 'p-6',
-    lg: 'p-8',
-    xl: 'p-10'
-};
-/**
- * Opacity only, on both the scrim and the content. An overlay that scales or
- * slides drags whatever is written on it across the screen, which is the one
- * thing the house style is against — and unlike a control, this one is usually
- * carrying a sentence.
- */
-const fadeClasses = /* @__PURE__ */ [
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
-].join(' ');
-/**
- * A sheet over the whole page that stops it being used.
- *
- * The difference from a `PlModal` is what is *not* here: no surface, no border,
- * no title, no actions. An overlay is the scrim on its own, with whatever the
- * caller puts on top of it — most often a spinner and a line saying what is
- * being waited for.
- *
- * It is not dismissible by default, and that is the one prop worth reading
- * twice. Everything else Base UI owns: the portal, the scroll lock, the focus
- * held inside, the page behind going inert, and focus returning to wherever it
- * came from when the overlay closes.
- */
-export function PlOverlay({ open, defaultOpen, onOpenChange, tone = 'scrim', dismissible = false, modal = true, align = 'center', size = 'md', color = 'primary', label = 'Overlay', className, style, children, ...props }) {
-    return (_jsx(BaseUIDialog.Root, { open: open, defaultOpen: defaultOpen, modal: modal, disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
-            // `disablePointerDismissal` covers the click; Escape has no prop of its
-            // own, so it is cancelled here by the reason the change arrives with.
-            if (!dismissible && !next && details.reason === 'escape-key') {
-                details.cancel();
-                return;
-            }
-            onOpenChange?.(next);
-        }, children: _jsxs(BaseUIDialog.Portal, { children: [_jsx(BaseUIDialog.Backdrop, { className: `plass-portal fixed inset-0 z-50 ${fadeClasses} ${toneClasses[tone]}` }), _jsx(BaseUIDialog.Viewport, { className: [
-                        'plass-portal fixed inset-0 z-50 flex justify-center',
-                        alignClasses[align],
-                        insetClasses[size]
-                    ].join(' '), children: _jsx(BaseUIDialog.Popup, { "aria-label": label, className: [
-                            'flex max-h-full max-w-full flex-col items-center justify-center',
-                            '[outline:none]',
-                            fadeClasses,
-                            className ?? ''
-                        ]
-                            .filter(Boolean)
-                            .join(' '), style: { ...surfaceSlots(color, 0), ...style }, ...props, children: children }) })] }) }));
-}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as s}from"@base-ui/react/dialog";import{surfaceSlots as l}from"../../internal/styles.js";const r={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},i={start:"items-start",center:"items-center",end:"items-end"},t={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},n=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:o,defaultOpen:c,onOpenChange:p,tone:m="scrim",dismissible:d=!1,modal:f=!0,align:u="center",size:b="md",color:x="primary",label:y="Overlay",className:g,style:j,children:k,...h}){return e(s.Root,{open:o,defaultOpen:c,modal:f,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?p?.(e):a.cancel()},children:a(s.Portal,{children:[e(s.Backdrop,{className:`plass-portal fixed inset-0 z-50 ${n} ${r[m]}`}),e(s.Viewport,{className:["plass-portal fixed inset-0 z-50 flex justify-center",i[u],t[b]].join(" "),children:e(s.Popup,{"aria-label":y,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",n,g??""].filter(Boolean).join(" "),style:{...l(x,0),...j},...h,children:k})})]})})}

package/dist/components/overlay/index.js

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

package/dist/components/pagination/PlPagination.js

@@ -1,159 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlButton } from '../button/PlButton.js';
-import { ChevronIcon } from '../../internal/icons.js';
-import { controlTextClasses, gapClasses, srOnlyClasses } from '../../internal/styles.js';
-function range(start, end) {
-    return Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
-}
-/**
- * Which pages the row actually shows.
- *
- * The shape every pagination converges on — a fixed run at each end, a window
- * around the current page, and an ellipsis wherever those leave a gap — with one
- * detail that is easy to get wrong and matters: a gap of exactly one page is
- * filled with that page rather than with an ellipsis. `1 … 3 … 9` hides a single
- * number behind a symbol wider than the number it replaced.
- *
- * The row is also pinned to a constant number of slots, whatever page it is on:
- * the window slides toward whichever end it is near instead of being clipped by
- * it, so page 1 shows `1 2 3 4 5 … 20` and page 10 shows `1 … 9 10 11 … 20`.
- * Which slots are pages and which are ellipses changes; how many there are does
- * not. Without that, stepping from page 1 to page 2 would relayout the row and
- * every button would move out from under the pointer that just pressed one.
- */
-function paginationRange(count, page, siblingCount, boundaryCount) {
-    const startPages = range(1, Math.min(boundaryCount, count));
-    const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
-    const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
-    const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : count - 1);
-    return [
-        ...startPages,
-        // An ellipsis when more than one page is hidden, the page itself when
-        // exactly one is, and nothing when none is.
-        ...(siblingsStart > boundaryCount + 2
-            ? ['start-ellipsis']
-            : boundaryCount + 1 < count - boundaryCount
-                ? [boundaryCount + 1]
-                : []),
-        ...range(siblingsStart, siblingsEnd),
-        ...(siblingsEnd < count - boundaryCount - 1
-            ? ['end-ellipsis']
-            : count - boundaryCount > boundaryCount
-                ? [count - boundaryCount]
-                : []),
-        ...endPages
-    ];
-}
-/** Two chevrons, for the steppers that jump to an end rather than by one page. */
-function DoubleChevronIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-/**
- * The ellipsis. A `<span>`, not a button and not a disabled button: it is not a
- * control that happens to be unavailable, it is punctuation.
- */
-const ellipsisClasses = {
-    xs: 'h-6 min-w-6',
-    sm: 'h-8 min-w-8',
-    md: 'h-10 min-w-10',
-    lg: 'h-12 min-w-12',
-    xl: 'h-14 min-w-14'
-};
-/**
- * A row of page numbers.
- *
- * Every button in it is a real `PlButton`, which is the point: a pagination is
- * not a new kind of control, it is buttons in a row that happen to know about
- * each other. Reusing the component means the row inherits the glass, the
- * pointer bloom, the press signature, the focus ring and every future change to
- * any of them for free — and it means an `lg` pagination lines up with an `lg`
- * button beside it, because it *is* one.
- *
- * `variant` sets how the pages at rest look; the current page is always `solid`,
- * which is the one thing the row has to say without being read. That is why the
- * default here is `ghost` rather than the `solid` a lone PlButton takes — nine
- * panes of tinted glass in a row say that all nine are the primary action.
- *
- * The markup is a `<nav>` around a `<ul>` because that is what a screen reader
- * needs to hear: a named landmark it can skip, holding a list whose length says
- * how far the pages go, with `aria-current="page"` marking where it is.
- */
-export const PlPagination = /* @__PURE__ */ React.forwardRef(function PlPagination({ variant = 'ghost', size = 'md', color = 'primary', density = 'compact', elevation = 0, count, page: pageProp, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showEdges = false, showArrows = true, disabled = false, getPageHref, label = 'Pagination', pageLabel = (value) => `Page ${value}`, previousLabel = 'Previous page', nextLabel = 'Next page', firstLabel = 'First page', lastLabel = 'Last page', statusLabel = (value, total) => `Page ${value} of ${total}`, className, children, ...props }, ref) {
-    const [uncontrolled, setUncontrolled] = React.useState(defaultPage);
-    const current = Math.min(Math.max(pageProp ?? uncontrolled, 1), Math.max(count, 1));
-    const go = (next) => {
-        const clamped = Math.min(Math.max(next, 1), count);
-        if (clamped === current) {
-            return;
-        }
-        if (pageProp === undefined) {
-            setUncontrolled(clamped);
-        }
-        onPageChange?.(clamped);
-    };
-    // One page is not a set of pages, and no pages is not a thing to say out
-    // loud. A row that renders a lone disabled "1" is a control advertising
-    // that it has nothing to do.
-    if (count < 2) {
-        return null;
-    }
-    const slots = paginationRange(count, current, siblingCount, boundaryCount);
-    const atStart = current <= 1;
-    const atEnd = current >= count;
-    /*
-     * A link only where there is somewhere to go. The page being read and a
-     * stepper at the end of the row are both `disabled`, and `disabled` is not
-     * something an `<a>` can be — a link that only looks unavailable is one a
-     * keyboard still lands on and a crawler still follows.
-     */
-    const linkProps = (to, inert, rel) => getPageHref && !inert ? { render: _jsx("a", { href: getPageHref(to), rel: rel }) } : null;
-    /*
-     * Who answers the press.
-     *
-     * With an `href` and a handler both, the handler wins and the navigation is
-     * cancelled: that is a client-side router keeping the page it already has.
-     * With an `href` and no handler, the link is left to do what a link does —
-     * which is also what makes the row work with JavaScript still loading.
-     */
-    const press = (event, to) => {
-        // A press carrying a modifier is the reader asking the browser for it: a
-        // new tab, a new window, a saved copy. Never ours to cancel.
-        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-            return;
-        }
-        if (getPageHref && !onPageChange) {
-            return;
-        }
-        event.preventDefault();
-        go(to);
-    };
-    /**
-     * The steppers. Icon-only PlButtons, so they go square and land on exactly
-     * the same footprint as a single-digit page — a row whose ends are a
-     * different width from its middle reads as two controls pushed together.
-     */
-    const stepper = (key, accessibleName, to, inert, rotation, glyph, rel) => (_jsx("li", { className: "flex", children: _jsx(PlButton, { variant: variant, size: size, color: color, density: density, elevation: elevation, disabled: disabled || inert, "aria-label": accessibleName, startIcon: _jsx("span", { className: `flex items-center ${rotation}`, children: glyph }), onClick: (event) => press(event, to), ...linkProps(to, disabled || inert, rel) }) }, key));
-    return (_jsxs("nav", { ref: ref, "aria-label": label, className: ['flex items-center', className ?? ''].filter(Boolean).join(' '), ...props, children: [_jsxs("ul", { role: "list", className: `m-0 flex list-none items-center p-0 ${gapClasses[size]}`, children: [showEdges
-                        ? stepper('first', firstLabel, 1, atStart, 'rotate-180 rtl:rotate-0', _jsx(DoubleChevronIcon, {}))
-                        : null, showArrows
-                        ? stepper('previous', previousLabel, current - 1, atStart, 'rotate-90 rtl:-rotate-90', _jsx(ChevronIcon, {}), 'prev')
-                        : null, slots.map((slot, index) => typeof slot === 'number' ? (_jsx("li", { className: "flex", children: _jsx(PlButton
-                        // The current page is always filled, whatever the row's
-                        // resting variant is: it is the one thing here that has to be
-                        // legible without being read.
-                        , { 
-                            // The current page is always filled, whatever the row's
-                            // resting variant is: it is the one thing here that has to be
-                            // legible without being read.
-                            variant: slot === current ? 'solid' : variant, size: size, color: color, density: density, elevation: elevation, disabled: disabled, "aria-label": pageLabel(slot), "aria-current": slot === current ? 'page' : undefined, className: "tabular-nums", onClick: (event) => press(event, slot), ...linkProps(slot, disabled || slot === current), children: slot }) }, `slot-${index}`)) : (_jsx("li", { "aria-hidden": "true", className: [
-                            'flex select-none items-center justify-center',
-                            'text-(--plass-muted-fg)',
-                            controlTextClasses[size],
-                            ellipsisClasses[size]
-                        ].join(' '), children: "\u2026" }, `slot-${index}`))), showArrows
-                        ? stepper('next', nextLabel, current + 1, atEnd, '-rotate-90 rtl:rotate-90', _jsx(ChevronIcon, {}), 'next')
-                        : null, showEdges
-                        ? stepper('last', lastLabel, count, atEnd, 'rtl:rotate-180', _jsx(DoubleChevronIcon, {}))
-                        : null] }), _jsx("span", { className: srOnlyClasses, "aria-live": "polite", children: statusLabel(current, count) }), children] }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{PlButton as n}from"../button/PlButton.js";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextClasses as l,gapClasses as i,srOnlyClasses as o}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,t)=>e+t)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const s={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"};export const PlPagination=/* @__PURE__ */t.forwardRef(function PlPagination({variant:c="ghost",size:m="md",color:u="primary",density:h="compact",elevation:d=0,count:f,page:g,defaultPage:p=1,onPageChange:x,siblingCount:b=1,boundaryCount:v=1,showEdges:y=!1,showArrows:M=!0,disabled:P=!1,getPageHref:j,label:w="Pagination",pageLabel:N=e=>`Page ${e}`,previousLabel:C="Previous page",nextLabel:L="Next page",firstLabel:k="First page",lastLabel:$="Last page",statusLabel:D=(e,a)=>`Page ${e} of ${a}`,className:I,children:K,...z},B){const[A,R]=t.useState(p),E=Math.min(Math.max(g??A,1),Math.max(f,1));if(f<2)return null;const F=function paginationRange(e,a,t,n){const r=range(1,Math.min(n,e)),l=range(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(a-t,e-n-2*t-1),n+2),o=Math.min(Math.max(a+t,n+2*t+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(i,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(f,E,b,v),H=E<=1,S=E>=f,linkProps=(a,t,n)=>j&&!t?{render:e("a",{href:j(a),rel:n})}:null,press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||j&&!x||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),f);a!==E&&(void 0===g&&R(a),x?.(a))})(a))},stepper=(a,t,r,l,i,o,s)=>e("li",{className:"flex",children:e(n,{variant:c,size:m,color:u,density:h,elevation:d,disabled:P||l,"aria-label":t,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,r),...linkProps(r,P||l,s)})},a);return a("nav",{ref:B,"aria-label":w,className:["flex items-center",I??""].filter(Boolean).join(" "),...z,children:[a("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${i[m]}`,children:[y?stepper("first",k,1,H,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,M?stepper("previous",C,E-1,H,"rotate-90 rtl:-rotate-90",e(r,{}),"prev"):null,F.map((a,t)=>e("li","number"==typeof a?{className:"flex",children:e(n,{variant:a===E?"solid":c,size:m,color:u,density:h,elevation:d,disabled:P,"aria-label":N(a),"aria-current":a===E?"page":void 0,className:"tabular-nums",onClick:e=>press(e,a),...linkProps(a,P||a===E),children:a})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",l[m],s[m]].join(" "),children:"…"},`slot-${t}`)),M?stepper("next",L,E+1,S,"-rotate-90 rtl:rotate-90",e(r,{}),"next"):null,y?stepper("last",$,f,S,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:o,"aria-live":"polite",children:D(E,f)}),K]})});

package/dist/components/pagination/index.js

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