@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-category-card/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SCategoryCard } from './s-category-card';
-export type { SCategoryCardProps } from './s-category-card';
+export type { SCategoryCardOwnerState, SCategoryCardProps, SCategoryCardSlotProps, SCategoryCardSlots, } from './s-category-card';
+export type {} from '../theme/component-augmentation';

package/dist/s-category-card/s-category-card.d.ts

@@ -1,56 +1,43 @@
-import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material';
-export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme> & {
-    disableHoverEffect?: boolean;
-    hoverScale?: number;
-}, {}, {}>;
-export declare const CategoryTitle: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme> & {
-    titlePosition?: "bottom" | "top" | "center";
-    titleAlignment?: "left" | "center" | "right";
-}, {}, {}>;
-/**
- * Props interface for SCategoryCard component
- */
-export interface SCategoryCardProps {
-    /** URL or path to the category image source */
-    image: string;
-    /** Display title for the category shown as overlay text */
-    title: string;
-    /** Width of the category card */
-    width?: number | string;
-    /** Height of the category card */
-    height?: number | string;
-    /** Alternative text for the image */
+import { ButtonBaseProps, TypographyProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SCategoryCardOwnerState {
+    disableHoverEffect: boolean;
+    hoverScale: number;
+    interactive: boolean;
+    titleAlignment: 'center' | 'left' | 'right';
+    titlePosition: 'bottom' | 'center' | 'top';
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SCategoryCardOwnerState>;
+export interface SCategoryCardSlots {
+    image?: React.ElementType;
+    title?: React.ElementType;
+}
+export interface SCategoryCardSlotProps {
+    image?: OwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>>;
+    title?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for a category card that becomes an MUI ButtonBase when an action is provided. */
+export interface SCategoryCardProps extends Omit<ButtonBaseProps, 'children' | 'component' | 'title'> {
+    /** Alternative text for the image. */
     alt?: string;
-    /** Position of the title overlay on the image */
-    titlePosition?: 'bottom' | 'top' | 'center';
-    /** Text alignment of the title */
-    titleAlignment?: 'left' | 'center' | 'right';
-    /** Typography variant for the title text */
-    titleVariant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
-    /** Color of the title text */
-    titleColor?: string;
-    /** Background color of the title overlay */
-    titleBackgroundColor?: string;
-    /** Opacity of the title overlay (0-1) */
-    titleOpacity?: number;
-    /** Border radius of the card and title overlay */
-    borderRadius?: number | string;
-    /** Disable the hover zoom effect on the image */
+    /** Disables image zoom on hover. */
     disableHoverEffect?: boolean;
-    /** Scale factor for hover zoom effect */
+    /** Scale factor used by the image hover effect. */
     hoverScale?: number;
-    /** Handler called when the card is clicked */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /** System prop for custom styling of the wrapper */
-    sx?: SxProps<Theme>;
-    /** System prop for custom styling of the title overlay */
-    titleSx?: SxProps<Theme>;
-    /** System prop for custom styling of the image */
-    imageSx?: SxProps<Theme>;
+    /** URL or path to the category image. */
+    image: string;
+    /** Components used for the image and title slots. */
+    slots?: SCategoryCardSlots;
+    /** Props or owner-state callbacks for the image and title slots. */
+    slotProps?: SCategoryCardSlotProps;
+    /** Visible card title and accessible name when the card is interactive. */
+    title: React.ReactNode;
+    /** Alignment of the title overlay. */
+    titleAlignment?: SCategoryCardOwnerState['titleAlignment'];
+    /** Position of the title overlay. */
+    titlePosition?: SCategoryCardOwnerState['titlePosition'];
 }
-export declare const SCategoryCard: {
-    ({ image, title, width, height, alt, titlePosition, titleAlignment, titleVariant, titleColor, titleBackgroundColor, titleOpacity, borderRadius, disableHoverEffect, hoverScale, onClick, sx, titleSx, imageSx, }: SCategoryCardProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SCategoryCard: React.ForwardRefExoticComponent<Omit<SCategoryCardProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SCategoryCard;

package/dist/s-category-card/s-category-card.js

@@ -1,69 +1,101 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Box as r, Typography as i, styled as a } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../appendOwnerState-CELpvdMz.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import * as r from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ButtonBase as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
 //#region lib/s-category-card/s-category-card.tsx
-var o = a(r, { shouldForwardProp: (e) => e !== "disableHoverEffect" && e !== "hoverScale" })(({ disableHoverEffect: e = !1, hoverScale: t = 1.1 }) => ({
-	height: "100%",
-	cursor: "pointer",
+var d = ({ ownerState: e, theme: t }) => ({
+	borderRadius: t.shape.borderRadius,
+	cursor: e.interactive ? "pointer" : "default",
+	display: "block",
+	height: 250,
 	overflow: "hidden",
 	position: "relative",
-	img: {
+	transition: "none",
+	width: 250,
+	"& img": {
 		height: "100%",
 		objectFit: "cover",
-		transition: "all 0.3s",
-		objectPosition: "center center"
+		objectPosition: "center center",
+		transition: "transform 300ms"
 	},
-	...!e && { ":hover": { img: { transform: `scale(${t})` } } }
-})), s = a(r, { shouldForwardProp: (e) => e !== "titlePosition" && e !== "titleAlignment" })(({ titlePosition: e = "bottom", titleAlignment: t = "center" }) => ({
+	"&.Mui-focusVisible": {
+		outline: `2px solid ${(t.vars ?? t).palette.primary.main}`,
+		outlineOffset: 2
+	},
+	...!e.disableHoverEffect && { "@media (hover: hover) and (pointer: fine)": { "&:hover img": { transform: `scale(${e.hoverScale})` } } },
+	"@media (prefers-reduced-motion: reduce)": { "& img": { transition: "none" } }
+}), f = l(s, {
+	name: "SCategoryCard",
+	slot: "Root"
+})(d), p = l("div", {
+	name: "SCategoryCard",
+	slot: "Root"
+})(d), m = l(c, {
+	name: "SCategoryCard",
+	slot: "Title"
+})(({ ownerState: e, theme: t }) => ({
+	backgroundColor: (t.vars ?? t).palette.background.paper,
+	borderRadius: "inherit",
 	left: 10,
-	right: 10,
-	padding: 4,
-	textAlign: t,
+	padding: t.spacing(.5, 1.5),
 	position: "absolute",
-	transition: "all 0.3s",
-	...e === "bottom" && { bottom: 10 },
-	...e === "top" && { top: 10 },
-	...e === "center" && {
+	right: 10,
+	textAlign: e.titleAlignment,
+	transition: "transform 300ms",
+	...e.titlePosition === "bottom" && { bottom: 10 },
+	...e.titlePosition === "top" && { top: 10 },
+	...e.titlePosition === "center" && {
 		top: "50%",
 		transform: "translateY(-50%)"
 	}
-})), c = ({ image: r, title: a, width: c = 250, height: l = 250, alt: u = "category", titlePosition: d = "bottom", titleAlignment: f = "center", titleVariant: p = "body1", titleColor: m, titleBackgroundColor: h = "background.paper", titleOpacity: g = 1, borderRadius: _ = 1, disableHoverEffect: v = !1, hoverScale: y = 1.1, onClick: b, sx: x, titleSx: S, imageSx: C }) => /* @__PURE__ */ n(o, {
-	disableHoverEffect: v,
-	hoverScale: y,
-	onClick: b,
-	sx: {
-		borderRadius: _,
-		cursor: b ? "pointer" : "default",
-		width: c,
-		height: l,
-		...x
-	},
-	children: [/* @__PURE__ */ t(e, {
-		src: r,
-		width: "100%",
-		height: "100%",
-		alt: u,
-		style: {
-			objectFit: "cover",
-			...C
-		}
-	}), /* @__PURE__ */ t(s, {
-		titlePosition: d,
-		titleAlignment: f,
-		sx: {
-			borderRadius: _,
-			bgcolor: h,
-			opacity: g,
-			...S
-		},
-		children: /* @__PURE__ */ t(i, {
-			variant: p,
-			color: m,
-			children: a
-		})
-	})]
+}));
+function h(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function g(e) {
+	let t = { ...e };
+	return delete t.action, delete t.centerRipple, delete t.classes, delete t.disabled, delete t.disableRipple, delete t.disableTouchRipple, delete t.focusRipple, delete t.focusVisibleClassName, delete t.LinkComponent, delete t.nativeButton, delete t.onFocusVisible, delete t.TouchRippleProps, delete t.touchRippleRef, delete t.type, t;
+}
+var _ = r.forwardRef(function(r, s) {
+	let c = u({
+		props: r,
+		name: "SCategoryCard"
+	}), { alt: l = "", disableHoverEffect: d = !1, hoverScale: _ = 1.1, image: v, slotProps: y, slots: b, sx: x, title: S, titleAlignment: C = "center", titlePosition: w = "bottom", ...T } = c, E = {
+		...c,
+		disableHoverEffect: d,
+		hoverScale: _,
+		interactive: typeof c.onClick == "function",
+		titleAlignment: C,
+		titlePosition: w
+	}, D = b?.image ?? n, O = b?.title ?? m, k = h(y?.image, E), A = h(y?.title, E), j = t(b?.image, k ?? {}, E), { sx: M, ...N } = A ?? {}, P = t(O, {
+		variant: "body1",
+		...N,
+		sx: e(M)
+	}, E), F = /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(D, {
+		variant: "rectangular",
+		...j,
+		alt: l,
+		src: v
+	}), /* @__PURE__ */ a(O, {
+		...P,
+		children: S
+	})] });
+	return E.interactive ? /* @__PURE__ */ a(f, {
+		...T,
+		ownerState: E,
+		ref: s,
+		sx: e(x),
+		children: F
+	}) : /* @__PURE__ */ a(p, {
+		...g(T),
+		ownerState: E,
+		ref: s,
+		sx: e(x),
+		children: F
+	});
 });
-c.displayName = "SCategoryCard";
+_.displayName = "SCategoryCard";
 //#endregion
-export { s as CategoryTitle, c as SCategoryCard, c as default, o as Wrapper };
+export { _ as SCategoryCard, _ as default };

package/dist/s-chat-input/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SChatInput } from './s-chat-input';
-export type { SChatInputProps } from './s-chat-input';
+export type { SChatInputChangeEvent, SChatInputChangeReason, SChatInputOwnerState, SChatInputProps, SChatInputSlotProps, SChatInputSlots, } from './s-chat-input';
+export type {} from '../theme/component-augmentation';

package/dist/s-chat-input/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-chat-input-BHMymKij.js";
+import { t as e } from "../s-chat-input-DCS0mJE4.js";
 export { e as SChatInput, e as default };

package/dist/s-chat-input/s-chat-input.d.ts

@@ -1,11 +1,24 @@
 import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
 import { STextFieldProps } from '../s-text-field';
-/**
- * Props interface for SChatInput component
- */
-export interface SChatInputProps extends Omit<STextFieldProps, 'onSubmit'> {
-    /** Callback function called when message is submitted with Enter key or submit button */
-    onSubmit?: (value: string, files?: File[]) => void;
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+export interface SChatInputOwnerState {
+    disabled: boolean;
+    emojiPickerOpen: boolean;
+    hasFiles: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SChatInputOwnerState>;
+export interface SChatInputSlots {
+    input?: React.ElementType;
+}
+export interface SChatInputSlotProps {
+    input?: OwnerStateSlotProps<STextFieldProps>;
+}
+export type SChatInputChangeReason = 'clear' | 'emoji' | 'input';
+export type SChatInputChangeEvent = Event | React.SyntheticEvent;
+export interface SChatInputProps extends Omit<BoxProps, 'children' | 'component' | 'defaultValue' | 'onChange' | 'onKeyDown' | 'onSubmit' | 'value'> {
+    /** Callback called before the input clears. Prevent the event to keep the current draft and files. */
+    onSubmit?: (event: React.SyntheticEvent, value: string, files: File[]) => void;
     /** Optional callback function called when files are selected */
     onFileSelect?: (files: File[]) => void;
     /** Disable the input and submission */
@@ -18,6 +31,28 @@ export interface SChatInputProps extends Omit<STextFieldProps, 'onSubmit'> {
     hideEmojiPicker?: boolean;
     /** Hide the file attachment button */
     hideFileAttachment?: boolean;
+    /** Current text for controlled usage */
+    value?: string;
+    /** Initial text for uncontrolled usage */
+    defaultValue?: string;
+    /** Called whenever the text changes, including emoji insertion and submit clearing. */
+    onChange?: (event: SChatInputChangeEvent, value: string, reason: SChatInputChangeReason) => void;
+    /** Called when the message input receives a key event. */
+    onKeyDown?: STextFieldProps['onKeyDown'];
+    /** Ref forwarded to the native text input. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Placeholder shown in the message input. */
+    placeholder?: string;
+    /** Components used for internal slots. */
+    slots?: SChatInputSlots;
+    /** Props or owner-state callbacks for internal slots. */
+    slotProps?: SChatInputSlotProps;
+    /** Accessible label for the file picker button */
+    attachFileLabel?: string;
+    /** Accessible label for the emoji picker button */
+    emojiPickerLabel?: string;
+    /** Accessible label for the submit button */
+    submitLabel?: string;
 }
 export declare const SChatInput: React.ForwardRefExoticComponent<Omit<SChatInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SChatInput;

package/dist/s-chat-input/s-chat-input.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-chat-input-BHMymKij.js";
+import { t as e } from "../s-chat-input-DCS0mJE4.js";
 export { e as SChatInput, e as default };