@soroush.tech/design-system 2.0.0-rc.2 → 2.0.0-rc.3

package/dist/catalog.mjs

@@ -53,6 +53,10 @@ const componentCategories = [
 			component("TextInput"),
 			component("Checkbox"),
 			component("Radio"),
+			component("Rating"),
+			component("NumberField"),
+			component("InputRange"),
+			component("TransferList"),
 			component("Switch"),
 			component("NativeSelect"),
 			component("Select"),
@@ -232,7 +236,7 @@ const avatarVariantValues = [
 	"rounded",
 	"square"
 ];
-const variantLabels$16 = {
+const variantLabels$17 = {
 	circular: "Circular",
 	rounded: "Rounded",
 	square: "Square"
@@ -254,7 +258,7 @@ const avatarCatalog = defineCatalogEntry()({
 	},
 	variants: avatarVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$16[variant],
+		label: variantLabels$17[variant],
 		example: {
 			component: "Avatar",
 			props: {
@@ -411,7 +415,7 @@ const buttonLoadingPositionValues = [
 	"end",
 	"center"
 ];
-const variantLabels$15 = {
+const variantLabels$16 = {
 	contained: "Contained",
 	outlined: "Outlined",
 	text: "Text"
@@ -426,7 +430,7 @@ const buttonCatalog = defineCatalogEntry()({
 	},
 	variants: buttonVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$15[variant],
+		label: variantLabels$16[variant],
 		example: {
 			component: "Button",
 			props: { variant },
@@ -483,7 +487,7 @@ const buttonGroupVariantValues = [
 	"text"
 ];
 const buttonGroupOrientationValues = ["horizontal", "vertical"];
-const variantLabels$14 = {
+const variantLabels$15 = {
 	contained: "Contained",
 	outlined: "Outlined",
 	text: "Text"
@@ -503,7 +507,7 @@ const buttonGroupCatalog = defineCatalogEntry()({
 	},
 	variants: buttonGroupVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$14[variant],
+		label: variantLabels$15[variant],
 		example: {
 			component: "ButtonGroup",
 			props: {
@@ -552,7 +556,7 @@ const cardVariantValues = [
 	"bracketBox",
 	"interactive"
 ];
-const variantLabels$13 = {
+const variantLabels$14 = {
 	paper: "Paper",
 	bracketBox: "Bracket box",
 	interactive: "Interactive"
@@ -572,7 +576,7 @@ const cardCatalog = defineCatalogEntry()({
 	},
 	variants: cardVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$13[variant],
+		label: variantLabels$14[variant],
 		example: {
 			component: "Card",
 			props: {
@@ -749,11 +753,11 @@ const circularProgressEasingValues = [
 	"ease-out",
 	"ease-in-out"
 ];
-const variantLabels$12 = {
+const variantLabels$13 = {
 	indeterminate: "Indeterminate",
 	determinate: "Determinate"
 };
-const variantProps$1 = {
+const variantProps$2 = {
 	indeterminate: { variant: "indeterminate" },
 	determinate: {
 		variant: "determinate",
@@ -774,11 +778,11 @@ const circularProgressCatalog = defineCatalogEntry()({
 	},
 	variants: circularProgressVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$12[variant],
+		label: variantLabels$13[variant],
 		example: {
 			component: "CircularProgress",
 			props: {
-				...variantProps$1[variant],
+				...variantProps$2[variant],
 				color: "primary",
 				size: 40
 			},
@@ -1011,7 +1015,7 @@ const box = {
 	bg: "secondary",
 	borderRadius: "sm"
 };
-const items$1 = [
+const items$2 = [
 	"A",
 	"B",
 	"C"
@@ -1033,7 +1037,7 @@ const flexCatalog = defineCatalogEntry()({
 			...box,
 			flexDirection: "column"
 		},
-		children: items$1
+		children: items$2
 	},
 	variants: ["column", "row"].map((flexDirection) => ({
 		name: flexDirection,
@@ -1044,7 +1048,7 @@ const flexCatalog = defineCatalogEntry()({
 				...box,
 				flexDirection
 			},
-			children: items$1
+			children: items$2
 		}
 	})),
 	options: {
@@ -1444,6 +1448,122 @@ const imageCatalog = defineCatalogEntry()({
 	content: {}
 });
 //#endregion
+//#region src/InputRange/InputRange.catalog.ts
+const inputRangeTrackValues = ["normal", "inverted"];
+const inputRangeValueLabelValues = [
+	"off",
+	"auto",
+	"on"
+];
+const inputRangeOrientationValues = ["horizontal", "vertical"];
+const variantProps$1 = {
+	single: {
+		defaultValue: 40,
+		"aria-label": "Value"
+	},
+	range: { defaultValue: [20, 70] },
+	marks: {
+		defaultValue: 30,
+		step: 10,
+		marks: true,
+		"aria-label": "Value"
+	}
+};
+const variantLabels$12 = {
+	single: "One thumb",
+	range: "A range",
+	marks: "With marks"
+};
+const inputRangeCatalog = defineCatalogEntry()({
+	summary: "A slider: one value on a range, or two or more thumbs for a range of values.",
+	isPlaceable: true,
+	example: {
+		component: "InputRange",
+		props: {
+			defaultValue: 40,
+			"aria-label": "Value"
+		},
+		children: []
+	},
+	variants: Object.keys(variantProps$1).map((name) => ({
+		name,
+		label: variantLabels$12[name],
+		example: {
+			component: "InputRange",
+			props: variantProps$1[name],
+			children: []
+		}
+	})),
+	options: {
+		min: { values: [
+			0,
+			10,
+			-50
+		] },
+		max: { values: [
+			10,
+			100,
+			1e3
+		] },
+		step: {
+			values: [
+				1,
+				5,
+				10,
+				.1
+			],
+			default: 1
+		},
+		shiftStep: {
+			values: [10, 20],
+			default: 10
+		},
+		marks: {
+			values: [true, false],
+			default: false
+		},
+		orientation: {
+			values: inputRangeOrientationValues,
+			default: "horizontal"
+		},
+		track: {
+			values: inputRangeTrackValues,
+			default: "normal"
+		},
+		valueLabel: {
+			values: inputRangeValueLabelValues,
+			default: "off"
+		},
+		shouldSwapThumbs: {
+			values: [true, false],
+			default: true
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	domEvents: ["onChangeCommitted"]
+});
+//#endregion
 //#region src/LinearProgress/LinearProgress.catalog.ts
 const linearProgressVariantValues = [
 	"indeterminate",
@@ -1979,6 +2099,128 @@ const nativeSelectCatalog = defineCatalogEntry()({
 	preview: { width: 220 }
 });
 //#endregion
+//#region src/NumberField/NumberField.catalog.ts
+const numberFieldSpinButtonsValues = [
+	"stacked",
+	"sides",
+	"none"
+];
+const numberFieldVariantValues = [
+	"default",
+	"outlined",
+	"underline",
+	"text"
+];
+const spinLabels = {
+	stacked: "Stacked",
+	sides: "Either side",
+	none: "No buttons"
+};
+const example = {
+	defaultValue: 5,
+	min: 0,
+	max: 10,
+	incrementLabel: "Increase",
+	decrementLabel: "Decrease",
+	"aria-label": "Quantity"
+};
+const numberFieldCatalog = defineCatalogEntry()({
+	summary: "A field for a number, read in its locale and clamped to a range, stepped by keys or buttons.",
+	isPlaceable: true,
+	example: {
+		component: "NumberField",
+		props: {
+			...example,
+			variant: "outlined"
+		},
+		children: []
+	},
+	variants: numberFieldSpinButtonsValues.map((spinButtons) => ({
+		name: spinButtons,
+		label: spinLabels[spinButtons],
+		example: {
+			component: "NumberField",
+			props: {
+				...example,
+				variant: "outlined",
+				spinButtons
+			},
+			children: []
+		}
+	})),
+	options: {
+		min: { values: [
+			0,
+			1,
+			-10
+		] },
+		max: { values: [10, 100] },
+		step: {
+			values: [
+				1,
+				.5,
+				5
+			],
+			default: 1
+		},
+		spinButtons: {
+			values: numberFieldSpinButtonsValues,
+			default: "stacked"
+		},
+		variant: {
+			values: numberFieldVariantValues,
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: {
+			scale: "text",
+			default: "primary"
+		},
+		shouldSnapOnStep: {
+			values: [true, false],
+			default: false
+		},
+		shouldScrubOnWheel: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		readOnly: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	domEvents: ["onChangeCommitted"]
+});
+//#endregion
 //#region src/Pagination/Pagination.catalog.ts
 const paginationVariantValues = ["text", "outlined"];
 const paginationShapeValues = ["circular", "rounded"];
@@ -2370,6 +2612,92 @@ const radioCatalog = defineCatalogEntry()({
 	}
 });
 //#endregion
+//#region src/Rating/Rating.catalog.ts
+const ratingPrecisionValues = [1, .5];
+const sizes = {
+	sm: "Small",
+	md: "Medium",
+	lg: "Large"
+};
+const ratingCatalog = defineCatalogEntry()({
+	summary: "A row of icons the user sets as a rating, or a read-only display of one.",
+	isPlaceable: true,
+	example: {
+		component: "Rating",
+		props: {
+			defaultValue: 3,
+			"aria-label": "Rating",
+			emptyLabelText: "No rating"
+		},
+		children: []
+	},
+	variants: Object.keys(sizes).map((size) => ({
+		name: size,
+		label: sizes[size],
+		example: {
+			component: "Rating",
+			props: {
+				defaultValue: 3,
+				size,
+				"aria-label": "Rating"
+			},
+			children: []
+		}
+	})),
+	options: {
+		max: {
+			values: [
+				3,
+				5,
+				10
+			],
+			default: 5
+		},
+		precision: {
+			values: ratingPrecisionValues,
+			default: 1
+		},
+		highlightSelectedOnly: {
+			values: [true, false],
+			default: false
+		},
+		readOnly: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "warning"
+		}
+	},
+	content: {
+		icon: "child",
+		emptyIcon: "child"
+	},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	domEvents: ["onChangeActive"]
+});
+//#endregion
 //#region src/Select/Select.catalog.ts
 const selectVariantValues = [
 	"default",
@@ -2477,7 +2805,7 @@ const variantLabels$7 = {
 	outlined: "Outlined",
 	plain: "Plain"
 };
-const items = [
+const items$1 = [
 	node("SidebarItem", {
 		icon: "folder",
 		label: "Directory",
@@ -2507,7 +2835,7 @@ const sidebarCatalog = defineCatalogEntry()({
 	example: {
 		component: "Sidebar",
 		props: content$1,
-		children: items
+		children: items$1
 	},
 	variants: sidebarVariantValues.map((variant) => ({
 		name: variant,
@@ -2518,7 +2846,7 @@ const sidebarCatalog = defineCatalogEntry()({
 				...content$1,
 				variant
 			},
-			children: items
+			children: items$1
 		}
 	})),
 	options: {
@@ -3664,6 +3992,120 @@ const toggleButtonGroupCatalog = defineCatalogEntry()({
 	}
 });
 //#endregion
+//#region src/TransferList/TransferList.catalog.ts
+const items = [
+	{
+		value: "apple",
+		label: "Apple"
+	},
+	{
+		value: "banana",
+		label: "Banana"
+	},
+	{
+		value: "cherry",
+		label: "Cherry"
+	},
+	{
+		value: "date",
+		label: "Date",
+		disabled: true
+	}
+];
+const names = {
+	leftLabel: "Choices",
+	rightLabel: "Chosen",
+	moveRightLabel: "Move right",
+	moveLeftLabel: "Move left"
+};
+const moveAllNames = {
+	moveAllRightLabel: "Move all right",
+	moveAllLeftLabel: "Move all left"
+};
+const transferListCatalog = defineCatalogEntry()({
+	summary: "Two lists and the buttons that move the checked items from one to the other.",
+	isPlaceable: true,
+	example: {
+		component: "TransferList",
+		props: {
+			items,
+			defaultValue: ["cherry"],
+			...names
+		},
+		children: []
+	},
+	variants: [
+		{
+			name: "basic",
+			label: "Basic",
+			example: {
+				component: "TransferList",
+				props: {
+					items,
+					...names
+				},
+				children: []
+			}
+		},
+		{
+			name: "move-all",
+			label: "With move all",
+			example: {
+				component: "TransferList",
+				props: {
+					items,
+					shouldShowMoveAll: true,
+					...names,
+					...moveAllNames
+				},
+				children: []
+			}
+		},
+		{
+			name: "select-all",
+			label: "With select all",
+			example: {
+				component: "TransferList",
+				props: {
+					items,
+					hasSelectAll: true,
+					...names
+				},
+				children: []
+			}
+		}
+	],
+	options: {
+		shouldShowMoveAll: {
+			values: [true, false],
+			default: false
+		},
+		hasSelectAll: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: { scale: "palette" }
+	},
+	content: {},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	}
+});
+//#endregion
 //#region src/Typography/Typography.catalog.ts
 const typographyAlignValues = [
 	"left",
@@ -3847,6 +4289,10 @@ const catalogSources = {
 		entry: imageCatalog,
 		folder: "Image"
 	},
+	InputRange: {
+		entry: inputRangeCatalog,
+		folder: "InputRange"
+	},
 	LinearProgress: {
 		entry: linearProgressCatalog,
 		folder: "LinearProgress"
@@ -3886,6 +4332,10 @@ const catalogSources = {
 		entry: nativeSelectCatalog,
 		folder: "NativeSelect"
 	},
+	NumberField: {
+		entry: numberFieldCatalog,
+		folder: "NumberField"
+	},
 	Pagination: {
 		entry: paginationCatalog,
 		folder: "Pagination"
@@ -3919,6 +4369,10 @@ const catalogSources = {
 		entry: radioCatalog,
 		folder: "Radio"
 	},
+	Rating: {
+		entry: ratingCatalog,
+		folder: "Rating"
+	},
 	Select: {
 		entry: selectCatalog,
 		folder: "Select"
@@ -4036,6 +4490,10 @@ const catalogSources = {
 		folder: "ToggleButton",
 		family: "ToggleButton"
 	},
+	TransferList: {
+		entry: transferListCatalog,
+		folder: "TransferList"
+	},
 	Typography: {
 		entry: typographyCatalog,
 		folder: "Typography"

package/dist/engine.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
 //#region src/theme/emotion.d.ts

package/dist/engine.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
 //#region src/theme/emotion.d.ts

package/dist/{index-DCmH5f9I.d.cts → index-B1RFybA_.d.mts}

@@ -1,5 +1,5 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
-import { t as MenuItemValue } from "./MenuListContext-vujGcRk9.cjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { t as MenuItemValue } from "./MenuListContext-x-7lH4CH.mjs";
 import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];

package/dist/{index-Cj5Rhh_9.d.mts → index-B4TeaB7b.d.cts}

@@ -1,5 +1,5 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
-import { t as MenuItemValue } from "./MenuListContext-Dml16k0X.mjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { t as MenuItemValue } from "./MenuListContext-DKUOhNyw.cjs";
 import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];

package/dist/{index-DIC7HKpP.d.mts → index-BGbTuHP9.d.mts}

@@ -1,4 +1,4 @@
-import { M as PaletteColor, V as Theme } from "./index-CVNJEUwJ.mjs";
+import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 //#region src/Pagination/hooks/usePagination.d.ts

package/dist/{index-BiVvxOvj.d.cts → index-BHKgEOZJ.d.cts}

@@ -1,5 +1,5 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BFruxTHv.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-ChXeKJCk.cjs";
 import { HTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/Pagination.d.ts