@soroush.tech/styled-system 5.1.6

package/LICENSE

@@ -0,0 +1,26 @@
+MIT License
+
+Copyright (c) 2026 Masoud Soroush <https://soroush.tech>
+Copyright (c) 2017-2021 Brent Jackson
+
+This package is a TypeScript rewrite of styled-system (https://github.com/jxnblk/styled-system),
+originally created by Brent Jackson and released under the MIT License. The original copyright
+notice is retained above.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# @soroush.tech/styled-system
+
+[![npm version](https://img.shields.io/npm/v/@soroush.tech/styled-system.svg)](https://www.npmjs.com/package/@soroush.tech/styled-system)
+[![npm downloads](https://img.shields.io/npm/dm/@soroush.tech/styled-system.svg)](https://www.npmjs.com/package/@soroush.tech/styled-system)
+[![coverage](https://codecov.io/gh/soroush-tech/soroush.tech/branch/main/graph/badge.svg?flag=styled-system)](https://app.codecov.io/gh/soroush-tech/soroush.tech?flags%5B0%5D=styled-system)
+[![unpacked size](https://img.shields.io/npm/unpacked-size/@soroush.tech/styled-system.svg)](https://www.npmjs.com/package/@soroush.tech/styled-system)
+[![types included](https://img.shields.io/npm/types/@soroush.tech/styled-system.svg)](https://www.npmjs.com/package/@soroush.tech/styled-system)
+[![license](https://img.shields.io/npm/l/@soroush.tech/styled-system.svg)](./LICENSE)
+
+A maintained, first-class-TypeScript rewrite of [styled-system](https://github.com/jxnblk/styled-system) v5 — responsive, theme-aware style props for CSS-in-JS.
+
+It is a **drop-in replacement** for the `styled-system` runtime: the root export surface matches upstream verbatim, and the package ships its own types (replacing `@types/styled-system`).
+
+## Features
+
+- Add style props that hook into your own theme
+- Quickly set responsive `font-size`, `margin`, `padding`, `width`, and more with props
+- Influenced by constraint-based design-system principles
+- Typographic scale, and a spacing scale for `margin` and `padding`
+- Works with any color palette
+- Works with most CSS-in-JS libraries, including [Emotion](https://emotion.sh) and [styled-components](https://styled-components.com)
+- First-class TypeScript types — theme-scale-aware props, replacing `@types/styled-system`
+
+## Install
+
+```sh
+# npm
+npm install @soroush.tech/styled-system
+```
+
+```sh
+# pnpm
+pnpm add @soroush.tech/styled-system
+```
+
+```sh
+# yarn
+yarn add @soroush.tech/styled-system
+```
+
+`@emotion/is-prop-valid` (`^1.4.0`) is a peer dependency used only by the
+[`should-forward-prop`](#subpath-imports) entry — install it if you import that subpath.
+You bring your own CSS-in-JS library (Emotion, styled-components, …); the core carries
+neither at runtime.
+
+## Usage
+
+```ts
+// Example uses Emotion, but styled-system works with most other CSS-in-JS libraries as well
+import styled from '@emotion/styled'
+import { space, layout, typography, color } from '@soroush.tech/styled-system'
+
+// Add styled-system functions to your component
+const Box = styled.div`
+  ${space}
+  ${layout}
+  ${typography}
+  ${color}
+`
+```
+
+Each style function exposes its own set of component props that handle styles based on values defined in a theme.
+
+```tsx
+// width: 50%
+<Box width={1 / 2} />
+
+// font-size: 20px (theme.fontSizes[4])
+<Box fontSize={4} />
+
+// margin: 16px (theme.space[2])
+<Box m={2} />
+
+// padding: 32px (theme.space[3])
+<Box p={3} />
+
+// color
+<Box color="tomato" />
+
+// color: #333 (theme.colors.gray[0])
+<Box color="gray.0" />
+
+// background-color
+<Box bg="tomato" />
+```
+
+### Responsive style props
+
+Set responsive `width`, `margin`, `padding`, `font-size`, and other properties with a shorthand array syntax. See [Responsive Styles](./docs/responsive-styles.md).
+
+```tsx
+// responsive width
+<Box width={[1, 1 / 2, 1 / 4]} />
+
+// responsive font-size
+<Box fontSize={[2, 3, 4]} />
+
+// responsive margin
+<Box m={[1, 2, 3]} />
+
+// responsive padding
+<Box p={[1, 2, 3]} />
+```
+
+### Subpath imports
+
+Subpaths mirror the original `@styled-system/*` packages:
+
+```ts
+import { css } from '@soroush.tech/styled-system/css'
+import { themeGet } from '@soroush.tech/styled-system/theme-get'
+import { pick, omit } from '@soroush.tech/styled-system/props'
+import shouldForwardProp, {
+  createShouldForwardProp,
+  props,
+} from '@soroush.tech/styled-system/should-forward-prop'
+```
+
+## Drop-in via alias
+
+Existing `styled-system` users can swap with a package-manager alias — no code changes:
+
+```jsonc
+"dependencies": {
+  "styled-system": "npm:@soroush.tech/styled-system@^5"
+}
+```
+
+`@styled-system/should-forward-prop` maps to the
+`@soroush.tech/styled-system/should-forward-prop` subpath.
+
+## Documentation
+
+Full docs live in [`docs/`](./docs/README.md):
+
+- [Getting Started](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/getting-started.md)
+- [Responsive Styles](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/responsive-styles.md)
+- [How it Works](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/how-it-works.md)
+- [Custom Props](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/custom-props.md)
+- [Variants](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/variants.md)
+- [API](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/api.md)
+- [Reference Table](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/table.md)
+- [TypeScript](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/typescript.md)
+- [Guides](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/guides/index.md)
+
+Runnable demos live in [`examples/styled-system/`](../../examples/styled-system).
+
+## License
+
+MIT — a rewrite of styled-system (© 2017–2021 Brent Jackson), see [`LICENSE`](./LICENSE).

package/dist/background-B-jql3jb.mjs

@@ -0,0 +1,16 @@
+import { system } from "./core.mjs";
+//#region src/background/background.ts
+const config = {
+	background: true,
+	backgroundImage: true,
+	backgroundSize: true,
+	backgroundPosition: true,
+	backgroundRepeat: true
+};
+config.bgImage = config.backgroundImage;
+config.bgSize = config.backgroundSize;
+config.bgPosition = config.backgroundPosition;
+config.bgRepeat = config.backgroundRepeat;
+const background = system(config);
+//#endregion
+export { background as t };

package/dist/background-wugr6cG7.cjs

@@ -0,0 +1,21 @@
+const require_core = require("./core.cjs");
+//#region src/background/background.ts
+const config = {
+	background: true,
+	backgroundImage: true,
+	backgroundSize: true,
+	backgroundPosition: true,
+	backgroundRepeat: true
+};
+config.bgImage = config.backgroundImage;
+config.bgSize = config.backgroundSize;
+config.bgPosition = config.backgroundPosition;
+config.bgRepeat = config.backgroundRepeat;
+const background = require_core.system(config);
+//#endregion
+Object.defineProperty(exports, "background", {
+	enumerable: true,
+	get: function() {
+		return background;
+	}
+});

package/dist/background.cjs

@@ -0,0 +1,7 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_background = require("./background-wugr6cG7.cjs");
+exports.background = require_background.background;
+exports.default = require_background.background;

package/dist/background.d.cts

@@ -0,0 +1,2 @@
+import { t as background } from "./index-DZaFk5pk.cjs";
+export { background, background as default };

package/dist/background.d.mts

@@ -0,0 +1,2 @@
+import { t as background } from "./index-9ZhIewzy.mjs";
+export { background, background as default };

package/dist/background.mjs

@@ -0,0 +1,2 @@
+import { t as background } from "./background-B-jql3jb.mjs";
+export { background, background as default };

package/dist/border-Dder4Dhp.mjs

@@ -0,0 +1,131 @@
+import { system } from "./core.mjs";
+//#region src/border/border.ts
+const config = {
+	border: {
+		property: "border",
+		scale: "borders"
+	},
+	borderWidth: {
+		property: "borderWidth",
+		scale: "borderWidths"
+	},
+	borderStyle: {
+		property: "borderStyle",
+		scale: "borderStyles"
+	},
+	borderColor: {
+		property: "borderColor",
+		scale: "colors"
+	},
+	borderRadius: {
+		property: "borderRadius",
+		scale: "radii"
+	},
+	borderTop: {
+		property: "borderTop",
+		scale: "borders"
+	},
+	borderTopLeftRadius: {
+		property: "borderTopLeftRadius",
+		scale: "radii"
+	},
+	borderTopRightRadius: {
+		property: "borderTopRightRadius",
+		scale: "radii"
+	},
+	borderRight: {
+		property: "borderRight",
+		scale: "borders"
+	},
+	borderBottom: {
+		property: "borderBottom",
+		scale: "borders"
+	},
+	borderBottomLeftRadius: {
+		property: "borderBottomLeftRadius",
+		scale: "radii"
+	},
+	borderBottomRightRadius: {
+		property: "borderBottomRightRadius",
+		scale: "radii"
+	},
+	borderLeft: {
+		property: "borderLeft",
+		scale: "borders"
+	},
+	borderX: {
+		properties: ["borderLeft", "borderRight"],
+		scale: "borders"
+	},
+	borderY: {
+		properties: ["borderTop", "borderBottom"],
+		scale: "borders"
+	}
+};
+config.borderTopWidth = {
+	property: "borderTopWidth",
+	scale: "borderWidths"
+};
+config.borderTopColor = {
+	property: "borderTopColor",
+	scale: "colors"
+};
+config.borderTopStyle = {
+	property: "borderTopStyle",
+	scale: "borderStyles"
+};
+config.borderTopLeftRadius = {
+	property: "borderTopLeftRadius",
+	scale: "radii"
+};
+config.borderTopRightRadius = {
+	property: "borderTopRightRadius",
+	scale: "radii"
+};
+config.borderBottomWidth = {
+	property: "borderBottomWidth",
+	scale: "borderWidths"
+};
+config.borderBottomColor = {
+	property: "borderBottomColor",
+	scale: "colors"
+};
+config.borderBottomStyle = {
+	property: "borderBottomStyle",
+	scale: "borderStyles"
+};
+config.borderBottomLeftRadius = {
+	property: "borderBottomLeftRadius",
+	scale: "radii"
+};
+config.borderBottomRightRadius = {
+	property: "borderBottomRightRadius",
+	scale: "radii"
+};
+config.borderLeftWidth = {
+	property: "borderLeftWidth",
+	scale: "borderWidths"
+};
+config.borderLeftColor = {
+	property: "borderLeftColor",
+	scale: "colors"
+};
+config.borderLeftStyle = {
+	property: "borderLeftStyle",
+	scale: "borderStyles"
+};
+config.borderRightWidth = {
+	property: "borderRightWidth",
+	scale: "borderWidths"
+};
+config.borderRightColor = {
+	property: "borderRightColor",
+	scale: "colors"
+};
+config.borderRightStyle = {
+	property: "borderRightStyle",
+	scale: "borderStyles"
+};
+const border = system(config);
+//#endregion
+export { border as t };

package/dist/border-UuT-fTpy.cjs

@@ -0,0 +1,136 @@
+const require_core = require("./core.cjs");
+//#region src/border/border.ts
+const config = {
+	border: {
+		property: "border",
+		scale: "borders"
+	},
+	borderWidth: {
+		property: "borderWidth",
+		scale: "borderWidths"
+	},
+	borderStyle: {
+		property: "borderStyle",
+		scale: "borderStyles"
+	},
+	borderColor: {
+		property: "borderColor",
+		scale: "colors"
+	},
+	borderRadius: {
+		property: "borderRadius",
+		scale: "radii"
+	},
+	borderTop: {
+		property: "borderTop",
+		scale: "borders"
+	},
+	borderTopLeftRadius: {
+		property: "borderTopLeftRadius",
+		scale: "radii"
+	},
+	borderTopRightRadius: {
+		property: "borderTopRightRadius",
+		scale: "radii"
+	},
+	borderRight: {
+		property: "borderRight",
+		scale: "borders"
+	},
+	borderBottom: {
+		property: "borderBottom",
+		scale: "borders"
+	},
+	borderBottomLeftRadius: {
+		property: "borderBottomLeftRadius",
+		scale: "radii"
+	},
+	borderBottomRightRadius: {
+		property: "borderBottomRightRadius",
+		scale: "radii"
+	},
+	borderLeft: {
+		property: "borderLeft",
+		scale: "borders"
+	},
+	borderX: {
+		properties: ["borderLeft", "borderRight"],
+		scale: "borders"
+	},
+	borderY: {
+		properties: ["borderTop", "borderBottom"],
+		scale: "borders"
+	}
+};
+config.borderTopWidth = {
+	property: "borderTopWidth",
+	scale: "borderWidths"
+};
+config.borderTopColor = {
+	property: "borderTopColor",
+	scale: "colors"
+};
+config.borderTopStyle = {
+	property: "borderTopStyle",
+	scale: "borderStyles"
+};
+config.borderTopLeftRadius = {
+	property: "borderTopLeftRadius",
+	scale: "radii"
+};
+config.borderTopRightRadius = {
+	property: "borderTopRightRadius",
+	scale: "radii"
+};
+config.borderBottomWidth = {
+	property: "borderBottomWidth",
+	scale: "borderWidths"
+};
+config.borderBottomColor = {
+	property: "borderBottomColor",
+	scale: "colors"
+};
+config.borderBottomStyle = {
+	property: "borderBottomStyle",
+	scale: "borderStyles"
+};
+config.borderBottomLeftRadius = {
+	property: "borderBottomLeftRadius",
+	scale: "radii"
+};
+config.borderBottomRightRadius = {
+	property: "borderBottomRightRadius",
+	scale: "radii"
+};
+config.borderLeftWidth = {
+	property: "borderLeftWidth",
+	scale: "borderWidths"
+};
+config.borderLeftColor = {
+	property: "borderLeftColor",
+	scale: "colors"
+};
+config.borderLeftStyle = {
+	property: "borderLeftStyle",
+	scale: "borderStyles"
+};
+config.borderRightWidth = {
+	property: "borderRightWidth",
+	scale: "borderWidths"
+};
+config.borderRightColor = {
+	property: "borderRightColor",
+	scale: "colors"
+};
+config.borderRightStyle = {
+	property: "borderRightStyle",
+	scale: "borderStyles"
+};
+const border = require_core.system(config);
+//#endregion
+Object.defineProperty(exports, "border", {
+	enumerable: true,
+	get: function() {
+		return border;
+	}
+});

package/dist/border.cjs

@@ -0,0 +1,7 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_border = require("./border-UuT-fTpy.cjs");
+exports.border = require_border.border;
+exports.default = require_border.border;

package/dist/border.d.cts

@@ -0,0 +1,2 @@
+import { t as border } from "./index-BoMacn6F.cjs";
+export { border, border as default };

package/dist/border.d.mts

@@ -0,0 +1,2 @@
+import { t as border } from "./index-Bx7IxKu-.mjs";
+export { border, border as default };

package/dist/border.mjs

@@ -0,0 +1,2 @@
+import { t as border } from "./border-Dder4Dhp.mjs";
+export { border, border as default };

package/dist/color-BNs17Gw-.cjs

@@ -0,0 +1,22 @@
+const require_core = require("./core.cjs");
+//#region src/color/color.ts
+const config = {
+	color: {
+		property: "color",
+		scale: "colors"
+	},
+	backgroundColor: {
+		property: "backgroundColor",
+		scale: "colors"
+	},
+	opacity: true
+};
+config.bg = config.backgroundColor;
+const color = require_core.system(config);
+//#endregion
+Object.defineProperty(exports, "color", {
+	enumerable: true,
+	get: function() {
+		return color;
+	}
+});

package/dist/color-CGmMe8yP.mjs

@@ -0,0 +1,17 @@
+import { system } from "./core.mjs";
+//#region src/color/color.ts
+const config = {
+	color: {
+		property: "color",
+		scale: "colors"
+	},
+	backgroundColor: {
+		property: "backgroundColor",
+		scale: "colors"
+	},
+	opacity: true
+};
+config.bg = config.backgroundColor;
+const color = system(config);
+//#endregion
+export { color as t };

package/dist/color.cjs

@@ -0,0 +1,7 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_color = require("./color-BNs17Gw-.cjs");
+exports.color = require_color.color;
+exports.default = require_color.color;

package/dist/color.d.cts

@@ -0,0 +1,2 @@
+import { t as color } from "./index-j3E1mxCg.cjs";
+export { color, color as default };

package/dist/color.d.mts

@@ -0,0 +1,2 @@
+import { t as color } from "./index-D3t1Lyte.mjs";
+export { color, color as default };

package/dist/color.mjs

@@ -0,0 +1,2 @@
+import { t as color } from "./color-CGmMe8yP.mjs";
+export { color, color as default };