diff --git a/.github/workflows/deploy-chromatic.yml b/.github/workflows/deploy-chromatic.yml index 135cd2b7..679d7205 100644 --- a/.github/workflows/deploy-chromatic.yml +++ b/.github/workflows/deploy-chromatic.yml @@ -48,3 +48,10 @@ jobs: workingDir: packages/wow-ui/src projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} token: ${{ secrets.TOKEN }} + + - name: Create comment PR + uses: thollander/actions-comment-pull-request@v1 + env: + GITHUB_TOKEN: ${{ secrets.TOKEN }} + with: + message: "πŸš€ storybook: ${{ steps.chromatic.outputs.storybookUrl }}" \ No newline at end of file diff --git a/.gitignore b/.gitignore index 1cb2cc20..064af033 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,7 @@ yarn-error.log* ## Panda styled-system-studio + *storybook.log .eslintcache \ No newline at end of file diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx index c8dfb06c..2510e3f9 100644 --- a/apps/wow-docs/app/page.tsx +++ b/apps/wow-docs/app/page.tsx @@ -1,6 +1,6 @@ import { css } from "@styled-system/css/css"; import { UpArrow } from "wowds-icons"; -import Button from "wowds-ui/Button"; +import Switch from "wowds-ui/Switch"; const Home = () => { return ( @@ -15,7 +15,7 @@ const Home = () => {

docs

- + ); }; diff --git a/package.json b/package.json index ad8d6bda..148fb3b0 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@svgr/rollup": "^8.1.0", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^15.0.7", + "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.12", "@types/react": "^18.2.61", "@types/react-dom": "^18.2.19", @@ -66,6 +67,7 @@ "rollup": "^4.17.2", "rollup-jest": "^3.1.0", "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-preserve-directives": "^0.4.0", "shared-config": "workspace:^", "theme": "workspace:*", "ts-jest": "^29.1.2", diff --git a/packages/shared-config/jest.config.ts b/packages/shared-config/jest.config.ts index 9d944af2..584b10d6 100644 --- a/packages/shared-config/jest.config.ts +++ b/packages/shared-config/jest.config.ts @@ -12,7 +12,7 @@ const config: Config = { ], }, - setupFilesAfterEnv: ["./jest.config.ts"], + setupFilesAfterEnv: ["../shared-config/jest.setup.ts"], verbose: true, collectCoverage: true, restoreMocks: true, @@ -29,7 +29,8 @@ const config: Config = { "/node-modules/", ], moduleNameMapper: { - "^@styled-system(.*)$": "/styled-system$1", + "^@/(.*)$": "/src/$1", + "^@styled-system(.*)$": "/styled-system/$1", }, }; diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 63c66010..daf1ff48 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -29,6 +29,16 @@ "types": "./dist/Button/index.d.ts", "require": "./dist/Button.cjs", "import": "./dist/Button.js" + }, + "./Toggle": { + "types": "./dist/components/Toggle/index.d.ts", + "require": "./dist/Toggle.cjs", + "import": "./dist/Toggle.js" + }, + "./Switch": { + "types": "./dist/Switch/index.d.ts", + "require": "./dist/Switch.cjs", + "import": "./dist/Switch.js" } }, "keywords": [], diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts index d026f159..94f87429 100644 --- a/packages/wow-ui/panda.config.ts +++ b/packages/wow-ui/panda.config.ts @@ -8,6 +8,7 @@ export default defineConfig({ watch: true, outExtension: "js", polyfill: true, + jsxFramework: "react", include: ["./src/**/*.{js,jsx,ts,tsx}"], exclude: [], hooks: { diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index abdf7636..400d5c93 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -10,6 +10,7 @@ import url from "@rollup/plugin-url"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; import typescript from "@rollup/plugin-typescript"; import { fileURLToPath } from "url"; +import preserveDirectives from "rollup-plugin-preserve-directives"; const extensions = [".tsx", ".ts", ".js", ".jsx"]; @@ -18,12 +19,17 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)); process.env.BABEL_ENV = "production"; export default { - input: { Box: "./src/components/Box", Button: "./src/components/Button" }, + input: { + Box: "./src/components/Box", + Button: "./src/components/Button", + Switch: "./src/components/Switch", + }, output: [ { format: "esm", dir: "dist", entryFileNames: "[name].js", + preserveModules: true, }, { format: "cjs", @@ -65,5 +71,11 @@ export default { svgr(), terser(), json(), + preserveDirectives.default(), ], + onwarn: (warning) => { + if (warning.code !== "MODULE_LEVEL_DIRECTIVE") { + return; + } + }, }; diff --git a/packages/wow-ui/src/components/Switch/Switch.stories.tsx b/packages/wow-ui/src/components/Switch/Switch.stories.tsx new file mode 100644 index 00000000..7aca484d --- /dev/null +++ b/packages/wow-ui/src/components/Switch/Switch.stories.tsx @@ -0,0 +1,128 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; + +import Switch from "@/components/Switch"; + +const meta = { + title: "UI/Switch", + component: Switch, + tags: ["autodocs"], + parameters: { + componentSubtitle: "μŠ€μœ„μΉ˜ μ»΄ν¬λ„ŒνŠΈ", + }, + argTypes: { + defaultChecked: { + description: + "defaultCheckedλŠ” μŠ€μœ„μΉ˜κ°€ μ²˜μŒμ— ν™œμ„±ν™”λ˜μ–΄ μžˆλŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + control: { + type: "boolean", + }, + }, + isDisabled: { + description: + "isDisabledλŠ” μŠ€μœ„μΉ˜κ°€ λΉ„ν™œμ„±ν™”λ˜μ–΄ μžˆλŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + control: { + type: "boolean", + }, + }, + isChecked: { + description: "isCheckedλŠ” μ™ΈλΆ€μ—μ„œ μ œμ–΄ν•  ν™œμ„± μƒνƒœλ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + control: { + type: "boolean", + }, + }, + text: { + description: "μŠ€μœ„μΉ˜ 였λ₯Έμͺ½μ— λ“€μ–΄κ°ˆ ν…μŠ€νŠΈμž…λ‹ˆλ‹€.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + onChange: { + description: "μ™ΈλΆ€ ν™œμ„± μƒνƒœκ°€ 변경될 λ•Œ 호좜될 콜백 ν•¨μˆ˜λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onClick: { + description: "μŠ€μœ„μΉ˜ 클릭 μ‹œ λ™μž‘ν•  μ΄λ²€νŠΈμž…λ‹ˆλ‹€.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onKeyDown: { + description: + "μŠ€μœ„μΉ˜κ°€ ν¬μ»€μŠ€λμ„ λ•Œ μ—”ν„° ν‚€ λ˜λŠ” 슀페이슀 λ°”λ₯Ό λˆŒλ €μ„ λ•Œ λ™μž‘ν•  μ΄λ²€νŠΈμž…λ‹ˆλ‹€.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; + +export const DefaultChecked: Story = { + args: { + defaultChecked: true, + }, +}; + +export const Disabled: Story = { + args: { + isDisabled: true, + }, +}; + +export const WithText: Story = { + args: { + text: "Text", + }, +}; + +const ControlledSwitch = () => { + const [isChecked, setIsChecked] = useState(false); + + const handleChange = () => { + setIsChecked((prev) => !prev); + }; + + return ; +}; + +export const ControlledState: Story = { + render: () => , +}; diff --git a/packages/wow-ui/src/components/Switch/Switch.test.tsx b/packages/wow-ui/src/components/Switch/Switch.test.tsx new file mode 100644 index 00000000..35fdffca --- /dev/null +++ b/packages/wow-ui/src/components/Switch/Switch.test.tsx @@ -0,0 +1,173 @@ +import { render, type RenderResult, waitFor } from "@testing-library/react"; +import fireEvent from "@testing-library/user-event"; + +import Switch from "@/components/Switch"; + +describe("toggle", () => { + let rendered: RenderResult; + + beforeEach(() => { + rendered = render(); + }); + + it("should render with attributes aria-checked to be false, aria-disabled to be false by default", () => { + const switchComponent = rendered.getByRole("checkbox"); + + expect(switchComponent).toHaveAttribute("aria-checked", "false"); + expect(switchComponent).toHaveAttribute("aria-disabled", "false"); + }); + + it("should render text", () => { + expect(rendered.getByText("Text")).toBeInTheDocument(); + }); + + it("should toggle state when onClick event is fired", async () => { + const switchComponent = rendered.getByRole("checkbox"); + const onClickHandler = jest.fn(); + switchComponent.onclick = onClickHandler; + + fireEvent.click(switchComponent); + + await waitFor(() => { + expect(switchComponent).toHaveAttribute("aria-checked", "true"); + expect(switchComponent).toHaveAttribute("aria-disabled", "false"); + }); + }); + + it("should toggle state when Enter key is pressed", async () => { + const switchComponent = rendered.getByRole("checkbox"); + + fireEvent.type(switchComponent, "{enter}"); + + await waitFor(() => { + expect(switchComponent).toHaveAttribute("aria-checked", "true"); + expect(switchComponent).toHaveAttribute("aria-disabled", "false"); + }); + }); + + it("should toggle state when Space key is pressed", async () => { + const switchComponent = rendered.getByRole("checkbox"); + + fireEvent.type(switchComponent, "{space}"); + + await waitFor(() => { + expect(switchComponent).toHaveAttribute("aria-checked", "true"); + expect(switchComponent).toHaveAttribute("aria-disabled", "false"); + }); + }); +}); + +describe("when defaultChecked is true", () => { + let rendered: RenderResult; + + beforeEach(() => { + rendered = render(); + }); + + it("should render with attributes aria-checked to be true, aria-disabled to be false", () => { + const switchComponent = rendered.getByRole("checkbox"); + + expect(switchComponent).toHaveAttribute("aria-checked", "true"); + expect(switchComponent).toHaveAttribute("aria-disabled", "false"); + }); +}); + +describe("disabled", () => { + let rendered: RenderResult; + + beforeEach(() => { + rendered = render(); + }); + + it("should render with attributes aria-disabled to be true", () => { + const switchComponent = rendered.getByRole("checkbox"); + + expect(switchComponent).toHaveAttribute("aria-disabled", "true"); + }); + + it("should not fire onClick", () => { + const switchComponent = rendered.getByRole("checkbox"); + const onClickHandler = jest.fn(); + switchComponent.onclick = onClickHandler; + + fireEvent.click(switchComponent); + + expect(onClickHandler).not.toHaveBeenCalled(); + }); + + it("should not allow focusing", () => { + const switchComponent = rendered.getByRole("checkbox"); + fireEvent.click(switchComponent); + + expect(switchComponent).not.toHaveFocus(); + }); + + it("should not toggle state when fire keyboard event on Enter key", async () => { + const switchComponent = rendered.getByRole("checkbox"); + + fireEvent.type(switchComponent, "{enter}"); + + await waitFor(() => { + expect(switchComponent).toHaveAttribute("aria-checked", "false"); + expect(switchComponent).toHaveAttribute("aria-disabled", "true"); + }); + }); + + it("should not fire keyboard event on Space key", async () => { + const switchComponent = rendered.getByRole("checkbox"); + + fireEvent.type(switchComponent, "{space}"); + + await waitFor(() => { + expect(switchComponent).toHaveAttribute("aria-checked", "false"); + expect(switchComponent).toHaveAttribute("aria-disabled", "true"); + }); + }); +}); + +describe("external control and events", () => { + let rendered: RenderResult; + + it("should fire external onClick event", async () => { + rendered = render(); + const switchComponent = rendered.getByRole("checkbox"); + const onClickHandler = jest.fn(); + switchComponent.onclick = onClickHandler; + + fireEvent.click(switchComponent); + + await waitFor(() => { + expect(onClickHandler).toHaveBeenCalled(); + }); + }); + + it("should fire external onKeyDown event", async () => { + rendered = render(); + const switchComponent = rendered.getByRole("checkbox"); + const onKeyDownHandler = jest.fn(); + switchComponent.onkeydown = onKeyDownHandler; + + fireEvent.type(switchComponent, "{enter}"); + + await waitFor(() => { + expect(onKeyDownHandler).toHaveBeenCalled(); + }); + }); + + it("should toggle external checked state when onClick event fired", async () => { + let isChecked = false; + const handleChange = () => { + isChecked = !isChecked; + }; + const rendered = render(); + const switchComponent = rendered.getByRole("checkbox"); + switchComponent.onchange = handleChange; + + fireEvent.click(switchComponent); + + await waitFor(() => { + expect(switchComponent).toHaveAttribute("aria-checked", "true"); + expect(switchComponent).toHaveAttribute("aria-disabled", "false"); + }); + }); +}); diff --git a/packages/wow-ui/src/components/Switch/index.tsx b/packages/wow-ui/src/components/Switch/index.tsx new file mode 100644 index 00000000..400ab403 --- /dev/null +++ b/packages/wow-ui/src/components/Switch/index.tsx @@ -0,0 +1,189 @@ +"use client"; + +import { cva } from "@styled-system/css"; +import { Flex, styled } from "@styled-system/jsx"; +import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react"; +import { forwardRef, useEffect, useState } from "react"; + +/** + * @template T λ Œλ”λ§ν•  μš”μ†Œ λ˜λŠ” μ»΄ν¬λ„ŒνŠΈ νƒ€μž… + * + * @param {boolean} [defaultChecked=false] μŠ€μœ„μΉ˜κ°€ μ²˜μŒμ— ν™œμ„±ν™”λ˜μ–΄ μžˆλŠ”μ§€ μ—¬λΆ€. + * @param {boolean} [isDisabled=false] μŠ€μœ„μΉ˜κ°€ λΉ„ν™œμ„±ν™”λ˜μ–΄ μžˆλŠ”μ§€ μ—¬λΆ€. + * @param {boolean} [isChecked=false] μ™ΈλΆ€μ—μ„œ μ œμ–΄ν•  ν™œμ„± μƒνƒœ. + * @param {() => void} [onChange] μ™ΈλΆ€ ν™œμ„± μƒνƒœκ°€ 변경될 λ•Œ 호좜될 콜백 ν•¨μˆ˜. + * @param {ReactNode} [text] μŠ€μœ„μΉ˜ 였λ₯Έ μͺ½μ— λ“€μ–΄κ°ˆ ν…μŠ€νŠΈ. + * @param {() => void} [onClick] μŠ€μœ„μΉ˜ 클릭 μ‹œ λ™μž‘ν•  이벀트. + * @param {() => void} [onKeyDown] μŠ€μœ„μΉ˜κ°€ ν¬μ»€μŠ€λμ„ λ•Œ μ—”ν„° ν‚€ λ˜λŠ” 슀페이슀 λ°”λ₯Ό λˆŒλ €μ„ λ•Œ λ™μž‘ν•  이벀트. + * @param {ComponentPropsWithoutRef} rest λ Œλ”λ§λœ μš”μ†Œ λ˜λŠ” μ»΄ν¬λ„ŒνŠΈμ— 전달할 μΆ”κ°€ props. + * @param {ComponentPropsWithRef["ref"]} ref λ Œλ”λ§λœ μš”μ†Œ λ˜λŠ” μ»΄ν¬λ„ŒνŠΈμ— μ—°κ²°ν•  ref. + */ +export interface SwitchProps { + defaultChecked?: boolean; + isDisabled?: boolean; + isChecked?: boolean; + text?: ReactNode; + onClick?: () => void; + onKeyDown?: () => void; + onChange?: () => void; +} + +const SwitchIcon = ({ + isDisabled, + isChecked, +}: { + isDisabled: boolean; + isChecked: boolean; +}) => { + return ( + + ); +}; + +const Switch = forwardRef( + ( + { + defaultChecked = false, + isDisabled = false, + isChecked: isCheckedProp, + text = "", + onClick, + onKeyDown, + onChange, + ...rest + }: SwitchProps, + ref: ComponentPropsWithRef<"input">["ref"] + ) => { + const [isChecked, setIsChecked] = useState(() => + isCheckedProp ? isCheckedProp : defaultChecked + ); + + useEffect(() => { + if (isCheckedProp !== undefined) { + setIsChecked(isCheckedProp); + } + }, [isCheckedProp]); + + const handleClick = () => { + onChange ? onChange() : setIsChecked((prev) => !prev); + onClick?.(); + }; + + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + + onChange ? onChange() : setIsChecked((prev) => !prev); + onKeyDown?.(); + } + }; + + return ( + + + + + + {!!text && {text}} + + ); + } +); + +const switchStyle = cva({ + base: { + width: "3.25rem !important", + height: "1.75rem !important", + borderRadius: "2.5rem", + cursor: "pointer", + display: "flex", + position: "relative", + }, + variants: { + type: { + checked: { + bgColor: "primary", + _hover: { bgColor: "blueHover" }, + _pressed: { bgColor: "bluePressed" }, + }, + unchecked: { + bgColor: "outline", + _hover: { bgColor: "sub" }, + _pressed: { bgColor: "lightDisabled" }, + }, + disabled: { bgColor: "lightDisabled" }, + }, + }, + defaultVariants: { + type: "checked", + }, +}); + +const inputStyle = cva({ + base: { + opacity: 0, + width: 0, + height: 0, + overflow: "hidden", + position: "absolute", + }, +}); + +const switchIconStyle = cva({ + base: { + width: "1.5rem", + height: "1.5rem", + borderRadius: "50%", + position: "absolute", + top: "0.125rem", + left: "0.125rem", + }, + variants: { + type: { + checked: { + left: "1.625rem", + bg: "backgroundNormal", + _pressed: { + bg: "blueBackgroundPressed", + }, + }, + unchecked: { + left: "0.125rem", + bg: "backgroundNormal", + _pressed: { + bg: "monoBackgroundPressed", + }, + }, + disabled: { + bg: "darkDisabled", + }, + }, + }, + defaultVariants: { + type: "checked", + }, +}); + +Switch.displayName = "Switch"; + +export default Switch; diff --git a/packages/wow-ui/src/scripts/generateBuildConfig.ts b/packages/wow-ui/src/scripts/generateBuildConfig.ts index f5524741..01528600 100644 --- a/packages/wow-ui/src/scripts/generateBuildConfig.ts +++ b/packages/wow-ui/src/scripts/generateBuildConfig.ts @@ -24,6 +24,7 @@ const generateExports = (files: string[]) => { for (const file of files) { const filePath = `./${file}`; const distPath = `./dist/${file}`; + exportsObj[filePath] = { types: `${distPath}/index.d.ts`, require: `${distPath}.cjs`, diff --git a/packages/wow-ui/src/types/Polymorphic.ts b/packages/wow-ui/src/types/Polymorphic.ts new file mode 100644 index 00000000..ae92de33 --- /dev/null +++ b/packages/wow-ui/src/types/Polymorphic.ts @@ -0,0 +1,21 @@ +import type { + ComponentPropsWithoutRef, + ComponentPropsWithRef, + ElementType, +} from "react"; + +export interface AsProps { + as?: T; +} + +export type PolymorphicRef = + ComponentPropsWithRef["ref"]; + +export type PolymorphicComponentProps< + T extends ElementType, + Props = {}, +> = AsProps & + ComponentPropsWithoutRef & + Props & { + ref?: PolymorphicRef; + }; diff --git a/packages/wow-ui/styled-system/helpers.js b/packages/wow-ui/styled-system/helpers.js index b14325fc..a3a2045a 100644 --- a/packages/wow-ui/styled-system/helpers.js +++ b/packages/wow-ui/styled-system/helpers.js @@ -5,7 +5,9 @@ function isObject(value) { // src/compact.ts function compact(value) { - return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0)); + return Object.fromEntries( + Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0) + ); } // src/condition.ts @@ -21,14 +23,13 @@ function toChar(code) { function toName(code) { let name = ""; let x; - for (x = Math.abs(code); x > 52; x = x / 52 | 0) + for (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toChar(x % 52) + name; return toChar(x % 52) + name; } function toPhash(h, x) { let i = x.length; - while (i) - h = h * 33 ^ x.charCodeAt(--i); + while (i) h = (h * 33) ^ x.charCodeAt(--i); return h; } function toHash(value) { @@ -41,7 +42,9 @@ function isImportant(value) { return typeof value === "string" ? importantRegex.test(value) : false; } function withoutImportant(value) { - return typeof value === "string" ? value.replace(importantRegex, "").trim() : value; + return typeof value === "string" + ? value.replace(importantRegex, "").trim() + : value; } function withoutSpace(str) { return typeof str === "string" ? str.replaceAll(" ", "_") : str; @@ -104,25 +107,20 @@ function walkObject(target, predicate, options = {}) { return inner(target); } function mapObject(obj, fn) { - if (Array.isArray(obj)) - return obj.map((value) => fn(value)); - if (!isObject(obj)) - return fn(obj); + if (Array.isArray(obj)) return obj.map((value) => fn(value)); + if (!isObject(obj)) return fn(obj); return walkObject(obj, (value) => fn(value)); } // src/normalize-style-object.ts function toResponsiveObject(values, breakpoints) { - return values.reduce( - (acc, current, index) => { - const key = breakpoints[index]; - if (current != null) { - acc[key] = current; - } - return acc; - }, - {} - ); + return values.reduce((acc, current, index) => { + const key = breakpoints[index]; + if (current != null) { + acc[key] = current; + } + return acc; + }, {}); } function normalizeStyleObject(styles, context, shorthand = true) { const { utility, conditions } = context; @@ -130,11 +128,15 @@ function normalizeStyleObject(styles, context, shorthand = true) { return walkObject( styles, (value) => { - return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value; + return Array.isArray(value) + ? toResponsiveObject(value, conditions.breakpoints.keys) + : value; }, { stop: (value) => Array.isArray(value), - getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0 + getKey: shorthand + ? (prop) => (hasShorthand ? resolveShorthand(prop) : prop) + : void 0, } ); } @@ -143,19 +145,24 @@ function normalizeStyleObject(styles, context, shorthand = true) { var fallbackCondition = { shift: (v) => v, finalize: (v) => v, - breakpoints: { keys: [] } + breakpoints: { keys: [] }, }; -var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value; +var sanitize = (value) => + typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value; function createCss(context) { const { utility, hash, conditions: conds = fallbackCondition } = context; - const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-"); + const formatClassName = (str) => + [utility.prefix, str].filter(Boolean).join("-"); const hashFn = (conditions, className) => { let result; if (hash) { const baseArray = [...conds.finalize(conditions), className]; result = formatClassName(utility.toHash(baseArray, toHash)); } else { - const baseArray = [...conds.finalize(conditions), formatClassName(className)]; + const baseArray = [ + ...conds.finalize(conditions), + formatClassName(className), + ]; result = baseArray.join(":"); } return result; @@ -166,27 +173,31 @@ function createCss(context) { const classNames = /* @__PURE__ */ new Set(); walkObject(normalizedObject, (value, paths) => { const important = isImportant(value); - if (value == null) - return; + if (value == null) return; const [prop, ...allConditions] = conds.shift(paths); const conditions = filterBaseConditions(allConditions); - const transformed = utility.transform(prop, withoutImportant(sanitize(value))); + const transformed = utility.transform( + prop, + withoutImportant(sanitize(value)) + ); let className = hashFn(conditions, transformed.className); - if (important) - className = `${className}!`; + if (important) className = `${className}!`; classNames.add(className); }); return Array.from(classNames).join(" "); }); } function compactStyles(...styles) { - return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0); + return styles + .flat() + .filter( + (style) => isObject(style) && Object.keys(compact(style)).length > 0 + ); } function createMergeCss(context) { function resolve(styles) { const allStyles = compactStyles(...styles); - if (allStyles.length === 1) - return allStyles; + if (allStyles.length === 1) return allStyles; return allStyles.map((style) => normalizeStyleObject(style, context)); } function mergeCss(...styles) { @@ -202,9 +213,11 @@ function createMergeCss(context) { var wordRegex = /([A-Z])/g; var msRegex = /^ms-/; var hypenateProperty = memo((property) => { - if (property.startsWith("--")) - return property; - return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase(); + if (property.startsWith("--")) return property; + return property + .replace(wordRegex, "-$1") + .replace(msRegex, "-ms-") + .toLowerCase(); }); // src/is-css-function.ts @@ -213,9 +226,12 @@ var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`); var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v); // src/is-css-unit.ts -var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%"; +var lengthUnits = + "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%"; var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`; -var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`); +var lengthRegExp = new RegExp( + `^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$` +); var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v); // src/is-css-var.ts @@ -226,12 +242,14 @@ var patternFns = { map: mapObject, isCssFunction, isCssVar, - isCssUnit + isCssUnit, }; var getPatternStyles = (pattern, styles) => { - if (!pattern?.defaultValues) - return styles; - const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues; + if (!pattern?.defaultValues) return styles; + const defaults = + typeof pattern.defaultValues === "function" + ? pattern.defaultValues(styles) + : pattern.defaultValues; return Object.assign({}, defaults, compact(styles)); }; @@ -242,11 +260,15 @@ var getSlotRecipes = (recipe = {}) => { base: recipe.base?.[slot] ?? {}, variants: {}, defaultVariants: recipe.defaultVariants ?? {}, - compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : [] + compoundVariants: recipe.compoundVariants + ? getSlotCompoundVariant(recipe.compoundVariants, slot) + : [], }); const slots = recipe.slots ?? []; const recipeParts = slots.map((slot) => [slot, init(slot)]); - for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) { + for (const [variantsKey, variantsSpec] of Object.entries( + recipe.variants ?? {} + )) { for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) { recipeParts.forEach(([slot, slotRecipe]) => { slotRecipe.variants[variantsKey] ??= {}; @@ -256,7 +278,13 @@ var getSlotRecipes = (recipe = {}) => { } return Object.fromEntries(recipeParts); }; -var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] })); +var getSlotCompoundVariant = (compoundVariants, slotName) => + compoundVariants + .filter((compoundVariant) => compoundVariant.css[slotName]) + .map((compoundVariant) => ({ + ...compoundVariant, + css: compoundVariant.css[slotName], + })); // src/split-props.ts function splitProps(props, ...keys) { @@ -278,7 +306,13 @@ function splitProps(props, ...keys) { } // src/uniq.ts -var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []); +var uniq = (...items) => + items + .filter(Boolean) + .reduce( + (acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), + [] + ); export { compact, createCss, @@ -298,17 +332,28 @@ export { toHash, uniq, walkObject, - withoutSpace + withoutSpace, }; - - - +// src/normalize-html.ts +var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"]; +function convert(key) { + return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key; +} +function normalizeHTMLProps(props) { + return Object.fromEntries( + Object.entries(props).map(([key, value]) => [convert(key), value]) + ); +} +normalizeHTMLProps.keys = htmlProps; +export { normalizeHTMLProps }; export function __spreadValues(a, b) { - return { ...a, ...b } + return { ...a, ...b }; } export function __objRest(source, exclude) { - return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key))) -} \ No newline at end of file + return Object.fromEntries( + Object.entries(source).filter(([key]) => !exclude.includes(key)) + ); +} diff --git a/packages/wow-ui/styled-system/jsx/aspect-ratio.d.ts b/packages/wow-ui/styled-system/jsx/aspect-ratio.d.ts new file mode 100644 index 00000000..859dc74a --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/aspect-ratio.d.ts @@ -0,0 +1,14 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { AspectRatioProperties } from "../patterns/aspect-ratio"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface AspectRatioProps + extends AspectRatioProperties, + DistributiveOmit< + HTMLStyledProps<"div">, + keyof AspectRatioProperties | "aspectRatio" + > {} + +export declare const AspectRatio: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/aspect-ratio.js b/packages/wow-ui/styled-system/jsx/aspect-ratio.js new file mode 100644 index 00000000..3208ca6d --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/aspect-ratio.js @@ -0,0 +1,16 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getAspectRatioStyle } from "../patterns/aspect-ratio.js"; +import { styled } from "./factory.js"; + +export const AspectRatio = /* @__PURE__ */ forwardRef( + function AspectRatio(props, ref) { + const [patternProps, restProps] = splitProps(props, ["ratio"]); + + const styleProps = getAspectRatioStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); + } +); diff --git a/packages/wow-ui/styled-system/jsx/bleed.d.ts b/packages/wow-ui/styled-system/jsx/bleed.d.ts new file mode 100644 index 00000000..1b8fc8f8 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/bleed.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { BleedProperties } from "../patterns/bleed"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface BleedProps + extends BleedProperties, + DistributiveOmit, keyof BleedProperties> {} + +export declare const Bleed: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/bleed.js b/packages/wow-ui/styled-system/jsx/bleed.js new file mode 100644 index 00000000..3e45a756 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/bleed.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getBleedStyle } from "../patterns/bleed.js"; +import { styled } from "./factory.js"; + +export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) { + const [patternProps, restProps] = splitProps(props, ["inline", "block"]); + + const styleProps = getBleedStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/box.d.ts b/packages/wow-ui/styled-system/jsx/box.d.ts new file mode 100644 index 00000000..66c27467 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/box.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { BoxProperties } from "../patterns/box"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface BoxProps + extends BoxProperties, + DistributiveOmit, keyof BoxProperties> {} + +export declare const Box: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/box.js b/packages/wow-ui/styled-system/jsx/box.js new file mode 100644 index 00000000..a9560f13 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/box.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getBoxStyle } from "../patterns/box.js"; +import { styled } from "./factory.js"; + +export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) { + const [patternProps, restProps] = splitProps(props, []); + + const styleProps = getBoxStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/center.d.ts b/packages/wow-ui/styled-system/jsx/center.d.ts new file mode 100644 index 00000000..ae95c359 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/center.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { CenterProperties } from "../patterns/center"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface CenterProps + extends CenterProperties, + DistributiveOmit, keyof CenterProperties> {} + +export declare const Center: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/center.js b/packages/wow-ui/styled-system/jsx/center.js new file mode 100644 index 00000000..28174aa5 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/center.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getCenterStyle } from "../patterns/center.js"; +import { styled } from "./factory.js"; + +export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) { + const [patternProps, restProps] = splitProps(props, ["inline"]); + + const styleProps = getCenterStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/circle.d.ts b/packages/wow-ui/styled-system/jsx/circle.d.ts new file mode 100644 index 00000000..674fd7de --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/circle.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { CircleProperties } from "../patterns/circle"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface CircleProps + extends CircleProperties, + DistributiveOmit, keyof CircleProperties> {} + +export declare const Circle: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/circle.js b/packages/wow-ui/styled-system/jsx/circle.js new file mode 100644 index 00000000..05a9d986 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/circle.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getCircleStyle } from "../patterns/circle.js"; +import { styled } from "./factory.js"; + +export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) { + const [patternProps, restProps] = splitProps(props, ["size"]); + + const styleProps = getCircleStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/container.d.ts b/packages/wow-ui/styled-system/jsx/container.d.ts new file mode 100644 index 00000000..d432811c --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/container.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { ContainerProperties } from "../patterns/container"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface ContainerProps + extends ContainerProperties, + DistributiveOmit, keyof ContainerProperties> {} + +export declare const Container: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/container.js b/packages/wow-ui/styled-system/jsx/container.js new file mode 100644 index 00000000..e334fce7 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/container.js @@ -0,0 +1,16 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getContainerStyle } from "../patterns/container.js"; +import { styled } from "./factory.js"; + +export const Container = /* @__PURE__ */ forwardRef( + function Container(props, ref) { + const [patternProps, restProps] = splitProps(props, []); + + const styleProps = getContainerStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); + } +); diff --git a/packages/wow-ui/styled-system/jsx/cq.d.ts b/packages/wow-ui/styled-system/jsx/cq.d.ts new file mode 100644 index 00000000..d137e1c6 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/cq.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { CqProperties } from "../patterns/cq"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface CqProps + extends CqProperties, + DistributiveOmit, keyof CqProperties> {} + +export declare const Cq: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/cq.js b/packages/wow-ui/styled-system/jsx/cq.js new file mode 100644 index 00000000..53cc4d02 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/cq.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getCqStyle } from "../patterns/cq.js"; +import { styled } from "./factory.js"; + +export const Cq = /* @__PURE__ */ forwardRef(function Cq(props, ref) { + const [patternProps, restProps] = splitProps(props, ["name", "type"]); + + const styleProps = getCqStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/divider.d.ts b/packages/wow-ui/styled-system/jsx/divider.d.ts new file mode 100644 index 00000000..bf8abbf5 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/divider.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { DividerProperties } from "../patterns/divider"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface DividerProps + extends DividerProperties, + DistributiveOmit, keyof DividerProperties> {} + +export declare const Divider: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/divider.js b/packages/wow-ui/styled-system/jsx/divider.js new file mode 100644 index 00000000..a07f599b --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/divider.js @@ -0,0 +1,18 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getDividerStyle } from "../patterns/divider.js"; +import { styled } from "./factory.js"; + +export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) { + const [patternProps, restProps] = splitProps(props, [ + "orientation", + "thickness", + "color", + ]); + + const styleProps = getDividerStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/factory-helper.js b/packages/wow-ui/styled-system/jsx/factory-helper.js new file mode 100644 index 00000000..08daace1 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/factory-helper.js @@ -0,0 +1,27 @@ +import { isCssProperty } from "./is-valid-prop.js"; + +export const defaultShouldForwardProp = (prop, variantKeys) => + !variantKeys.includes(prop) && !isCssProperty(prop); + +export const composeShouldForwardProps = (tag, shouldForwardProp) => + tag.__shouldForwardProps__ && shouldForwardProp + ? (propName) => + tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) + : shouldForwardProp; + +export const composeCvaFn = (cvaA, cvaB) => { + if (cvaA && !cvaB) return cvaA; + if (!cvaA && cvaB) return cvaB; + if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) + return cvaA.merge(cvaB); + const error = new TypeError( + "Cannot merge cva with recipe. Please use either cva or recipe." + ); + TypeError.captureStackTrace?.(error); + throw error; +}; + +export const getDisplayName = (Component) => { + if (typeof Component === "string") return Component; + return Component?.displayName || Component?.name || "Component"; +}; diff --git a/packages/wow-ui/styled-system/jsx/factory.d.ts b/packages/wow-ui/styled-system/jsx/factory.d.ts new file mode 100644 index 00000000..cdcd6381 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/factory.d.ts @@ -0,0 +1,3 @@ +/* eslint-disable */ +import type { Styled } from "../types/jsx"; +export declare const styled: Styled; diff --git a/packages/wow-ui/styled-system/jsx/factory.js b/packages/wow-ui/styled-system/jsx/factory.js new file mode 100644 index 00000000..bc2c6f77 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/factory.js @@ -0,0 +1,122 @@ +import { createElement, forwardRef, useMemo } from "react"; +import { css, cx, cva } from "../css/index.js"; +import { + defaultShouldForwardProp, + composeShouldForwardProps, + composeCvaFn, + getDisplayName, +} from "./factory-helper.js"; +import { splitProps, normalizeHTMLProps } from "../helpers.js"; +import { isCssProperty } from "./is-valid-prop.js"; + +function styledFn(Dynamic, configOrCva = {}, options = {}) { + const cvaFn = + configOrCva.__cva__ || configOrCva.__recipe__ + ? configOrCva + : cva(configOrCva); + + const forwardFn = options.shouldForwardProp || defaultShouldForwardProp; + const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys); + + const defaultProps = Object.assign( + options.dataAttr && configOrCva.__name__ + ? { "data-recipe": configOrCva.__name__ } + : {}, + options.defaultProps + ); + + const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn); + const __shouldForwardProps__ = composeShouldForwardProps( + Dynamic, + shouldForwardProp + ); + const __base__ = Dynamic.__base__ || Dynamic; + + const StyledComponent = /* @__PURE__ */ forwardRef( + function StyledComponent(props, ref) { + const { as: Element = __base__, children, ...restProps } = props; + + const combinedProps = useMemo( + () => Object.assign({}, defaultProps, restProps), + [restProps] + ); + + const [ + htmlProps, + forwardedProps, + variantProps, + styleProps, + elementProps, + ] = useMemo(() => { + return splitProps( + combinedProps, + normalizeHTMLProps.keys, + __shouldForwardProps__, + __cvaFn__.variantKeys, + isCssProperty + ); + }, [combinedProps]); + + function recipeClass() { + const { css: cssStyles, ...propStyles } = styleProps; + const compoundVariantStyles = + __cvaFn__.__getCompoundVariantCss__?.(variantProps); + return cx( + __cvaFn__(variantProps, false), + css(compoundVariantStyles, propStyles, cssStyles), + combinedProps.className + ); + } + + function cvaClass() { + const { css: cssStyles, ...propStyles } = styleProps; + const cvaStyles = __cvaFn__.raw(variantProps); + return cx( + css(cvaStyles, propStyles, cssStyles), + combinedProps.className + ); + } + + const classes = configOrCva.__recipe__ ? recipeClass : cvaClass; + + return createElement( + Element, + { + ref, + ...forwardedProps, + ...elementProps, + ...normalizeHTMLProps(htmlProps), + className: classes(), + }, + combinedProps.children ?? children + ); + } + ); + + const name = getDisplayName(__base__); + + StyledComponent.displayName = `styled.${name}`; + StyledComponent.__cva__ = __cvaFn__; + StyledComponent.__base__ = __base__; + StyledComponent.__shouldForwardProps__ = shouldForwardProp; + + return StyledComponent; +} + +function createJsxFactory() { + const cache = new Map(); + + return new Proxy(styledFn, { + apply(_, __, args) { + return styledFn(...args); + }, + get(_, el) { + if (!cache.has(el)) { + cache.set(el, styledFn(el)); + } + return cache.get(el); + }, + }); +} + +export const styled = /* @__PURE__ */ createJsxFactory(); diff --git a/packages/wow-ui/styled-system/jsx/flex.d.ts b/packages/wow-ui/styled-system/jsx/flex.d.ts new file mode 100644 index 00000000..69a351e6 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/flex.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { FlexProperties } from "../patterns/flex"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface FlexProps + extends FlexProperties, + DistributiveOmit, keyof FlexProperties> {} + +export declare const Flex: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/flex.js b/packages/wow-ui/styled-system/jsx/flex.js new file mode 100644 index 00000000..0ebe6336 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/flex.js @@ -0,0 +1,22 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getFlexStyle } from "../patterns/flex.js"; +import { styled } from "./factory.js"; + +export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) { + const [patternProps, restProps] = splitProps(props, [ + "align", + "justify", + "direction", + "wrap", + "basis", + "grow", + "shrink", + ]); + + const styleProps = getFlexStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/float.d.ts b/packages/wow-ui/styled-system/jsx/float.d.ts new file mode 100644 index 00000000..ed763d08 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/float.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { FloatProperties } from "../patterns/float"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface FloatProps + extends FloatProperties, + DistributiveOmit, keyof FloatProperties> {} + +export declare const Float: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/float.js b/packages/wow-ui/styled-system/jsx/float.js new file mode 100644 index 00000000..046f3208 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/float.js @@ -0,0 +1,19 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getFloatStyle } from "../patterns/float.js"; +import { styled } from "./factory.js"; + +export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) { + const [patternProps, restProps] = splitProps(props, [ + "offsetX", + "offsetY", + "offset", + "placement", + ]); + + const styleProps = getFloatStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/grid-item.d.ts b/packages/wow-ui/styled-system/jsx/grid-item.d.ts new file mode 100644 index 00000000..d7a635c0 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/grid-item.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { GridItemProperties } from "../patterns/grid-item"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface GridItemProps + extends GridItemProperties, + DistributiveOmit, keyof GridItemProperties> {} + +export declare const GridItem: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/grid-item.js b/packages/wow-ui/styled-system/jsx/grid-item.js new file mode 100644 index 00000000..1138f30a --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/grid-item.js @@ -0,0 +1,23 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getGridItemStyle } from "../patterns/grid-item.js"; +import { styled } from "./factory.js"; + +export const GridItem = /* @__PURE__ */ forwardRef( + function GridItem(props, ref) { + const [patternProps, restProps] = splitProps(props, [ + "colSpan", + "rowSpan", + "colStart", + "rowStart", + "colEnd", + "rowEnd", + ]); + + const styleProps = getGridItemStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); + } +); diff --git a/packages/wow-ui/styled-system/jsx/grid.d.ts b/packages/wow-ui/styled-system/jsx/grid.d.ts new file mode 100644 index 00000000..12bb68fb --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/grid.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { GridProperties } from "../patterns/grid"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface GridProps + extends GridProperties, + DistributiveOmit, keyof GridProperties> {} + +export declare const Grid: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/grid.js b/packages/wow-ui/styled-system/jsx/grid.js new file mode 100644 index 00000000..f542c295 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/grid.js @@ -0,0 +1,20 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getGridStyle } from "../patterns/grid.js"; +import { styled } from "./factory.js"; + +export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) { + const [patternProps, restProps] = splitProps(props, [ + "gap", + "columnGap", + "rowGap", + "columns", + "minChildWidth", + ]); + + const styleProps = getGridStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/hstack.d.ts b/packages/wow-ui/styled-system/jsx/hstack.d.ts new file mode 100644 index 00000000..a75741ee --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/hstack.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { HstackProperties } from "../patterns/hstack"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface HstackProps + extends HstackProperties, + DistributiveOmit, keyof HstackProperties> {} + +export declare const HStack: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/hstack.js b/packages/wow-ui/styled-system/jsx/hstack.js new file mode 100644 index 00000000..2a3f0bc0 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/hstack.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getHstackStyle } from "../patterns/hstack.js"; +import { styled } from "./factory.js"; + +export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) { + const [patternProps, restProps] = splitProps(props, ["justify", "gap"]); + + const styleProps = getHstackStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/index.d.ts b/packages/wow-ui/styled-system/jsx/index.d.ts new file mode 100644 index 00000000..1a643e58 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/index.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +export * from "./factory"; +export * from "./is-valid-prop"; +export * from "./box"; +export * from "./flex"; +export * from "./stack"; +export * from "./vstack"; +export * from "./hstack"; +export * from "./spacer"; +export * from "./square"; +export * from "./circle"; +export * from "./center"; +export * from "./link-overlay"; +export * from "./aspect-ratio"; +export * from "./grid"; +export * from "./grid-item"; +export * from "./wrap"; +export * from "./container"; +export * from "./divider"; +export * from "./float"; +export * from "./bleed"; +export * from "./visually-hidden"; +export * from "./cq"; +export type { HTMLStyledProps, StyledComponent } from "../types/jsx"; diff --git a/packages/wow-ui/styled-system/jsx/index.js b/packages/wow-ui/styled-system/jsx/index.js new file mode 100644 index 00000000..b4cce0ae --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/index.js @@ -0,0 +1,22 @@ +export * from "./factory.js"; +export * from "./is-valid-prop.js"; +export * from "./box.js"; +export * from "./flex.js"; +export * from "./stack.js"; +export * from "./vstack.js"; +export * from "./hstack.js"; +export * from "./spacer.js"; +export * from "./square.js"; +export * from "./circle.js"; +export * from "./center.js"; +export * from "./link-overlay.js"; +export * from "./aspect-ratio.js"; +export * from "./grid.js"; +export * from "./grid-item.js"; +export * from "./wrap.js"; +export * from "./container.js"; +export * from "./divider.js"; +export * from "./float.js"; +export * from "./bleed.js"; +export * from "./visually-hidden.js"; +export * from "./cq.js"; diff --git a/packages/wow-ui/styled-system/jsx/is-valid-prop.d.ts b/packages/wow-ui/styled-system/jsx/is-valid-prop.d.ts new file mode 100644 index 00000000..3a27c608 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/is-valid-prop.d.ts @@ -0,0 +1,18 @@ +/* eslint-disable */ +import type { + DistributiveOmit, + HTMLPandaProps, + JsxStyleProps, + Pretty, +} from "../types"; + +declare const isCssProperty: (value: string) => boolean; + +type CssPropKey = keyof JsxStyleProps; +type OmittedCssProps = Pretty>; + +declare const splitCssProps: ( + props: T +) => [JsxStyleProps, OmittedCssProps]; + +export { isCssProperty, splitCssProps }; diff --git a/packages/wow-ui/styled-system/jsx/is-valid-prop.js b/packages/wow-ui/styled-system/jsx/is-valid-prop.js new file mode 100644 index 00000000..0cb2bac4 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/is-valid-prop.js @@ -0,0 +1,20 @@ +import { splitProps } from "../helpers.js"; +import { memo } from "../helpers.js"; +// src/index.ts +var userGeneratedStr = + "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"; +var userGenerated = userGeneratedStr.split(","); +var cssPropertiesStr = + "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect"; +var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated); +var properties = new Map(allCssProperties.map((prop) => [prop, true])); +var cssPropertySelectorRegex = /&|@/; +var isCssProperty = /* @__PURE__ */ memo((prop) => { + return ( + properties.has(prop) || + prop.startsWith("--") || + cssPropertySelectorRegex.test(prop) + ); +}); +export { allCssProperties, isCssProperty }; +export const splitCssProps = (props) => splitProps(props, isCssProperty); diff --git a/packages/wow-ui/styled-system/jsx/link-overlay.d.ts b/packages/wow-ui/styled-system/jsx/link-overlay.d.ts new file mode 100644 index 00000000..5516acb6 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/link-overlay.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { LinkOverlayProperties } from "../patterns/link-overlay"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface LinkOverlayProps + extends LinkOverlayProperties, + DistributiveOmit, keyof LinkOverlayProperties> {} + +export declare const LinkOverlay: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/link-overlay.js b/packages/wow-ui/styled-system/jsx/link-overlay.js new file mode 100644 index 00000000..93480329 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/link-overlay.js @@ -0,0 +1,16 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getLinkOverlayStyle } from "../patterns/link-overlay.js"; +import { styled } from "./factory.js"; + +export const LinkOverlay = /* @__PURE__ */ forwardRef( + function LinkOverlay(props, ref) { + const [patternProps, restProps] = splitProps(props, []); + + const styleProps = getLinkOverlayStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.a, mergedProps); + } +); diff --git a/packages/wow-ui/styled-system/jsx/spacer.d.ts b/packages/wow-ui/styled-system/jsx/spacer.d.ts new file mode 100644 index 00000000..39611b07 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/spacer.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { SpacerProperties } from "../patterns/spacer"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface SpacerProps + extends SpacerProperties, + DistributiveOmit, keyof SpacerProperties> {} + +export declare const Spacer: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/spacer.js b/packages/wow-ui/styled-system/jsx/spacer.js new file mode 100644 index 00000000..2205e9ab --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/spacer.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getSpacerStyle } from "../patterns/spacer.js"; +import { styled } from "./factory.js"; + +export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) { + const [patternProps, restProps] = splitProps(props, ["size"]); + + const styleProps = getSpacerStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/square.d.ts b/packages/wow-ui/styled-system/jsx/square.d.ts new file mode 100644 index 00000000..e07c6948 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/square.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { SquareProperties } from "../patterns/square"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface SquareProps + extends SquareProperties, + DistributiveOmit, keyof SquareProperties> {} + +export declare const Square: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/square.js b/packages/wow-ui/styled-system/jsx/square.js new file mode 100644 index 00000000..2e135421 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/square.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getSquareStyle } from "../patterns/square.js"; +import { styled } from "./factory.js"; + +export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) { + const [patternProps, restProps] = splitProps(props, ["size"]); + + const styleProps = getSquareStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/stack.d.ts b/packages/wow-ui/styled-system/jsx/stack.d.ts new file mode 100644 index 00000000..941dbc55 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/stack.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { StackProperties } from "../patterns/stack"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface StackProps + extends StackProperties, + DistributiveOmit, keyof StackProperties> {} + +export declare const Stack: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/stack.js b/packages/wow-ui/styled-system/jsx/stack.js new file mode 100644 index 00000000..b3041598 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/stack.js @@ -0,0 +1,19 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getStackStyle } from "../patterns/stack.js"; +import { styled } from "./factory.js"; + +export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) { + const [patternProps, restProps] = splitProps(props, [ + "align", + "justify", + "direction", + "gap", + ]); + + const styleProps = getStackStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/visually-hidden.d.ts b/packages/wow-ui/styled-system/jsx/visually-hidden.d.ts new file mode 100644 index 00000000..21daac8c --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/visually-hidden.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { VisuallyHiddenProperties } from "../patterns/visually-hidden"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface VisuallyHiddenProps + extends VisuallyHiddenProperties, + DistributiveOmit, keyof VisuallyHiddenProperties> {} + +export declare const VisuallyHidden: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/visually-hidden.js b/packages/wow-ui/styled-system/jsx/visually-hidden.js new file mode 100644 index 00000000..76d100cd --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/visually-hidden.js @@ -0,0 +1,16 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getVisuallyHiddenStyle } from "../patterns/visually-hidden.js"; +import { styled } from "./factory.js"; + +export const VisuallyHidden = /* @__PURE__ */ forwardRef( + function VisuallyHidden(props, ref) { + const [patternProps, restProps] = splitProps(props, []); + + const styleProps = getVisuallyHiddenStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); + } +); diff --git a/packages/wow-ui/styled-system/jsx/vstack.d.ts b/packages/wow-ui/styled-system/jsx/vstack.d.ts new file mode 100644 index 00000000..153a783b --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/vstack.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { VstackProperties } from "../patterns/vstack"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface VstackProps + extends VstackProperties, + DistributiveOmit, keyof VstackProperties> {} + +export declare const VStack: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/vstack.js b/packages/wow-ui/styled-system/jsx/vstack.js new file mode 100644 index 00000000..e7bf3fb2 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/vstack.js @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getVstackStyle } from "../patterns/vstack.js"; +import { styled } from "./factory.js"; + +export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) { + const [patternProps, restProps] = splitProps(props, ["justify", "gap"]); + + const styleProps = getVstackStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/jsx/wrap.d.ts b/packages/wow-ui/styled-system/jsx/wrap.d.ts new file mode 100644 index 00000000..d2325d1f --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/wrap.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { FunctionComponent } from "react"; +import type { WrapProperties } from "../patterns/wrap"; +import type { HTMLStyledProps } from "../types/jsx"; +import type { DistributiveOmit } from "../types/system-types"; + +export interface WrapProps + extends WrapProperties, + DistributiveOmit, keyof WrapProperties> {} + +export declare const Wrap: FunctionComponent; diff --git a/packages/wow-ui/styled-system/jsx/wrap.js b/packages/wow-ui/styled-system/jsx/wrap.js new file mode 100644 index 00000000..0a3559f2 --- /dev/null +++ b/packages/wow-ui/styled-system/jsx/wrap.js @@ -0,0 +1,20 @@ +import { createElement, forwardRef } from "react"; + +import { splitProps } from "../helpers.js"; +import { getWrapStyle } from "../patterns/wrap.js"; +import { styled } from "./factory.js"; + +export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) { + const [patternProps, restProps] = splitProps(props, [ + "gap", + "rowGap", + "columnGap", + "align", + "justify", + ]); + + const styleProps = getWrapStyle(patternProps); + const mergedProps = { ref, ...styleProps, ...restProps }; + + return createElement(styled.div, mergedProps); +}); diff --git a/packages/wow-ui/styled-system/types/index.d.ts b/packages/wow-ui/styled-system/types/index.d.ts index cf914b65..26f7cac3 100644 --- a/packages/wow-ui/styled-system/types/index.d.ts +++ b/packages/wow-ui/styled-system/types/index.d.ts @@ -1,7 +1,8 @@ /* eslint-disable */ -import './global.d.ts' -export * from './conditions'; -export * from './pattern'; -export * from './recipe'; -export * from './system-types'; -export * from './style-props'; \ No newline at end of file +import "./global.d.ts"; +export * from "./conditions"; +export * from "./pattern"; +export * from "./recipe"; +export * from "./system-types"; +export * from "./jsx"; +export * from "./style-props"; diff --git a/packages/wow-ui/styled-system/types/jsx.d.ts b/packages/wow-ui/styled-system/types/jsx.d.ts new file mode 100644 index 00000000..d06fe9c7 --- /dev/null +++ b/packages/wow-ui/styled-system/types/jsx.d.ts @@ -0,0 +1,86 @@ +/* eslint-disable */ +import type { + ComponentPropsWithoutRef, + ElementType, + ElementRef, + Ref, +} from "react"; +import type { + RecipeDefinition, + RecipeSelection, + RecipeVariantRecord, +} from "./recipe"; +import type { + Assign, + DistributiveOmit, + DistributiveUnion, + JsxHTMLProps, + JsxStyleProps, + Pretty, +} from "./system-types"; + +interface Dict { + [k: string]: unknown; +} + +export type ComponentProps = DistributiveOmit< + ComponentPropsWithoutRef, + "ref" +> & { + ref?: Ref>; +}; + +export interface StyledComponent { + ( + props: JsxHTMLProps, Assign> + ): JSX.Element; + displayName?: string; +} + +interface RecipeFn { + __type: any; +} + +interface JsxFactoryOptions { + dataAttr?: boolean; + defaultProps?: TProps; + shouldForwardProp?(prop: string, variantKeys: string[]): boolean; +} + +export type JsxRecipeProps< + T extends ElementType, + P extends Dict, +> = JsxHTMLProps, P>; + +export type JsxElement = + T extends StyledComponent + ? StyledComponent>> + : StyledComponent; + +export interface JsxFactory { + (component: T): StyledComponent; + ( + component: T, + recipe: RecipeDefinition

, + options?: JsxFactoryOptions>> + ): JsxElement>; + ( + component: T, + recipeFn: P, + options?: JsxFactoryOptions> + ): JsxElement; +} + +export type JsxElements = { + [K in keyof JSX.IntrinsicElements]: StyledComponent; +}; + +export type Styled = JsxFactory & JsxElements; + +export type HTMLStyledProps = JsxHTMLProps< + ComponentProps, + JsxStyleProps +>; + +export type StyledVariantProps> = + T extends StyledComponent ? Props : never; diff --git a/packages/wow-ui/tsconfig.json b/packages/wow-ui/tsconfig.json index ae582a48..9683ade2 100644 --- a/packages/wow-ui/tsconfig.json +++ b/packages/wow-ui/tsconfig.json @@ -19,6 +19,7 @@ "skipLibCheck": true, "strict": true, "target": "ES2022", + "types": ["@testing-library/jest-dom"], "paths": { "@/*": ["src/*"], "@styled-system/*": ["./styled-system/*"] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 031f8ac7..e0a2829c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,6 +57,9 @@ importers: '@testing-library/react': specifier: ^15.0.7 version: 15.0.7(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0) + '@testing-library/user-event': + specifier: ^14.5.2 + version: 14.5.2(@testing-library/dom@10.1.0) '@types/jest': specifier: ^29.5.12 version: 29.5.12 @@ -150,6 +153,9 @@ importers: rollup-plugin-peer-deps-external: specifier: ^2.2.4 version: 2.2.4(rollup@4.17.2) + rollup-plugin-preserve-directives: + specifier: ^0.4.0 + version: 0.4.0(rollup@4.17.2) shared-config: specifier: workspace:^ version: link:packages/shared-config @@ -5583,6 +5589,15 @@ packages: '@testing-library/dom': 9.3.4 dev: true + /@testing-library/user-event@14.5.2(@testing-library/dom@10.1.0): + resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==} + engines: {node: '>=12', npm: '>=6'} + peerDependencies: + '@testing-library/dom': '>=7.21.4' + dependencies: + '@testing-library/dom': 10.1.0 + dev: true + /@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4): resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==} engines: {node: '>=12', npm: '>=6'} @@ -14729,6 +14744,16 @@ packages: rollup: 4.17.2 dev: true + /rollup-plugin-preserve-directives@0.4.0(rollup@4.17.2): + resolution: {integrity: sha512-gx4nBxYm5BysmEQS+e2tAMrtFxrGvk+Pe5ppafRibQi0zlW7VYAbEGk6IKDw9sJGPdFWgVTE0o4BU4cdG0Fylg==} + peerDependencies: + rollup: 2.x || 3.x || 4.x + dependencies: + '@rollup/pluginutils': 5.1.0(rollup@4.17.2) + magic-string: 0.30.10 + rollup: 4.17.2 + dev: true + /rollup@0.63.5: resolution: {integrity: sha512-dFf8LpUNzIj3oE0vCvobX6rqOzHzLBoblyFp+3znPbjiSmSvOoK2kMKx+Fv9jYduG1rvcCfCveSgEaQHjWRF6g==} hasBin: true diff --git a/styled-system/css/conditions.mjs b/styled-system/css/conditions.mjs new file mode 100644 index 00000000..fcd76efd --- /dev/null +++ b/styled-system/css/conditions.mjs @@ -0,0 +1,34 @@ +import { withoutSpace } from '../helpers.mjs'; + +const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base" +const conditions = new Set(conditionsStr.split(',')) + +export function isCondition(value){ + return conditions.has(value) || /^@|&|&$/.test(value) +} + +const underscoreRegex = /^_/ +const conditionsSelectorRegex = /&|@/ + +export function finalizeConditions(paths){ + return paths.map((path) => { + if (conditions.has(path)){ + return path.replace(underscoreRegex, '') + } + + if (conditionsSelectorRegex.test(path)){ + return `[${withoutSpace(path.trim())}]` + } + + return path + })} + + export function sortConditions(paths){ + return paths.sort((a, b) => { + const aa = isCondition(a) + const bb = isCondition(b) + if (aa && !bb) return 1 + if (!aa && bb) return -1 + return 0 + }) + } \ No newline at end of file diff --git a/styled-system/css/css.d.ts b/styled-system/css/css.d.ts new file mode 100644 index 00000000..cff6b0e2 --- /dev/null +++ b/styled-system/css/css.d.ts @@ -0,0 +1,18 @@ +/* eslint-disable */ +import type { SystemStyleObject } from "../types/index"; + +type Styles = SystemStyleObject | undefined | null | false; + +interface CssFunction { + (styles: Styles): string; + (styles: Styles[]): string; + (...styles: Array): string; + (styles: Styles): string; + + raw: (styles: Styles) => string; + raw: (styles: Styles[]) => string; + raw: (...styles: Array) => string; + raw: (styles: Styles) => string; +} + +export declare const css: CssFunction; diff --git a/styled-system/css/css.mjs b/styled-system/css/css.mjs new file mode 100644 index 00000000..f3854435 --- /dev/null +++ b/styled-system/css/css.mjs @@ -0,0 +1,45 @@ +import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs'; +import { sortConditions, finalizeConditions } from './conditions.mjs'; + +const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle" + +const classNameByProp = new Map() +const shorthands = new Map() +utilities.split(',').forEach((utility) => { + const [prop, meta] = utility.split(':') + const [className, ...shorthandList] = meta.split('/') + classNameByProp.set(prop, className) + if (shorthandList.length) { + shorthandList.forEach((shorthand) => { + shorthands.set(shorthand === '1' ? className : shorthand, prop) + }) + } +}) + +const resolveShorthand = (prop) => shorthands.get(prop) || prop + +const context = { + + conditions: { + shift: sortConditions, + finalize: finalizeConditions, + breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] } + }, + utility: { + + transform: (prop, value) => { + const key = resolveShorthand(prop) + const propKey = classNameByProp.get(key) || hypenateProperty(key) + return { className: `${propKey}_${withoutSpace(value)}` } + }, + hasShorthand: true, + toHash: (path, hashFn) => hashFn(path.join(":")), + resolveShorthand: resolveShorthand, + } +} + +const cssFn = createCss(context) +export const css = (...styles) => cssFn(mergeCss(...styles)) +css.raw = (...styles) => mergeCss(...styles) + +export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file diff --git a/styled-system/css/cva.d.ts b/styled-system/css/cva.d.ts new file mode 100644 index 00000000..78f66403 --- /dev/null +++ b/styled-system/css/cva.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable */ +import type { RecipeCreatorFn } from "../types/recipe"; + +export declare const cva: RecipeCreatorFn; + +export type { RecipeVariant, RecipeVariantProps } from "../types/recipe"; diff --git a/styled-system/css/cva.mjs b/styled-system/css/cva.mjs new file mode 100644 index 00000000..831b5e61 --- /dev/null +++ b/styled-system/css/cva.mjs @@ -0,0 +1,87 @@ +import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.mjs'; +import { css, mergeCss } from './css.mjs'; + +const defaults = (conf) => ({ + base: {}, + variants: {}, + defaultVariants: {}, + compoundVariants: [], + ...conf, +}) + +export function cva(config) { + const { base, variants, defaultVariants, compoundVariants } = defaults(config) + const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) }) + + function resolve(props = {}) { + const computedVariants = getVariantProps(props) + let variantCss = { ...base } + for (const [key, value] of Object.entries(computedVariants)) { + if (variants[key]?.[value]) { + variantCss = mergeCss(variantCss, variants[key][value]) + } + } + const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants) + return mergeCss(variantCss, compoundVariantCss) + } + + function merge(__cva) { + const override = defaults(__cva.config) + const variantKeys = uniq(__cva.variantKeys, Object.keys(variants)) + return cva({ + base: mergeCss(base, override.base), + variants: Object.fromEntries( + variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]), + ), + defaultVariants: mergeProps(defaultVariants, override.defaultVariants), + compoundVariants: [...compoundVariants, ...override.compoundVariants], + }) + } + + function cvaFn(props) { + return css(resolve(props)) + } + + const variantKeys = Object.keys(variants) + + function splitVariantProps(props) { + return splitProps(props, variantKeys) + } + + const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) + + return Object.assign(memo(cvaFn), { + __cva__: true, + variantMap, + variantKeys, + raw: resolve, + config, + merge, + splitVariantProps, + getVariantProps + }) +} + +export function getCompoundVariantCss(compoundVariants, variantMap) { + let result = {} + compoundVariants.forEach((compoundVariant) => { + const isMatching = Object.entries(compoundVariant).every(([key, value]) => { + if (key === 'css') return true + + const values = Array.isArray(value) ? value : [value] + return values.some((value) => variantMap[key] === value) + }) + + if (isMatching) { + result = mergeCss(result, compoundVariant.css) + } + }) + + return result +} + +export function assertCompoundVariant(name, compoundVariants, variants, prop) { + if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') { + throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`) + } +} diff --git a/styled-system/css/cx.d.ts b/styled-system/css/cx.d.ts new file mode 100644 index 00000000..8a876a0e --- /dev/null +++ b/styled-system/css/cx.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable */ +type Argument = string | boolean | null | undefined; + +/** Conditionally join classNames into a single string */ +export declare function cx(...args: Argument[]): string; diff --git a/styled-system/css/cx.mjs b/styled-system/css/cx.mjs new file mode 100644 index 00000000..81bbdae3 --- /dev/null +++ b/styled-system/css/cx.mjs @@ -0,0 +1,15 @@ +function cx() { + let str = '', + i = 0, + arg + + for (; i < arguments.length; ) { + if ((arg = arguments[i++]) && typeof arg === 'string') { + str && (str += ' ') + str += arg + } + } + return str +} + +export { cx } \ No newline at end of file diff --git a/styled-system/css/index.d.ts b/styled-system/css/index.d.ts new file mode 100644 index 00000000..eb7cec86 --- /dev/null +++ b/styled-system/css/index.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable */ +export * from "./css"; +export * from "./cx"; +export * from "./cva"; +export * from "./sva"; diff --git a/styled-system/css/index.mjs b/styled-system/css/index.mjs new file mode 100644 index 00000000..f2392bd6 --- /dev/null +++ b/styled-system/css/index.mjs @@ -0,0 +1,4 @@ +export * from './css.mjs'; +export * from './cx.mjs'; +export * from './cva.mjs'; +export * from './sva.mjs'; \ No newline at end of file diff --git a/styled-system/css/sva.d.ts b/styled-system/css/sva.d.ts new file mode 100644 index 00000000..d2593ec9 --- /dev/null +++ b/styled-system/css/sva.d.ts @@ -0,0 +1,4 @@ +/* eslint-disable */ +import type { SlotRecipeCreatorFn } from "../types/recipe"; + +export declare const sva: SlotRecipeCreatorFn; diff --git a/styled-system/css/sva.mjs b/styled-system/css/sva.mjs new file mode 100644 index 00000000..30e42f33 --- /dev/null +++ b/styled-system/css/sva.mjs @@ -0,0 +1,41 @@ +import { compact, getSlotRecipes, memo, splitProps } from '../helpers.mjs'; +import { cva } from './cva.mjs'; +import { cx } from './cx.mjs'; + +const slotClass = (className, slot) => className + '__' + slot + +export function sva(config) { + const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]) + const defaultVariants = config.defaultVariants ?? {} + + function svaFn(props) { + const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))]) + return Object.fromEntries(result) + } + + function raw(props) { + const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]) + return Object.fromEntries(result) + } + + const variants = config.variants ?? {}; + const variantKeys = Object.keys(variants); + + function splitVariantProps(props) { + return splitProps(props, variantKeys); + } + const getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) }) + + const variantMap = Object.fromEntries( + Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) + ); + + return Object.assign(memo(svaFn), { + __cva__: false, + raw, + variantMap, + variantKeys, + splitVariantProps, + getVariantProps, + }) +} \ No newline at end of file diff --git a/styled-system/helpers.mjs b/styled-system/helpers.mjs new file mode 100644 index 00000000..b14325fc --- /dev/null +++ b/styled-system/helpers.mjs @@ -0,0 +1,314 @@ +// src/assert.ts +function isObject(value) { + return typeof value === "object" && value != null && !Array.isArray(value); +} + +// src/compact.ts +function compact(value) { + return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0)); +} + +// src/condition.ts +var isBaseCondition = (v) => v === "base"; +function filterBaseConditions(c) { + return c.slice().filter((v) => !isBaseCondition(v)); +} + +// src/hash.ts +function toChar(code) { + return String.fromCharCode(code + (code > 25 ? 39 : 97)); +} +function toName(code) { + let name = ""; + let x; + for (x = Math.abs(code); x > 52; x = x / 52 | 0) + name = toChar(x % 52) + name; + return toChar(x % 52) + name; +} +function toPhash(h, x) { + let i = x.length; + while (i) + h = h * 33 ^ x.charCodeAt(--i); + return h; +} +function toHash(value) { + return toName(toPhash(5381, value) >>> 0); +} + +// src/important.ts +var importantRegex = /\s*!(important)?/i; +function isImportant(value) { + return typeof value === "string" ? importantRegex.test(value) : false; +} +function withoutImportant(value) { + return typeof value === "string" ? value.replace(importantRegex, "").trim() : value; +} +function withoutSpace(str) { + return typeof str === "string" ? str.replaceAll(" ", "_") : str; +} + +// src/memo.ts +var memo = (fn) => { + const cache = /* @__PURE__ */ new Map(); + const get = (...args) => { + const key = JSON.stringify(args); + if (cache.has(key)) { + return cache.get(key); + } + const result = fn(...args); + cache.set(key, result); + return result; + }; + return get; +}; + +// src/merge-props.ts +function mergeProps(...sources) { + const objects = sources.filter(Boolean); + return objects.reduce((prev, obj) => { + Object.keys(obj).forEach((key) => { + const prevValue = prev[key]; + const value = obj[key]; + if (isObject(prevValue) && isObject(value)) { + prev[key] = mergeProps(prevValue, value); + } else { + prev[key] = value; + } + }); + return prev; + }, {}); +} + +// src/walk-object.ts +var isNotNullish = (element) => element != null; +function walkObject(target, predicate, options = {}) { + const { stop, getKey } = options; + function inner(value, path = []) { + if (isObject(value) || Array.isArray(value)) { + const result = {}; + for (const [prop, child] of Object.entries(value)) { + const key = getKey?.(prop, child) ?? prop; + const childPath = [...path, key]; + if (stop?.(value, childPath)) { + return predicate(value, path); + } + const next = inner(child, childPath); + if (isNotNullish(next)) { + result[key] = next; + } + } + return result; + } + return predicate(value, path); + } + return inner(target); +} +function mapObject(obj, fn) { + if (Array.isArray(obj)) + return obj.map((value) => fn(value)); + if (!isObject(obj)) + return fn(obj); + return walkObject(obj, (value) => fn(value)); +} + +// src/normalize-style-object.ts +function toResponsiveObject(values, breakpoints) { + return values.reduce( + (acc, current, index) => { + const key = breakpoints[index]; + if (current != null) { + acc[key] = current; + } + return acc; + }, + {} + ); +} +function normalizeStyleObject(styles, context, shorthand = true) { + const { utility, conditions } = context; + const { hasShorthand, resolveShorthand } = utility; + return walkObject( + styles, + (value) => { + return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value; + }, + { + stop: (value) => Array.isArray(value), + getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0 + } + ); +} + +// src/classname.ts +var fallbackCondition = { + shift: (v) => v, + finalize: (v) => v, + breakpoints: { keys: [] } +}; +var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value; +function createCss(context) { + const { utility, hash, conditions: conds = fallbackCondition } = context; + const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-"); + const hashFn = (conditions, className) => { + let result; + if (hash) { + const baseArray = [...conds.finalize(conditions), className]; + result = formatClassName(utility.toHash(baseArray, toHash)); + } else { + const baseArray = [...conds.finalize(conditions), formatClassName(className)]; + result = baseArray.join(":"); + } + return result; + }; + return memo(({ base, ...styles } = {}) => { + const styleObject = Object.assign(styles, base); + const normalizedObject = normalizeStyleObject(styleObject, context); + const classNames = /* @__PURE__ */ new Set(); + walkObject(normalizedObject, (value, paths) => { + const important = isImportant(value); + if (value == null) + return; + const [prop, ...allConditions] = conds.shift(paths); + const conditions = filterBaseConditions(allConditions); + const transformed = utility.transform(prop, withoutImportant(sanitize(value))); + let className = hashFn(conditions, transformed.className); + if (important) + className = `${className}!`; + classNames.add(className); + }); + return Array.from(classNames).join(" "); + }); +} +function compactStyles(...styles) { + return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0); +} +function createMergeCss(context) { + function resolve(styles) { + const allStyles = compactStyles(...styles); + if (allStyles.length === 1) + return allStyles; + return allStyles.map((style) => normalizeStyleObject(style, context)); + } + function mergeCss(...styles) { + return mergeProps(...resolve(styles)); + } + function assignCss(...styles) { + return Object.assign({}, ...resolve(styles)); + } + return { mergeCss: memo(mergeCss), assignCss }; +} + +// src/hypenate-property.ts +var wordRegex = /([A-Z])/g; +var msRegex = /^ms-/; +var hypenateProperty = memo((property) => { + if (property.startsWith("--")) + return property; + return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase(); +}); + +// src/is-css-function.ts +var fns = ["min", "max", "clamp", "calc"]; +var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`); +var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v); + +// src/is-css-unit.ts +var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%"; +var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`; +var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`); +var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v); + +// src/is-css-var.ts +var isCssVar = (v) => typeof v === "string" && /^var\(--.+\)$/.test(v); + +// src/pattern-fns.ts +var patternFns = { + map: mapObject, + isCssFunction, + isCssVar, + isCssUnit +}; +var getPatternStyles = (pattern, styles) => { + if (!pattern?.defaultValues) + return styles; + const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues; + return Object.assign({}, defaults, compact(styles)); +}; + +// src/slot.ts +var getSlotRecipes = (recipe = {}) => { + const init = (slot) => ({ + className: [recipe.className, slot].filter(Boolean).join("__"), + base: recipe.base?.[slot] ?? {}, + variants: {}, + defaultVariants: recipe.defaultVariants ?? {}, + compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : [] + }); + const slots = recipe.slots ?? []; + const recipeParts = slots.map((slot) => [slot, init(slot)]); + for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) { + for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) { + recipeParts.forEach(([slot, slotRecipe]) => { + slotRecipe.variants[variantsKey] ??= {}; + slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {}; + }); + } + } + return Object.fromEntries(recipeParts); +}; +var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] })); + +// src/split-props.ts +function splitProps(props, ...keys) { + const descriptors = Object.getOwnPropertyDescriptors(props); + const dKeys = Object.keys(descriptors); + const split = (k) => { + const clone = {}; + for (let i = 0; i < k.length; i++) { + const key = k[i]; + if (descriptors[key]) { + Object.defineProperty(clone, key, descriptors[key]); + delete descriptors[key]; + } + } + return clone; + }; + const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key)); + return keys.map(fn).concat(split(dKeys)); +} + +// src/uniq.ts +var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []); +export { + compact, + createCss, + createMergeCss, + filterBaseConditions, + getPatternStyles, + getSlotCompoundVariant, + getSlotRecipes, + hypenateProperty, + isBaseCondition, + isObject, + mapObject, + memo, + mergeProps, + patternFns, + splitProps, + toHash, + uniq, + walkObject, + withoutSpace +}; + + + + + +export function __spreadValues(a, b) { + return { ...a, ...b } +} + +export function __objRest(source, exclude) { + return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key))) +} \ No newline at end of file diff --git a/styled-system/patterns/aspect-ratio.d.ts b/styled-system/patterns/aspect-ratio.d.ts new file mode 100644 index 00000000..c07557c2 --- /dev/null +++ b/styled-system/patterns/aspect-ratio.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface AspectRatioProperties { + ratio?: ConditionalValue; +} + +interface AspectRatioStyles + extends AspectRatioProperties, + DistributiveOmit< + SystemStyleObject, + keyof AspectRatioProperties | "aspectRatio" + > {} + +interface AspectRatioPatternFn { + (styles?: AspectRatioStyles): string; + raw: (styles?: AspectRatioStyles) => SystemStyleObject; +} + +export declare const aspectRatio: AspectRatioPatternFn; diff --git a/styled-system/patterns/aspect-ratio.mjs b/styled-system/patterns/aspect-ratio.mjs new file mode 100644 index 00000000..050c0d4e --- /dev/null +++ b/styled-system/patterns/aspect-ratio.mjs @@ -0,0 +1,38 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const aspectRatioConfig = { +transform(props, { map }) { + const { ratio = 4 / 3, ...rest } = props; + return { + position: "relative", + _before: { + content: `""`, + display: "block", + height: "0", + paddingBottom: map(ratio, (r) => `${1 / r * 100}%`) + }, + "&>*": { + display: "flex", + justifyContent: "center", + alignItems: "center", + overflow: "hidden", + position: "absolute", + inset: "0", + width: "100%", + height: "100%" + }, + "&>img, &>video": { + objectFit: "cover" + }, + ...rest + }; +}} + +export const getAspectRatioStyle = (styles = {}) => { + const _styles = getPatternStyles(aspectRatioConfig, styles) + return aspectRatioConfig.transform(_styles, patternFns) +} + +export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) +aspectRatio.raw = getAspectRatioStyle \ No newline at end of file diff --git a/styled-system/patterns/bleed.d.ts b/styled-system/patterns/bleed.d.ts new file mode 100644 index 00000000..929dac9a --- /dev/null +++ b/styled-system/patterns/bleed.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface BleedProperties { + inline?: SystemProperties["marginInline"]; + block?: SystemProperties["marginBlock"]; +} + +interface BleedStyles + extends BleedProperties, + DistributiveOmit {} + +interface BleedPatternFn { + (styles?: BleedStyles): string; + raw: (styles?: BleedStyles) => SystemStyleObject; +} + +export declare const bleed: BleedPatternFn; diff --git a/styled-system/patterns/bleed.mjs b/styled-system/patterns/bleed.mjs new file mode 100644 index 00000000..a7eaa936 --- /dev/null +++ b/styled-system/patterns/bleed.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const bleedConfig = { +transform(props, { map, isCssUnit, isCssVar }) { + const { inline, block, ...rest } = props; + const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`; + return { + "--bleed-x": map(inline, valueFn), + "--bleed-y": map(block, valueFn), + marginInline: "calc(var(--bleed-x, 0) * -1)", + marginBlock: "calc(var(--bleed-y, 0) * -1)", + ...rest + }; +}, +defaultValues:{inline:'0',block:'0'}} + +export const getBleedStyle = (styles = {}) => { + const _styles = getPatternStyles(bleedConfig, styles) + return bleedConfig.transform(_styles, patternFns) +} + +export const bleed = (styles) => css(getBleedStyle(styles)) +bleed.raw = getBleedStyle \ No newline at end of file diff --git a/styled-system/patterns/box.d.ts b/styled-system/patterns/box.d.ts new file mode 100644 index 00000000..348f80d9 --- /dev/null +++ b/styled-system/patterns/box.d.ts @@ -0,0 +1,19 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface BoxProperties {} + +interface BoxStyles + extends BoxProperties, + DistributiveOmit {} + +interface BoxPatternFn { + (styles?: BoxStyles): string; + raw: (styles?: BoxStyles) => SystemStyleObject; +} + +export declare const box: BoxPatternFn; diff --git a/styled-system/patterns/box.mjs b/styled-system/patterns/box.mjs new file mode 100644 index 00000000..96cafb58 --- /dev/null +++ b/styled-system/patterns/box.mjs @@ -0,0 +1,15 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const boxConfig = { +transform(props) { + return props; +}} + +export const getBoxStyle = (styles = {}) => { + const _styles = getPatternStyles(boxConfig, styles) + return boxConfig.transform(_styles, patternFns) +} + +export const box = (styles) => css(getBoxStyle(styles)) +box.raw = getBoxStyle \ No newline at end of file diff --git a/styled-system/patterns/center.d.ts b/styled-system/patterns/center.d.ts new file mode 100644 index 00000000..b03f66d1 --- /dev/null +++ b/styled-system/patterns/center.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface CenterProperties { + inline?: ConditionalValue; +} + +interface CenterStyles + extends CenterProperties, + DistributiveOmit {} + +interface CenterPatternFn { + (styles?: CenterStyles): string; + raw: (styles?: CenterStyles) => SystemStyleObject; +} + +export declare const center: CenterPatternFn; diff --git a/styled-system/patterns/center.mjs b/styled-system/patterns/center.mjs new file mode 100644 index 00000000..a01f4f06 --- /dev/null +++ b/styled-system/patterns/center.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const centerConfig = { +transform(props) { + const { inline, ...rest } = props; + return { + display: inline ? "inline-flex" : "flex", + alignItems: "center", + justifyContent: "center", + ...rest + }; +}} + +export const getCenterStyle = (styles = {}) => { + const _styles = getPatternStyles(centerConfig, styles) + return centerConfig.transform(_styles, patternFns) +} + +export const center = (styles) => css(getCenterStyle(styles)) +center.raw = getCenterStyle \ No newline at end of file diff --git a/styled-system/patterns/circle.d.ts b/styled-system/patterns/circle.d.ts new file mode 100644 index 00000000..76122a0d --- /dev/null +++ b/styled-system/patterns/circle.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface CircleProperties { + size?: SystemProperties["width"]; +} + +interface CircleStyles + extends CircleProperties, + DistributiveOmit {} + +interface CirclePatternFn { + (styles?: CircleStyles): string; + raw: (styles?: CircleStyles) => SystemStyleObject; +} + +export declare const circle: CirclePatternFn; diff --git a/styled-system/patterns/circle.mjs b/styled-system/patterns/circle.mjs new file mode 100644 index 00000000..40fcbfb1 --- /dev/null +++ b/styled-system/patterns/circle.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const circleConfig = { +transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + borderRadius: "9999px", + ...rest + }; +}} + +export const getCircleStyle = (styles = {}) => { + const _styles = getPatternStyles(circleConfig, styles) + return circleConfig.transform(_styles, patternFns) +} + +export const circle = (styles) => css(getCircleStyle(styles)) +circle.raw = getCircleStyle \ No newline at end of file diff --git a/styled-system/patterns/container.d.ts b/styled-system/patterns/container.d.ts new file mode 100644 index 00000000..c3ac83aa --- /dev/null +++ b/styled-system/patterns/container.d.ts @@ -0,0 +1,19 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface ContainerProperties {} + +interface ContainerStyles + extends ContainerProperties, + DistributiveOmit {} + +interface ContainerPatternFn { + (styles?: ContainerStyles): string; + raw: (styles?: ContainerStyles) => SystemStyleObject; +} + +export declare const container: ContainerPatternFn; diff --git a/styled-system/patterns/container.mjs b/styled-system/patterns/container.mjs new file mode 100644 index 00000000..55483f36 --- /dev/null +++ b/styled-system/patterns/container.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const containerConfig = { +transform(props) { + return { + position: "relative", + maxWidth: "8xl", + mx: "auto", + px: { base: "4", md: "6", lg: "8" }, + ...props + }; +}} + +export const getContainerStyle = (styles = {}) => { + const _styles = getPatternStyles(containerConfig, styles) + return containerConfig.transform(_styles, patternFns) +} + +export const container = (styles) => css(getContainerStyle(styles)) +container.raw = getContainerStyle \ No newline at end of file diff --git a/styled-system/patterns/cq.d.ts b/styled-system/patterns/cq.d.ts new file mode 100644 index 00000000..3a52ab09 --- /dev/null +++ b/styled-system/patterns/cq.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface CqProperties { + name?: ConditionalValue< + Tokens["containerNames"] | Properties["containerName"] + >; + type?: SystemProperties["containerType"]; +} + +interface CqStyles + extends CqProperties, + DistributiveOmit {} + +interface CqPatternFn { + (styles?: CqStyles): string; + raw: (styles?: CqStyles) => SystemStyleObject; +} + +export declare const cq: CqPatternFn; diff --git a/styled-system/patterns/cq.mjs b/styled-system/patterns/cq.mjs new file mode 100644 index 00000000..1ef7e9ad --- /dev/null +++ b/styled-system/patterns/cq.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const cqConfig = { +transform(props) { + const { name, type, ...rest } = props; + return { + containerType: type, + containerName: name, + ...rest + }; +}, +defaultValues:{type:'inline-size'}} + +export const getCqStyle = (styles = {}) => { + const _styles = getPatternStyles(cqConfig, styles) + return cqConfig.transform(_styles, patternFns) +} + +export const cq = (styles) => css(getCqStyle(styles)) +cq.raw = getCqStyle \ No newline at end of file diff --git a/styled-system/patterns/divider.d.ts b/styled-system/patterns/divider.d.ts new file mode 100644 index 00000000..c7e94fef --- /dev/null +++ b/styled-system/patterns/divider.d.ts @@ -0,0 +1,23 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface DividerProperties { + orientation?: ConditionalValue<"horizontal" | "vertical">; + thickness?: ConditionalValue; + color?: ConditionalValue; +} + +interface DividerStyles + extends DividerProperties, + DistributiveOmit {} + +interface DividerPatternFn { + (styles?: DividerStyles): string; + raw: (styles?: DividerStyles) => SystemStyleObject; +} + +export declare const divider: DividerPatternFn; diff --git a/styled-system/patterns/divider.mjs b/styled-system/patterns/divider.mjs new file mode 100644 index 00000000..9a81dbe1 --- /dev/null +++ b/styled-system/patterns/divider.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const dividerConfig = { +transform(props, { map }) { + const { orientation, thickness, color, ...rest } = props; + return { + "--thickness": thickness, + width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"), + height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"), + borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0), + borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0), + borderColor: color, + ...rest + }; +}, +defaultValues:{orientation:'horizontal',thickness:'1px'}} + +export const getDividerStyle = (styles = {}) => { + const _styles = getPatternStyles(dividerConfig, styles) + return dividerConfig.transform(_styles, patternFns) +} + +export const divider = (styles) => css(getDividerStyle(styles)) +divider.raw = getDividerStyle \ No newline at end of file diff --git a/styled-system/patterns/flex.d.ts b/styled-system/patterns/flex.d.ts new file mode 100644 index 00000000..e4b03bde --- /dev/null +++ b/styled-system/patterns/flex.d.ts @@ -0,0 +1,27 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface FlexProperties { + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; + direction?: SystemProperties["flexDirection"]; + wrap?: SystemProperties["flexWrap"]; + basis?: SystemProperties["flexBasis"]; + grow?: SystemProperties["flexGrow"]; + shrink?: SystemProperties["flexShrink"]; +} + +interface FlexStyles + extends FlexProperties, + DistributiveOmit {} + +interface FlexPatternFn { + (styles?: FlexStyles): string; + raw: (styles?: FlexStyles) => SystemStyleObject; +} + +export declare const flex: FlexPatternFn; diff --git a/styled-system/patterns/flex.mjs b/styled-system/patterns/flex.mjs new file mode 100644 index 00000000..fd12888b --- /dev/null +++ b/styled-system/patterns/flex.mjs @@ -0,0 +1,26 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const flexConfig = { +transform(props) { + const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + flexWrap: wrap2, + flexBasis: basis, + flexGrow: grow, + flexShrink: shrink, + ...rest + }; +}} + +export const getFlexStyle = (styles = {}) => { + const _styles = getPatternStyles(flexConfig, styles) + return flexConfig.transform(_styles, patternFns) +} + +export const flex = (styles) => css(getFlexStyle(styles)) +flex.raw = getFlexStyle \ No newline at end of file diff --git a/styled-system/patterns/float.d.ts b/styled-system/patterns/float.d.ts new file mode 100644 index 00000000..f841cfec --- /dev/null +++ b/styled-system/patterns/float.d.ts @@ -0,0 +1,34 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface FloatProperties { + offsetX?: ConditionalValue; + offsetY?: ConditionalValue; + offset?: ConditionalValue; + placement?: ConditionalValue< + | "bottom-end" + | "bottom-start" + | "top-end" + | "top-start" + | "bottom-center" + | "top-center" + | "middle-center" + | "middle-end" + | "middle-start" + >; +} + +interface FloatStyles + extends FloatProperties, + DistributiveOmit {} + +interface FloatPatternFn { + (styles?: FloatStyles): string; + raw: (styles?: FloatStyles) => SystemStyleObject; +} + +export declare const float: FloatPatternFn; diff --git a/styled-system/patterns/float.mjs b/styled-system/patterns/float.mjs new file mode 100644 index 00000000..3d89978b --- /dev/null +++ b/styled-system/patterns/float.mjs @@ -0,0 +1,52 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const floatConfig = { +transform(props, { map }) { + const { offset, offsetX, offsetY, placement, ...rest } = props; + return { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + position: "absolute", + insetBlockStart: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; + return map2[side]; + }), + insetBlockEnd: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: "auto", middle: "50%", bottom: offsetY }; + return map2[side]; + }), + insetInlineStart: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: offsetX, center: "50%", end: "auto" }; + return map2[align]; + }), + insetInlineEnd: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: "auto", center: "50%", end: offsetX }; + return map2[align]; + }), + translate: map(placement, (v) => { + const [side, align] = v.split("-"); + const mapX = { start: "-50%", center: "-50%", end: "50%" }; + const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; + return `${mapX[align]} ${mapY[side]}`; + }), + ...rest + }; +}, +defaultValues(props) { + const offset = props.offset || "0"; + return { offset, offsetX: offset, offsetY: offset, placement: "top-end" }; +}} + +export const getFloatStyle = (styles = {}) => { + const _styles = getPatternStyles(floatConfig, styles) + return floatConfig.transform(_styles, patternFns) +} + +export const float = (styles) => css(getFloatStyle(styles)) +float.raw = getFloatStyle \ No newline at end of file diff --git a/styled-system/patterns/grid-item.d.ts b/styled-system/patterns/grid-item.d.ts new file mode 100644 index 00000000..1753e288 --- /dev/null +++ b/styled-system/patterns/grid-item.d.ts @@ -0,0 +1,26 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface GridItemProperties { + colSpan?: ConditionalValue; + rowSpan?: ConditionalValue; + colStart?: ConditionalValue; + rowStart?: ConditionalValue; + colEnd?: ConditionalValue; + rowEnd?: ConditionalValue; +} + +interface GridItemStyles + extends GridItemProperties, + DistributiveOmit {} + +interface GridItemPatternFn { + (styles?: GridItemStyles): string; + raw: (styles?: GridItemStyles) => SystemStyleObject; +} + +export declare const gridItem: GridItemPatternFn; diff --git a/styled-system/patterns/grid-item.mjs b/styled-system/patterns/grid-item.mjs new file mode 100644 index 00000000..e00f4725 --- /dev/null +++ b/styled-system/patterns/grid-item.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const gridItemConfig = { +transform(props, { map }) { + const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props; + const spanFn = (v) => v === "auto" ? v : `span ${v}`; + return { + gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, + gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, + gridColumnStart: colStart, + gridColumnEnd: colEnd, + gridRowStart: rowStart, + gridRowEnd: rowEnd, + ...rest + }; +}} + +export const getGridItemStyle = (styles = {}) => { + const _styles = getPatternStyles(gridItemConfig, styles) + return gridItemConfig.transform(_styles, patternFns) +} + +export const gridItem = (styles) => css(getGridItemStyle(styles)) +gridItem.raw = getGridItemStyle \ No newline at end of file diff --git a/styled-system/patterns/grid.d.ts b/styled-system/patterns/grid.d.ts new file mode 100644 index 00000000..95038cb5 --- /dev/null +++ b/styled-system/patterns/grid.d.ts @@ -0,0 +1,25 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface GridProperties { + gap?: SystemProperties["gap"]; + columnGap?: SystemProperties["gap"]; + rowGap?: SystemProperties["gap"]; + columns?: ConditionalValue; + minChildWidth?: ConditionalValue; +} + +interface GridStyles + extends GridProperties, + DistributiveOmit {} + +interface GridPatternFn { + (styles?: GridStyles): string; + raw: (styles?: GridStyles) => SystemStyleObject; +} + +export declare const grid: GridPatternFn; diff --git a/styled-system/patterns/grid.mjs b/styled-system/patterns/grid.mjs new file mode 100644 index 00000000..9dba80a0 --- /dev/null +++ b/styled-system/patterns/grid.mjs @@ -0,0 +1,27 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const gridConfig = { +transform(props, { map, isCssUnit }) { + const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props; + const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`; + return { + display: "grid", + gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0, + gap, + columnGap, + rowGap, + ...rest + }; +}, +defaultValues(props) { + return { gap: props.columnGap || props.rowGap ? void 0 : "10px" }; +}} + +export const getGridStyle = (styles = {}) => { + const _styles = getPatternStyles(gridConfig, styles) + return gridConfig.transform(_styles, patternFns) +} + +export const grid = (styles) => css(getGridStyle(styles)) +grid.raw = getGridStyle \ No newline at end of file diff --git a/styled-system/patterns/hstack.d.ts b/styled-system/patterns/hstack.d.ts new file mode 100644 index 00000000..6ccd4c40 --- /dev/null +++ b/styled-system/patterns/hstack.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface HstackProperties { + justify?: SystemProperties["justifyContent"]; + gap?: SystemProperties["gap"]; +} + +interface HstackStyles + extends HstackProperties, + DistributiveOmit {} + +interface HstackPatternFn { + (styles?: HstackStyles): string; + raw: (styles?: HstackStyles) => SystemStyleObject; +} + +export declare const hstack: HstackPatternFn; diff --git a/styled-system/patterns/hstack.mjs b/styled-system/patterns/hstack.mjs new file mode 100644 index 00000000..07f4ef31 --- /dev/null +++ b/styled-system/patterns/hstack.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const hstackConfig = { +transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "row", + ...rest + }; +}, +defaultValues:{gap:'10px'}} + +export const getHstackStyle = (styles = {}) => { + const _styles = getPatternStyles(hstackConfig, styles) + return hstackConfig.transform(_styles, patternFns) +} + +export const hstack = (styles) => css(getHstackStyle(styles)) +hstack.raw = getHstackStyle \ No newline at end of file diff --git a/styled-system/patterns/index.d.ts b/styled-system/patterns/index.d.ts new file mode 100644 index 00000000..b8d39591 --- /dev/null +++ b/styled-system/patterns/index.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +export * from "./box"; +export * from "./flex"; +export * from "./stack"; +export * from "./vstack"; +export * from "./hstack"; +export * from "./spacer"; +export * from "./square"; +export * from "./circle"; +export * from "./center"; +export * from "./link-overlay"; +export * from "./aspect-ratio"; +export * from "./grid"; +export * from "./grid-item"; +export * from "./wrap"; +export * from "./container"; +export * from "./divider"; +export * from "./float"; +export * from "./bleed"; +export * from "./visually-hidden"; +export * from "./cq"; diff --git a/styled-system/patterns/index.mjs b/styled-system/patterns/index.mjs new file mode 100644 index 00000000..6efe55b7 --- /dev/null +++ b/styled-system/patterns/index.mjs @@ -0,0 +1,20 @@ +export * from './box.mjs'; +export * from './flex.mjs'; +export * from './stack.mjs'; +export * from './vstack.mjs'; +export * from './hstack.mjs'; +export * from './spacer.mjs'; +export * from './square.mjs'; +export * from './circle.mjs'; +export * from './center.mjs'; +export * from './link-overlay.mjs'; +export * from './aspect-ratio.mjs'; +export * from './grid.mjs'; +export * from './grid-item.mjs'; +export * from './wrap.mjs'; +export * from './container.mjs'; +export * from './divider.mjs'; +export * from './float.mjs'; +export * from './bleed.mjs'; +export * from './visually-hidden.mjs'; +export * from './cq.mjs'; \ No newline at end of file diff --git a/styled-system/patterns/link-overlay.d.ts b/styled-system/patterns/link-overlay.d.ts new file mode 100644 index 00000000..b03eaf15 --- /dev/null +++ b/styled-system/patterns/link-overlay.d.ts @@ -0,0 +1,19 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface LinkOverlayProperties {} + +interface LinkOverlayStyles + extends LinkOverlayProperties, + DistributiveOmit {} + +interface LinkOverlayPatternFn { + (styles?: LinkOverlayStyles): string; + raw: (styles?: LinkOverlayStyles) => SystemStyleObject; +} + +export declare const linkOverlay: LinkOverlayPatternFn; diff --git a/styled-system/patterns/link-overlay.mjs b/styled-system/patterns/link-overlay.mjs new file mode 100644 index 00000000..9b904ad2 --- /dev/null +++ b/styled-system/patterns/link-overlay.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const linkOverlayConfig = { +transform(props) { + return { + _before: { + content: '""', + position: "absolute", + inset: "0", + zIndex: "0", + ...props["_before"] + }, + ...props + }; +}} + +export const getLinkOverlayStyle = (styles = {}) => { + const _styles = getPatternStyles(linkOverlayConfig, styles) + return linkOverlayConfig.transform(_styles, patternFns) +} + +export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) +linkOverlay.raw = getLinkOverlayStyle \ No newline at end of file diff --git a/styled-system/patterns/spacer.d.ts b/styled-system/patterns/spacer.d.ts new file mode 100644 index 00000000..47331f26 --- /dev/null +++ b/styled-system/patterns/spacer.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface SpacerProperties { + size?: ConditionalValue; +} + +interface SpacerStyles + extends SpacerProperties, + DistributiveOmit {} + +interface SpacerPatternFn { + (styles?: SpacerStyles): string; + raw: (styles?: SpacerStyles) => SystemStyleObject; +} + +export declare const spacer: SpacerPatternFn; diff --git a/styled-system/patterns/spacer.mjs b/styled-system/patterns/spacer.mjs new file mode 100644 index 00000000..01b66e41 --- /dev/null +++ b/styled-system/patterns/spacer.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const spacerConfig = { +transform(props, { map }) { + const { size, ...rest } = props; + return { + alignSelf: "stretch", + justifySelf: "stretch", + flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`), + ...rest + }; +}} + +export const getSpacerStyle = (styles = {}) => { + const _styles = getPatternStyles(spacerConfig, styles) + return spacerConfig.transform(_styles, patternFns) +} + +export const spacer = (styles) => css(getSpacerStyle(styles)) +spacer.raw = getSpacerStyle \ No newline at end of file diff --git a/styled-system/patterns/square.d.ts b/styled-system/patterns/square.d.ts new file mode 100644 index 00000000..99660d29 --- /dev/null +++ b/styled-system/patterns/square.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface SquareProperties { + size?: SystemProperties["width"]; +} + +interface SquareStyles + extends SquareProperties, + DistributiveOmit {} + +interface SquarePatternFn { + (styles?: SquareStyles): string; + raw: (styles?: SquareStyles) => SystemStyleObject; +} + +export declare const square: SquarePatternFn; diff --git a/styled-system/patterns/square.mjs b/styled-system/patterns/square.mjs new file mode 100644 index 00000000..7aa07973 --- /dev/null +++ b/styled-system/patterns/square.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const squareConfig = { +transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + ...rest + }; +}} + +export const getSquareStyle = (styles = {}) => { + const _styles = getPatternStyles(squareConfig, styles) + return squareConfig.transform(_styles, patternFns) +} + +export const square = (styles) => css(getSquareStyle(styles)) +square.raw = getSquareStyle \ No newline at end of file diff --git a/styled-system/patterns/stack.d.ts b/styled-system/patterns/stack.d.ts new file mode 100644 index 00000000..954a5a92 --- /dev/null +++ b/styled-system/patterns/stack.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface StackProperties { + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; + direction?: SystemProperties["flexDirection"]; + gap?: SystemProperties["gap"]; +} + +interface StackStyles + extends StackProperties, + DistributiveOmit {} + +interface StackPatternFn { + (styles?: StackStyles): string; + raw: (styles?: StackStyles) => SystemStyleObject; +} + +export declare const stack: StackPatternFn; diff --git a/styled-system/patterns/stack.mjs b/styled-system/patterns/stack.mjs new file mode 100644 index 00000000..5afce2d6 --- /dev/null +++ b/styled-system/patterns/stack.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const stackConfig = { +transform(props) { + const { align, justify, direction, gap, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + gap, + ...rest + }; +}, +defaultValues:{direction:'column',gap:'10px'}} + +export const getStackStyle = (styles = {}) => { + const _styles = getPatternStyles(stackConfig, styles) + return stackConfig.transform(_styles, patternFns) +} + +export const stack = (styles) => css(getStackStyle(styles)) +stack.raw = getStackStyle \ No newline at end of file diff --git a/styled-system/patterns/visually-hidden.d.ts b/styled-system/patterns/visually-hidden.d.ts new file mode 100644 index 00000000..5da04d75 --- /dev/null +++ b/styled-system/patterns/visually-hidden.d.ts @@ -0,0 +1,19 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface VisuallyHiddenProperties {} + +interface VisuallyHiddenStyles + extends VisuallyHiddenProperties, + DistributiveOmit {} + +interface VisuallyHiddenPatternFn { + (styles?: VisuallyHiddenStyles): string; + raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject; +} + +export declare const visuallyHidden: VisuallyHiddenPatternFn; diff --git a/styled-system/patterns/visually-hidden.mjs b/styled-system/patterns/visually-hidden.mjs new file mode 100644 index 00000000..534a0eaf --- /dev/null +++ b/styled-system/patterns/visually-hidden.mjs @@ -0,0 +1,18 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const visuallyHiddenConfig = { +transform(props) { + return { + srOnly: true, + ...props + }; +}} + +export const getVisuallyHiddenStyle = (styles = {}) => { + const _styles = getPatternStyles(visuallyHiddenConfig, styles) + return visuallyHiddenConfig.transform(_styles, patternFns) +} + +export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)) +visuallyHidden.raw = getVisuallyHiddenStyle \ No newline at end of file diff --git a/styled-system/patterns/vstack.d.ts b/styled-system/patterns/vstack.d.ts new file mode 100644 index 00000000..35d2a9d9 --- /dev/null +++ b/styled-system/patterns/vstack.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface VstackProperties { + justify?: SystemProperties["justifyContent"]; + gap?: SystemProperties["gap"]; +} + +interface VstackStyles + extends VstackProperties, + DistributiveOmit {} + +interface VstackPatternFn { + (styles?: VstackStyles): string; + raw: (styles?: VstackStyles) => SystemStyleObject; +} + +export declare const vstack: VstackPatternFn; diff --git a/styled-system/patterns/vstack.mjs b/styled-system/patterns/vstack.mjs new file mode 100644 index 00000000..287476ca --- /dev/null +++ b/styled-system/patterns/vstack.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const vstackConfig = { +transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "column", + ...rest + }; +}, +defaultValues:{gap:'10px'}} + +export const getVstackStyle = (styles = {}) => { + const _styles = getPatternStyles(vstackConfig, styles) + return vstackConfig.transform(_styles, patternFns) +} + +export const vstack = (styles) => css(getVstackStyle(styles)) +vstack.raw = getVstackStyle \ No newline at end of file diff --git a/styled-system/patterns/wrap.d.ts b/styled-system/patterns/wrap.d.ts new file mode 100644 index 00000000..29dd4541 --- /dev/null +++ b/styled-system/patterns/wrap.d.ts @@ -0,0 +1,25 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; + +export interface WrapProperties { + gap?: SystemProperties["gap"]; + rowGap?: SystemProperties["gap"]; + columnGap?: SystemProperties["gap"]; + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; +} + +interface WrapStyles + extends WrapProperties, + DistributiveOmit {} + +interface WrapPatternFn { + (styles?: WrapStyles): string; + raw: (styles?: WrapStyles) => SystemStyleObject; +} + +export declare const wrap: WrapPatternFn; diff --git a/styled-system/patterns/wrap.mjs b/styled-system/patterns/wrap.mjs new file mode 100644 index 00000000..225a0d62 --- /dev/null +++ b/styled-system/patterns/wrap.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const wrapConfig = { +transform(props) { + const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props; + return { + display: "flex", + flexWrap: "wrap", + alignItems: align, + justifyContent: justify, + gap, + columnGap, + rowGap, + ...rest + }; +}} + +export const getWrapStyle = (styles = {}) => { + const _styles = getPatternStyles(wrapConfig, styles) + return wrapConfig.transform(_styles, patternFns) +} + +export const wrap = (styles) => css(getWrapStyle(styles)) +wrap.raw = getWrapStyle \ No newline at end of file diff --git a/styled-system/tokens/index.d.ts b/styled-system/tokens/index.d.ts new file mode 100644 index 00000000..d4b2113d --- /dev/null +++ b/styled-system/tokens/index.d.ts @@ -0,0 +1,9 @@ +/* eslint-disable */ +import type { Token } from "./tokens"; + +export declare const token: { + (path: Token, fallback?: string): string; + var: (path: Token, fallback?: string) => string; +}; + +export * from "./tokens"; diff --git a/styled-system/tokens/index.mjs b/styled-system/tokens/index.mjs new file mode 100644 index 00000000..2024a999 --- /dev/null +++ b/styled-system/tokens/index.mjs @@ -0,0 +1,1888 @@ +const tokens = { + "aspectRatios.square": { + "value": "1 / 1", + "variable": "var(--aspect-ratios-square)" + }, + "aspectRatios.landscape": { + "value": "4 / 3", + "variable": "var(--aspect-ratios-landscape)" + }, + "aspectRatios.portrait": { + "value": "3 / 4", + "variable": "var(--aspect-ratios-portrait)" + }, + "aspectRatios.wide": { + "value": "16 / 9", + "variable": "var(--aspect-ratios-wide)" + }, + "aspectRatios.ultrawide": { + "value": "18 / 5", + "variable": "var(--aspect-ratios-ultrawide)" + }, + "aspectRatios.golden": { + "value": "1.618 / 1", + "variable": "var(--aspect-ratios-golden)" + }, + "borders.none": { + "value": "none", + "variable": "var(--borders-none)" + }, + "easings.default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "variable": "var(--easings-default)" + }, + "easings.linear": { + "value": "linear", + "variable": "var(--easings-linear)" + }, + "easings.in": { + "value": "cubic-bezier(0.4, 0, 1, 1)", + "variable": "var(--easings-in)" + }, + "easings.out": { + "value": "cubic-bezier(0, 0, 0.2, 1)", + "variable": "var(--easings-out)" + }, + "easings.in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "variable": "var(--easings-in-out)" + }, + "durations.fastest": { + "value": "50ms", + "variable": "var(--durations-fastest)" + }, + "durations.faster": { + "value": "100ms", + "variable": "var(--durations-faster)" + }, + "durations.fast": { + "value": "150ms", + "variable": "var(--durations-fast)" + }, + "durations.normal": { + "value": "200ms", + "variable": "var(--durations-normal)" + }, + "durations.slow": { + "value": "300ms", + "variable": "var(--durations-slow)" + }, + "durations.slower": { + "value": "400ms", + "variable": "var(--durations-slower)" + }, + "durations.slowest": { + "value": "500ms", + "variable": "var(--durations-slowest)" + }, + "radii.xs": { + "value": "0.125rem", + "variable": "var(--radii-xs)" + }, + "radii.sm": { + "value": "0.25rem", + "variable": "var(--radii-sm)" + }, + "radii.md": { + "value": "0.375rem", + "variable": "var(--radii-md)" + }, + "radii.lg": { + "value": "0.5rem", + "variable": "var(--radii-lg)" + }, + "radii.xl": { + "value": "0.75rem", + "variable": "var(--radii-xl)" + }, + "radii.2xl": { + "value": "1rem", + "variable": "var(--radii-2xl)" + }, + "radii.3xl": { + "value": "1.5rem", + "variable": "var(--radii-3xl)" + }, + "radii.full": { + "value": "9999px", + "variable": "var(--radii-full)" + }, + "fontWeights.thin": { + "value": "100", + "variable": "var(--font-weights-thin)" + }, + "fontWeights.extralight": { + "value": "200", + "variable": "var(--font-weights-extralight)" + }, + "fontWeights.light": { + "value": "300", + "variable": "var(--font-weights-light)" + }, + "fontWeights.normal": { + "value": "400", + "variable": "var(--font-weights-normal)" + }, + "fontWeights.medium": { + "value": "500", + "variable": "var(--font-weights-medium)" + }, + "fontWeights.semibold": { + "value": "600", + "variable": "var(--font-weights-semibold)" + }, + "fontWeights.bold": { + "value": "700", + "variable": "var(--font-weights-bold)" + }, + "fontWeights.extrabold": { + "value": "800", + "variable": "var(--font-weights-extrabold)" + }, + "fontWeights.black": { + "value": "900", + "variable": "var(--font-weights-black)" + }, + "lineHeights.none": { + "value": "1", + "variable": "var(--line-heights-none)" + }, + "lineHeights.tight": { + "value": "1.25", + "variable": "var(--line-heights-tight)" + }, + "lineHeights.snug": { + "value": "1.375", + "variable": "var(--line-heights-snug)" + }, + "lineHeights.normal": { + "value": "1.5", + "variable": "var(--line-heights-normal)" + }, + "lineHeights.relaxed": { + "value": "1.625", + "variable": "var(--line-heights-relaxed)" + }, + "lineHeights.loose": { + "value": "2", + "variable": "var(--line-heights-loose)" + }, + "fonts.sans": { + "value": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", + "variable": "var(--fonts-sans)" + }, + "fonts.serif": { + "value": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "variable": "var(--fonts-serif)" + }, + "fonts.mono": { + "value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "variable": "var(--fonts-mono)" + }, + "letterSpacings.tighter": { + "value": "-0.05em", + "variable": "var(--letter-spacings-tighter)" + }, + "letterSpacings.tight": { + "value": "-0.025em", + "variable": "var(--letter-spacings-tight)" + }, + "letterSpacings.normal": { + "value": "0em", + "variable": "var(--letter-spacings-normal)" + }, + "letterSpacings.wide": { + "value": "0.025em", + "variable": "var(--letter-spacings-wide)" + }, + "letterSpacings.wider": { + "value": "0.05em", + "variable": "var(--letter-spacings-wider)" + }, + "letterSpacings.widest": { + "value": "0.1em", + "variable": "var(--letter-spacings-widest)" + }, + "fontSizes.2xs": { + "value": "0.5rem", + "variable": "var(--font-sizes-2xs)" + }, + "fontSizes.xs": { + "value": "0.75rem", + "variable": "var(--font-sizes-xs)" + }, + "fontSizes.sm": { + "value": "0.875rem", + "variable": "var(--font-sizes-sm)" + }, + "fontSizes.md": { + "value": "1rem", + "variable": "var(--font-sizes-md)" + }, + "fontSizes.lg": { + "value": "1.125rem", + "variable": "var(--font-sizes-lg)" + }, + "fontSizes.xl": { + "value": "1.25rem", + "variable": "var(--font-sizes-xl)" + }, + "fontSizes.2xl": { + "value": "1.5rem", + "variable": "var(--font-sizes-2xl)" + }, + "fontSizes.3xl": { + "value": "1.875rem", + "variable": "var(--font-sizes-3xl)" + }, + "fontSizes.4xl": { + "value": "2.25rem", + "variable": "var(--font-sizes-4xl)" + }, + "fontSizes.5xl": { + "value": "3rem", + "variable": "var(--font-sizes-5xl)" + }, + "fontSizes.6xl": { + "value": "3.75rem", + "variable": "var(--font-sizes-6xl)" + }, + "fontSizes.7xl": { + "value": "4.5rem", + "variable": "var(--font-sizes-7xl)" + }, + "fontSizes.8xl": { + "value": "6rem", + "variable": "var(--font-sizes-8xl)" + }, + "fontSizes.9xl": { + "value": "8rem", + "variable": "var(--font-sizes-9xl)" + }, + "shadows.xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", + "variable": "var(--shadows-xs)" + }, + "shadows.sm": { + "value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-sm)" + }, + "shadows.md": { + "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-md)" + }, + "shadows.lg": { + "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-lg)" + }, + "shadows.xl": { + "value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-xl)" + }, + "shadows.2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)", + "variable": "var(--shadows-2xl)" + }, + "shadows.inner": { + "value": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)", + "variable": "var(--shadows-inner)" + }, + "colors.current": { + "value": "currentColor", + "variable": "var(--colors-current)" + }, + "colors.black": { + "value": "#000", + "variable": "var(--colors-black)" + }, + "colors.white": { + "value": "#fff", + "variable": "var(--colors-white)" + }, + "colors.transparent": { + "value": "rgb(0 0 0 / 0)", + "variable": "var(--colors-transparent)" + }, + "colors.rose.50": { + "value": "#fff1f2", + "variable": "var(--colors-rose-50)" + }, + "colors.rose.100": { + "value": "#ffe4e6", + "variable": "var(--colors-rose-100)" + }, + "colors.rose.200": { + "value": "#fecdd3", + "variable": "var(--colors-rose-200)" + }, + "colors.rose.300": { + "value": "#fda4af", + "variable": "var(--colors-rose-300)" + }, + "colors.rose.400": { + "value": "#fb7185", + "variable": "var(--colors-rose-400)" + }, + "colors.rose.500": { + "value": "#f43f5e", + "variable": "var(--colors-rose-500)" + }, + "colors.rose.600": { + "value": "#e11d48", + "variable": "var(--colors-rose-600)" + }, + "colors.rose.700": { + "value": "#be123c", + "variable": "var(--colors-rose-700)" + }, + "colors.rose.800": { + "value": "#9f1239", + "variable": "var(--colors-rose-800)" + }, + "colors.rose.900": { + "value": "#881337", + "variable": "var(--colors-rose-900)" + }, + "colors.rose.950": { + "value": "#4c0519", + "variable": "var(--colors-rose-950)" + }, + "colors.pink.50": { + "value": "#fdf2f8", + "variable": "var(--colors-pink-50)" + }, + "colors.pink.100": { + "value": "#fce7f3", + "variable": "var(--colors-pink-100)" + }, + "colors.pink.200": { + "value": "#fbcfe8", + "variable": "var(--colors-pink-200)" + }, + "colors.pink.300": { + "value": "#f9a8d4", + "variable": "var(--colors-pink-300)" + }, + "colors.pink.400": { + "value": "#f472b6", + "variable": "var(--colors-pink-400)" + }, + "colors.pink.500": { + "value": "#ec4899", + "variable": "var(--colors-pink-500)" + }, + "colors.pink.600": { + "value": "#db2777", + "variable": "var(--colors-pink-600)" + }, + "colors.pink.700": { + "value": "#be185d", + "variable": "var(--colors-pink-700)" + }, + "colors.pink.800": { + "value": "#9d174d", + "variable": "var(--colors-pink-800)" + }, + "colors.pink.900": { + "value": "#831843", + "variable": "var(--colors-pink-900)" + }, + "colors.pink.950": { + "value": "#500724", + "variable": "var(--colors-pink-950)" + }, + "colors.fuchsia.50": { + "value": "#fdf4ff", + "variable": "var(--colors-fuchsia-50)" + }, + "colors.fuchsia.100": { + "value": "#fae8ff", + "variable": "var(--colors-fuchsia-100)" + }, + "colors.fuchsia.200": { + "value": "#f5d0fe", + "variable": "var(--colors-fuchsia-200)" + }, + "colors.fuchsia.300": { + "value": "#f0abfc", + "variable": "var(--colors-fuchsia-300)" + }, + "colors.fuchsia.400": { + "value": "#e879f9", + "variable": "var(--colors-fuchsia-400)" + }, + "colors.fuchsia.500": { + "value": "#d946ef", + "variable": "var(--colors-fuchsia-500)" + }, + "colors.fuchsia.600": { + "value": "#c026d3", + "variable": "var(--colors-fuchsia-600)" + }, + "colors.fuchsia.700": { + "value": "#a21caf", + "variable": "var(--colors-fuchsia-700)" + }, + "colors.fuchsia.800": { + "value": "#86198f", + "variable": "var(--colors-fuchsia-800)" + }, + "colors.fuchsia.900": { + "value": "#701a75", + "variable": "var(--colors-fuchsia-900)" + }, + "colors.fuchsia.950": { + "value": "#4a044e", + "variable": "var(--colors-fuchsia-950)" + }, + "colors.purple.50": { + "value": "#faf5ff", + "variable": "var(--colors-purple-50)" + }, + "colors.purple.100": { + "value": "#f3e8ff", + "variable": "var(--colors-purple-100)" + }, + "colors.purple.200": { + "value": "#e9d5ff", + "variable": "var(--colors-purple-200)" + }, + "colors.purple.300": { + "value": "#d8b4fe", + "variable": "var(--colors-purple-300)" + }, + "colors.purple.400": { + "value": "#c084fc", + "variable": "var(--colors-purple-400)" + }, + "colors.purple.500": { + "value": "#a855f7", + "variable": "var(--colors-purple-500)" + }, + "colors.purple.600": { + "value": "#9333ea", + "variable": "var(--colors-purple-600)" + }, + "colors.purple.700": { + "value": "#7e22ce", + "variable": "var(--colors-purple-700)" + }, + "colors.purple.800": { + "value": "#6b21a8", + "variable": "var(--colors-purple-800)" + }, + "colors.purple.900": { + "value": "#581c87", + "variable": "var(--colors-purple-900)" + }, + "colors.purple.950": { + "value": "#3b0764", + "variable": "var(--colors-purple-950)" + }, + "colors.violet.50": { + "value": "#f5f3ff", + "variable": "var(--colors-violet-50)" + }, + "colors.violet.100": { + "value": "#ede9fe", + "variable": "var(--colors-violet-100)" + }, + "colors.violet.200": { + "value": "#ddd6fe", + "variable": "var(--colors-violet-200)" + }, + "colors.violet.300": { + "value": "#c4b5fd", + "variable": "var(--colors-violet-300)" + }, + "colors.violet.400": { + "value": "#a78bfa", + "variable": "var(--colors-violet-400)" + }, + "colors.violet.500": { + "value": "#8b5cf6", + "variable": "var(--colors-violet-500)" + }, + "colors.violet.600": { + "value": "#7c3aed", + "variable": "var(--colors-violet-600)" + }, + "colors.violet.700": { + "value": "#6d28d9", + "variable": "var(--colors-violet-700)" + }, + "colors.violet.800": { + "value": "#5b21b6", + "variable": "var(--colors-violet-800)" + }, + "colors.violet.900": { + "value": "#4c1d95", + "variable": "var(--colors-violet-900)" + }, + "colors.violet.950": { + "value": "#2e1065", + "variable": "var(--colors-violet-950)" + }, + "colors.indigo.50": { + "value": "#eef2ff", + "variable": "var(--colors-indigo-50)" + }, + "colors.indigo.100": { + "value": "#e0e7ff", + "variable": "var(--colors-indigo-100)" + }, + "colors.indigo.200": { + "value": "#c7d2fe", + "variable": "var(--colors-indigo-200)" + }, + "colors.indigo.300": { + "value": "#a5b4fc", + "variable": "var(--colors-indigo-300)" + }, + "colors.indigo.400": { + "value": "#818cf8", + "variable": "var(--colors-indigo-400)" + }, + "colors.indigo.500": { + "value": "#6366f1", + "variable": "var(--colors-indigo-500)" + }, + "colors.indigo.600": { + "value": "#4f46e5", + "variable": "var(--colors-indigo-600)" + }, + "colors.indigo.700": { + "value": "#4338ca", + "variable": "var(--colors-indigo-700)" + }, + "colors.indigo.800": { + "value": "#3730a3", + "variable": "var(--colors-indigo-800)" + }, + "colors.indigo.900": { + "value": "#312e81", + "variable": "var(--colors-indigo-900)" + }, + "colors.indigo.950": { + "value": "#1e1b4b", + "variable": "var(--colors-indigo-950)" + }, + "colors.blue.50": { + "value": "#eff6ff", + "variable": "var(--colors-blue-50)" + }, + "colors.blue.100": { + "value": "#dbeafe", + "variable": "var(--colors-blue-100)" + }, + "colors.blue.200": { + "value": "#bfdbfe", + "variable": "var(--colors-blue-200)" + }, + "colors.blue.300": { + "value": "#93c5fd", + "variable": "var(--colors-blue-300)" + }, + "colors.blue.400": { + "value": "#60a5fa", + "variable": "var(--colors-blue-400)" + }, + "colors.blue.500": { + "value": "#3b82f6", + "variable": "var(--colors-blue-500)" + }, + "colors.blue.600": { + "value": "#2563eb", + "variable": "var(--colors-blue-600)" + }, + "colors.blue.700": { + "value": "#1d4ed8", + "variable": "var(--colors-blue-700)" + }, + "colors.blue.800": { + "value": "#1e40af", + "variable": "var(--colors-blue-800)" + }, + "colors.blue.900": { + "value": "#1e3a8a", + "variable": "var(--colors-blue-900)" + }, + "colors.blue.950": { + "value": "#172554", + "variable": "var(--colors-blue-950)" + }, + "colors.sky.50": { + "value": "#f0f9ff", + "variable": "var(--colors-sky-50)" + }, + "colors.sky.100": { + "value": "#e0f2fe", + "variable": "var(--colors-sky-100)" + }, + "colors.sky.200": { + "value": "#bae6fd", + "variable": "var(--colors-sky-200)" + }, + "colors.sky.300": { + "value": "#7dd3fc", + "variable": "var(--colors-sky-300)" + }, + "colors.sky.400": { + "value": "#38bdf8", + "variable": "var(--colors-sky-400)" + }, + "colors.sky.500": { + "value": "#0ea5e9", + "variable": "var(--colors-sky-500)" + }, + "colors.sky.600": { + "value": "#0284c7", + "variable": "var(--colors-sky-600)" + }, + "colors.sky.700": { + "value": "#0369a1", + "variable": "var(--colors-sky-700)" + }, + "colors.sky.800": { + "value": "#075985", + "variable": "var(--colors-sky-800)" + }, + "colors.sky.900": { + "value": "#0c4a6e", + "variable": "var(--colors-sky-900)" + }, + "colors.sky.950": { + "value": "#082f49", + "variable": "var(--colors-sky-950)" + }, + "colors.cyan.50": { + "value": "#ecfeff", + "variable": "var(--colors-cyan-50)" + }, + "colors.cyan.100": { + "value": "#cffafe", + "variable": "var(--colors-cyan-100)" + }, + "colors.cyan.200": { + "value": "#a5f3fc", + "variable": "var(--colors-cyan-200)" + }, + "colors.cyan.300": { + "value": "#67e8f9", + "variable": "var(--colors-cyan-300)" + }, + "colors.cyan.400": { + "value": "#22d3ee", + "variable": "var(--colors-cyan-400)" + }, + "colors.cyan.500": { + "value": "#06b6d4", + "variable": "var(--colors-cyan-500)" + }, + "colors.cyan.600": { + "value": "#0891b2", + "variable": "var(--colors-cyan-600)" + }, + "colors.cyan.700": { + "value": "#0e7490", + "variable": "var(--colors-cyan-700)" + }, + "colors.cyan.800": { + "value": "#155e75", + "variable": "var(--colors-cyan-800)" + }, + "colors.cyan.900": { + "value": "#164e63", + "variable": "var(--colors-cyan-900)" + }, + "colors.cyan.950": { + "value": "#083344", + "variable": "var(--colors-cyan-950)" + }, + "colors.teal.50": { + "value": "#f0fdfa", + "variable": "var(--colors-teal-50)" + }, + "colors.teal.100": { + "value": "#ccfbf1", + "variable": "var(--colors-teal-100)" + }, + "colors.teal.200": { + "value": "#99f6e4", + "variable": "var(--colors-teal-200)" + }, + "colors.teal.300": { + "value": "#5eead4", + "variable": "var(--colors-teal-300)" + }, + "colors.teal.400": { + "value": "#2dd4bf", + "variable": "var(--colors-teal-400)" + }, + "colors.teal.500": { + "value": "#14b8a6", + "variable": "var(--colors-teal-500)" + }, + "colors.teal.600": { + "value": "#0d9488", + "variable": "var(--colors-teal-600)" + }, + "colors.teal.700": { + "value": "#0f766e", + "variable": "var(--colors-teal-700)" + }, + "colors.teal.800": { + "value": "#115e59", + "variable": "var(--colors-teal-800)" + }, + "colors.teal.900": { + "value": "#134e4a", + "variable": "var(--colors-teal-900)" + }, + "colors.teal.950": { + "value": "#042f2e", + "variable": "var(--colors-teal-950)" + }, + "colors.emerald.50": { + "value": "#ecfdf5", + "variable": "var(--colors-emerald-50)" + }, + "colors.emerald.100": { + "value": "#d1fae5", + "variable": "var(--colors-emerald-100)" + }, + "colors.emerald.200": { + "value": "#a7f3d0", + "variable": "var(--colors-emerald-200)" + }, + "colors.emerald.300": { + "value": "#6ee7b7", + "variable": "var(--colors-emerald-300)" + }, + "colors.emerald.400": { + "value": "#34d399", + "variable": "var(--colors-emerald-400)" + }, + "colors.emerald.500": { + "value": "#10b981", + "variable": "var(--colors-emerald-500)" + }, + "colors.emerald.600": { + "value": "#059669", + "variable": "var(--colors-emerald-600)" + }, + "colors.emerald.700": { + "value": "#047857", + "variable": "var(--colors-emerald-700)" + }, + "colors.emerald.800": { + "value": "#065f46", + "variable": "var(--colors-emerald-800)" + }, + "colors.emerald.900": { + "value": "#064e3b", + "variable": "var(--colors-emerald-900)" + }, + "colors.emerald.950": { + "value": "#022c22", + "variable": "var(--colors-emerald-950)" + }, + "colors.green.50": { + "value": "#f0fdf4", + "variable": "var(--colors-green-50)" + }, + "colors.green.100": { + "value": "#dcfce7", + "variable": "var(--colors-green-100)" + }, + "colors.green.200": { + "value": "#bbf7d0", + "variable": "var(--colors-green-200)" + }, + "colors.green.300": { + "value": "#86efac", + "variable": "var(--colors-green-300)" + }, + "colors.green.400": { + "value": "#4ade80", + "variable": "var(--colors-green-400)" + }, + "colors.green.500": { + "value": "#22c55e", + "variable": "var(--colors-green-500)" + }, + "colors.green.600": { + "value": "#16a34a", + "variable": "var(--colors-green-600)" + }, + "colors.green.700": { + "value": "#15803d", + "variable": "var(--colors-green-700)" + }, + "colors.green.800": { + "value": "#166534", + "variable": "var(--colors-green-800)" + }, + "colors.green.900": { + "value": "#14532d", + "variable": "var(--colors-green-900)" + }, + "colors.green.950": { + "value": "#052e16", + "variable": "var(--colors-green-950)" + }, + "colors.lime.50": { + "value": "#f7fee7", + "variable": "var(--colors-lime-50)" + }, + "colors.lime.100": { + "value": "#ecfccb", + "variable": "var(--colors-lime-100)" + }, + "colors.lime.200": { + "value": "#d9f99d", + "variable": "var(--colors-lime-200)" + }, + "colors.lime.300": { + "value": "#bef264", + "variable": "var(--colors-lime-300)" + }, + "colors.lime.400": { + "value": "#a3e635", + "variable": "var(--colors-lime-400)" + }, + "colors.lime.500": { + "value": "#84cc16", + "variable": "var(--colors-lime-500)" + }, + "colors.lime.600": { + "value": "#65a30d", + "variable": "var(--colors-lime-600)" + }, + "colors.lime.700": { + "value": "#4d7c0f", + "variable": "var(--colors-lime-700)" + }, + "colors.lime.800": { + "value": "#3f6212", + "variable": "var(--colors-lime-800)" + }, + "colors.lime.900": { + "value": "#365314", + "variable": "var(--colors-lime-900)" + }, + "colors.lime.950": { + "value": "#1a2e05", + "variable": "var(--colors-lime-950)" + }, + "colors.yellow.50": { + "value": "#fefce8", + "variable": "var(--colors-yellow-50)" + }, + "colors.yellow.100": { + "value": "#fef9c3", + "variable": "var(--colors-yellow-100)" + }, + "colors.yellow.200": { + "value": "#fef08a", + "variable": "var(--colors-yellow-200)" + }, + "colors.yellow.300": { + "value": "#fde047", + "variable": "var(--colors-yellow-300)" + }, + "colors.yellow.400": { + "value": "#facc15", + "variable": "var(--colors-yellow-400)" + }, + "colors.yellow.500": { + "value": "#eab308", + "variable": "var(--colors-yellow-500)" + }, + "colors.yellow.600": { + "value": "#ca8a04", + "variable": "var(--colors-yellow-600)" + }, + "colors.yellow.700": { + "value": "#a16207", + "variable": "var(--colors-yellow-700)" + }, + "colors.yellow.800": { + "value": "#854d0e", + "variable": "var(--colors-yellow-800)" + }, + "colors.yellow.900": { + "value": "#713f12", + "variable": "var(--colors-yellow-900)" + }, + "colors.yellow.950": { + "value": "#422006", + "variable": "var(--colors-yellow-950)" + }, + "colors.amber.50": { + "value": "#fffbeb", + "variable": "var(--colors-amber-50)" + }, + "colors.amber.100": { + "value": "#fef3c7", + "variable": "var(--colors-amber-100)" + }, + "colors.amber.200": { + "value": "#fde68a", + "variable": "var(--colors-amber-200)" + }, + "colors.amber.300": { + "value": "#fcd34d", + "variable": "var(--colors-amber-300)" + }, + "colors.amber.400": { + "value": "#fbbf24", + "variable": "var(--colors-amber-400)" + }, + "colors.amber.500": { + "value": "#f59e0b", + "variable": "var(--colors-amber-500)" + }, + "colors.amber.600": { + "value": "#d97706", + "variable": "var(--colors-amber-600)" + }, + "colors.amber.700": { + "value": "#b45309", + "variable": "var(--colors-amber-700)" + }, + "colors.amber.800": { + "value": "#92400e", + "variable": "var(--colors-amber-800)" + }, + "colors.amber.900": { + "value": "#78350f", + "variable": "var(--colors-amber-900)" + }, + "colors.amber.950": { + "value": "#451a03", + "variable": "var(--colors-amber-950)" + }, + "colors.orange.50": { + "value": "#fff7ed", + "variable": "var(--colors-orange-50)" + }, + "colors.orange.100": { + "value": "#ffedd5", + "variable": "var(--colors-orange-100)" + }, + "colors.orange.200": { + "value": "#fed7aa", + "variable": "var(--colors-orange-200)" + }, + "colors.orange.300": { + "value": "#fdba74", + "variable": "var(--colors-orange-300)" + }, + "colors.orange.400": { + "value": "#fb923c", + "variable": "var(--colors-orange-400)" + }, + "colors.orange.500": { + "value": "#f97316", + "variable": "var(--colors-orange-500)" + }, + "colors.orange.600": { + "value": "#ea580c", + "variable": "var(--colors-orange-600)" + }, + "colors.orange.700": { + "value": "#c2410c", + "variable": "var(--colors-orange-700)" + }, + "colors.orange.800": { + "value": "#9a3412", + "variable": "var(--colors-orange-800)" + }, + "colors.orange.900": { + "value": "#7c2d12", + "variable": "var(--colors-orange-900)" + }, + "colors.orange.950": { + "value": "#431407", + "variable": "var(--colors-orange-950)" + }, + "colors.red.50": { + "value": "#fef2f2", + "variable": "var(--colors-red-50)" + }, + "colors.red.100": { + "value": "#fee2e2", + "variable": "var(--colors-red-100)" + }, + "colors.red.200": { + "value": "#fecaca", + "variable": "var(--colors-red-200)" + }, + "colors.red.300": { + "value": "#fca5a5", + "variable": "var(--colors-red-300)" + }, + "colors.red.400": { + "value": "#f87171", + "variable": "var(--colors-red-400)" + }, + "colors.red.500": { + "value": "#ef4444", + "variable": "var(--colors-red-500)" + }, + "colors.red.600": { + "value": "#dc2626", + "variable": "var(--colors-red-600)" + }, + "colors.red.700": { + "value": "#b91c1c", + "variable": "var(--colors-red-700)" + }, + "colors.red.800": { + "value": "#991b1b", + "variable": "var(--colors-red-800)" + }, + "colors.red.900": { + "value": "#7f1d1d", + "variable": "var(--colors-red-900)" + }, + "colors.red.950": { + "value": "#450a0a", + "variable": "var(--colors-red-950)" + }, + "colors.neutral.50": { + "value": "#fafafa", + "variable": "var(--colors-neutral-50)" + }, + "colors.neutral.100": { + "value": "#f5f5f5", + "variable": "var(--colors-neutral-100)" + }, + "colors.neutral.200": { + "value": "#e5e5e5", + "variable": "var(--colors-neutral-200)" + }, + "colors.neutral.300": { + "value": "#d4d4d4", + "variable": "var(--colors-neutral-300)" + }, + "colors.neutral.400": { + "value": "#a3a3a3", + "variable": "var(--colors-neutral-400)" + }, + "colors.neutral.500": { + "value": "#737373", + "variable": "var(--colors-neutral-500)" + }, + "colors.neutral.600": { + "value": "#525252", + "variable": "var(--colors-neutral-600)" + }, + "colors.neutral.700": { + "value": "#404040", + "variable": "var(--colors-neutral-700)" + }, + "colors.neutral.800": { + "value": "#262626", + "variable": "var(--colors-neutral-800)" + }, + "colors.neutral.900": { + "value": "#171717", + "variable": "var(--colors-neutral-900)" + }, + "colors.neutral.950": { + "value": "#0a0a0a", + "variable": "var(--colors-neutral-950)" + }, + "colors.stone.50": { + "value": "#fafaf9", + "variable": "var(--colors-stone-50)" + }, + "colors.stone.100": { + "value": "#f5f5f4", + "variable": "var(--colors-stone-100)" + }, + "colors.stone.200": { + "value": "#e7e5e4", + "variable": "var(--colors-stone-200)" + }, + "colors.stone.300": { + "value": "#d6d3d1", + "variable": "var(--colors-stone-300)" + }, + "colors.stone.400": { + "value": "#a8a29e", + "variable": "var(--colors-stone-400)" + }, + "colors.stone.500": { + "value": "#78716c", + "variable": "var(--colors-stone-500)" + }, + "colors.stone.600": { + "value": "#57534e", + "variable": "var(--colors-stone-600)" + }, + "colors.stone.700": { + "value": "#44403c", + "variable": "var(--colors-stone-700)" + }, + "colors.stone.800": { + "value": "#292524", + "variable": "var(--colors-stone-800)" + }, + "colors.stone.900": { + "value": "#1c1917", + "variable": "var(--colors-stone-900)" + }, + "colors.stone.950": { + "value": "#0c0a09", + "variable": "var(--colors-stone-950)" + }, + "colors.zinc.50": { + "value": "#fafafa", + "variable": "var(--colors-zinc-50)" + }, + "colors.zinc.100": { + "value": "#f4f4f5", + "variable": "var(--colors-zinc-100)" + }, + "colors.zinc.200": { + "value": "#e4e4e7", + "variable": "var(--colors-zinc-200)" + }, + "colors.zinc.300": { + "value": "#d4d4d8", + "variable": "var(--colors-zinc-300)" + }, + "colors.zinc.400": { + "value": "#a1a1aa", + "variable": "var(--colors-zinc-400)" + }, + "colors.zinc.500": { + "value": "#71717a", + "variable": "var(--colors-zinc-500)" + }, + "colors.zinc.600": { + "value": "#52525b", + "variable": "var(--colors-zinc-600)" + }, + "colors.zinc.700": { + "value": "#3f3f46", + "variable": "var(--colors-zinc-700)" + }, + "colors.zinc.800": { + "value": "#27272a", + "variable": "var(--colors-zinc-800)" + }, + "colors.zinc.900": { + "value": "#18181b", + "variable": "var(--colors-zinc-900)" + }, + "colors.zinc.950": { + "value": "#09090b", + "variable": "var(--colors-zinc-950)" + }, + "colors.gray.50": { + "value": "#f9fafb", + "variable": "var(--colors-gray-50)" + }, + "colors.gray.100": { + "value": "#f3f4f6", + "variable": "var(--colors-gray-100)" + }, + "colors.gray.200": { + "value": "#e5e7eb", + "variable": "var(--colors-gray-200)" + }, + "colors.gray.300": { + "value": "#d1d5db", + "variable": "var(--colors-gray-300)" + }, + "colors.gray.400": { + "value": "#9ca3af", + "variable": "var(--colors-gray-400)" + }, + "colors.gray.500": { + "value": "#6b7280", + "variable": "var(--colors-gray-500)" + }, + "colors.gray.600": { + "value": "#4b5563", + "variable": "var(--colors-gray-600)" + }, + "colors.gray.700": { + "value": "#374151", + "variable": "var(--colors-gray-700)" + }, + "colors.gray.800": { + "value": "#1f2937", + "variable": "var(--colors-gray-800)" + }, + "colors.gray.900": { + "value": "#111827", + "variable": "var(--colors-gray-900)" + }, + "colors.gray.950": { + "value": "#030712", + "variable": "var(--colors-gray-950)" + }, + "colors.slate.50": { + "value": "#f8fafc", + "variable": "var(--colors-slate-50)" + }, + "colors.slate.100": { + "value": "#f1f5f9", + "variable": "var(--colors-slate-100)" + }, + "colors.slate.200": { + "value": "#e2e8f0", + "variable": "var(--colors-slate-200)" + }, + "colors.slate.300": { + "value": "#cbd5e1", + "variable": "var(--colors-slate-300)" + }, + "colors.slate.400": { + "value": "#94a3b8", + "variable": "var(--colors-slate-400)" + }, + "colors.slate.500": { + "value": "#64748b", + "variable": "var(--colors-slate-500)" + }, + "colors.slate.600": { + "value": "#475569", + "variable": "var(--colors-slate-600)" + }, + "colors.slate.700": { + "value": "#334155", + "variable": "var(--colors-slate-700)" + }, + "colors.slate.800": { + "value": "#1e293b", + "variable": "var(--colors-slate-800)" + }, + "colors.slate.900": { + "value": "#0f172a", + "variable": "var(--colors-slate-900)" + }, + "colors.slate.950": { + "value": "#020617", + "variable": "var(--colors-slate-950)" + }, + "blurs.sm": { + "value": "4px", + "variable": "var(--blurs-sm)" + }, + "blurs.base": { + "value": "8px", + "variable": "var(--blurs-base)" + }, + "blurs.md": { + "value": "12px", + "variable": "var(--blurs-md)" + }, + "blurs.lg": { + "value": "16px", + "variable": "var(--blurs-lg)" + }, + "blurs.xl": { + "value": "24px", + "variable": "var(--blurs-xl)" + }, + "blurs.2xl": { + "value": "40px", + "variable": "var(--blurs-2xl)" + }, + "blurs.3xl": { + "value": "64px", + "variable": "var(--blurs-3xl)" + }, + "spacing.0": { + "value": "0rem", + "variable": "var(--spacing-0)" + }, + "spacing.1": { + "value": "0.25rem", + "variable": "var(--spacing-1)" + }, + "spacing.2": { + "value": "0.5rem", + "variable": "var(--spacing-2)" + }, + "spacing.3": { + "value": "0.75rem", + "variable": "var(--spacing-3)" + }, + "spacing.4": { + "value": "1rem", + "variable": "var(--spacing-4)" + }, + "spacing.5": { + "value": "1.25rem", + "variable": "var(--spacing-5)" + }, + "spacing.6": { + "value": "1.5rem", + "variable": "var(--spacing-6)" + }, + "spacing.7": { + "value": "1.75rem", + "variable": "var(--spacing-7)" + }, + "spacing.8": { + "value": "2rem", + "variable": "var(--spacing-8)" + }, + "spacing.9": { + "value": "2.25rem", + "variable": "var(--spacing-9)" + }, + "spacing.10": { + "value": "2.5rem", + "variable": "var(--spacing-10)" + }, + "spacing.11": { + "value": "2.75rem", + "variable": "var(--spacing-11)" + }, + "spacing.12": { + "value": "3rem", + "variable": "var(--spacing-12)" + }, + "spacing.14": { + "value": "3.5rem", + "variable": "var(--spacing-14)" + }, + "spacing.16": { + "value": "4rem", + "variable": "var(--spacing-16)" + }, + "spacing.20": { + "value": "5rem", + "variable": "var(--spacing-20)" + }, + "spacing.24": { + "value": "6rem", + "variable": "var(--spacing-24)" + }, + "spacing.28": { + "value": "7rem", + "variable": "var(--spacing-28)" + }, + "spacing.32": { + "value": "8rem", + "variable": "var(--spacing-32)" + }, + "spacing.36": { + "value": "9rem", + "variable": "var(--spacing-36)" + }, + "spacing.40": { + "value": "10rem", + "variable": "var(--spacing-40)" + }, + "spacing.44": { + "value": "11rem", + "variable": "var(--spacing-44)" + }, + "spacing.48": { + "value": "12rem", + "variable": "var(--spacing-48)" + }, + "spacing.52": { + "value": "13rem", + "variable": "var(--spacing-52)" + }, + "spacing.56": { + "value": "14rem", + "variable": "var(--spacing-56)" + }, + "spacing.60": { + "value": "15rem", + "variable": "var(--spacing-60)" + }, + "spacing.64": { + "value": "16rem", + "variable": "var(--spacing-64)" + }, + "spacing.72": { + "value": "18rem", + "variable": "var(--spacing-72)" + }, + "spacing.80": { + "value": "20rem", + "variable": "var(--spacing-80)" + }, + "spacing.96": { + "value": "24rem", + "variable": "var(--spacing-96)" + }, + "spacing.0.5": { + "value": "0.125rem", + "variable": "var(--spacing-0\\.5)" + }, + "spacing.1.5": { + "value": "0.375rem", + "variable": "var(--spacing-1\\.5)" + }, + "spacing.2.5": { + "value": "0.625rem", + "variable": "var(--spacing-2\\.5)" + }, + "spacing.3.5": { + "value": "0.875rem", + "variable": "var(--spacing-3\\.5)" + }, + "sizes.0": { + "value": "0rem", + "variable": "var(--sizes-0)" + }, + "sizes.1": { + "value": "0.25rem", + "variable": "var(--sizes-1)" + }, + "sizes.2": { + "value": "0.5rem", + "variable": "var(--sizes-2)" + }, + "sizes.3": { + "value": "0.75rem", + "variable": "var(--sizes-3)" + }, + "sizes.4": { + "value": "1rem", + "variable": "var(--sizes-4)" + }, + "sizes.5": { + "value": "1.25rem", + "variable": "var(--sizes-5)" + }, + "sizes.6": { + "value": "1.5rem", + "variable": "var(--sizes-6)" + }, + "sizes.7": { + "value": "1.75rem", + "variable": "var(--sizes-7)" + }, + "sizes.8": { + "value": "2rem", + "variable": "var(--sizes-8)" + }, + "sizes.9": { + "value": "2.25rem", + "variable": "var(--sizes-9)" + }, + "sizes.10": { + "value": "2.5rem", + "variable": "var(--sizes-10)" + }, + "sizes.11": { + "value": "2.75rem", + "variable": "var(--sizes-11)" + }, + "sizes.12": { + "value": "3rem", + "variable": "var(--sizes-12)" + }, + "sizes.14": { + "value": "3.5rem", + "variable": "var(--sizes-14)" + }, + "sizes.16": { + "value": "4rem", + "variable": "var(--sizes-16)" + }, + "sizes.20": { + "value": "5rem", + "variable": "var(--sizes-20)" + }, + "sizes.24": { + "value": "6rem", + "variable": "var(--sizes-24)" + }, + "sizes.28": { + "value": "7rem", + "variable": "var(--sizes-28)" + }, + "sizes.32": { + "value": "8rem", + "variable": "var(--sizes-32)" + }, + "sizes.36": { + "value": "9rem", + "variable": "var(--sizes-36)" + }, + "sizes.40": { + "value": "10rem", + "variable": "var(--sizes-40)" + }, + "sizes.44": { + "value": "11rem", + "variable": "var(--sizes-44)" + }, + "sizes.48": { + "value": "12rem", + "variable": "var(--sizes-48)" + }, + "sizes.52": { + "value": "13rem", + "variable": "var(--sizes-52)" + }, + "sizes.56": { + "value": "14rem", + "variable": "var(--sizes-56)" + }, + "sizes.60": { + "value": "15rem", + "variable": "var(--sizes-60)" + }, + "sizes.64": { + "value": "16rem", + "variable": "var(--sizes-64)" + }, + "sizes.72": { + "value": "18rem", + "variable": "var(--sizes-72)" + }, + "sizes.80": { + "value": "20rem", + "variable": "var(--sizes-80)" + }, + "sizes.96": { + "value": "24rem", + "variable": "var(--sizes-96)" + }, + "sizes.0.5": { + "value": "0.125rem", + "variable": "var(--sizes-0\\.5)" + }, + "sizes.1.5": { + "value": "0.375rem", + "variable": "var(--sizes-1\\.5)" + }, + "sizes.2.5": { + "value": "0.625rem", + "variable": "var(--sizes-2\\.5)" + }, + "sizes.3.5": { + "value": "0.875rem", + "variable": "var(--sizes-3\\.5)" + }, + "sizes.xs": { + "value": "20rem", + "variable": "var(--sizes-xs)" + }, + "sizes.sm": { + "value": "24rem", + "variable": "var(--sizes-sm)" + }, + "sizes.md": { + "value": "28rem", + "variable": "var(--sizes-md)" + }, + "sizes.lg": { + "value": "32rem", + "variable": "var(--sizes-lg)" + }, + "sizes.xl": { + "value": "36rem", + "variable": "var(--sizes-xl)" + }, + "sizes.2xl": { + "value": "42rem", + "variable": "var(--sizes-2xl)" + }, + "sizes.3xl": { + "value": "48rem", + "variable": "var(--sizes-3xl)" + }, + "sizes.4xl": { + "value": "56rem", + "variable": "var(--sizes-4xl)" + }, + "sizes.5xl": { + "value": "64rem", + "variable": "var(--sizes-5xl)" + }, + "sizes.6xl": { + "value": "72rem", + "variable": "var(--sizes-6xl)" + }, + "sizes.7xl": { + "value": "80rem", + "variable": "var(--sizes-7xl)" + }, + "sizes.8xl": { + "value": "90rem", + "variable": "var(--sizes-8xl)" + }, + "sizes.prose": { + "value": "65ch", + "variable": "var(--sizes-prose)" + }, + "sizes.full": { + "value": "100%", + "variable": "var(--sizes-full)" + }, + "sizes.min": { + "value": "min-content", + "variable": "var(--sizes-min)" + }, + "sizes.max": { + "value": "max-content", + "variable": "var(--sizes-max)" + }, + "sizes.fit": { + "value": "fit-content", + "variable": "var(--sizes-fit)" + }, + "sizes.breakpoint-sm": { + "value": "640px", + "variable": "var(--sizes-breakpoint-sm)" + }, + "sizes.breakpoint-md": { + "value": "768px", + "variable": "var(--sizes-breakpoint-md)" + }, + "sizes.breakpoint-lg": { + "value": "1024px", + "variable": "var(--sizes-breakpoint-lg)" + }, + "sizes.breakpoint-xl": { + "value": "1280px", + "variable": "var(--sizes-breakpoint-xl)" + }, + "sizes.breakpoint-2xl": { + "value": "1536px", + "variable": "var(--sizes-breakpoint-2xl)" + }, + "animations.spin": { + "value": "spin 1s linear infinite", + "variable": "var(--animations-spin)" + }, + "animations.ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", + "variable": "var(--animations-ping)" + }, + "animations.pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", + "variable": "var(--animations-pulse)" + }, + "animations.bounce": { + "value": "bounce 1s infinite", + "variable": "var(--animations-bounce)" + }, + "breakpoints.sm": { + "value": "640px", + "variable": "var(--breakpoints-sm)" + }, + "breakpoints.md": { + "value": "768px", + "variable": "var(--breakpoints-md)" + }, + "breakpoints.lg": { + "value": "1024px", + "variable": "var(--breakpoints-lg)" + }, + "breakpoints.xl": { + "value": "1280px", + "variable": "var(--breakpoints-xl)" + }, + "breakpoints.2xl": { + "value": "1536px", + "variable": "var(--breakpoints-2xl)" + }, + "spacing.-1": { + "value": "calc(var(--spacing-1) * -1)", + "variable": "var(--spacing-1)" + }, + "spacing.-2": { + "value": "calc(var(--spacing-2) * -1)", + "variable": "var(--spacing-2)" + }, + "spacing.-3": { + "value": "calc(var(--spacing-3) * -1)", + "variable": "var(--spacing-3)" + }, + "spacing.-4": { + "value": "calc(var(--spacing-4) * -1)", + "variable": "var(--spacing-4)" + }, + "spacing.-5": { + "value": "calc(var(--spacing-5) * -1)", + "variable": "var(--spacing-5)" + }, + "spacing.-6": { + "value": "calc(var(--spacing-6) * -1)", + "variable": "var(--spacing-6)" + }, + "spacing.-7": { + "value": "calc(var(--spacing-7) * -1)", + "variable": "var(--spacing-7)" + }, + "spacing.-8": { + "value": "calc(var(--spacing-8) * -1)", + "variable": "var(--spacing-8)" + }, + "spacing.-9": { + "value": "calc(var(--spacing-9) * -1)", + "variable": "var(--spacing-9)" + }, + "spacing.-10": { + "value": "calc(var(--spacing-10) * -1)", + "variable": "var(--spacing-10)" + }, + "spacing.-11": { + "value": "calc(var(--spacing-11) * -1)", + "variable": "var(--spacing-11)" + }, + "spacing.-12": { + "value": "calc(var(--spacing-12) * -1)", + "variable": "var(--spacing-12)" + }, + "spacing.-14": { + "value": "calc(var(--spacing-14) * -1)", + "variable": "var(--spacing-14)" + }, + "spacing.-16": { + "value": "calc(var(--spacing-16) * -1)", + "variable": "var(--spacing-16)" + }, + "spacing.-20": { + "value": "calc(var(--spacing-20) * -1)", + "variable": "var(--spacing-20)" + }, + "spacing.-24": { + "value": "calc(var(--spacing-24) * -1)", + "variable": "var(--spacing-24)" + }, + "spacing.-28": { + "value": "calc(var(--spacing-28) * -1)", + "variable": "var(--spacing-28)" + }, + "spacing.-32": { + "value": "calc(var(--spacing-32) * -1)", + "variable": "var(--spacing-32)" + }, + "spacing.-36": { + "value": "calc(var(--spacing-36) * -1)", + "variable": "var(--spacing-36)" + }, + "spacing.-40": { + "value": "calc(var(--spacing-40) * -1)", + "variable": "var(--spacing-40)" + }, + "spacing.-44": { + "value": "calc(var(--spacing-44) * -1)", + "variable": "var(--spacing-44)" + }, + "spacing.-48": { + "value": "calc(var(--spacing-48) * -1)", + "variable": "var(--spacing-48)" + }, + "spacing.-52": { + "value": "calc(var(--spacing-52) * -1)", + "variable": "var(--spacing-52)" + }, + "spacing.-56": { + "value": "calc(var(--spacing-56) * -1)", + "variable": "var(--spacing-56)" + }, + "spacing.-60": { + "value": "calc(var(--spacing-60) * -1)", + "variable": "var(--spacing-60)" + }, + "spacing.-64": { + "value": "calc(var(--spacing-64) * -1)", + "variable": "var(--spacing-64)" + }, + "spacing.-72": { + "value": "calc(var(--spacing-72) * -1)", + "variable": "var(--spacing-72)" + }, + "spacing.-80": { + "value": "calc(var(--spacing-80) * -1)", + "variable": "var(--spacing-80)" + }, + "spacing.-96": { + "value": "calc(var(--spacing-96) * -1)", + "variable": "var(--spacing-96)" + }, + "spacing.-0.5": { + "value": "calc(var(--spacing-0\\.5) * -1)", + "variable": "var(--spacing-0\\.5)" + }, + "spacing.-1.5": { + "value": "calc(var(--spacing-1\\.5) * -1)", + "variable": "var(--spacing-1\\.5)" + }, + "spacing.-2.5": { + "value": "calc(var(--spacing-2\\.5) * -1)", + "variable": "var(--spacing-2\\.5)" + }, + "spacing.-3.5": { + "value": "calc(var(--spacing-3\\.5) * -1)", + "variable": "var(--spacing-3\\.5)" + }, + "colors.colorPalette": { + "value": "var(--colors-color-palette)", + "variable": "var(--colors-color-palette)" + }, + "colors.colorPalette.50": { + "value": "var(--colors-color-palette-50)", + "variable": "var(--colors-color-palette-50)" + }, + "colors.colorPalette.100": { + "value": "var(--colors-color-palette-100)", + "variable": "var(--colors-color-palette-100)" + }, + "colors.colorPalette.200": { + "value": "var(--colors-color-palette-200)", + "variable": "var(--colors-color-palette-200)" + }, + "colors.colorPalette.300": { + "value": "var(--colors-color-palette-300)", + "variable": "var(--colors-color-palette-300)" + }, + "colors.colorPalette.400": { + "value": "var(--colors-color-palette-400)", + "variable": "var(--colors-color-palette-400)" + }, + "colors.colorPalette.500": { + "value": "var(--colors-color-palette-500)", + "variable": "var(--colors-color-palette-500)" + }, + "colors.colorPalette.600": { + "value": "var(--colors-color-palette-600)", + "variable": "var(--colors-color-palette-600)" + }, + "colors.colorPalette.700": { + "value": "var(--colors-color-palette-700)", + "variable": "var(--colors-color-palette-700)" + }, + "colors.colorPalette.800": { + "value": "var(--colors-color-palette-800)", + "variable": "var(--colors-color-palette-800)" + }, + "colors.colorPalette.900": { + "value": "var(--colors-color-palette-900)", + "variable": "var(--colors-color-palette-900)" + }, + "colors.colorPalette.950": { + "value": "var(--colors-color-palette-950)", + "variable": "var(--colors-color-palette-950)" + } +} + +export function token(path, fallback) { + return tokens[path]?.value || fallback +} + +function tokenVar(path, fallback) { + return tokens[path]?.variable || fallback +} + +token.var = tokenVar \ No newline at end of file diff --git a/styled-system/tokens/tokens.d.ts b/styled-system/tokens/tokens.d.ts new file mode 100644 index 00000000..c3d3deb3 --- /dev/null +++ b/styled-system/tokens/tokens.d.ts @@ -0,0 +1,1014 @@ +/* eslint-disable */ +export type Token = + | "aspectRatios.square" + | "aspectRatios.landscape" + | "aspectRatios.portrait" + | "aspectRatios.wide" + | "aspectRatios.ultrawide" + | "aspectRatios.golden" + | "borders.none" + | "easings.default" + | "easings.linear" + | "easings.in" + | "easings.out" + | "easings.in-out" + | "durations.fastest" + | "durations.faster" + | "durations.fast" + | "durations.normal" + | "durations.slow" + | "durations.slower" + | "durations.slowest" + | "radii.xs" + | "radii.sm" + | "radii.md" + | "radii.lg" + | "radii.xl" + | "radii.2xl" + | "radii.3xl" + | "radii.full" + | "fontWeights.thin" + | "fontWeights.extralight" + | "fontWeights.light" + | "fontWeights.normal" + | "fontWeights.medium" + | "fontWeights.semibold" + | "fontWeights.bold" + | "fontWeights.extrabold" + | "fontWeights.black" + | "lineHeights.none" + | "lineHeights.tight" + | "lineHeights.snug" + | "lineHeights.normal" + | "lineHeights.relaxed" + | "lineHeights.loose" + | "fonts.sans" + | "fonts.serif" + | "fonts.mono" + | "letterSpacings.tighter" + | "letterSpacings.tight" + | "letterSpacings.normal" + | "letterSpacings.wide" + | "letterSpacings.wider" + | "letterSpacings.widest" + | "fontSizes.2xs" + | "fontSizes.xs" + | "fontSizes.sm" + | "fontSizes.md" + | "fontSizes.lg" + | "fontSizes.xl" + | "fontSizes.2xl" + | "fontSizes.3xl" + | "fontSizes.4xl" + | "fontSizes.5xl" + | "fontSizes.6xl" + | "fontSizes.7xl" + | "fontSizes.8xl" + | "fontSizes.9xl" + | "shadows.xs" + | "shadows.sm" + | "shadows.md" + | "shadows.lg" + | "shadows.xl" + | "shadows.2xl" + | "shadows.inner" + | "colors.current" + | "colors.black" + | "colors.white" + | "colors.transparent" + | "colors.rose.50" + | "colors.rose.100" + | "colors.rose.200" + | "colors.rose.300" + | "colors.rose.400" + | "colors.rose.500" + | "colors.rose.600" + | "colors.rose.700" + | "colors.rose.800" + | "colors.rose.900" + | "colors.rose.950" + | "colors.pink.50" + | "colors.pink.100" + | "colors.pink.200" + | "colors.pink.300" + | "colors.pink.400" + | "colors.pink.500" + | "colors.pink.600" + | "colors.pink.700" + | "colors.pink.800" + | "colors.pink.900" + | "colors.pink.950" + | "colors.fuchsia.50" + | "colors.fuchsia.100" + | "colors.fuchsia.200" + | "colors.fuchsia.300" + | "colors.fuchsia.400" + | "colors.fuchsia.500" + | "colors.fuchsia.600" + | "colors.fuchsia.700" + | "colors.fuchsia.800" + | "colors.fuchsia.900" + | "colors.fuchsia.950" + | "colors.purple.50" + | "colors.purple.100" + | "colors.purple.200" + | "colors.purple.300" + | "colors.purple.400" + | "colors.purple.500" + | "colors.purple.600" + | "colors.purple.700" + | "colors.purple.800" + | "colors.purple.900" + | "colors.purple.950" + | "colors.violet.50" + | "colors.violet.100" + | "colors.violet.200" + | "colors.violet.300" + | "colors.violet.400" + | "colors.violet.500" + | "colors.violet.600" + | "colors.violet.700" + | "colors.violet.800" + | "colors.violet.900" + | "colors.violet.950" + | "colors.indigo.50" + | "colors.indigo.100" + | "colors.indigo.200" + | "colors.indigo.300" + | "colors.indigo.400" + | "colors.indigo.500" + | "colors.indigo.600" + | "colors.indigo.700" + | "colors.indigo.800" + | "colors.indigo.900" + | "colors.indigo.950" + | "colors.blue.50" + | "colors.blue.100" + | "colors.blue.200" + | "colors.blue.300" + | "colors.blue.400" + | "colors.blue.500" + | "colors.blue.600" + | "colors.blue.700" + | "colors.blue.800" + | "colors.blue.900" + | "colors.blue.950" + | "colors.sky.50" + | "colors.sky.100" + | "colors.sky.200" + | "colors.sky.300" + | "colors.sky.400" + | "colors.sky.500" + | "colors.sky.600" + | "colors.sky.700" + | "colors.sky.800" + | "colors.sky.900" + | "colors.sky.950" + | "colors.cyan.50" + | "colors.cyan.100" + | "colors.cyan.200" + | "colors.cyan.300" + | "colors.cyan.400" + | "colors.cyan.500" + | "colors.cyan.600" + | "colors.cyan.700" + | "colors.cyan.800" + | "colors.cyan.900" + | "colors.cyan.950" + | "colors.teal.50" + | "colors.teal.100" + | "colors.teal.200" + | "colors.teal.300" + | "colors.teal.400" + | "colors.teal.500" + | "colors.teal.600" + | "colors.teal.700" + | "colors.teal.800" + | "colors.teal.900" + | "colors.teal.950" + | "colors.emerald.50" + | "colors.emerald.100" + | "colors.emerald.200" + | "colors.emerald.300" + | "colors.emerald.400" + | "colors.emerald.500" + | "colors.emerald.600" + | "colors.emerald.700" + | "colors.emerald.800" + | "colors.emerald.900" + | "colors.emerald.950" + | "colors.green.50" + | "colors.green.100" + | "colors.green.200" + | "colors.green.300" + | "colors.green.400" + | "colors.green.500" + | "colors.green.600" + | "colors.green.700" + | "colors.green.800" + | "colors.green.900" + | "colors.green.950" + | "colors.lime.50" + | "colors.lime.100" + | "colors.lime.200" + | "colors.lime.300" + | "colors.lime.400" + | "colors.lime.500" + | "colors.lime.600" + | "colors.lime.700" + | "colors.lime.800" + | "colors.lime.900" + | "colors.lime.950" + | "colors.yellow.50" + | "colors.yellow.100" + | "colors.yellow.200" + | "colors.yellow.300" + | "colors.yellow.400" + | "colors.yellow.500" + | "colors.yellow.600" + | "colors.yellow.700" + | "colors.yellow.800" + | "colors.yellow.900" + | "colors.yellow.950" + | "colors.amber.50" + | "colors.amber.100" + | "colors.amber.200" + | "colors.amber.300" + | "colors.amber.400" + | "colors.amber.500" + | "colors.amber.600" + | "colors.amber.700" + | "colors.amber.800" + | "colors.amber.900" + | "colors.amber.950" + | "colors.orange.50" + | "colors.orange.100" + | "colors.orange.200" + | "colors.orange.300" + | "colors.orange.400" + | "colors.orange.500" + | "colors.orange.600" + | "colors.orange.700" + | "colors.orange.800" + | "colors.orange.900" + | "colors.orange.950" + | "colors.red.50" + | "colors.red.100" + | "colors.red.200" + | "colors.red.300" + | "colors.red.400" + | "colors.red.500" + | "colors.red.600" + | "colors.red.700" + | "colors.red.800" + | "colors.red.900" + | "colors.red.950" + | "colors.neutral.50" + | "colors.neutral.100" + | "colors.neutral.200" + | "colors.neutral.300" + | "colors.neutral.400" + | "colors.neutral.500" + | "colors.neutral.600" + | "colors.neutral.700" + | "colors.neutral.800" + | "colors.neutral.900" + | "colors.neutral.950" + | "colors.stone.50" + | "colors.stone.100" + | "colors.stone.200" + | "colors.stone.300" + | "colors.stone.400" + | "colors.stone.500" + | "colors.stone.600" + | "colors.stone.700" + | "colors.stone.800" + | "colors.stone.900" + | "colors.stone.950" + | "colors.zinc.50" + | "colors.zinc.100" + | "colors.zinc.200" + | "colors.zinc.300" + | "colors.zinc.400" + | "colors.zinc.500" + | "colors.zinc.600" + | "colors.zinc.700" + | "colors.zinc.800" + | "colors.zinc.900" + | "colors.zinc.950" + | "colors.gray.50" + | "colors.gray.100" + | "colors.gray.200" + | "colors.gray.300" + | "colors.gray.400" + | "colors.gray.500" + | "colors.gray.600" + | "colors.gray.700" + | "colors.gray.800" + | "colors.gray.900" + | "colors.gray.950" + | "colors.slate.50" + | "colors.slate.100" + | "colors.slate.200" + | "colors.slate.300" + | "colors.slate.400" + | "colors.slate.500" + | "colors.slate.600" + | "colors.slate.700" + | "colors.slate.800" + | "colors.slate.900" + | "colors.slate.950" + | "blurs.sm" + | "blurs.base" + | "blurs.md" + | "blurs.lg" + | "blurs.xl" + | "blurs.2xl" + | "blurs.3xl" + | "spacing.0" + | "spacing.1" + | "spacing.2" + | "spacing.3" + | "spacing.4" + | "spacing.5" + | "spacing.6" + | "spacing.7" + | "spacing.8" + | "spacing.9" + | "spacing.10" + | "spacing.11" + | "spacing.12" + | "spacing.14" + | "spacing.16" + | "spacing.20" + | "spacing.24" + | "spacing.28" + | "spacing.32" + | "spacing.36" + | "spacing.40" + | "spacing.44" + | "spacing.48" + | "spacing.52" + | "spacing.56" + | "spacing.60" + | "spacing.64" + | "spacing.72" + | "spacing.80" + | "spacing.96" + | "spacing.0.5" + | "spacing.1.5" + | "spacing.2.5" + | "spacing.3.5" + | "sizes.0" + | "sizes.1" + | "sizes.2" + | "sizes.3" + | "sizes.4" + | "sizes.5" + | "sizes.6" + | "sizes.7" + | "sizes.8" + | "sizes.9" + | "sizes.10" + | "sizes.11" + | "sizes.12" + | "sizes.14" + | "sizes.16" + | "sizes.20" + | "sizes.24" + | "sizes.28" + | "sizes.32" + | "sizes.36" + | "sizes.40" + | "sizes.44" + | "sizes.48" + | "sizes.52" + | "sizes.56" + | "sizes.60" + | "sizes.64" + | "sizes.72" + | "sizes.80" + | "sizes.96" + | "sizes.0.5" + | "sizes.1.5" + | "sizes.2.5" + | "sizes.3.5" + | "sizes.xs" + | "sizes.sm" + | "sizes.md" + | "sizes.lg" + | "sizes.xl" + | "sizes.2xl" + | "sizes.3xl" + | "sizes.4xl" + | "sizes.5xl" + | "sizes.6xl" + | "sizes.7xl" + | "sizes.8xl" + | "sizes.prose" + | "sizes.full" + | "sizes.min" + | "sizes.max" + | "sizes.fit" + | "sizes.breakpoint-sm" + | "sizes.breakpoint-md" + | "sizes.breakpoint-lg" + | "sizes.breakpoint-xl" + | "sizes.breakpoint-2xl" + | "animations.spin" + | "animations.ping" + | "animations.pulse" + | "animations.bounce" + | "breakpoints.sm" + | "breakpoints.md" + | "breakpoints.lg" + | "breakpoints.xl" + | "breakpoints.2xl" + | "spacing.-1" + | "spacing.-2" + | "spacing.-3" + | "spacing.-4" + | "spacing.-5" + | "spacing.-6" + | "spacing.-7" + | "spacing.-8" + | "spacing.-9" + | "spacing.-10" + | "spacing.-11" + | "spacing.-12" + | "spacing.-14" + | "spacing.-16" + | "spacing.-20" + | "spacing.-24" + | "spacing.-28" + | "spacing.-32" + | "spacing.-36" + | "spacing.-40" + | "spacing.-44" + | "spacing.-48" + | "spacing.-52" + | "spacing.-56" + | "spacing.-60" + | "spacing.-64" + | "spacing.-72" + | "spacing.-80" + | "spacing.-96" + | "spacing.-0.5" + | "spacing.-1.5" + | "spacing.-2.5" + | "spacing.-3.5" + | "colors.colorPalette" + | "colors.colorPalette.50" + | "colors.colorPalette.100" + | "colors.colorPalette.200" + | "colors.colorPalette.300" + | "colors.colorPalette.400" + | "colors.colorPalette.500" + | "colors.colorPalette.600" + | "colors.colorPalette.700" + | "colors.colorPalette.800" + | "colors.colorPalette.900" + | "colors.colorPalette.950"; + +export type ColorPalette = + | "current" + | "black" + | "white" + | "transparent" + | "rose" + | "pink" + | "fuchsia" + | "purple" + | "violet" + | "indigo" + | "blue" + | "sky" + | "cyan" + | "teal" + | "emerald" + | "green" + | "lime" + | "yellow" + | "amber" + | "orange" + | "red" + | "neutral" + | "stone" + | "zinc" + | "gray" + | "slate"; + +export type AspectRatioToken = + | "square" + | "landscape" + | "portrait" + | "wide" + | "ultrawide" + | "golden"; + +export type BorderToken = "none"; + +export type EasingToken = "default" | "linear" | "in" | "out" | "in-out"; + +export type DurationToken = + | "fastest" + | "faster" + | "fast" + | "normal" + | "slow" + | "slower" + | "slowest"; + +export type RadiusToken = + | "xs" + | "sm" + | "md" + | "lg" + | "xl" + | "2xl" + | "3xl" + | "full"; + +export type FontWeightToken = + | "thin" + | "extralight" + | "light" + | "normal" + | "medium" + | "semibold" + | "bold" + | "extrabold" + | "black"; + +export type LineHeightToken = + | "none" + | "tight" + | "snug" + | "normal" + | "relaxed" + | "loose"; + +export type FontToken = "sans" | "serif" | "mono"; + +export type LetterSpacingToken = + | "tighter" + | "tight" + | "normal" + | "wide" + | "wider" + | "widest"; + +export type FontSizeToken = + | "2xs" + | "xs" + | "sm" + | "md" + | "lg" + | "xl" + | "2xl" + | "3xl" + | "4xl" + | "5xl" + | "6xl" + | "7xl" + | "8xl" + | "9xl"; + +export type ShadowToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner"; + +export type ColorToken = + | "current" + | "black" + | "white" + | "transparent" + | "rose.50" + | "rose.100" + | "rose.200" + | "rose.300" + | "rose.400" + | "rose.500" + | "rose.600" + | "rose.700" + | "rose.800" + | "rose.900" + | "rose.950" + | "pink.50" + | "pink.100" + | "pink.200" + | "pink.300" + | "pink.400" + | "pink.500" + | "pink.600" + | "pink.700" + | "pink.800" + | "pink.900" + | "pink.950" + | "fuchsia.50" + | "fuchsia.100" + | "fuchsia.200" + | "fuchsia.300" + | "fuchsia.400" + | "fuchsia.500" + | "fuchsia.600" + | "fuchsia.700" + | "fuchsia.800" + | "fuchsia.900" + | "fuchsia.950" + | "purple.50" + | "purple.100" + | "purple.200" + | "purple.300" + | "purple.400" + | "purple.500" + | "purple.600" + | "purple.700" + | "purple.800" + | "purple.900" + | "purple.950" + | "violet.50" + | "violet.100" + | "violet.200" + | "violet.300" + | "violet.400" + | "violet.500" + | "violet.600" + | "violet.700" + | "violet.800" + | "violet.900" + | "violet.950" + | "indigo.50" + | "indigo.100" + | "indigo.200" + | "indigo.300" + | "indigo.400" + | "indigo.500" + | "indigo.600" + | "indigo.700" + | "indigo.800" + | "indigo.900" + | "indigo.950" + | "blue.50" + | "blue.100" + | "blue.200" + | "blue.300" + | "blue.400" + | "blue.500" + | "blue.600" + | "blue.700" + | "blue.800" + | "blue.900" + | "blue.950" + | "sky.50" + | "sky.100" + | "sky.200" + | "sky.300" + | "sky.400" + | "sky.500" + | "sky.600" + | "sky.700" + | "sky.800" + | "sky.900" + | "sky.950" + | "cyan.50" + | "cyan.100" + | "cyan.200" + | "cyan.300" + | "cyan.400" + | "cyan.500" + | "cyan.600" + | "cyan.700" + | "cyan.800" + | "cyan.900" + | "cyan.950" + | "teal.50" + | "teal.100" + | "teal.200" + | "teal.300" + | "teal.400" + | "teal.500" + | "teal.600" + | "teal.700" + | "teal.800" + | "teal.900" + | "teal.950" + | "emerald.50" + | "emerald.100" + | "emerald.200" + | "emerald.300" + | "emerald.400" + | "emerald.500" + | "emerald.600" + | "emerald.700" + | "emerald.800" + | "emerald.900" + | "emerald.950" + | "green.50" + | "green.100" + | "green.200" + | "green.300" + | "green.400" + | "green.500" + | "green.600" + | "green.700" + | "green.800" + | "green.900" + | "green.950" + | "lime.50" + | "lime.100" + | "lime.200" + | "lime.300" + | "lime.400" + | "lime.500" + | "lime.600" + | "lime.700" + | "lime.800" + | "lime.900" + | "lime.950" + | "yellow.50" + | "yellow.100" + | "yellow.200" + | "yellow.300" + | "yellow.400" + | "yellow.500" + | "yellow.600" + | "yellow.700" + | "yellow.800" + | "yellow.900" + | "yellow.950" + | "amber.50" + | "amber.100" + | "amber.200" + | "amber.300" + | "amber.400" + | "amber.500" + | "amber.600" + | "amber.700" + | "amber.800" + | "amber.900" + | "amber.950" + | "orange.50" + | "orange.100" + | "orange.200" + | "orange.300" + | "orange.400" + | "orange.500" + | "orange.600" + | "orange.700" + | "orange.800" + | "orange.900" + | "orange.950" + | "red.50" + | "red.100" + | "red.200" + | "red.300" + | "red.400" + | "red.500" + | "red.600" + | "red.700" + | "red.800" + | "red.900" + | "red.950" + | "neutral.50" + | "neutral.100" + | "neutral.200" + | "neutral.300" + | "neutral.400" + | "neutral.500" + | "neutral.600" + | "neutral.700" + | "neutral.800" + | "neutral.900" + | "neutral.950" + | "stone.50" + | "stone.100" + | "stone.200" + | "stone.300" + | "stone.400" + | "stone.500" + | "stone.600" + | "stone.700" + | "stone.800" + | "stone.900" + | "stone.950" + | "zinc.50" + | "zinc.100" + | "zinc.200" + | "zinc.300" + | "zinc.400" + | "zinc.500" + | "zinc.600" + | "zinc.700" + | "zinc.800" + | "zinc.900" + | "zinc.950" + | "gray.50" + | "gray.100" + | "gray.200" + | "gray.300" + | "gray.400" + | "gray.500" + | "gray.600" + | "gray.700" + | "gray.800" + | "gray.900" + | "gray.950" + | "slate.50" + | "slate.100" + | "slate.200" + | "slate.300" + | "slate.400" + | "slate.500" + | "slate.600" + | "slate.700" + | "slate.800" + | "slate.900" + | "slate.950" + | "colorPalette" + | "colorPalette.50" + | "colorPalette.100" + | "colorPalette.200" + | "colorPalette.300" + | "colorPalette.400" + | "colorPalette.500" + | "colorPalette.600" + | "colorPalette.700" + | "colorPalette.800" + | "colorPalette.900" + | "colorPalette.950"; + +export type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl"; + +export type SpacingToken = + | "0" + | "1" + | "2" + | "3" + | "4" + | "5" + | "6" + | "7" + | "8" + | "9" + | "10" + | "11" + | "12" + | "14" + | "16" + | "20" + | "24" + | "28" + | "32" + | "36" + | "40" + | "44" + | "48" + | "52" + | "56" + | "60" + | "64" + | "72" + | "80" + | "96" + | "0.5" + | "1.5" + | "2.5" + | "3.5" + | "-1" + | "-2" + | "-3" + | "-4" + | "-5" + | "-6" + | "-7" + | "-8" + | "-9" + | "-10" + | "-11" + | "-12" + | "-14" + | "-16" + | "-20" + | "-24" + | "-28" + | "-32" + | "-36" + | "-40" + | "-44" + | "-48" + | "-52" + | "-56" + | "-60" + | "-64" + | "-72" + | "-80" + | "-96" + | "-0.5" + | "-1.5" + | "-2.5" + | "-3.5"; + +export type SizeToken = + | "0" + | "1" + | "2" + | "3" + | "4" + | "5" + | "6" + | "7" + | "8" + | "9" + | "10" + | "11" + | "12" + | "14" + | "16" + | "20" + | "24" + | "28" + | "32" + | "36" + | "40" + | "44" + | "48" + | "52" + | "56" + | "60" + | "64" + | "72" + | "80" + | "96" + | "0.5" + | "1.5" + | "2.5" + | "3.5" + | "xs" + | "sm" + | "md" + | "lg" + | "xl" + | "2xl" + | "3xl" + | "4xl" + | "5xl" + | "6xl" + | "7xl" + | "8xl" + | "prose" + | "full" + | "min" + | "max" + | "fit" + | "breakpoint-sm" + | "breakpoint-md" + | "breakpoint-lg" + | "breakpoint-xl" + | "breakpoint-2xl"; + +export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"; + +export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"; + +export type Tokens = { + aspectRatios: AspectRatioToken; + borders: BorderToken; + easings: EasingToken; + durations: DurationToken; + radii: RadiusToken; + fontWeights: FontWeightToken; + lineHeights: LineHeightToken; + fonts: FontToken; + letterSpacings: LetterSpacingToken; + fontSizes: FontSizeToken; + shadows: ShadowToken; + colors: ColorToken; + blurs: BlurToken; + spacing: SpacingToken; + sizes: SizeToken; + animations: AnimationToken; + breakpoints: BreakpointToken; +} & { [token: string]: never }; + +export type TokenCategory = + | "aspectRatios" + | "zIndex" + | "opacity" + | "colors" + | "fonts" + | "fontSizes" + | "fontWeights" + | "lineHeights" + | "letterSpacings" + | "sizes" + | "shadows" + | "spacing" + | "radii" + | "borders" + | "borderWidths" + | "durations" + | "easings" + | "animations" + | "blurs" + | "gradients" + | "breakpoints" + | "assets"; diff --git a/styled-system/types/composition.d.ts b/styled-system/types/composition.d.ts new file mode 100644 index 00000000..7e3eeeb3 --- /dev/null +++ b/styled-system/types/composition.d.ts @@ -0,0 +1,138 @@ +/* eslint-disable */ +import type { CompositionStyleObject } from "./system-types"; + +interface Token { + value: T; + description?: string; +} + +interface Recursive { + [key: string]: Recursive | T; +} + +/* ----------------------------------------------------------------------------- + * Text styles + * -----------------------------------------------------------------------------*/ + +type TextStyleProperty = + | "font" + | "fontFamily" + | "fontFeatureSettings" + | "fontKerning" + | "fontLanguageOverride" + | "fontOpticalSizing" + | "fontPalette" + | "fontSize" + | "fontSizeAdjust" + | "fontStretch" + | "fontStyle" + | "fontSynthesis" + | "fontVariant" + | "fontVariantAlternates" + | "fontVariantCaps" + | "fontVariantLigatures" + | "fontVariantNumeric" + | "fontVariantPosition" + | "fontVariationSettings" + | "fontWeight" + | "hypens" + | "hyphenateCharacter" + | "hyphenateLimitChars" + | "letterSpacing" + | "lineBreak" + | "lineHeight" + | "quotes" + | "overflowWrap" + | "textCombineUpright" + | "textDecoration" + | "textDecorationColor" + | "textDecorationLine" + | "textDecorationSkipInk" + | "textDecorationStyle" + | "textDecorationThickness" + | "textEmphasis" + | "textEmphasisColor" + | "textEmphasisPosition" + | "textEmphasisStyle" + | "textIndent" + | "textJustify" + | "textOrientation" + | "textOverflow" + | "textRendering" + | "textShadow" + | "textTransform" + | "textUnderlineOffset" + | "textUnderlinePosition" + | "textWrap" + | "textWrapMode" + | "textWrapStyle" + | "verticalAlign" + | "whiteSpace" + | "wordBreak" + | "wordSpacing"; + +export type TextStyle = CompositionStyleObject; + +export type TextStyles = Recursive>; + +/* ----------------------------------------------------------------------------- + * Layer styles + * -----------------------------------------------------------------------------*/ + +type Placement = + | "Top" + | "Right" + | "Bottom" + | "Left" + | "Inline" + | "Block" + | "InlineStart" + | "InlineEnd" + | "BlockStart" + | "BlockEnd"; + +type Radius = + | `Top${"Right" | "Left"}` + | `Bottom${"Right" | "Left"}` + | `Start${"Start" | "End"}` + | `End${"Start" | "End"}`; + +type LayerStyleProperty = + | "background" + | "backgroundColor" + | "backgroundImage" + | "borderRadius" + | "border" + | "borderWidth" + | "borderColor" + | "borderStyle" + | "boxShadow" + | "filter" + | "backdropFilter" + | "transform" + | "color" + | "opacity" + | "backgroundBlendMode" + | "backgroundAttachment" + | "backgroundClip" + | "backgroundOrigin" + | "backgroundPosition" + | "backgroundRepeat" + | "backgroundSize" + | `border${Placement}` + | `border${Placement}Width` + | "borderRadius" + | `border${Radius}Radius` + | `border${Placement}Color` + | `border${Placement}Style` + | "padding" + | `padding${Placement}`; + +export type LayerStyle = CompositionStyleObject; + +export type LayerStyles = Recursive>; + +export interface CompositionStyles { + textStyles: TextStyles; + layerStyles: LayerStyles; +} diff --git a/styled-system/types/conditions.d.ts b/styled-system/types/conditions.d.ts new file mode 100644 index 00000000..b2e811bb --- /dev/null +++ b/styled-system/types/conditions.d.ts @@ -0,0 +1,274 @@ +/* eslint-disable */ +import type { AnySelector, Selectors } from "./selectors"; + +export interface Conditions { + /** `&:is(:hover, [data-hover])` */ + _hover: string; + /** `&:is(:focus, [data-focus])` */ + _focus: string; + /** `&:focus-within` */ + _focusWithin: string; + /** `&:is(:focus-visible, [data-focus-visible])` */ + _focusVisible: string; + /** `&:is(:disabled, [disabled], [data-disabled])` */ + _disabled: string; + /** `&:is(:active, [data-active])` */ + _active: string; + /** `&:visited` */ + _visited: string; + /** `&:target` */ + _target: string; + /** `&:is(:read-only, [data-read-only])` */ + _readOnly: string; + /** `&:read-write` */ + _readWrite: string; + /** `&:is(:empty, [data-empty])` */ + _empty: string; + /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ + _checked: string; + /** `&:enabled` */ + _enabled: string; + /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ + _expanded: string; + /** `&[data-highlighted]` */ + _highlighted: string; + /** `&::before` */ + _before: string; + /** `&::after` */ + _after: string; + /** `&::first-letter` */ + _firstLetter: string; + /** `&::first-line` */ + _firstLine: string; + /** `&::marker` */ + _marker: string; + /** `&::selection` */ + _selection: string; + /** `&::file-selector-button` */ + _file: string; + /** `&::backdrop` */ + _backdrop: string; + /** `&:first-child` */ + _first: string; + /** `&:last-child` */ + _last: string; + /** `&:only-child` */ + _only: string; + /** `&:nth-child(even)` */ + _even: string; + /** `&:nth-child(odd)` */ + _odd: string; + /** `&:first-of-type` */ + _firstOfType: string; + /** `&:last-of-type` */ + _lastOfType: string; + /** `&:only-of-type` */ + _onlyOfType: string; + /** `.peer:is(:focus, [data-focus]) ~ &` */ + _peerFocus: string; + /** `.peer:is(:hover, [data-hover]) ~ &` */ + _peerHover: string; + /** `.peer:is(:active, [data-active]) ~ &` */ + _peerActive: string; + /** `.peer:focus-within ~ &` */ + _peerFocusWithin: string; + /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ + _peerFocusVisible: string; + /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ + _peerDisabled: string; + /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ + _peerChecked: string; + /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ + _peerInvalid: string; + /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ + _peerExpanded: string; + /** `.peer:placeholder-shown ~ &` */ + _peerPlaceholderShown: string; + /** `.group:is(:focus, [data-focus]) &` */ + _groupFocus: string; + /** `.group:is(:hover, [data-hover]) &` */ + _groupHover: string; + /** `.group:is(:active, [data-active]) &` */ + _groupActive: string; + /** `.group:focus-within &` */ + _groupFocusWithin: string; + /** `.group:is(:focus-visible, [data-focus-visible]) &` */ + _groupFocusVisible: string; + /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ + _groupDisabled: string; + /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ + _groupChecked: string; + /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ + _groupExpanded: string; + /** `.group:invalid &` */ + _groupInvalid: string; + /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ + _indeterminate: string; + /** `&:is(:required, [data-required], [aria-required=true])` */ + _required: string; + /** `&:is(:valid, [data-valid])` */ + _valid: string; + /** `&:is(:invalid, [data-invalid])` */ + _invalid: string; + /** `&:autofill` */ + _autofill: string; + /** `&:in-range` */ + _inRange: string; + /** `&:out-of-range` */ + _outOfRange: string; + /** `&::placeholder, &[data-placeholder]` */ + _placeholder: string; + /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ + _placeholderShown: string; + /** `&:is([aria-pressed=true], [data-pressed])` */ + _pressed: string; + /** `&:is([aria-selected=true], [data-selected])` */ + _selected: string; + /** `&:default` */ + _default: string; + /** `&:optional` */ + _optional: string; + /** `&:is([open], [data-open], [data-state="open"])` */ + _open: string; + /** `&:is([closed], [data-closed], [data-state="closed"])` */ + _closed: string; + /** `&:fullscreen` */ + _fullscreen: string; + /** `&:is([data-loading], [aria-busy=true])` */ + _loading: string; + /** `&[aria-current=page]` */ + _currentPage: string; + /** `&[aria-current=step]` */ + _currentStep: string; + /** `@media (prefers-reduced-motion: reduce)` */ + _motionReduce: string; + /** `@media (prefers-reduced-motion: no-preference)` */ + _motionSafe: string; + /** `@media print` */ + _print: string; + /** `@media (orientation: landscape)` */ + _landscape: string; + /** `@media (orientation: portrait)` */ + _portrait: string; + /** `.dark &` */ + _dark: string; + /** `.light &` */ + _light: string; + /** `@media (prefers-color-scheme: dark)` */ + _osDark: string; + /** `@media (prefers-color-scheme: light)` */ + _osLight: string; + /** `@media (forced-colors: active)` */ + _highContrast: string; + /** `@media (prefers-contrast: less)` */ + _lessContrast: string; + /** `@media (prefers-contrast: more)` */ + _moreContrast: string; + /** `[dir=ltr] &` */ + _ltr: string; + /** `[dir=rtl] &` */ + _rtl: string; + /** `&::-webkit-scrollbar` */ + _scrollbar: string; + /** `&::-webkit-scrollbar-thumb` */ + _scrollbarThumb: string; + /** `&::-webkit-scrollbar-track` */ + _scrollbarTrack: string; + /** `&[data-orientation=horizontal]` */ + _horizontal: string; + /** `&[data-orientation=vertical]` */ + _vertical: string; + /** `@starting-style` */ + _starting: string; + /** `@media screen and (min-width: 40rem)` */ + sm: string; + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + smOnly: string; + /** `@media screen and (max-width: 39.9975rem)` */ + smDown: string; + /** `@media screen and (min-width: 48rem)` */ + md: string; + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + mdOnly: string; + /** `@media screen and (max-width: 47.9975rem)` */ + mdDown: string; + /** `@media screen and (min-width: 64rem)` */ + lg: string; + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + lgOnly: string; + /** `@media screen and (max-width: 63.9975rem)` */ + lgDown: string; + /** `@media screen and (min-width: 80rem)` */ + xl: string; + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + xlOnly: string; + /** `@media screen and (max-width: 79.9975rem)` */ + xlDown: string; + /** `@media screen and (min-width: 96rem)` */ + "2xl": string; + /** `@media screen and (min-width: 96rem)` */ + "2xlOnly": string; + /** `@media screen and (max-width: 95.9975rem)` */ + "2xlDown": string; + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + smToMd: string; + /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ + smToLg: string; + /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ + smToXl: string; + /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ + smTo2xl: string; + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + mdToLg: string; + /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ + mdToXl: string; + /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ + mdTo2xl: string; + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + lgToXl: string; + /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ + lgTo2xl: string; + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + xlTo2xl: string; + /** `@container (min-width: 20rem)` */ + "@/xs": string; + /** `@container (min-width: 24rem)` */ + "@/sm": string; + /** `@container (min-width: 28rem)` */ + "@/md": string; + /** `@container (min-width: 32rem)` */ + "@/lg": string; + /** `@container (min-width: 36rem)` */ + "@/xl": string; + /** `@container (min-width: 42rem)` */ + "@/2xl": string; + /** `@container (min-width: 48rem)` */ + "@/3xl": string; + /** `@container (min-width: 56rem)` */ + "@/4xl": string; + /** `@container (min-width: 64rem)` */ + "@/5xl": string; + /** `@container (min-width: 72rem)` */ + "@/6xl": string; + /** `@container (min-width: 80rem)` */ + "@/7xl": string; + /** `@container (min-width: 90rem)` */ + "@/8xl": string; + /** The base (=no conditions) styles to apply */ + base: string; +} + +export type ConditionalValue = + | V + | Array + | { + [K in keyof Conditions]?: ConditionalValue; + }; + +export type Nested

= P & { + [K in Selectors]?: Nested

; +} & { + [K in AnySelector]?: Nested

; +} & { + [K in keyof Conditions]?: Nested

; +}; diff --git a/styled-system/types/csstype.d.ts b/styled-system/types/csstype.d.ts new file mode 100644 index 00000000..c64217c5 --- /dev/null +++ b/styled-system/types/csstype.d.ts @@ -0,0 +1,23197 @@ +/* eslint-disable */ +export {}; + +export type PropertyValue = + TValue extends Array + ? Array + : TValue extends infer TUnpacked & {} + ? TUnpacked + : TValue; + +export type Fallback = { + [P in keyof T]: T[P] | readonly NonNullable[]; +}; + +export interface StandardLonghandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { + /** + * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. + * + * **Syntax**: `auto | ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :------: | :--: | :-: | + * | **93** | **92** | **15.4** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/accent-color + */ + accentColor?: Property.AccentColor | undefined; + /** + * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. + * + * **Syntax**: `normal | | | ? ` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **28** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-content + */ + alignContent?: Property.AlignContent | undefined; + /** + * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. + * + * **Syntax**: `normal | stretch | | [ ? ]` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-items + */ + alignItems?: Property.AlignItems | undefined; + /** + * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. + * + * **Syntax**: `auto | normal | stretch | | ? ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **10** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-self + */ + alignSelf?: Property.AlignSelf | undefined; + /** + * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis. + * + * **Syntax**: `[ normal | | | ? ]#` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :----: | :--: | :-: | + * | No | n/a | No | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks + */ + alignTracks?: Property.AlignTracks | undefined; + /** + * The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. + * + * **Syntax**: `#` + * + * **Initial value**: `replace` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :-----: | :-----: | :----: | :--: | :-: | + * | **112** | **115** | **16** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/animation-composition + */ + animationComposition?: Property.AnimationComposition | undefined; + /** + * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. + * + * **Syntax**: `