@solostylist/ui-kit 1.0.229 → 1.0.230

package/dist/s-pagination/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SPagination } from './s-pagination';
 export type { SPaginationProps } from './s-pagination';
+export type { SPaginationColor, SPaginationSize } from './types';

package/dist/s-pagination/s-pagination.d.ts

@@ -1,16 +1,53 @@
 import { default as React } from 'react';
 import { PaginationProps } from '@mui/material';
+import { SPaginationColor, SPaginationSize } from './types';
+export type { SPaginationColor, SPaginationSize } from './types';
 /**
- * Props for the SPagination component, extending Material-UI's PaginationProps
+ * Props for SPagination. Web behavior is sourced from MUI Pagination; custom
+ * SoloStylist props stay local to the web package.
  */
-export interface SPaginationProps extends PaginationProps {
-    /** Whether the pagination is in a loading state - shows skeleton when true */
-    loading?: boolean;
-    /** Total number of pages - component returns empty fragment when 0 */
+export interface SPaginationProps extends Omit<PaginationProps, 'color' | 'count' | 'shape' | 'size' | 'variant'> {
+    /** Accessible label for the complete pagination control. */
+    accessibilityLabel?: string;
+    /** Number of always-visible pages at the beginning and end. */
+    boundaryCount?: number;
+    /** Total number of pages. The component is hidden when count is 0 or less. */
     count?: number;
+    /** Page selected initially when the component is uncontrolled. */
+    defaultPage?: number;
+    /** Whether the complete pagination control is disabled. */
+    disabled?: boolean;
+    /** Returns the accessible label for an item. */
+    getItemAriaLabel?: PaginationProps['getItemAriaLabel'];
+    /** Whether to hide the next-page button. */
+    hideNextButton?: boolean;
+    /** Whether to hide the previous-page button. */
+    hidePrevButton?: boolean;
+    /** Whether to show the pagination skeleton. */
+    loading?: boolean;
+    /** Callback fired when the page changes. */
+    onChange?: PaginationProps['onChange'];
+    /** Current page for controlled usage (1-indexed). */
+    page?: number;
+    /** Custom item renderer. */
+    renderItem?: PaginationProps['renderItem'];
+    /** Active-page color, using the same semantic palette as SButton. */
+    color?: SPaginationColor;
+    /** Shape of every pagination item. Defaults to the rounded SIconButton shape. */
+    shape?: 'circular' | 'rounded';
+    /** Whether to show the first-page button. */
+    showFirstButton?: boolean;
+    /** Whether to show the last-page button. */
+    showLastButton?: boolean;
+    /** Number of visible pages before and after the current page. */
+    siblingCount?: number;
+    /** Size of pagination items. */
+    size?: SPaginationSize;
+    /** Inactive-page visual variant. The active page always uses the contained SButton treatment. */
+    variant?: 'text' | 'outlined';
 }
 export declare const SPagination: {
-    ({ loading, count, ...props }: SPaginationProps): React.JSX.Element;
+    ({ loading, count, color, shape, size, variant, accessibilityLabel, sx, ...props }: SPaginationProps): React.JSX.Element;
     displayName: string;
 };
 export default SPagination;

package/dist/s-pagination/s-pagination.js

@@ -1,32 +1,50 @@
-import { SSkeleton as e } from "../s-skeleton/s-skeleton.js";
+import { paginationDimensions as e } from "./types.js";
+import { SSkeleton as t } from "../s-skeleton/s-skeleton.js";
 import "react";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Pagination as i, Stack as a, useMediaQuery as o, useTheme as s } from "@mui/material";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Pagination as a, Stack as o } from "@mui/material";
 //#region lib/s-pagination/s-pagination.tsx
-var c = ({ style: t }) => /* @__PURE__ */ r(a, {
-	direction: "row",
-	style: t,
-	sx: {
-		display: "inline-flex",
-		flexWrap: "wrap",
-		gap: 1
-	},
-	children: [
-		/* @__PURE__ */ n(e, { preset: "icon-button" }),
-		/* @__PURE__ */ n(e, {
-			variant: "rounded",
-			width: 120
-		}),
-		/* @__PURE__ */ n(e, { preset: "icon-button" })
-	]
-}), l = ({ loading: e, count: r = 0, ...a }) => {
-	let l = o(s().breakpoints.down("sm"));
-	return r === 0 ? /* @__PURE__ */ n(t, {}) : e ? /* @__PURE__ */ n(c, { style: a.style }) : /* @__PURE__ */ n(i, {
-		size: l ? "small" : "medium",
-		count: r,
-		...a
+var s = ({ size: n, style: a }) => {
+	let s = e[n];
+	return /* @__PURE__ */ i(o, {
+		direction: "row",
+		style: a,
+		sx: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: `${s.gap}px`
+		},
+		children: [
+			/* @__PURE__ */ r(t, {
+				variant: "rounded",
+				width: s.item,
+				height: s.item
+			}),
+			/* @__PURE__ */ r(t, {
+				variant: "rounded",
+				width: s.bar,
+				height: s.item
+			}),
+			/* @__PURE__ */ r(t, {
+				variant: "rounded",
+				width: s.item,
+				height: s.item
+			})
+		]
 	});
-};
-l.displayName = "SPagination";
+}, c = ({ loading: e = !1, count: t = 0, color: i = "primary", shape: o = "rounded", size: c = "medium", variant: l = "text", accessibilityLabel: u = "pagination navigation", sx: d, ...f }) => t <= 0 ? /* @__PURE__ */ r(n, {}) : e ? /* @__PURE__ */ r(s, {
+	size: c,
+	style: f.style
+}) : /* @__PURE__ */ r(a, {
+	count: t,
+	"aria-label": u,
+	color: i,
+	shape: o,
+	size: c,
+	variant: l,
+	sx: d,
+	...f
+});
+c.displayName = "SPagination";
 //#endregion
-export { l as SPagination, l as default };
+export { c as SPagination, c as default };

package/dist/s-pagination/types.d.ts

@@ -0,0 +1,9 @@
+import { PaginationProps } from '@mui/material';
+export type SPaginationSize = NonNullable<PaginationProps['size']>;
+export type SPaginationColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+export declare const paginationColors: readonly ["primary", "secondary", "success", "error", "info", "warning"];
+export declare const paginationDimensions: Record<SPaginationSize, {
+    item: number;
+    gap: number;
+    bar: number;
+}>;

package/dist/s-pagination/types.js

@@ -0,0 +1,27 @@
+//#region lib/s-pagination/types.ts
+var e = [
+	"primary",
+	"secondary",
+	"success",
+	"error",
+	"info",
+	"warning"
+], t = {
+	small: {
+		item: 26,
+		gap: 2,
+		bar: 90
+	},
+	medium: {
+		item: 32,
+		gap: 6,
+		bar: 120
+	},
+	large: {
+		item: 40,
+		gap: 6,
+		bar: 150
+	}
+};
+//#endregion
+export { e as paginationColors, t as paginationDimensions };

package/dist/theme/components/components.js

@@ -20,98 +20,100 @@ import { MuiPickersCalendarHeader as v } from "./pickers-calendar-header.js";
 import { MuiPickersArrowSwitcher as y } from "./pickers-arrow-switcher.js";
 import { MuiPickerDay as b } from "./picker-day.js";
 import { MuiPaper as x } from "./paper.js";
-import { MuiPaginationItem as S } from "./pagination-item.js";
-import { MuiOutlinedInput as C } from "./outlined-input.js";
-import { MuiMultiSectionDigitalClockSection as w } from "./multi-section-digital-clock-section.js";
-import { MuiMonthCalendar as T } from "./month-calendar.js";
-import { MuiMenu as E } from "./menu.js";
-import { MuiMenuItem as D } from "./menu-item.js";
-import { MuiList as O } from "./list.js";
-import { MuiListSubheader as k } from "./list-subheader.js";
-import { MuiListItemButton as A } from "./list-item-button.js";
-import { MuiListItem as j } from "./list-item.js";
-import { MuiListItemText as M } from "./list-item-text.js";
-import { MuiListItemIcon as N } from "./list-item-icon.js";
-import { MuiLink as P } from "./link.js";
-import { MuiLinearProgress as F } from "./linear-progress.js";
-import { MuiInputBase as I } from "./input-base.js";
-import { MuiInputAdornment as L } from "./input-adornment.js";
-import { MuiIcon as R } from "./icon.js";
-import { MuiIconButton as z } from "./icon-button.js";
-import { MuiFormLabel as B } from "./form-label.js";
-import { MuiFormControl as V } from "./form-control.js";
-import { MuiDrawer as H } from "./drawer.js";
-import { MuiDialog as U } from "./dialog.js";
-import { MuiDialogTitle as W } from "./dialog-title.js";
-import { MuiDialogContent as G } from "./dialog-content.js";
-import { MuiDialogActions as K } from "./dialog-actions.js";
-import { MuiDayCalendar as q } from "./day-calendar.js";
-import { MuiDateCalendar as J } from "./date-calendar.js";
-import { MuiCssBaseline as Y } from "./css-baseline.js";
-import { MuiContainer as X } from "./container.js";
-import { MuiAccordion as Z } from "./accordion.js";
-import { MuiAccordionDetails as Q } from "./accordion-details.js";
-import { MuiAccordionSummary as $ } from "./accordion-summary.js";
-import { MuiAlert as ee } from "./alert.js";
-import { MuiAppBar as te } from "./app-bar.js";
-import { t as ne } from "../../autocomplete-Dd4zjpaF.js";
-import { t as re } from "../../checkbox-DC-OoGvh.js";
-import { t as ie } from "../../avatar-DFQ5F7pY.js";
-import { MuiBackdrop as ae } from "./backdrop.js";
-import { MuiButton as oe } from "./button.js";
-import { MuiButtonBase as se } from "./button-base.js";
-import { MuiCard as ce } from "./card.js";
-import { MuiCardActions as le } from "./card-actions.js";
-import { MuiCardContent as ue } from "./card-content.js";
-import { MuiCardHeader as de } from "./card-header.js";
-import { MuiChip as fe } from "./chip.js";
+import { MuiPagination as S } from "./pagination.js";
+import { MuiPaginationItem as C } from "./pagination-item.js";
+import { MuiOutlinedInput as w } from "./outlined-input.js";
+import { MuiMultiSectionDigitalClockSection as T } from "./multi-section-digital-clock-section.js";
+import { MuiMonthCalendar as E } from "./month-calendar.js";
+import { MuiMenu as D } from "./menu.js";
+import { MuiMenuItem as O } from "./menu-item.js";
+import { MuiList as k } from "./list.js";
+import { MuiListSubheader as A } from "./list-subheader.js";
+import { MuiListItemButton as j } from "./list-item-button.js";
+import { MuiListItem as M } from "./list-item.js";
+import { MuiListItemText as N } from "./list-item-text.js";
+import { MuiListItemIcon as P } from "./list-item-icon.js";
+import { MuiLink as F } from "./link.js";
+import { MuiLinearProgress as I } from "./linear-progress.js";
+import { MuiInputBase as L } from "./input-base.js";
+import { MuiInputAdornment as R } from "./input-adornment.js";
+import { MuiIcon as z } from "./icon.js";
+import { MuiIconButton as B } from "./icon-button.js";
+import { MuiFormLabel as V } from "./form-label.js";
+import { MuiFormControl as H } from "./form-control.js";
+import { MuiDrawer as U } from "./drawer.js";
+import { MuiDialog as W } from "./dialog.js";
+import { MuiDialogTitle as G } from "./dialog-title.js";
+import { MuiDialogContent as K } from "./dialog-content.js";
+import { MuiDialogActions as q } from "./dialog-actions.js";
+import { MuiDayCalendar as J } from "./day-calendar.js";
+import { MuiDateCalendar as Y } from "./date-calendar.js";
+import { MuiCssBaseline as X } from "./css-baseline.js";
+import { MuiContainer as Z } from "./container.js";
+import { MuiAccordion as Q } from "./accordion.js";
+import { MuiAccordionDetails as $ } from "./accordion-details.js";
+import { MuiAccordionSummary as ee } from "./accordion-summary.js";
+import { MuiAlert as te } from "./alert.js";
+import { MuiAppBar as ne } from "./app-bar.js";
+import { t as re } from "../../autocomplete-Dd4zjpaF.js";
+import { t as ie } from "../../checkbox-DC-OoGvh.js";
+import { t as ae } from "../../avatar-DFQ5F7pY.js";
+import { MuiBackdrop as oe } from "./backdrop.js";
+import { MuiButton as se } from "./button.js";
+import { MuiButtonBase as ce } from "./button-base.js";
+import { MuiCard as le } from "./card.js";
+import { MuiCardActions as ue } from "./card-actions.js";
+import { MuiCardContent as de } from "./card-content.js";
+import { MuiCardHeader as fe } from "./card-header.js";
+import { MuiChip as pe } from "./chip.js";
 //#region lib/theme/components/components.ts
-var pe = {
-	MuiAccordion: Z,
-	MuiAccordionDetails: Q,
-	MuiAccordionSummary: $,
-	MuiAlert: ee,
-	MuiAppBar: te,
-	MuiAutocomplete: ne,
-	MuiAvatar: ie,
-	MuiBackdrop: ae,
-	MuiButton: oe,
-	MuiButtonBase: se,
-	MuiCard: ce,
-	MuiCardActions: le,
-	MuiCardContent: ue,
-	MuiCardHeader: de,
-	MuiCheckbox: re,
-	MuiChip: fe,
-	MuiContainer: X,
-	MuiCssBaseline: Y,
-	MuiDateCalendar: J,
-	MuiDayCalendar: q,
-	MuiDialog: U,
-	MuiDialogActions: K,
-	MuiDialogContent: G,
-	MuiDialogTitle: W,
-	MuiDrawer: H,
-	MuiFormLabel: B,
-	MuiFormControl: V,
-	MuiIcon: R,
-	MuiIconButton: z,
-	MuiInputAdornment: L,
-	MuiInputBase: I,
-	MuiLinearProgress: F,
-	MuiLink: P,
-	MuiList: O,
-	MuiListItem: j,
-	MuiListItemButton: A,
-	MuiListItemIcon: N,
-	MuiListItemText: M,
-	MuiListSubheader: k,
-	MuiMenu: E,
-	MuiMenuItem: D,
-	MuiMonthCalendar: T,
-	MuiMultiSectionDigitalClockSection: w,
-	MuiOutlinedInput: C,
-	MuiPaginationItem: S,
+var me = {
+	MuiAccordion: Q,
+	MuiAccordionDetails: $,
+	MuiAccordionSummary: ee,
+	MuiAlert: te,
+	MuiAppBar: ne,
+	MuiAutocomplete: re,
+	MuiAvatar: ae,
+	MuiBackdrop: oe,
+	MuiButton: se,
+	MuiButtonBase: ce,
+	MuiCard: le,
+	MuiCardActions: ue,
+	MuiCardContent: de,
+	MuiCardHeader: fe,
+	MuiCheckbox: ie,
+	MuiChip: pe,
+	MuiContainer: Z,
+	MuiCssBaseline: X,
+	MuiDateCalendar: Y,
+	MuiDayCalendar: J,
+	MuiDialog: W,
+	MuiDialogActions: q,
+	MuiDialogContent: K,
+	MuiDialogTitle: G,
+	MuiDrawer: U,
+	MuiFormLabel: V,
+	MuiFormControl: H,
+	MuiIcon: z,
+	MuiIconButton: B,
+	MuiInputAdornment: R,
+	MuiInputBase: L,
+	MuiLinearProgress: I,
+	MuiLink: F,
+	MuiList: k,
+	MuiListItem: M,
+	MuiListItemButton: j,
+	MuiListItemIcon: P,
+	MuiListItemText: N,
+	MuiListSubheader: A,
+	MuiMenu: D,
+	MuiMenuItem: O,
+	MuiMonthCalendar: E,
+	MuiMultiSectionDigitalClockSection: T,
+	MuiOutlinedInput: w,
+	MuiPagination: S,
+	MuiPaginationItem: C,
 	MuiPaper: x,
 	MuiPickerDay: b,
 	MuiPickersArrowSwitcher: y,
@@ -136,4 +138,4 @@ var pe = {
 	MuiYearCalendar: e
 };
 //#endregion
-export { pe as components };
+export { me as components };