@uxf/ui 11.35.0 → 11.36.0

package/figma-colors.js

@@ -0,0 +1,118 @@
+const figmaColors = {
+    base_border_border: "var(--uxf-color-base-border-border)",
+    base_border_input: "var(--uxf-color-base-border-input)",
+    base_border_inverted_border: "var(--uxf-color-base-border-inverted-border)",
+    base_border_inverted_input: "var(--uxf-color-base-border-inverted-input)",
+    base_icon_disabled: "var(--uxf-color-base-icon-disabled)",
+    base_icon_high_emphasis: "var(--uxf-color-base-icon-high-emphasis)",
+    base_icon_low_emphasis: "var(--uxf-color-base-icon-low-emphasis)",
+    base_icon_medium_emphasis: "var(--uxf-color-base-icon-medium-emphasis)",
+    base_icon_inverted_low_emphasis: "var(--uxf-color-base-icon-inverted-low-emphasis)",
+    base_icon_inverted_disabled: "var(--uxf-color-base-icon-inverted-disabled)",
+    base_icon_inverted_high_emphasis: "var(--uxf-color-base-icon-inverted-high-emphasis)",
+    base_shadow_shadow_md: "var(--uxf-color-base-shadow-shadow-md)",
+    base_shadow_shadow_sm: "var(--uxf-color-base-shadow-shadow-sm)",
+    base_surface_background: "var(--uxf-color-base-surface-background)",
+    base_surface_disabled: "var(--uxf-color-base-surface-disabled)",
+    base_surface_input: "var(--uxf-color-base-surface-input)",
+    base_surface_input_disabled: "var(--uxf-color-base-surface-input-disabled)",
+    base_surface_input_hover: "var(--uxf-color-base-surface-input-hover)",
+    base_surface_main: "var(--uxf-color-base-surface-main)",
+    base_surface_main_hover: "var(--uxf-color-base-surface-main-hover)",
+    base_surface_popup: "var(--uxf-color-base-surface-popup)",
+    base_surface_tooltip: "var(--uxf-color-base-surface-tooltip)",
+    base_surface_inverted_default: "var(--uxf-color-base-surface-inverted-default)",
+    base_surface_inverted_default_hover: "var(--uxf-color-base-surface-inverted-default-hover)",
+    base_surface_inverted_disabled: "var(--uxf-color-base-surface-inverted-disabled)",
+    base_surface_inverted_main: "var(--uxf-color-base-surface-inverted-main)",
+    base_surface_inverted_main_hover: "var(--uxf-color-base-surface-inverted-main-hover)",
+    base_text_disabled: "var(--uxf-color-base-text-disabled)",
+    base_text_high_emphasis: "var(--uxf-color-base-text-high-emphasis)",
+    base_text_link: "var(--uxf-color-base-text-link)",
+    base_text_link_pressed: "var(--uxf-color-base-text-link-pressed)",
+    base_text_low_emphasis: "var(--uxf-color-base-text-low-emphasis)",
+    base_text_inverted_disabled: "var(--uxf-color-base-text-inverted-disabled)",
+    base_text_inverted_high_emphasis: "var(--uxf-color-base-text-inverted-high-emphasis)",
+    base_text_inverted_link: "var(--uxf-color-base-text-inverted-link)",
+    base_text_inverted_low_emphasis: "var(--uxf-color-base-text-inverted-low-emphasis)",
+    brand_border: "var(--uxf-color-brand-border)",
+    brand_icon: "var(--uxf-color-brand-icon)",
+    brand_icon_on_muted: "var(--uxf-color-brand-icon-on-muted)",
+    brand_text: "var(--uxf-color-brand-text)",
+    brand_text_on_muted: "var(--uxf-color-brand-text-on-muted)",
+    brand_surface_bolder: "var(--uxf-color-brand-surface-bolder)",
+    brand_surface_bolder_hover: "var(--uxf-color-brand-surface-bolder-hover)",
+    brand_surface_default: "var(--uxf-color-brand-surface-default)",
+    brand_surface_default_hover: "var(--uxf-color-brand-surface-default-hover)",
+    brand_surface_muted: "var(--uxf-color-brand-surface-muted)",
+    brand_surface_muted_hover: "var(--uxf-color-brand-surface-muted-hover)",
+    brand_surface_subtle: "var(--uxf-color-brand-surface-subtle)",
+    brand_surface_subtle_hover: "var(--uxf-color-brand-surface-subtle-hover)",
+    info_border: "var(--uxf-color-info-border)",
+    info_icon: "var(--uxf-color-info-icon)",
+    info_icon_on_muted: "var(--uxf-color-info-icon-on-muted)",
+    info_text: "var(--uxf-color-info-text)",
+    info_text_on_muted: "var(--uxf-color-info-text-on-muted)",
+    info_surface_default: "var(--uxf-color-info-surface-default)",
+    info_surface_default_hover: "var(--uxf-color-info-surface-default-hover)",
+    info_surface_muted: "var(--uxf-color-info-surface-muted)",
+    info_surface_muted_hover: "var(--uxf-color-info-surface-muted-hover)",
+    info_surface_subtle: "var(--uxf-color-info-surface-subtle)",
+    info_surface_subtle_hover: "var(--uxf-color-info-surface-subtle-hover)",
+    inverted_border: "var(--uxf-color-inverted-border)",
+    inverted_icon: "var(--uxf-color-inverted-icon)",
+    inverted_icon_on_muted: "var(--uxf-color-inverted-icon-on-muted)",
+    inverted_text_default: "var(--uxf-color-inverted-text-default)",
+    inverted_text_disabled: "var(--uxf-color-inverted-text-disabled)",
+    inverted_text_muted: "var(--uxf-color-inverted-text-muted)",
+    inverted_text_on_muted: "var(--uxf-color-inverted-text-on-muted)",
+    negative_border: "var(--uxf-color-negative-border)",
+    negative_icon: "var(--uxf-color-negative-icon)",
+    negative_icon_on_muted: "var(--uxf-color-negative-icon-on-muted)",
+    negative_text: "var(--uxf-color-negative-text)",
+    negative_text_on_muted: "var(--uxf-color-negative-text-on-muted)",
+    negative_surface_default: "var(--uxf-color-negative-surface-default)",
+    negative_surface_default_hover: "var(--uxf-color-negative-surface-default-hover)",
+    negative_surface_muted: "var(--uxf-color-negative-surface-muted)",
+    negative_surface_muted_hover: "var(--uxf-color-negative-surface-muted-hover)",
+    negative_surface_subtle: "var(--uxf-color-negative-surface-subtle)",
+    negative_surface_subtle_hover: "var(--uxf-color-negative-surface-subtle-hover)",
+    neutral_border: "var(--uxf-color-neutral-border)",
+    neutral_icon: "var(--uxf-color-neutral-icon)",
+    neutral_icon_on_muted: "var(--uxf-color-neutral-icon-on-muted)",
+    neutral_text: "var(--uxf-color-neutral-text)",
+    neutral_text_on_muted: "var(--uxf-color-neutral-text-on-muted)",
+    neutral_surface_bolder: "var(--uxf-color-neutral-surface-bolder)",
+    neutral_surface_bolder_hover: "var(--uxf-color-neutral-surface-bolder-hover)",
+    neutral_surface_default: "var(--uxf-color-neutral-surface-default)",
+    neutral_surface_default_hover: "var(--uxf-color-neutral-surface-default-hover)",
+    neutral_surface_muted: "var(--uxf-color-neutral-surface-muted)",
+    neutral_surface_muted_hover: "var(--uxf-color-neutral-surface-muted-hover)",
+    neutral_surface_subtle: "var(--uxf-color-neutral-surface-subtle)",
+    neutral_surface_subtle_hover: "var(--uxf-color-neutral-surface-subtle-hover)",
+    positive_border: "var(--uxf-color-positive-border)",
+    positive_icon: "var(--uxf-color-positive-icon)",
+    positive_icon_on_muted: "var(--uxf-color-positive-icon-on-muted)",
+    positive_text: "var(--uxf-color-positive-text)",
+    positive_text_on_muted: "var(--uxf-color-positive-text-on-muted)",
+    positive_surface_default: "var(--uxf-color-positive-surface-default)",
+    positive_surface_default_hover: "var(--uxf-color-positive-surface-default-hover)",
+    positive_surface_muted: "var(--uxf-color-positive-surface-muted)",
+    positive_surface_muted_hover: "var(--uxf-color-positive-surface-muted-hover)",
+    positive_surface_subtle: "var(--uxf-color-positive-surface-subtle)",
+    positive_surface_subtle_hover: "var(--uxf-color-positive-surface-subtle-hover)",
+    warning_border: "var(--uxf-color-warning-border)",
+    warning_icon: "var(--uxf-color-warning-icon)",
+    warning_icon_on_muted: "var(--uxf-color-warning-icon-on-muted)",
+    warning_text: "var(--uxf-color-warning-text)",
+    warning_text_on_muted: "var(--uxf-color-warning-text-on-muted)",
+    warning_surface_default: "var(--uxf-color-warning-surface-default)",
+    warning_surface_default_hover: "var(--uxf-color-warning-surface-default-hover)",
+    warning_surface_muted: "var(--uxf-color-warning-surface-muted)",
+    warning_surface_muted_hover: "var(--uxf-color-warning-surface-muted-hover)",
+    warning_surface_subtle: "var(--uxf-color-warning-surface-subtle)",
+    warning_surface_subtle_hover: "var(--uxf-color-warning-surface-subtle-hover)",
+};
+
+
+module.exports = { figmaColors }

package/icon-button/README.md

@@ -0,0 +1,9 @@
+# IconButton
+
+[Figma](https://www.figma.com/design/InhbHrNUhDGbBvRDRonXsD/Vent-UI?node-id=2781-9385&t=jbqrSewU0lPPgQjN-4)
+
+## Css dependencies
+
+```css
+@import url("@uxf/ui/css/button.css");
+```

package/icon-button/icon-button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "@uxf/ui/button";
+import { IconName } from "@uxf/ui/icon/types";
+import React from "react";
+export interface IconButtonProps extends Omit<ButtonProps, "children" | "isIconButton"> {
+    iconName: IconName;
+    iconSize?: number;
+    label: string;
+}
+export declare function IconButton(props: IconButtonProps): React.JSX.Element;

package/icon-button/icon-button.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = IconButton;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+function IconButton(props) {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { className, iconName, iconSize, label, ...buttonProps } = props;
+    return (react_1.default.createElement(button_1.Button, { className: `uxf-icon-button ${className !== null && className !== void 0 ? className : ""}`, ...buttonProps },
+        react_1.default.createElement(icon_1.Icon, { "aria-label": label, name: iconName, size: iconSize })));
+}

package/icon-button/icon-button.spec.d.ts

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

package/icon-button/icon-button.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const icon_button_stories_1 = require("./icon-button.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(icon_button_stories_1.Default, null));

package/icon-button/icon-button.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/icon-button/icon-button.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+const react_1 = __importStar(require("react"));
+const toggle_1 = require("../toggle");
+const icon_button_1 = require("./icon-button");
+function Default() {
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const config = (0, storybook_config_1.useStorybookConfig)("IconButton");
+    // eslint-disable-next-line no-console
+    const onClick = console.log;
+    const gridColumnsCount = config.variants.length * config.sizes.length + 1;
+    const gridTemplateColumns = `repeat(${gridColumnsCount}, 100px)`;
+    return (react_1.default.createElement("div", { className: "p-4" },
+        react_1.default.createElement("div", { className: "grid gap-3 p-4", style: { gridTemplateColumns } },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(toggle_1.Toggle, { className: "p-0", label: "Disabled", name: "is-disabled", onChange: (value) => setIsDisabled(Boolean(value)), size: "sm", value: isDisabled }),
+                react_1.default.createElement(toggle_1.Toggle, { className: "p-0 pt-2", label: "Loading", name: "is-loading", onChange: (value) => setIsLoading(Boolean(value)), size: "sm", value: isLoading })),
+            config.variants.map((variant) => (react_1.default.createElement("div", { className: "border-b border-blue-500 pb-2 text-center text-xs text-gray-400", key: variant, style: { gridColumn: "span 4" } },
+                "variant=",
+                variant))),
+            react_1.default.createElement("div", null),
+            config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { className: "text-center text-xs text-gray-400", key: `${variant}${size}` },
+                "size=",
+                size))))),
+        config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "min-w-fit bg-[#1F2A37] dark:bg-white" : undefined, key: color },
+            react_1.default.createElement("div", { className: "grid gap-3 px-4 py-2", style: { gridTemplateColumns } },
+                react_1.default.createElement("div", { className: "flex items-center text-center text-xs text-gray-400" },
+                    "color=",
+                    color),
+                config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "flex items-center justify-center gap-2", key: `${size}${color}${variant}` },
+                    react_1.default.createElement(icon_button_1.IconButton, { color: color, iconName: "user", isDisabled: isDisabled, isLoading: isLoading, label: "User", onClick: onClick, size: size, variant: variant })))))))))))));
+}

package/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from "./icon-button";
+export type { IconButtonProps } from "./icon-button";

package/icon-button/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = void 0;
+var icon_button_1 = require("./icon-button");
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return icon_button_1.IconButton; } });

package/modal-header/README.md

@@ -17,6 +17,7 @@ function Example() {
 ## CSS dependencies
 
 ```css
+@import url("@uxf/ui/css/figma-colors.css");
 @import url("@uxf/ui/css/button.css");
 @import url("@uxf/ui/css/modal-header.css");
 @import url("@uxf/ui/css/icon.css");

package/package.json

@@ -1,39 +1,45 @@
 {
-  "name": "@uxf/ui",
-  "version": "11.35.0",
-  "description": "",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "prepareCss": "rm -rf ./css && mkdir css && cp ./**/*.css ./css/ && cp ./colors.css ./css/",
-    "build": "npm run prepareCss && tsc -P tsconfig.json",
-    "tw-tokens:check": "ts-node ./scripts/generate-tw-tokens.js --mode=\"check\" --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
-    "tw-tokens:gen": "ts-node ./scripts/generate-tw-tokens.js --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
-    "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
-  },
-  "author": "UX Fans s.r.o",
-  "license": "MIT",
-  "dependencies": {
-    "@floating-ui/react": "0.26.23",
-    "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.35.0",
-    "@uxf/core-react": "11.35.0",
-    "@uxf/datepicker": "11.32.0",
-    "@uxf/styles": "11.35.0",
-    "color2k": "2.0.3",
-    "dayjs": "1.11.13",
-    "jump.js": "1.0.2",
-    "react-dropzone": "14.2.3",
-    "react-swipeable": "7.0.1"
-  },
-  "peerDependencies": {
-    "react": ">= 18.2.0",
-    "react-dom": ">= 18.2.0"
-  },
-  "devDependencies": {
-    "@types/jump.js": "1.0.6",
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0"
-  }
-}
+    "name": "@uxf/ui",
+    "version": "11.36.0",
+    "description": "",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "gen": "npm run css-tokens:gen",
+        "build": "npm run css:prepare && npm run tokens:prepare && tsc -P tsconfig.json",
+        "css-tokens:gen": "bin/generate-css-tokens.js --source=./_tokens --output=./_tokens/generated/",
+        "css:prepare": "rm -rf ./css && mkdir css && cp ./**/*.css ./css/ && cp ./_tokens/generated/figma-colors.css ./css/",
+        "tokens:prepare": "rm -rf ./tokens && mkdir tokens && cp ./_tokens/generated/figma-colors.js ./tokens/",
+        "tw-tokens:check": "ts-node ./scripts/generate-tw-tokens.js --mode=\"check\" --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
+        "tw-tokens:gen": "ts-node ./scripts/generate-tw-tokens.js --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
+        "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
+    },
+    "author": "UX Fans s.r.o",
+    "bin": {
+        "uxf-css-color-tokens-generator": "bin/generate-css-tokens.js"
+    },
+    "license": "MIT",
+    "dependencies": {
+        "@floating-ui/react": "0.26.23",
+        "@headlessui/react": "1.7.14",
+        "@uxf/core": "11.35.0",
+        "@uxf/core-react": "11.36.0",
+        "@uxf/datepicker": "11.32.0",
+        "@uxf/styles": "11.35.0",
+        "color2k": "2.0.3",
+        "dayjs": "1.11.13",
+        "jump.js": "1.0.2",
+        "react-dropzone": "14.2.3",
+        "react-swipeable": "7.0.1"
+    },
+    "peerDependencies": {
+        "react": ">= 18.2.0",
+        "react-dom": ">= 18.2.0"
+    },
+    "devDependencies": {
+        "@types/jump.js": "1.0.6",
+        "@types/react": "18.3.5",
+        "@types/react-dom": "18.3.0"
+    }
+}

package/readmes.d.ts

@@ -29,6 +29,7 @@ export declare const readmes: {
     readonly "flash-messages": typeof alertBubbleReadme;
     readonly "form-component": typeof alertBubbleReadme;
     readonly icon: typeof alertBubbleReadme;
+    readonly "icon-button": typeof alertBubbleReadme;
     readonly "image-gallery": typeof alertBubbleReadme;
     readonly input: typeof alertBubbleReadme;
     readonly label: typeof alertBubbleReadme;

package/readmes.js

@@ -34,34 +34,35 @@ const README_md_26 = __importDefault(require("./file-input/README.md"));
 const README_md_27 = __importDefault(require("./flash-messages/README.md"));
 const README_md_28 = __importDefault(require("./form-component/README.md"));
 const README_md_29 = __importDefault(require("./icon/README.md"));
-const README_md_30 = __importDefault(require("./image-gallery/README.md"));
-const README_md_31 = __importDefault(require("./input/README.md"));
-const README_md_32 = __importDefault(require("./label/README.md"));
-const README_md_33 = __importDefault(require("./layout/README.md"));
-const README_md_34 = __importDefault(require("./list-item/README.md"));
-const README_md_35 = __importDefault(require("./loader/README.md"));
-const README_md_36 = __importDefault(require("./lozenge/README.md"));
-const README_md_37 = __importDefault(require("./message/README.md"));
-const README_md_38 = __importDefault(require("./modal/README.md"));
-const README_md_39 = __importDefault(require("./modal-dialog/README.md"));
-const README_md_40 = __importDefault(require("./modal-header/README.md"));
-const README_md_41 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_42 = __importDefault(require("./multi-select/README.md"));
-const README_md_43 = __importDefault(require("./pagination/README.md"));
-const README_md_44 = __importDefault(require("./paper/README.md"));
-const README_md_45 = __importDefault(require("./radio/README.md"));
-const README_md_46 = __importDefault(require("./radio-group/README.md"));
-const README_md_47 = __importDefault(require("./raster-image/README.md"));
-const README_md_48 = __importDefault(require("./select/README.md"));
-const README_md_49 = __importDefault(require("./tabs/README.md"));
-const README_md_50 = __importDefault(require("./text-input/README.md"));
-const README_md_51 = __importDefault(require("./text-link/README.md"));
-const README_md_52 = __importDefault(require("./textarea/README.md"));
-const README_md_53 = __importDefault(require("./time-picker/README.md"));
-const README_md_54 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_55 = __importDefault(require("./toggle/README.md"));
-const README_md_56 = __importDefault(require("./tooltip/README.md"));
-const README_md_57 = __importDefault(require("./typography/README.md"));
+const README_md_30 = __importDefault(require("./icon-button/README.md"));
+const README_md_31 = __importDefault(require("./image-gallery/README.md"));
+const README_md_32 = __importDefault(require("./input/README.md"));
+const README_md_33 = __importDefault(require("./label/README.md"));
+const README_md_34 = __importDefault(require("./layout/README.md"));
+const README_md_35 = __importDefault(require("./list-item/README.md"));
+const README_md_36 = __importDefault(require("./loader/README.md"));
+const README_md_37 = __importDefault(require("./lozenge/README.md"));
+const README_md_38 = __importDefault(require("./message/README.md"));
+const README_md_39 = __importDefault(require("./modal/README.md"));
+const README_md_40 = __importDefault(require("./modal-dialog/README.md"));
+const README_md_41 = __importDefault(require("./modal-header/README.md"));
+const README_md_42 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_43 = __importDefault(require("./multi-select/README.md"));
+const README_md_44 = __importDefault(require("./pagination/README.md"));
+const README_md_45 = __importDefault(require("./paper/README.md"));
+const README_md_46 = __importDefault(require("./radio/README.md"));
+const README_md_47 = __importDefault(require("./radio-group/README.md"));
+const README_md_48 = __importDefault(require("./raster-image/README.md"));
+const README_md_49 = __importDefault(require("./select/README.md"));
+const README_md_50 = __importDefault(require("./tabs/README.md"));
+const README_md_51 = __importDefault(require("./text-input/README.md"));
+const README_md_52 = __importDefault(require("./text-link/README.md"));
+const README_md_53 = __importDefault(require("./textarea/README.md"));
+const README_md_54 = __importDefault(require("./time-picker/README.md"));
+const README_md_55 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_56 = __importDefault(require("./toggle/README.md"));
+const README_md_57 = __importDefault(require("./tooltip/README.md"));
+const README_md_58 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "alert-bubble": README_md_1.default,
     "avatar": README_md_2.default,
@@ -92,32 +93,33 @@ exports.readmes = {
     "flash-messages": README_md_27.default,
     "form-component": README_md_28.default,
     "icon": README_md_29.default,
-    "image-gallery": README_md_30.default,
-    "input": README_md_31.default,
-    "label": README_md_32.default,
-    "layout": README_md_33.default,
-    "list-item": README_md_34.default,
-    "loader": README_md_35.default,
-    "lozenge": README_md_36.default,
-    "message": README_md_37.default,
-    "modal": README_md_38.default,
-    "modal-dialog": README_md_39.default,
-    "modal-header": README_md_40.default,
-    "multi-combobox": README_md_41.default,
-    "multi-select": README_md_42.default,
-    "pagination": README_md_43.default,
-    "paper": README_md_44.default,
-    "radio": README_md_45.default,
-    "radio-group": README_md_46.default,
-    "raster-image": README_md_47.default,
-    "select": README_md_48.default,
-    "tabs": README_md_49.default,
-    "text-input": README_md_50.default,
-    "text-link": README_md_51.default,
-    "textarea": README_md_52.default,
-    "time-picker": README_md_53.default,
-    "time-picker-input": README_md_54.default,
-    "toggle": README_md_55.default,
-    "tooltip": README_md_56.default,
-    "typography": README_md_57.default,
+    "icon-button": README_md_30.default,
+    "image-gallery": README_md_31.default,
+    "input": README_md_32.default,
+    "label": README_md_33.default,
+    "layout": README_md_34.default,
+    "list-item": README_md_35.default,
+    "loader": README_md_36.default,
+    "lozenge": README_md_37.default,
+    "message": README_md_38.default,
+    "modal": README_md_39.default,
+    "modal-dialog": README_md_40.default,
+    "modal-header": README_md_41.default,
+    "multi-combobox": README_md_42.default,
+    "multi-select": README_md_43.default,
+    "pagination": README_md_44.default,
+    "paper": README_md_45.default,
+    "radio": README_md_46.default,
+    "radio-group": README_md_47.default,
+    "raster-image": README_md_48.default,
+    "select": README_md_49.default,
+    "tabs": README_md_50.default,
+    "text-input": README_md_51.default,
+    "text-link": README_md_52.default,
+    "textarea": README_md_53.default,
+    "time-picker": README_md_54.default,
+    "time-picker-input": README_md_55.default,
+    "toggle": README_md_56.default,
+    "tooltip": README_md_57.default,
+    "typography": README_md_58.default,
 };

package/scripts/generate-tw-tokens.js

@@ -81,6 +81,7 @@ async function generateTwTokens() {
             const newContent = await prettier.format(result, {
                 parser: "typescript",
                 tabWidth: 4,
+                printWidth: 120,
             });
 
             if (mode === "check") {

package/toggle/toggle.stories.js

@@ -32,14 +32,14 @@ exports.default = {
     component: index_1.Toggle,
 };
 function Default() {
-    const [checked, setChecked] = (0, react_1.useState)(true);
-    const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
+    const [isChecked, setIsChecked] = (0, react_1.useState)(true);
+    const onChange = (0, action_1.action)("onChange", () => setIsChecked((prev) => !prev));
     const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", name: "toggle", onChange: onChange, value: checked }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? - size sm", name: "toggle", onChange: onChange, size: "sm", value: checked }),
-        react_1.default.createElement(index_1.Toggle, { isDisabled: true, label: "Opravdu?", name: "toggle-disabled", onChange: onChange, value: checked }),
-        react_1.default.createElement(index_1.Toggle, { hiddenLabel: true, label: "Opravdu?", name: "toggle-hidden-label", onChange: onChange, value: checked }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", name: "toggle-reversed", onChange: onChange, value: checked, variant: "reversed" })));
+        react_1.default.createElement(index_1.Toggle, { label: "Default", name: "toggle", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Size sm", name: "toggle", onChange: onChange, size: "sm", value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { isDisabled: true, label: "Disabled", name: "toggle-disabled", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { hiddenLabel: true, label: "Default", name: "toggle-hidden-label", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Default (reversed)", name: "toggle-reversed", onChange: onChange, value: isChecked, variant: "reversed" })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "w-1/2 gap-4 p-20" }, storyToggles)));
 }