@soroush.tech/design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/PageLayout/PageLayout.mjs

@@ -1,147 +0,0 @@
-import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
-import { View } from "../View.mjs";
-import { t as PageLayoutContext } from "../PageLayoutContext-DjJ1_7Xc.mjs";
-import { Grid } from "../Grid.mjs";
-import { n as layoutStyles, t as layoutLength } from "../layoutStyles-f0ISNjsC.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/PageLayout/PageLayout/PageLayout.tsx
-const regionContext = {
-	top: {
-		region: "bar",
-		placement: "top"
-	},
-	bottom: {
-		region: "bar",
-		placement: "bottom"
-	},
-	start: {
-		region: "panel",
-		side: "start"
-	},
-	end: {
-		region: "panel",
-		side: "end"
-	}
-};
-const inRegion = (key, node) => /* @__PURE__ */ jsx(PageLayoutContext.Provider, {
-	value: regionContext[key],
-	children: node
-});
-const panelTrack = (theme, panel) => {
-	if (panel?.mode === "inline") return layoutLength(theme, panel.width);
-	if (panel?.mode === "collapsed") return layoutLength(theme, panel.railWidth);
-	return "0px";
-};
-const PageLayoutRoot = styled(Grid, {
-	name: "PageLayout",
-	label: "PageLayout",
-	shouldForwardProp: (prop) => prop !== "regions",
-	systemProps: [src_exports.layout]
-})({
-	position: "relative",
-	minHeight: "100dvh",
-	gridTemplateAreas: "\"top top top\" \"start content end\" \"bottom bottom bottom\""
-}, ({ theme, regions }) => layoutStyles(theme, ({ bars, panels }) => {
-	const track = (side) => regions[side] ? panelTrack(theme, panels[side]) : "0px";
-	const row = (placement) => regions[placement] ? layoutLength(theme, bars[placement]) : "0px";
-	return {
-		gridTemplateColumns: `${track("start")} minmax(0, 1fr) ${track("end")}`,
-		gridTemplateRows: `${row("top")} minmax(0, 1fr) ${row("bottom")}`
-	};
-}));
-const PageLayoutBar = styled(View, {
-	name: "PageLayout",
-	slot: "bar",
-	label: "PageLayoutBar",
-	shouldForwardProp: (prop) => prop !== "placement"
-})(({ theme, placement }) => ({
-	gridArea: placement,
-	minWidth: 0,
-	...layoutStyles(theme, ({ bars }) => ({ display: layoutLength(theme, bars[placement]) === "0px" ? "none" : "block" }))
-}));
-const panelStyle = (theme, side, isOpen, panel) => {
-	if (panel?.mode === "overlay") return {
-		display: isOpen ? "block" : "none",
-		position: "absolute",
-		insetBlock: 0,
-		[side === "start" ? "insetInlineStart" : "insetInlineEnd"]: 0,
-		width: layoutLength(theme, panel.width),
-		zIndex: theme.zOrder.drawer
-	};
-	return {
-		display: !panel || panel.mode === "hidden" ? "none" : "block",
-		position: "static",
-		width: "auto",
-		zIndex: "auto"
-	};
-};
-const PageLayoutPanel = styled(View, {
-	name: "PageLayout",
-	slot: "panel",
-	label: "PageLayoutPanel",
-	shouldForwardProp: (prop) => prop !== "side" && prop !== "isOpen"
-})(({ theme, side, isOpen }) => ({
-	gridArea: side,
-	minWidth: 0,
-	overflow: "auto",
-	...layoutStyles(theme, ({ panels }) => panelStyle(theme, side, isOpen, panels[side]))
-}));
-const PageLayoutContent = styled(View, {
-	name: "PageLayout",
-	slot: "content",
-	label: "PageLayoutContent"
-})(({ theme }) => ({
-	gridArea: "content",
-	minWidth: 0,
-	width: "100%",
-	...layoutStyles(theme, ({ content: { margin, mode, maxWidth } }) => {
-		const isFixed = mode === "fixed";
-		return {
-			paddingInline: layoutLength(theme, margin),
-			maxWidth: isFixed && maxWidth !== void 0 ? layoutLength(theme, maxWidth) : "none",
-			marginInline: isFixed ? "auto" : 0
-		};
-	})
-}));
-/**
-* The page frame from `theme.layout`: bars on top and bottom, side panels at the
-* start and end, and the content container between them, each breakpoint
-* arranged by its layout entry in CSS alone (no JavaScript media queries, so
-* server rendering matches the client). Lay the content out on the theme's
-* columns with `LayoutGrid`.
-*/
-function PageLayout({ children, topBar, bottomBar, startPanel, endPanel, openPanels = {}, ...rest }) {
-	const regions = {
-		top: topBar != null,
-		bottom: bottomBar != null,
-		start: startPanel != null,
-		end: endPanel != null
-	};
-	return /* @__PURE__ */ jsxs(PageLayoutRoot, {
-		regions,
-		...rest,
-		children: [
-			regions.top && /* @__PURE__ */ jsx(PageLayoutBar, {
-				placement: "top",
-				children: inRegion("top", topBar)
-			}),
-			regions.start && /* @__PURE__ */ jsx(PageLayoutPanel, {
-				side: "start",
-				isOpen: !!openPanels.start,
-				children: inRegion("start", startPanel)
-			}),
-			/* @__PURE__ */ jsx(PageLayoutContent, { children }),
-			regions.end && /* @__PURE__ */ jsx(PageLayoutPanel, {
-				side: "end",
-				isOpen: !!openPanels.end,
-				children: inRegion("end", endPanel)
-			}),
-			regions.bottom && /* @__PURE__ */ jsx(PageLayoutBar, {
-				placement: "bottom",
-				children: inRegion("bottom", bottomBar)
-			})
-		]
-	});
-}
-//#endregion
-export { PageLayout };

package/dist/PageLayout.cjs

@@ -1,7 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_PageLayoutContext = require("./PageLayoutContext-agXGhegE.cjs");
-const require_PageLayout_PageLayout = require("./PageLayout/PageLayout.cjs");
-const require_PageLayout_LayoutGrid = require("./PageLayout/LayoutGrid.cjs");
-exports.LayoutGrid = require_PageLayout_LayoutGrid.LayoutGrid;
-exports.PageLayout = require_PageLayout_PageLayout.PageLayout;
-exports.PageLayoutContext = require_PageLayoutContext.PageLayoutContext;

package/dist/PageLayout.d.cts

@@ -1,19 +0,0 @@
-import { h as LayoutPanels } from "./themes-9YNnlVyY.cjs";
-import { LayoutGrid, LayoutGridProps } from "./PageLayout/LayoutGrid.cjs";
-import "./index-BDD-L8uL.cjs";
-import { PageLayout, PageLayoutBarPlacement, PageLayoutPanelSide, PageLayoutProps } from "./PageLayout/PageLayout.cjs";
-//#region src/PageLayout/PageLayoutContext.d.ts
-/**
- * The `PageLayout` region a component renders in, so components that fill a region
- * (`Sidebar` in a panel, `AppBar` in a bar) can size from it. `null` outside one.
- */
-type PageLayoutRegion = {
-  region: 'panel';
-  side: keyof LayoutPanels;
-} | {
-  region: 'bar';
-  placement: 'top' | 'bottom';
-};
-declare const PageLayoutContext: import("react").Context<PageLayoutRegion | null>;
-//#endregion
-export { LayoutGrid, LayoutGridProps, PageLayout, PageLayoutBarPlacement, PageLayoutContext, PageLayoutPanelSide, PageLayoutProps, PageLayoutRegion };

package/dist/PageLayout.d.mts

@@ -1,19 +0,0 @@
-import { h as LayoutPanels } from "./themes-9YNnlVyY.mjs";
-import { LayoutGrid, LayoutGridProps } from "./PageLayout/LayoutGrid.mjs";
-import "./index-CoHrw2p7.mjs";
-import { PageLayout, PageLayoutBarPlacement, PageLayoutPanelSide, PageLayoutProps } from "./PageLayout/PageLayout.mjs";
-//#region src/PageLayout/PageLayoutContext.d.ts
-/**
- * The `PageLayout` region a component renders in, so components that fill a region
- * (`Sidebar` in a panel, `AppBar` in a bar) can size from it. `null` outside one.
- */
-type PageLayoutRegion = {
-  region: 'panel';
-  side: keyof LayoutPanels;
-} | {
-  region: 'bar';
-  placement: 'top' | 'bottom';
-};
-declare const PageLayoutContext: import("react").Context<PageLayoutRegion | null>;
-//#endregion
-export { LayoutGrid, LayoutGridProps, PageLayout, PageLayoutBarPlacement, PageLayoutContext, PageLayoutPanelSide, PageLayoutProps, PageLayoutRegion };

package/dist/PageLayout.mjs

@@ -1,4 +0,0 @@
-import { t as PageLayoutContext } from "./PageLayoutContext-DjJ1_7Xc.mjs";
-import { PageLayout } from "./PageLayout/PageLayout.mjs";
-import { LayoutGrid } from "./PageLayout/LayoutGrid.mjs";
-export { LayoutGrid, PageLayout, PageLayoutContext };

package/dist/PageLayoutContext-DjJ1_7Xc.mjs

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-//#region src/PageLayout/PageLayoutContext.ts
-const PageLayoutContext = createContext(null);
-//#endregion
-export { PageLayoutContext as t };

package/dist/PageLayoutContext-agXGhegE.cjs

@@ -1,9 +0,0 @@
-//#region src/PageLayout/PageLayoutContext.ts
-const PageLayoutContext = (0, require("react").createContext)(null);
-//#endregion
-Object.defineProperty(exports, "PageLayoutContext", {
-	enumerable: true,
-	get: function() {
-		return PageLayoutContext;
-	}
-});

package/dist/index-B41OXLX8.d.mts

@@ -1,16 +0,0 @@
-import { S as Theme } from "./themes-9YNnlVyY.mjs";
-import "./index-CEqa8xx8.mjs";
-import { s as ViewProps } from "./index-tv-TGYSG.mjs";
-import { FlexboxProps } from "@soroush.tech/styled-system";
-//#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
-declare const Flex: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & FlexProps, {}, {}>;
-//#endregion
-export { FlexProps as n, GapToken as r, Flex as t };

package/dist/index-BJ5Tsf7u.d.cts

@@ -1,16 +0,0 @@
-import { S as Theme } from "./themes-9YNnlVyY.cjs";
-import "./index-DkJzi96w.cjs";
-import { s as ViewProps } from "./index-CvWslVk6.cjs";
-import { FlexboxProps, GridProps } from "@soroush.tech/styled-system";
-//#region src/Grid/Grid.d.ts
-/** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-interface GridProps$1 extends ViewProps, GridProps<Theme>, FlexboxProps<Theme> {}
-declare const Grid: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & GridProps$1, {}, {}>;
-//#endregion
-export { Grid as n, GridProps$1 as r, GapToken as t };

package/dist/index-BMJ3tyIw.d.cts

@@ -1,16 +0,0 @@
-import { S as Theme } from "./themes-9YNnlVyY.cjs";
-import "./index-DkJzi96w.cjs";
-import { s as ViewProps } from "./index-CvWslVk6.cjs";
-import { FlexboxProps } from "@soroush.tech/styled-system";
-//#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
-declare const Flex: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & FlexProps, {}, {}>;
-//#endregion
-export { FlexProps as n, GapToken as r, Flex as t };

package/dist/index-BnFxdnEL.d.mts

@@ -1,16 +0,0 @@
-import { S as Theme } from "./themes-9YNnlVyY.mjs";
-import "./index-CEqa8xx8.mjs";
-import { s as ViewProps } from "./index-tv-TGYSG.mjs";
-import { FlexboxProps, GridProps } from "@soroush.tech/styled-system";
-//#region src/Grid/Grid.d.ts
-/** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-interface GridProps$1 extends ViewProps, GridProps<Theme>, FlexboxProps<Theme> {}
-declare const Grid: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & GridProps$1, {}, {}>;
-//#endregion
-export { Grid as n, GridProps$1 as r, GapToken as t };

package/dist/layoutStyles-B4Z1K6HZ.cjs

@@ -1,67 +0,0 @@
-const require_src = require("./src-DU81aGy9.cjs");
-//#region src/PageLayout/layoutStyles.ts
-const mergePanel = (panel, override) => {
-	const { mode, width, railWidth } = {
-		...panel,
-		...override
-	};
-	return mode && width !== void 0 && railWidth !== void 0 ? {
-		mode,
-		width,
-		railWidth
-	} : void 0;
-};
-const mergeEntry = (entry, { bars, panels, content }) => ({
-	bars: {
-		...entry.bars,
-		...bars
-	},
-	panels: {
-		start: mergePanel(entry.panels.start, panels?.start),
-		end: mergePanel(entry.panels.end, panels?.end)
-	},
-	content: {
-		...entry.content,
-		...content
-	}
-});
-/**
-* `theme.layout` resolved mobile-first: the base entry, then one entry per
-* breakpoint that has one, merged over the entries before it, with its `@media` rule.
-*/
-const layoutEntries = ({ breakpoints, layout }) => {
-	let entry = layout.base;
-	const entries = [[null, entry]];
-	for (const [key, value] of Object.entries(breakpoints)) {
-		const override = layout[key];
-		if (!override) continue;
-		entry = mergeEntry(entry, override);
-		entries.push([(0, require_src.src_exports.createMediaQuery)(value), entry]);
-	}
-	return entries;
-};
-/** A layout length as CSS: a `theme.space` key resolves through the scale, a length stays as written. */
-const layoutLength = (theme, value = 0) => {
-	const length = theme.space[value] ?? value;
-	return typeof length === "number" ? `${length}px` : length;
-};
-/** Styles per layout entry: the base entry's at the top level, each breakpoint's in its `@media` block. */
-const layoutStyles = (theme, style) => {
-	const styles = {};
-	for (const [media, entry] of layoutEntries(theme)) if (media) styles[media] = style(entry);
-	else Object.assign(styles, style(entry));
-	return styles;
-};
-//#endregion
-Object.defineProperty(exports, "layoutLength", {
-	enumerable: true,
-	get: function() {
-		return layoutLength;
-	}
-});
-Object.defineProperty(exports, "layoutStyles", {
-	enumerable: true,
-	get: function() {
-		return layoutStyles;
-	}
-});

package/dist/layoutStyles-f0ISNjsC.mjs

@@ -1,56 +0,0 @@
-import { a as src_exports } from "./src-DLGYOJMh.mjs";
-//#region src/PageLayout/layoutStyles.ts
-const mergePanel = (panel, override) => {
-	const { mode, width, railWidth } = {
-		...panel,
-		...override
-	};
-	return mode && width !== void 0 && railWidth !== void 0 ? {
-		mode,
-		width,
-		railWidth
-	} : void 0;
-};
-const mergeEntry = (entry, { bars, panels, content }) => ({
-	bars: {
-		...entry.bars,
-		...bars
-	},
-	panels: {
-		start: mergePanel(entry.panels.start, panels?.start),
-		end: mergePanel(entry.panels.end, panels?.end)
-	},
-	content: {
-		...entry.content,
-		...content
-	}
-});
-/**
-* `theme.layout` resolved mobile-first: the base entry, then one entry per
-* breakpoint that has one, merged over the entries before it, with its `@media` rule.
-*/
-const layoutEntries = ({ breakpoints, layout }) => {
-	let entry = layout.base;
-	const entries = [[null, entry]];
-	for (const [key, value] of Object.entries(breakpoints)) {
-		const override = layout[key];
-		if (!override) continue;
-		entry = mergeEntry(entry, override);
-		entries.push([(0, src_exports.createMediaQuery)(value), entry]);
-	}
-	return entries;
-};
-/** A layout length as CSS: a `theme.space` key resolves through the scale, a length stays as written. */
-const layoutLength = (theme, value = 0) => {
-	const length = theme.space[value] ?? value;
-	return typeof length === "number" ? `${length}px` : length;
-};
-/** Styles per layout entry: the base entry's at the top level, each breakpoint's in its `@media` block. */
-const layoutStyles = (theme, style) => {
-	const styles = {};
-	for (const [media, entry] of layoutEntries(theme)) if (media) styles[media] = style(entry);
-	else Object.assign(styles, style(entry));
-	return styles;
-};
-//#endregion
-export { layoutStyles as n, layoutLength as t };

package/dist/{Modal-CYNcPk-2.mjs → Modal-BcsyrrpH.mjs}

@@ -1,8 +1,8 @@
 import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 import { Backdrop } from "./Backdrop.mjs";
-import { Portal } from "./Portal.mjs";
 import { FocusTrap } from "./FocusTrap.mjs";
+import { Portal } from "./Portal.mjs";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/utils/ownerDocument.ts

package/dist/{Modal-CApyh_V5.cjs → Modal-CM3osOqj.cjs}

@@ -1,8 +1,8 @@
 const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 const require_Backdrop = require("./Backdrop.cjs");
-const require_Portal = require("./Portal.cjs");
 const require_FocusTrap = require("./FocusTrap.cjs");
+const require_Portal = require("./Portal.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");