reshaped 1.0.1 → 2.1.0

package/icons/DotsHorizontal.js

@@ -0,0 +1,6 @@
+import React from "react";
+const IconDotsHorizontal = () => (React.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z", fill: "currentColor" }),
+    React.createElement("path", { d: "M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z", fill: "currentColor" }),
+    React.createElement("path", { d: "M4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9Z", fill: "currentColor" })));
+export default IconDotsHorizontal;

package/icons/Mic.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const MicIcon: () => React.JSX.Element;
+export default MicIcon;

package/icons/Mic.js

@@ -0,0 +1,9 @@
+import React from "react";
+const MicIcon = () => {
+    return (React.createElement("svg", { viewBox: "0 0 16 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M8 1C7.20435 1 6.44129 1.31607 5.87868 1.87868C5.31607 2.44129 5 3.20435 5 4V12C5 12.7956 5.31607 13.5587 5.87868 14.1213C6.44129 14.6839 7.20435 15 8 15C8.79565 15 9.55871 14.6839 10.1213 14.1213C10.6839 13.5587 11 12.7956 11 12V4C11 3.20435 10.6839 2.44129 10.1213 1.87868C9.55871 1.31607 8.79565 1 8 1V1Z", stroke: "currentColor" }),
+        React.createElement("path", { d: "M15 10V12C15 13.8565 14.2625 15.637 12.9497 16.9497C11.637 18.2625 9.85652 19 8 19C6.14348 19 4.36301 18.2625 3.05025 16.9497C1.7375 15.637 1 13.8565 1 12V10", stroke: "currentColor" }),
+        React.createElement("path", { d: "M8 19V23", stroke: "currentColor" }),
+        React.createElement("path", { d: "M4 23H12", stroke: "currentColor" })));
+};
+export default MicIcon;

package/icons/Zap.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconZap: () => React.JSX.Element;
+export default IconZap;

package/icons/Zap.js

@@ -0,0 +1,6 @@
+import React from "react";
+const IconZap = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", fill: "currentColor" })));
+};
+export default IconZap;

package/index.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Components
+ */
+export { default as Accordion } from "./components/Accordion";
+export type { AccordionProps } from "./components/Accordion";
+export { default as Actionable } from "./components/Actionable";
+export type { ActionableProps, ActionableRef } from "./components/Actionable";
+export { default as ActionBar } from "./components/ActionBar";
+export type { ActionBarProps } from "./components/ActionBar";
+export { default as Alert } from "./components/Alert";
+export type { AlertProps } from "./components/Alert";
+export { default as Autocomplete } from "./components/Autocomplete";
+export type { AutocompleteProps } from "./components/Autocomplete";
+export { default as Avatar } from "./components/Avatar";
+export type { AvatarProps } from "./components/Avatar";
+export { default as Badge } from "./components/Badge";
+export type { BadgeProps } from "./components/Badge";
+export { default as Button } from "./components/Button";
+export type { ButtonProps, ButtonAlignerProps } from "./components/Button";
+export { default as Breadcrumbs } from "./components/Breadcrumbs";
+export type { BreadcrumbsProps } from "./components/Breadcrumbs";
+export { default as Card } from "./components/Card";
+export type { CardProps } from "./components/Card";
+export { default as Carousel } from "./components/Carousel";
+export type { CarouselProps, CarouselInstanceRef } from "./components/Carousel";
+export { default as Checkbox } from "./components/Checkbox";
+export type { CheckboxProps } from "./components/Checkbox";
+export { default as CheckboxGroup } from "./components/CheckboxGroup";
+export type { CheckboxGroupProps } from "./components/CheckboxGroup";
+export { default as Container } from "./components/Container";
+export type { ContainerProps } from "./components/Container";
+export { default as Dismissible } from "./components/Dismissible";
+export type { DismissibleProps } from "./components/Dismissible";
+export { default as Divider } from "./components/Divider";
+export type { DividerProps } from "./components/Divider";
+export { default as DropdownMenu } from "./components/DropdownMenu";
+export type { DropdownMenuProps } from "./components/DropdownMenu";
+export { default as FormControl } from "./components/FormControl";
+export type { FormControlProps } from "./components/FormControl";
+export { default as Hidden } from "./components/Hidden";
+export type { HiddenProps } from "./components/Hidden";
+export { default as HiddenVisually } from "./components/HiddenVisually";
+export type { HiddenVisuallyProps } from "./components/HiddenVisually";
+export { default as Hotkey } from "./components/Hotkey";
+export type { HotkeyProps } from "./components/Hotkey";
+export { default as Icon } from "./components/Icon";
+export type { IconProps } from "./components/Icon";
+export { default as Image } from "./components/Image";
+export type { ImageProps } from "./components/Image";
+export { default as Link } from "./components/Link";
+export type { LinkProps } from "./components/Link";
+export { default as Loader } from "./components/Loader";
+export type { LoaderProps } from "./components/Loader";
+export { default as MenuItem } from "./components/MenuItem";
+export type { MenuItemProps } from "./components/MenuItem";
+export { default as Modal } from "./components/Modal";
+export type { ModalProps } from "./components/Modal";
+export { default as Overlay } from "./components/Overlay";
+export type { OverlayProps } from "./components/Overlay";
+export { default as Popover } from "./components/Popover";
+export type { PopoverProps } from "./components/Popover";
+export { default as Progress } from "./components/Progress";
+export type { ProgressProps } from "./components/Progress";
+export { default as Radio } from "./components/Radio";
+export type { RadioProps } from "./components/Radio";
+export { default as RadioGroup } from "./components/RadioGroup";
+export type { RadioGroupProps } from "./components/RadioGroup";
+export { default as Reshaped } from "./components/Reshaped";
+export type { ReshapedProps } from "./components/Reshaped";
+export { default as Scrim } from "./components/Scrim";
+export type { ScrimProps } from "./components/Scrim";
+export { default as Select } from "./components/Select";
+export type { SelectProps } from "./components/Select";
+export { default as Skeleton } from "./components/Skeleton";
+export type { SkeletonProps } from "./components/Skeleton";
+export { default as Switch } from "./components/Switch";
+export type { SwitchProps } from "./components/Switch";
+export { default as Tabs } from "./components/Tabs";
+export type { TabsProps } from "./components/Tabs";
+export { default as Text } from "./components/Text";
+export type { TextProps } from "./components/Text";
+export { default as TextArea } from "./components/TextArea";
+export type { TextAreaProps } from "./components/TextArea";
+export { default as TextField } from "./components/TextField";
+export type { TextFieldProps } from "./components/TextField";
+export { default as Timeline } from "./components/Timeline";
+export type { TimelineProps, TimelineItemProps } from "./components/Timeline";
+export { useToast } from "./components/Toast";
+export type { ToastProps } from "./components/Toast";
+export { default as Tooltip } from "./components/Tooltip";
+export type { TooltipProps } from "./components/Tooltip";
+export { default as View } from "./components/View";
+export type { ViewProps, ViewItemProps } from "./components/View";
+/**
+ * Hooks
+ */
+export { useFormControl } from "./components/FormControl";
+export { default as Theme, useTheme } from "./components/Theme";
+export type { ThemeProps } from "./components/Theme";
+export { default as useScrollLock } from "./hooks/useScrollLock";
+export { default as useToggle } from "./hooks/useToggle";
+export { default as useRTL } from "./hooks/useRTL";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
+export { default as useHotkeys } from "./hooks/useHotkeys";
+export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
+/**
+ * Utilities
+ */
+export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers";
+/**
+ * Types
+ */
+export type { ReshapedConfig } from "./types/config";
+export type { Responsive } from "./types/global";
+/**
+ * Dev utilities
+ */
+export { default as Placeholder } from "./utilities/storybook/Placeholder";

package/index.js

@@ -0,0 +1,67 @@
+/**
+ * Components
+ */
+export { default as Accordion } from "./components/Accordion/index.js";
+export { default as Actionable } from "./components/Actionable/index.js";
+export { default as ActionBar } from "./components/ActionBar/index.js";
+export { default as Alert } from "./components/Alert/index.js";
+export { default as Autocomplete } from "./components/Autocomplete/index.js";
+export { default as Avatar } from "./components/Avatar/index.js";
+export { default as Badge } from "./components/Badge/index.js";
+export { default as Button } from "./components/Button/index.js";
+export { default as Breadcrumbs } from "./components/Breadcrumbs/index.js";
+export { default as Card } from "./components/Card/index.js";
+export { default as Carousel } from "./components/Carousel/index.js";
+export { default as Checkbox } from "./components/Checkbox/index.js";
+export { default as CheckboxGroup } from "./components/CheckboxGroup/index.js";
+export { default as Container } from "./components/Container/index.js";
+export { default as Dismissible } from "./components/Dismissible/index.js";
+export { default as Divider } from "./components/Divider/index.js";
+export { default as DropdownMenu } from "./components/DropdownMenu/index.js";
+export { default as FormControl } from "./components/FormControl/index.js";
+export { default as Hidden } from "./components/Hidden/index.js";
+export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
+export { default as Hotkey } from "./components/Hotkey/index.js";
+export { default as Icon } from "./components/Icon/index.js";
+export { default as Image } from "./components/Image/index.js";
+export { default as Link } from "./components/Link/index.js";
+export { default as Loader } from "./components/Loader/index.js";
+export { default as MenuItem } from "./components/MenuItem/index.js";
+export { default as Modal } from "./components/Modal/index.js";
+export { default as Overlay } from "./components/Overlay/index.js";
+export { default as Popover } from "./components/Popover/index.js";
+export { default as Progress } from "./components/Progress/index.js";
+export { default as Radio } from "./components/Radio/index.js";
+export { default as RadioGroup } from "./components/RadioGroup/index.js";
+export { default as Reshaped } from "./components/Reshaped/index.js";
+export { default as Scrim } from "./components/Scrim/index.js";
+export { default as Select } from "./components/Select/index.js";
+export { default as Skeleton } from "./components/Skeleton/index.js";
+export { default as Switch } from "./components/Switch/index.js";
+export { default as Tabs } from "./components/Tabs/index.js";
+export { default as Text } from "./components/Text/index.js";
+export { default as TextArea } from "./components/TextArea/index.js";
+export { default as TextField } from "./components/TextField/index.js";
+export { default as Timeline } from "./components/Timeline/index.js";
+export { useToast } from "./components/Toast/index.js";
+export { default as Tooltip } from "./components/Tooltip/index.js";
+export { default as View } from "./components/View/index.js";
+/**
+ * Hooks
+ */
+export { useFormControl } from "./components/FormControl/index.js";
+export { default as Theme, useTheme } from "./components/Theme/index.js";
+export { default as useScrollLock } from "./hooks/useScrollLock.js";
+export { default as useToggle } from "./hooks/useToggle.js";
+export { default as useRTL } from "./hooks/useRTL.js";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
+export { default as useHotkeys } from "./hooks/useHotkeys.js";
+export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
+/**
+ * Utilities
+ */
+export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers.js";
+/**
+ * Dev utilities
+ */
+export { default as Placeholder } from "./utilities/storybook/Placeholder.js";

package/package.json

@@ -1,6 +1,143 @@
 {
-  "name": "reshaped",
-  "version": "1.0.1",
-  "main": "index.js",
-  "license": "MIT"
+	"name": "reshaped",
+	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
+	"version": "2.1.0",
+	"license": "SEE LICENSE IN LICENSE.md",
+	"email": "hello@reshaped.so",
+	"homepage": "https://reshaped.so",
+	"bugs": {
+		"url": "https://github.com/formaat-design/reshaped/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/formaat-design/reshaped"
+	},
+	"main": "./index.js",
+	"module": "./index.js",
+	"types": "./index.d.ts",
+	"files": [
+		"bin/**/*",
+		"cli/**/*",
+		"components/**/*",
+		"config/**/*",
+		"constants/**/*",
+		"hooks/**/*",
+		"icons/**/*",
+		"styles/**/*",
+		"themes/**/*",
+		"types/**/*",
+		"utilities/**/*",
+		"bundle.css",
+		"bundle.d.ts",
+		"bundle.js",
+		"index.d.ts",
+		"index.js"
+	],
+	"bin": {
+		"reshaped": "./bin/cli.js"
+	},
+	"scripts": {
+		"dev": "storybook dev -c tools/storybook -p 3001 --disable-telemetry",
+		"clean": "sh ./bin/clean.sh",
+		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:cjs && yarn build:css && yarn build:bundle && resolve-tspaths && cp -r dist/* ./",
+		"build:themes": "node bin/cli.js theming --config cli/theming/reshaped.config.js --output src/themes --private",
+		"build:esm": "tsc -p tsconfig.esm.json",
+		"build:cjs": "tsc -p tsconfig.cjs.json",
+		"build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build && cp -rp src/themes/media.css dist/themes/media.css && mkdir themes && cp -r src/themes/media.css themes/media.css",
+		"build:stories": "tsc -p tsconfig.stories.json",
+		"build:bundle": "vite build && mv dist/bundle.umd.js dist/bundle.js && cp dist/index.d.ts dist/bundle.d.ts",
+		"build:storybook": "storybook build -c tools/storybook -o dist/app --disable-telemetry",
+		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build -c tools/storybook",
+		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
+		"release:lib": "yarn build && yarn publish",
+		"release:beta": "yarn build && yarn publish --tag beta",
+		"release:source": "git archive -o reshaped-source-v$(jq -r .version package.json).zip HEAD . ':!.chromatic'",
+		"release:copy": "sh ./bin/copy-release.sh",
+		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
+		"test:vrt": "yarn chromatic",
+		"test:unit": "jest --config tools/jest/jest.config.js",
+		"test:size": "size-limit",
+		"lint": "yarn lint:js && yarn lint:css",
+		"lint:js": "eslint --ext .ts,.tsx src/**/*.ts src/**/*.tsx --quiet --fix",
+		"lint:css": "stylelint 'src/**/*.css'"
+	},
+	"browserslist": [
+		"defaults and not IE 11"
+	],
+	"devDependencies": {
+		"@size-limit/preset-big-lib": "8.2.6",
+		"@storybook/addon-a11y": "7.0.27",
+		"@storybook/react": "7.0.27",
+		"@storybook/react-vite": "7.0.27",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react": "14.0.0",
+		"@testing-library/user-event": "14.4.3",
+		"@types/events": "3.0.0",
+		"@types/jest": "29.5.3",
+		"@types/node": "20.4.2",
+		"@types/react": "18.2.15",
+		"@types/react-dom": "18.2.7",
+		"@typescript-eslint/eslint-plugin": "5.62.0",
+		"@typescript-eslint/parser": "5.62.0",
+		"@vitejs/plugin-react": "4.0.3",
+		"chromatic": "6.19.9",
+		"eslint": "8.45.0",
+		"eslint-config-airbnb-typescript": "17.0.0",
+		"eslint-config-prettier": "8.8.0",
+		"eslint-plugin-import": "2.27.5",
+		"eslint-plugin-jsx-a11y": "6.7.1",
+		"eslint-plugin-prettier": "4.2.1",
+		"eslint-plugin-react": "7.32.2",
+		"eslint-plugin-react-hooks": "4.6.0",
+		"identity-obj-proxy": "3.0.0",
+		"jest": "29.6.1",
+		"jest-environment-jsdom": "29.6.1",
+		"jest-matchmedia-mock": "1.1.0",
+		"lefthook": "1.4.5",
+		"postcss": "8.4.26",
+		"postcss-cli": "10.1.0",
+		"postcss-each": "1.1.0",
+		"postcss-import": "15.1.0",
+		"postcss-nested": "6.0.1",
+		"prettier": "3.0.0",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"resolve-tspaths": "0.8.14",
+		"size-limit": "8.2.6",
+		"storybook": "7.0.27",
+		"stylelint": "15.10.1",
+		"stylelint-config-prettier": "9.0.5",
+		"stylelint-config-standard": "34.0.0",
+		"ts-jest": "29.1.1",
+		"typescript": "5.1.6",
+		"vite": "4.4.4",
+		"vite-tsconfig-paths": "4.2.0"
+	},
+	"peerDependencies": {
+		"postcss": "^8.0.0",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"dependencies": {
+		"autoprefixer": "10.4.14",
+		"chalk": "4.1.2",
+		"commander": "11.0.0",
+		"cssnano": "6.0.1",
+		"postcss-custom-media": "8.0.2"
+	},
+	"size-limit": [
+		{
+			"name": "JS",
+			"path": "dist/bundle.js",
+			"webpack": false
+		},
+		{
+			"name": "CSS",
+			"path": "dist/bundle.css",
+			"webpack": false
+		}
+	],
+	"engines": {
+		"yarn": ">=1.0.0"
+	}
 }

package/styles/aspectRatio/aspectRatio.module.css

@@ -0,0 +1 @@
+.root:empty,.root:not(:empty)>*{aspect-ratio:var(--rs-ratio)}.root>img{-o-object-fit:cover;object-fit:cover}.root{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}@media (min-width:660px){.root{--rs-ratio:var(--rs-ratio-m)}}@media (min-width:900px){.root{--rs-ratio:var(--rs-ratio-l)}}@media (min-width:1280px){.root{--rs-ratio:var(--rs-ratio-xl)}}

package/styles/aspectRatio/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getAspectRatioStyles: T.DynamicStyleUtility<number>;
+export default getAspectRatioStyles;

package/styles/aspectRatio/index.js

@@ -0,0 +1,9 @@
+import { responsiveVariables } from "../../utilities/helpers.js";
+import s from "./aspectRatio.module.css";
+const getAspectRatioStyles = (value) => {
+    if (!value)
+        return null;
+    const variables = responsiveVariables("--rs-ratio", value);
+    return { classNames: s.root, variables };
+};
+export default getAspectRatioStyles;

package/styles/aspectRatio/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/styles/aspectRatio/index.test.js

@@ -0,0 +1,24 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import getAspectRatioStyles from "./index.js";
+describe("Styles/AspectRatio", () => {
+    test("handles positive value", () => {
+        expect(getAspectRatioStyles(1 / 2)).toMatchSnapshot();
+    });
+    test("handles 0 value", () => {
+        expect(getAspectRatioStyles(0)).toMatchSnapshot();
+    });
+    test("handles undefined value", () => {
+        expect(getAspectRatioStyles()).toMatchSnapshot();
+    });
+    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(getAspectRatioStyles({ s: 4, m: 0, l: 2 })).toMatchSnapshot();
+    }));
+});

package/styles/bleed/bleed.module.css

@@ -0,0 +1 @@
+.root{--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s);margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1)}.--bleed{border-left-style:none!important;border-radius:0;border-right-style:none!important}@media (min-width:660px){.root{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (min-width:900px){.root{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (min-width:1280px){.root{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}

package/styles/bleed/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getBleedStyles: T.DynamicStyleUtility<number>;
+export default getBleedStyles;

package/styles/bleed/index.js

@@ -0,0 +1,13 @@
+import { responsiveClassNames, responsiveVariables, responsivePropDependency, } from "../../utilities/helpers.js";
+import s from "./bleed.module.css";
+const getBleedStyles = (value) => {
+    if (value === undefined)
+        return null;
+    const classNames = [
+        s.root,
+        ...responsiveClassNames(s, "--bleed", responsivePropDependency(value, (value) => typeof value === "number" && value > 0)),
+    ];
+    const variables = responsiveVariables("--rs-bleed", value);
+    return { classNames, variables };
+};
+export default getBleedStyles;

package/styles/bleed/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/styles/bleed/index.test.js

@@ -0,0 +1,24 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import getBleedStyles from "./index.js";
+describe("Styles/Bleed", () => {
+    test("handles positive value", () => {
+        expect(getBleedStyles(4)).toMatchSnapshot();
+    });
+    test("handles 0 value", () => {
+        expect(getBleedStyles(0)).toMatchSnapshot();
+    });
+    test("handles undefined value", () => {
+        expect(getBleedStyles()).toMatchSnapshot();
+    });
+    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(getBleedStyles({ s: 4, m: 0, l: 2 })).toMatchSnapshot();
+    }));
+});

package/styles/height/height.module.css

@@ -0,0 +1 @@
+.literal,.unit{--rs-h-s:auto;--rs-h-m:var(--rs-h-s);--rs-h-l:var(--rs-h-m);--rs-h-xl:var(--rs-h-l);height:var(--rs-h)}.literal{--rs-h:var(--rs-h-s)}.unit{--rs-h:calc(var(--rs-h-s) * var(--rs-unit-x1))}@media (min-width:660px){.literal--m{--rs-h:var(--rs-h-m)}.unit--m{--rs-h:calc(var(--rs-h-m) * var(--rs-unit-x1))}}@media (min-width:900px){.literal--l{--rs-h:var(--rs-h-l)}.unit--l{--rs-h:calc(var(--rs-h-l) * var(--rs-unit-x1))}}@media (min-width:1280px){.literal--xl{--rs-h:var(--rs-h-xl)}.unit--xl{--rs-h:calc(var(--rs-h-xl) * var(--rs-unit-x1))}}

package/styles/height/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getHeightStyles: T.DynamicStyleUtility<string | number>;
+export default getHeightStyles;

package/styles/height/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import s from "./height.module.css";
+const getHeightStyles = (value) => {
+    if (!value)
+        return null;
+    const variables = responsiveVariables("--rs-h", value);
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
+    return { classNames, variables };
+};
+export default getHeightStyles;

package/styles/height/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/styles/height/index.test.js

@@ -0,0 +1,27 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import getHeightStyles from "./index.js";
+describe("Styles/Height", () => {
+    test("handles px value", () => {
+        expect(getHeightStyles("50px")).toMatchSnapshot();
+    });
+    test("handles % value", () => {
+        expect(getHeightStyles("50%")).toMatchSnapshot();
+    });
+    test("handles unit value", () => {
+        expect(getHeightStyles(5)).toMatchSnapshot();
+    });
+    test("handles undefined value", () => {
+        expect(getHeightStyles()).toMatchSnapshot();
+    });
+    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(getHeightStyles({ s: "50px", l: "50%" })).toMatchSnapshot();
+    }));
+});

package/styles/inset/index.d.ts

@@ -0,0 +1,4 @@
+import * as T from "../types";
+import * as G from "../../types/global";
+declare const getInsetStyles: (value?: G.Responsive<number>, side?: "top" | "bottom" | "start" | "end") => T.DynamicStyleUtilityResult;
+export default getInsetStyles;

package/styles/inset/index.js

@@ -0,0 +1,14 @@
+import { responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./inset.module.css";
+const getInsetStyles = (value, side) => {
+    if (value === undefined)
+        return null;
+    const suffix = side ? `-${side}` : "";
+    const variableName = `--rs-inset${suffix}`;
+    const variables = responsiveVariables(variableName, value);
+    const classNames = responsiveClassNames(s, `--inset${suffix}`, value, {
+        excludeValueFromClassName: true,
+    });
+    return { classNames, variables };
+};
+export default getInsetStyles;

package/styles/inset/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/styles/inset/index.test.js

@@ -0,0 +1,27 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import getInsetStyles from "./index.js";
+describe("Styles/Inset", () => {
+    test("handles positive value", () => {
+        expect(getInsetStyles(4)).toMatchSnapshot();
+    });
+    test("handles 0 value", () => {
+        expect(getInsetStyles(0)).toMatchSnapshot();
+    });
+    test("handles undefined value", () => {
+        expect(getInsetStyles()).toMatchSnapshot();
+    });
+    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(getInsetStyles({ s: 4, m: 0, l: 2 })).toMatchSnapshot();
+    }));
+    test("handles value width defined side", () => {
+        expect(getInsetStyles(4, "start")).toMatchSnapshot();
+    });
+});

package/styles/inset/inset.module.css

@@ -0,0 +1 @@
+.--inset{inset:calc(var(--rs-inset) * var(--rs-unit-x1))}.--inset-end{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset-s:0;--rs-inset-m:var(--rs-inset-s);--rs-inset-l:var(--rs-inset-m);--rs-inset-xl:var(--rs-inset-l);--rs-inset:var(--rs-inset-s)}.--inset-end{--rs-inset-end-s:0;--rs-inset-end-m:var(--rs-inset-end-s);--rs-inset-end-l:var(--rs-inset-end-m);--rs-inset-end-xl:var(--rs-inset-end-l);--rs-inset-end:var(--rs-inset-end-s)}.--inset-start{--rs-inset-start-s:0;--rs-inset-start-m:var(--rs-inset-start-s);--rs-inset-start-l:var(--rs-inset-start-m);--rs-inset-start-xl:var(--rs-inset-start-l);--rs-inset-start:var(--rs-inset-start-s)}.--inset-top{--rs-inset-top-s:0;--rs-inset-top-m:var(--rs-inset-top-s);--rs-inset-top-l:var(--rs-inset-top-m);--rs-inset-top-xl:var(--rs-inset-top-l);--rs-inset-top:var(--rs-inset-top-s)}.--inset-bottom{--rs-inset-bottom-s:0;--rs-inset-bottom-m:var(--rs-inset-bottom-s);--rs-inset-bottom-l:var(--rs-inset-bottom-m);--rs-inset-bottom-xl:var(--rs-inset-bottom-l);--rs-inset-bottom:var(--rs-inset-bottom-s)}@media (min-width:660px){.--inset-end--m{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--m{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--m{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--m{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-m)}.--inset-end{--rs-inset-end:var(--rs-inset-end-m)}.--inset-start{--rs-inset-start:var(--rs-inset-start-m)}.--inset-top{--rs-inset-top:var(--rs-inset-top-m)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-m)}}@media (min-width:900px){.--inset-end--l{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--l{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--l{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--l{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-l)}.--inset-end{--rs-inset-end:var(--rs-inset-end-l)}.--inset-start{--rs-inset-start:var(--rs-inset-start-l)}.--inset-top{--rs-inset-top:var(--rs-inset-top-l)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-l)}}@media (min-width:1280px){.--inset-end--xl{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--xl{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--xl{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--xl{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-xl)}.--inset-end{--rs-inset-end:var(--rs-inset-end-xl)}.--inset-start{--rs-inset-start:var(--rs-inset-start-xl)}.--inset-top{--rs-inset-top:var(--rs-inset-top-xl)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-xl)}}

package/styles/maxHeight/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getMaxHeightStyles: T.DynamicStyleUtility<string | number>;
+export default getMaxHeightStyles;

package/styles/maxHeight/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import s from "./maxHeight.module.css";
+const getMaxHeightStyles = (value) => {
+    if (!value)
+        return null;
+    const variables = responsiveVariables("--rs-max-h", value);
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
+    return { classNames, variables };
+};
+export default getMaxHeightStyles;

package/styles/maxHeight/index.test.d.ts

@@ -0,0 +1 @@
+export {};