@de-kit/st-ui 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./components/button/button.js";
+import "./components/button/index.js";
+import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.js";
+import "./components/checkbox/index.js";
+import { Input, InputProps } from "./components/input/input.js";
+import "./components/input/index.js";
+import { RadioInput, RadioInputProps } from "./components/radio/radio.js";
+import "./components/radio/index.js";
+import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spinner.js";
+import "./components/spinner/index.js";
+import { TextArea, TextAreaProps } from "./components/textarea/textarea.js";
+import "./components/textarea/index.js";
+export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };

package/dist/index.js

@@ -0,0 +1,7 @@
+import { Button } from "./components/button/button.js";
+import { CheckboxInput } from "./components/checkbox/checkbox.js";
+import { Input } from "./components/input/input.js";
+import { RadioInput } from "./components/radio/radio.js";
+import { Spinner } from "./components/spinner/spinner.js";
+import { TextArea } from "./components/textarea/textarea.js";
+export { Button, CheckboxInput, Input, RadioInput, Spinner, TextArea };

package/dist/lib/cn.cjs

@@ -0,0 +1,25 @@
+// src/lib/cn.ts
+const pushClass = (classes, value) => {
+	if (!value) return;
+	if (typeof value === "string" || typeof value === "number") {
+		classes.push(String(value));
+		return;
+	}
+	if (Array.isArray(value)) {
+		value.forEach((item) => pushClass(classes, item));
+		return;
+	}
+	for (const key of Object.keys(value)) if (value[key]) classes.push(key);
+};
+/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */
+const cn = (...inputs) => {
+	const classes = [];
+	inputs.forEach((input) => pushClass(classes, input));
+	return classes.join(" ");
+};
+/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */
+const when = (enabled, className) => Boolean(enabled) && className ? className : false;
+exports.cn = cn;
+exports.when = when;
+
+//# sourceMappingURL=cn.cjs.map

package/dist/lib/cn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.cjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["type ClassDictionary = Record<string, boolean | null | undefined>;\ntype ClassValue =\n  | string\n  | number\n  | null\n  | undefined\n  | false\n  | ClassDictionary\n  | ClassValue[];\n\nconst pushClass = (classes: string[], value: ClassValue): void => {\n  if (!value) return;\n\n  if (typeof value === 'string' || typeof value === 'number') {\n    classes.push(String(value));\n    return;\n  }\n\n  if (Array.isArray(value)) {\n    value.forEach(item => pushClass(classes, item));\n    return;\n  }\n\n  for (const key of Object.keys(value)) {\n    if (value[key]) classes.push(key);\n  }\n};\n\n/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */\nexport const cn = (...inputs: ClassValue[]): string => {\n  const classes: string[] = [];\n  inputs.forEach(input => pushClass(classes, input));\n  return classes.join(' ');\n};\n\n/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */\nexport const when = (\n  enabled: boolean | undefined,\n  className: string | undefined,\n): string | false => (Boolean(enabled) && className ? className : false);\n"],"mappings":";AAUA,MAAM,aAAa,SAAmB,UAA4B;CAChE,IAAI,CAAC,OAAO;CAEZ,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,QAAQ,KAAK,OAAO,KAAK,CAAC;EAC1B;CACF;CAEA,IAAI,MAAM,QAAQ,KAAK,GAAG;EACxB,MAAM,SAAQ,SAAQ,UAAU,SAAS,IAAI,CAAC;EAC9C;CACF;CAEA,KAAK,MAAM,OAAO,OAAO,KAAK,KAAK,GACjC,IAAI,MAAM,MAAM,QAAQ,KAAK,GAAG;AAEpC;;AAGA,MAAa,MAAM,GAAG,WAAiC;CACrD,MAAM,UAAoB,CAAC;CAC3B,OAAO,SAAQ,UAAS,UAAU,SAAS,KAAK,CAAC;CACjD,OAAO,QAAQ,KAAK,GAAG;AACzB;;AAGA,MAAa,QACX,SACA,cACoB,QAAQ,OAAO,KAAK,YAAY,YAAY"}

package/dist/lib/cn.js

@@ -0,0 +1,24 @@
+// src/lib/cn.ts
+const pushClass = (classes, value) => {
+	if (!value) return;
+	if (typeof value === "string" || typeof value === "number") {
+		classes.push(String(value));
+		return;
+	}
+	if (Array.isArray(value)) {
+		value.forEach((item) => pushClass(classes, item));
+		return;
+	}
+	for (const key of Object.keys(value)) if (value[key]) classes.push(key);
+};
+/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */
+const cn = (...inputs) => {
+	const classes = [];
+	inputs.forEach((input) => pushClass(classes, input));
+	return classes.join(" ");
+};
+/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */
+const when = (enabled, className) => Boolean(enabled) && className ? className : false;
+export { cn, when };
+
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["type ClassDictionary = Record<string, boolean | null | undefined>;\ntype ClassValue =\n  | string\n  | number\n  | null\n  | undefined\n  | false\n  | ClassDictionary\n  | ClassValue[];\n\nconst pushClass = (classes: string[], value: ClassValue): void => {\n  if (!value) return;\n\n  if (typeof value === 'string' || typeof value === 'number') {\n    classes.push(String(value));\n    return;\n  }\n\n  if (Array.isArray(value)) {\n    value.forEach(item => pushClass(classes, item));\n    return;\n  }\n\n  for (const key of Object.keys(value)) {\n    if (value[key]) classes.push(key);\n  }\n};\n\n/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */\nexport const cn = (...inputs: ClassValue[]): string => {\n  const classes: string[] = [];\n  inputs.forEach(input => pushClass(classes, input));\n  return classes.join(' ');\n};\n\n/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */\nexport const when = (\n  enabled: boolean | undefined,\n  className: string | undefined,\n): string | false => (Boolean(enabled) && className ? className : false);\n"],"mappings":";AAUA,MAAM,aAAa,SAAmB,UAA4B;CAChE,IAAI,CAAC,OAAO;CAEZ,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,QAAQ,KAAK,OAAO,KAAK,CAAC;EAC1B;CACF;CAEA,IAAI,MAAM,QAAQ,KAAK,GAAG;EACxB,MAAM,SAAQ,SAAQ,UAAU,SAAS,IAAI,CAAC;EAC9C;CACF;CAEA,KAAK,MAAM,OAAO,OAAO,KAAK,KAAK,GACjC,IAAI,MAAM,MAAM,QAAQ,KAAK,GAAG;AAEpC;;AAGA,MAAa,MAAM,GAAG,WAAiC;CACrD,MAAM,UAAoB,CAAC;CAC3B,OAAO,SAAQ,UAAS,UAAU,SAAS,KAAK,CAAC;CACjD,OAAO,QAAQ,KAAK,GAAG;AACzB;;AAGA,MAAa,QACX,SACA,cACoB,QAAQ,OAAO,KAAK,YAAY,YAAY"}

package/dist/styles/global.scss

@@ -0,0 +1,195 @@
+// База приложения. Шрифт Inter подключает хост — файлы лежат в splittest-frontend/src/app/fonts.
+@import './vars.scss';
+
+:root {
+  --pink: #ff00ff;
+  --blue: #00aaff;
+  --window-max-height: 100vh;
+  --wrapper-padding: 20px;
+
+  @media (min-width: $tabletWidth) {
+    --wrapper-padding: 30px;
+  }
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+html,
+body {
+  height: 100%;
+  scrollbar-gutter: stable;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  font-family: $mainFontName;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: $colorBlack;
+  background-color: $mainBgColor;
+  font-size: $bodyFontSize;
+  line-height: 20px;
+  font-weight: 400;
+
+  &::after {
+    content: '';
+    display: block;
+    background-color: rgba($colorBlack, 0.3);
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+  }
+}
+
+.body {
+  &--close {
+    height: 100vh;
+    overflow-y: hidden;
+  }
+
+  &--modal {
+    &::after {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.main {
+  flex: 1 0 auto;
+}
+
+.wrapper {
+  min-width: 340px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--wrapper-padding);
+  padding-right: var(--wrapper-padding);
+
+  @media (min-width: $tabletWidth) {
+    max-width: 680px;
+  }
+
+  @media (min-width: $laptopWidth) {
+    max-width: 1000px;
+  }
+}
+
+.scroll-block::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 8px;
+  height: 8px;
+}
+
+.scroll-block::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #c3c3c3;
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+a {
+  text-decoration: none;
+  transition: color 0.3s ease;
+  color: $colorBlack;
+}
+
+button {
+  color: $colorBlack;
+  font-size: $bodyFontSize;
+  font-family: $mainFontName;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  tr {
+    vertical-align: top;
+  }
+
+  td {
+    word-break: break-word;
+    border-top: 1px solid $borderColor;
+    padding: 15px 0;
+  }
+
+  tr:last-of-type td {
+    border-bottom: 1px solid $borderColor;
+  }
+
+  th {
+    color: rgba($colorBlack, 0.5);
+    font-size: 11px;
+    line-height: 15px;
+    text-align: left;
+    font-weight: normal;
+    padding: 15px 0;
+  }
+}
+
+h1,
+h2,
+h3 {
+  text-align: left;
+  font-weight: 900;
+}
+
+h1 {
+  font-size: 28px;
+  line-height: 30px;
+
+  @media (min-width: $tabletWidth) {
+    font-size: 45px;
+    line-height: 50px;
+  }
+}
+
+h2 {
+  font-size: 28px;
+  line-height: 30px;
+}
+
+h3 {
+  font-size: 18px;
+  line-height: 20px;
+}
+
+h4 {
+  font-size: 14px;
+  line-height: 20px;
+}

package/dist/styles/mixins.scss

@@ -0,0 +1,188 @@
+@import './vars.scss';
+
+@mixin btn-focus {
+  &:focus {
+    outline: initial;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 1px solid $colorBlack;
+    background: transparent;
+  }
+}
+
+@mixin reset-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+@mixin reset-btn {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+@mixin reset-input {
+  border: none;
+  background-color: transparent;
+}
+
+@mixin btn-min {
+  display: block;
+  width: fit-content;
+  height: 30px;
+  padding: 0 9px;
+  font-size: 14px;
+  font-weight: 700;
+  color: $colorWhite;
+  background-color: $colorBlue;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: $tr;
+
+  &:disabled {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.5);
+    pointer-events: none;
+  }
+
+  &:active,
+  &:hover {
+    background-color: $colorBlack;
+  }
+}
+
+@mixin input-min {
+  height: 38px;
+  border-radius: $borderRadius;
+  border: 4px solid $colorWhite;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  padding: 0 15px;
+  font-size: 14px;
+  transition: $tr;
+  background-color: $colorWhite;
+  appearance: none;
+  outline: none;
+
+  &:hover,
+  &:focus {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+  }
+
+  &--recommend {
+    background-color: rgba(#ffbf00, 0.1);
+
+    &:not([value='']) {
+      background-color: $colorWhite;
+    }
+  }
+
+  &:required {
+    background-color: rgba(#ff002a, 0.1);
+
+    &:valid {
+      background-color: $colorWhite;
+    }
+  }
+
+  &:disabled {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-color: $borderColor;
+    color: rgba($colorBlack, 0.5);
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &::-webkit-input-placeholder {
+    color: rgba($colorBlack, 0.5);
+  }
+
+  @media (max-width: $tabletWidth) {
+    font-size: 16px;
+  }
+}
+
+@mixin linkActiveElement {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  bottom: -2px;
+  left: 0;
+  display: block;
+  width: calc(100% - 1px);
+  height: 2px;
+  background-color: $colorBlack;
+}
+
+@mixin popupShow {
+  visibility: visible;
+  opacity: 1;
+  z-index: 12;
+}
+
+@mixin popupHide {
+  visibility: hidden;
+  opacity: 0;
+}
+
+@mixin popupStyle($maxWidth: 360px, $padding: 24px 30px) {
+  position: absolute;
+  z-index: 0;
+  max-width: $maxWidth;
+  padding: $padding;
+  box-shadow: $popupBoxShadow;
+  background: $colorWhite;
+  border-radius: 5px;
+  text-align: left;
+  color: $colorBlack;
+}
+
+@mixin buttonArea($width: 20px) {
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -#{$width * 0.5};
+    left: -#{$width * 0.5};
+    width: calc(100% + #{$width});
+    height: calc(100% + #{$width});
+  }
+}
+
+@mixin h2 {
+  margin: 0 0 10px;
+  font-size: 18px;
+  line-height: 20px;
+  font-weight: 900;
+
+  @media (min-width: $tabletWidth) {
+    margin-bottom: 15px;
+  }
+}
+
+@mixin imgWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid $borderColor;
+  overflow: hidden;
+
+  img {
+    z-index: -1;
+    object-fit: contain;
+    margin-inline: auto;
+  }
+}

package/dist/styles/vars.scss

@@ -0,0 +1,39 @@
+// Токены splittest. Источник: splittest-frontend/src/app/styles/vars.scss
+$colorBlack: #000;
+$colorWhite: #fff;
+
+$colorBlue: #002bff;
+$colorRed: #ff0000;
+$colorGreen: #00a66f;
+$colorYellow: #ffbf00;
+$colorGray: #e5e5e5;
+$colorGrayIcon: #727272;
+$colorGrayTwo: #808080;
+$colorOrange: #ff7f00;
+$colorBackground: #f7f7f7;
+
+$borderRadius: 5px;
+$borderRadiusBig: 10px;
+$borderColor: rgba($colorBlack, 0.1);
+$borderShadowTop: 0 -1px 0 0 $borderColor;
+$borderShadowBottom: 0 1px 0 0 $borderColor;
+$borderInputColor: #d9d9d9;
+$tr: all 0.3s ease;
+$trParam: 0.3s ease;
+$trBg: background-color 0.3s ease;
+$popupBoxShadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
+$bgColorSidebarBlock: rgba(0, 0, 0, 0.03);
+
+$inputRecomendBg: rgba(#ffbf00, 0.1);
+$inputRequiredBg: rgba(#ff0000, 0.1);
+$inputErrorBorder: rgba(#ff0000, 0.5);
+
+$desktopWidth: 1200px;
+$laptopWidth: 1000px;
+$tabletWidth: 680px;
+$mobileWidth: 576px;
+
+$mainFontName: 'Inter', sans-serif;
+$bodyFontSize: 14px;
+$mainBgColor: #fff;
+$mainIndexBgColor: #f0f1f5;

package/package.json

@@ -1,6 +1,94 @@
 {
   "name": "@de-kit/st-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "React-компоненты splittest: SCSS-модули и токены из основного фронтенда",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apocalipsizzz/splittest-ui.git"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./global.scss": "./dist/styles/global.scss",
+    "./vars.scss": "./dist/styles/vars.scss",
+    "./mixins.scss": "./dist/styles/mixins.scss",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@changesets/cli": "^3.0.3",
+    "@storybook/addon-a11y": "^10.6.3",
+    "@storybook/addon-docs": "^10.6.3",
+    "@storybook/react-vite": "^10.6.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "jsdom": "^30.1.3",
+    "oxfmt": "^0.74.0",
+    "oxlint": "^1.89.0",
+    "publint": "^0.3.25",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "sass": "^1.93.2",
+    "storybook": "^10.6.3",
+    "tsdown": "^0.23.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6007 --no-open",
+    "build": "pnpm run build:js && pnpm run build:styles",
+    "build:js": "tsdown",
+    "build:styles": "node scripts/copy-styles.mjs",
+    "build:storybook": "storybook build -o storybook-static",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt --check",
+    "format:fix": "oxfmt",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check:exports": "publint && attw --pack . --exclude-entrypoints global.scss vars.scss mixins.scss",
+    "verify": "pnpm run typecheck && pnpm run lint && pnpm run test && pnpm run build && pnpm run check:exports",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm run verify && changeset publish"
+  }
 }