reshaped 3.9.0-canary.2 → 3.9.0-canary.20

package/dist/components/Text/Text.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
-export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Text render variant */
     variant?: G.Responsive<Variant>;
     /** Text font weight */
@@ -18,12 +18,14 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     decoration?: "line-through";
     /** Maximum number of lines to render, used for text truncation */
     maxLines?: number;
-    /** Render as a different html tag */
-    as?: TagName;
+    /** Render as a numeric value to preserve the width of each character */
+    numeric?: true;
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
+    /** Render as a different html tag */
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
 };

package/dist/components/Tooltip/Tooltip.js

@@ -5,12 +5,12 @@ import Text from "../Text/index.js";
 import Theme from "../Theme/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
-    const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
+    const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;
     if (!text)
         return children({ ref: null });
     return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", 
         // Disable group timeouts by default since it's not controlled by the default user events
-        groupTimeouts: flyoutProps.active === undefined ? true : false, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+        groupTimeouts: flyoutProps.active === undefined ? true : false, contentMaxWidth: contentMaxWidth, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 Tooltip.displayName = "Tooltip";
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);max-width:360px;padding:var(--rs-unit-x1) var(--rs-unit-x2)}
+.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);padding:var(--rs-unit-x1) var(--rs-unit-x2)}

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
     /** Node for inserting children */
     children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
     /** Text content for the tooltip */

package/dist/components/View/View.types.d.ts

@@ -3,11 +3,11 @@ import type * as TStyles from "../../styles/types";
 import type * as G from "../../types/global";
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
-export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Node for inserting the content */
     children?: React.ReactNode;
     /** Render as a different element */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Render a divider between each child */
     divided?: boolean;
     /** Flex direction for the content */
@@ -97,7 +97,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 } & Pick<ItemProps, "grow" | "shrink">;
-export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Flex order of the item inside the parent */
     order?: G.Responsive<number>;
     /** Number of columns the item should span in the parent, View uses 12 columns */
@@ -109,7 +109,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
     /** Individual gap before the item, overrides the parent View gap */
     gapBefore?: G.Responsive<number> | "auto";
     /** Render as a different element */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
     /** Additional classname for the root element */

package/dist/index.d.ts

@@ -110,6 +110,8 @@ export { default as Grid } from "./components/Grid";
 export type { GridProps, GridItemProps } from "./components/Grid";
 export { default as Hidden } from "./components/Hidden";
 export type { HiddenProps } from "./components/Hidden";
+export { default as HiddenInput } from "./components/HiddenInput";
+export type { HiddenInputProps } from "./components/HiddenInput";
 export { default as HiddenVisually } from "./components/HiddenVisually";
 export type { HiddenVisuallyProps } from "./components/HiddenVisually";
 export { default as Icon } from "./components/Icon";

package/dist/index.js

@@ -57,6 +57,7 @@ export { default as Flyout } from "./components/Flyout/index.js";
 export { default as FormControl } from "./components/FormControl/index.js";
 export { default as Grid } from "./components/Grid/index.js";
 export { default as Hidden } from "./components/Hidden/index.js";
+export { default as HiddenInput } from "./components/HiddenInput/index.js";
 export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
 export { default as Icon } from "./components/Icon/index.js";
 export { default as Image } from "./components/Image/index.js";

package/dist/types/global.d.ts

@@ -7,7 +7,7 @@ export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
 export type CSSVariable = `--${string}`;
 export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
 type DataAttributes = object | Record<`data-${string}`, string | boolean>;
-export type Attributes<TagName extends keyof React.JSX.IntrinsicElements = "div"> = React.JSX.IntrinsicElements[TagName] & DataAttributes & {
+export type Attributes<TagName extends keyof React.JSX.IntrinsicElements | void = void> = (TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<HTMLElement>) & DataAttributes & {
     style?: StyleAttribute;
 };
 export type Viewport = "s" | "m" | "l" | "xl";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.9.0-canary.2",
+  "version": "3.9.0-canary.20",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -20,7 +20,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/reshaped-ui/reshaped.git"
+    "url": "https://github.com/reshaped-ui/reshaped.git",
+    "directory": "packages/reshaped"
   },
   "bugs": {
     "url": "https://github.com/reshaped-ui/reshaped/issues"
@@ -77,69 +78,12 @@
   "browserslist": [
     "defaults and not IE 11"
   ],
-  "devDependencies": {
-    "@changesets/cli": "2.29.7",
-    "@commitlint/cli": "20.1.0",
-    "@commitlint/config-conventional": "20.0.0",
-    "@commitlint/types": "20.0.0",
-    "@eslint/js": "9.38.0",
-    "@size-limit/preset-big-lib": "11.2.0",
-    "@storybook/addon-a11y": "10.0.0",
-    "@storybook/addon-docs": "10.0.0",
-    "@storybook/addon-vitest": "10.0.0",
-    "@storybook/react": "10.0.0",
-    "@storybook/react-vite": "10.0.0",
-    "@testing-library/user-event": "14.6.1",
-    "@types/culori": "4.0.1",
-    "@types/events": "3.0.3",
-    "@types/node": "24.9.2",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
-    "@vitejs/plugin-react": "5.1.0",
-    "@vitest/browser": "4.0.4",
-    "@vitest/browser-playwright": "4.0.4",
-    "@vitest/coverage-istanbul": "4.0.4",
-    "@vitest/coverage-v8": "4.0.4",
-    "chromatic": "13.3.2",
-    "eslint": "9.38.0",
-    "eslint-config-prettier": "10.1.8",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.5.4",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "lefthook": "2.0.1",
-    "playwright": "1.56.1",
-    "postcss": "8.5.6",
-    "postcss-cli": "11.0.1",
-    "postcss-each": "1.1.0",
-    "postcss-nested": "7.0.2",
-    "prettier": "3.6.2",
-    "react": "18",
-    "react-dom": "18",
-    "react-shadow": "20.6.0",
-    "resolve-tspaths": "0.8.23",
-    "size-limit": "11.2.0",
-    "storybook": "10.0.0",
-    "stylelint": "16.25.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-standard": "39.0.1",
-    "ts-node": "10.9.2",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.46.2",
-    "vite": "7.1.12",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.4",
-    "vitest-browser-react": "2.0.2"
-  },
   "peerDependencies": {
     "postcss": "^8",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@changesets/changelog-github": "0.5.1",
     "@csstools/postcss-global-data": "3.1.0",
     "chalk": "4.1.2",
     "commander": "14.0.2",
@@ -148,36 +92,8 @@
     "culori": "4.0.2",
     "postcss-custom-media": "11.0.6"
   },
-  "size-limit": [
-    {
-      "name": "Library / JS",
-      "path": "dist/bundle.js",
-      "webpack": false
-    },
-    {
-      "name": "Library / CSS",
-      "path": "dist/bundle.css",
-      "webpack": false
-    },
-    {
-      "name": "Theming / JS",
-      "path": "dist/tests/themingWithoutDefinition.js",
-      "webpack": true
-    },
-    {
-      "name": "Theming with a default theme definition / JS",
-      "path": "dist/tests/themingWithDefinition.js",
-      "webpack": true
-    }
-  ],
-  "engines": {
-    "node": ">=22"
-  },
   "scripts": {
-    "dev": "storybook dev -p 3001 --disable-telemetry",
     "clean": "sh ./bin/clean.sh",
-    "commit": "git-cz",
-    "changeset": "changeset",
     "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
@@ -185,19 +101,9 @@
     "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
     "build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
     "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
-    "build:storybook": "storybook build -o dist/app --disable-telemetry",
-    "build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
-    "release": "sh ./bin/release.sh",
-    "release:canary": "sh ./bin/release-canary.sh",
     "release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
-    "chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
-    "test:vrt": "pnpm chromatic",
-    "test:vrt:turbo": "pnpm chromatic --only-changed",
     "test:browser": "vitest run --project=storybook",
     "test:unit": "vitest run --project=unit",
-    "test:size": "size-limit",
-    "lint": "pnpm lint:js && pnpm lint:css",
-    "lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
-    "lint:css": "stylelint 'src/**/*.css'"
+    "test:size": "size-limit"
   }
 }

package/README.md

@@ -1,24 +0,0 @@
-# Reshaped
-
-<img width="2400" height="1260" alt="3 0 (1)" src="https://github.com/user-attachments/assets/ef632fe9-9446-430f-b87d-bebebe6fb595" />
-<br /><br />
-
-Reshaped is a library with professionally crafted React & Figma components for building beautiful products or starting your own design system.
-
-<br />
-
-## Documentation
-
-To get started, check out the [Reshaped documentation](https://reshaped.so/docs/getting-started/overview).
-
-## Contributing
-
-Read our [contribution guide](CONTRIBUTING.md) to learn about our principles, development process and testing.
-
-## Maintainers
-
-- Dmitry Belyaev, [@blvdmitry](https://x.com/blvdmitry)
-
-## License
-
-This project is licensed under the terms of the MIT license.

package/dist/components/_private/HiddenInput/HiddenInput.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../../utilities/props.js";
-import s from "./HiddenInput.module.css";
-const HiddenInput = (props) => {
-    const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className);
-    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur }));
-};
-HiddenInput.displayName = "HiddenInput";
-export default HiddenInput;

package/dist/components/_private/HiddenInput/HiddenInput.types.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import type * as G from "../../../types/global";
-export type Props = {
-    name?: string;
-    value?: string;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    type: "checkbox" | "radio";
-    className?: G.ClassName;
-    attributes?: G.Attributes<"input">;
-};