@phpsoftbox/react-softbox 0.2.0 → 0.3.0

package/dist/{components/Button/Button.module.css → foundations/buttons.css}

@@ -1,45 +1,73 @@
-.button {
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
   border: 1px solid var(--btn-border, rgba(30, 51, 85, 0.6));
   cursor: pointer;
   font-weight: 600;
+  font-family: inherit;
+  line-height: 1;
   padding: 12px 18px;
   border-radius: var(--radius-sm);
+  font-size: var(--font-size-3);
   background: var(--btn-bg, rgba(15, 30, 51, 0.9));
   color: var(--btn-color, var(--color-text));
   box-shadow: var(--btn-shadow, none);
   transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease,
     color 0.2s ease;
+  text-decoration: none;
 }
 
-.button:focus-visible {
+.btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.3);
 }
 
-.button:hover:not(:disabled) {
+.btn:hover:not(.btn-disabled):not(:disabled) {
   background: var(--btn-bg-hover, var(--btn-bg));
   box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
 }
 
-.button:active:not(:disabled) {
+.btn:active:not(.btn-disabled):not(:disabled) {
   transform: translateY(1px);
 }
 
-.button:disabled {
+.btn:disabled,
+.btn.btn-disabled {
   opacity: 0.6;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
-.solid {
+.btn-solid {
   transform: translateY(0);
 }
 
-.solid:hover:not(:disabled) {
+.btn-solid:hover:not(.btn-disabled):not(:disabled) {
   transform: translateY(-1px);
 }
 
-.outline,
-.ghost {
+.btn-sm {
+  padding: 8px 14px;
+  font-size: var(--font-size-2);
+  border-radius: var(--radius-xs);
+}
+
+.btn-md {
+  padding: 12px 18px;
+  font-size: var(--font-size-3);
+  border-radius: var(--radius-sm);
+}
+
+.btn-lg {
+  padding: 14px 22px;
+  font-size: var(--font-size-4);
+  border-radius: var(--radius-md);
+}
+
+.btn-outline,
+.btn-ghost {
   background: transparent;
   color: var(--btn-accent, var(--color-teal));
   border-color: var(--btn-accent, var(--color-teal));
@@ -48,16 +76,16 @@
   --btn-shadow-hover: none;
 }
 
-.ghost {
+.btn-ghost {
   border-color: transparent;
 }
 
-.outline:hover:not(:disabled),
-.ghost:hover:not(:disabled) {
+.btn-outline:hover:not(.btn-disabled):not(:disabled),
+.btn-ghost:hover:not(.btn-disabled):not(:disabled) {
   background: var(--btn-accent-soft, rgba(20, 201, 214, 0.12));
 }
 
-.variantDefault {
+.btn-default {
   --btn-accent: var(--btn-default-accent, rgba(158, 178, 204, 0.9));
   --btn-accent-soft: var(--btn-default-soft, rgba(30, 51, 85, 0.35));
   --btn-bg: linear-gradient(135deg, var(--btn-default-start, #2a3750), var(--btn-default-end, #1b263c));
@@ -68,7 +96,7 @@
   --btn-shadow-hover: 0 14px 30px rgba(10, 20, 35, 0.28);
 }
 
-.variantPrimary {
+.btn-primary {
   --btn-accent: var(--btn-primary-accent, rgba(20, 201, 214, 0.9));
   --btn-accent-soft: var(--btn-primary-soft, rgba(20, 201, 214, 0.18));
   --btn-bg: linear-gradient(135deg, var(--btn-primary-start, #14c9d6), var(--btn-primary-end, #1e63e9));
@@ -79,7 +107,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(20, 201, 214, 0.4);
 }
 
-.variantInfo {
+.btn-info {
   --btn-accent: var(--btn-info-accent, rgba(30, 99, 233, 0.9));
   --btn-accent-soft: var(--btn-info-soft, rgba(30, 99, 233, 0.18));
   --btn-bg: linear-gradient(135deg, var(--btn-info-start, #4f7bff), var(--btn-info-end, #2e5be6));
@@ -90,7 +118,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(30, 99, 233, 0.4);
 }
 
-.variantSuccess {
+.btn-success {
   --btn-accent: var(--btn-success-accent, rgba(79, 230, 163, 0.9));
   --btn-accent-soft: var(--btn-success-soft, rgba(79, 230, 163, 0.16));
   --btn-bg: linear-gradient(135deg, var(--btn-success-start, #35d092), var(--btn-success-end, #1faf75));
@@ -101,7 +129,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(79, 230, 163, 0.36);
 }
 
-.variantWarning {
+.btn-warning {
   --btn-accent: var(--btn-warning-accent, rgba(246, 200, 106, 0.95));
   --btn-accent-soft: var(--btn-warning-soft, rgba(246, 200, 106, 0.2));
   --btn-bg: linear-gradient(135deg, var(--btn-warning-start, #ffd166), var(--btn-warning-end, #f4a62a));
@@ -112,7 +140,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(246, 200, 106, 0.36);
 }
 
-.variantDanger {
+.btn-danger {
   --btn-accent: var(--btn-danger-accent, rgba(255, 107, 107, 0.95));
   --btn-accent-soft: var(--btn-danger-soft, rgba(255, 107, 107, 0.2));
   --btn-bg: linear-gradient(135deg, var(--btn-danger-start, #ff8f8f), var(--btn-danger-end, #ff5b5b));
@@ -124,7 +152,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .button {
+  .btn {
     transition: none;
   }
 }

package/dist/foundations/index.css

@@ -1,4 +1,5 @@
 @import "./tokens.css";
 @import "./typography.css";
 @import "./layout.css";
+@import "./buttons.css";
 @import "./utilities.css";

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Input } from './components/Input/Input';
 export { default as Textarea } from './components/Input/Textarea/Textarea';
 export { default as Radio } from './components/Input/Radio/Radio';
 export { default as Switch } from './components/Input/Switch/Switch';
+export { default as Checkbox } from './components/Input/Checkbox/Checkbox';
 export { default as Select } from './components/Input/Select/Select';
 export { default as Alert } from './components/Alert/Alert';
 export { default as Notifier } from './components/Notifier/Notifier';
@@ -23,6 +24,9 @@ export { default as Tabs } from './components/Tabs/Tabs';
 export { default as Progress } from './components/Progress/Progress';
 export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { default as Image } from './components/Image/Image';
+export { default as FileUploader } from './components/FileUploader/FileUploader';
+export { default as Table } from './components/Table/Table';
+export type { TableColumn, TableSortDirection, TableSortOptions, TableSortState } from './components/Table/Table';
 export { default as Text } from './components/Typography/Text';
 export { default as Heading } from './components/Typography/Heading';
 export { default as useMediaQuery } from './hooks/useMediaQuery';

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as Input } from './components/Input/Input';
 export { default as Textarea } from './components/Input/Textarea/Textarea';
 export { default as Radio } from './components/Input/Radio/Radio';
 export { default as Switch } from './components/Input/Switch/Switch';
+export { default as Checkbox } from './components/Input/Checkbox/Checkbox';
 export { default as Select } from './components/Input/Select/Select';
 export { default as Alert } from './components/Alert/Alert';
 export { default as Notifier } from './components/Notifier/Notifier';
@@ -23,6 +24,8 @@ export { default as Tabs } from './components/Tabs/Tabs';
 export { default as Progress } from './components/Progress/Progress';
 export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { default as Image } from './components/Image/Image';
+export { default as FileUploader } from './components/FileUploader/FileUploader';
+export { default as Table } from './components/Table/Table';
 export { default as Text } from './components/Typography/Text';
 export { default as Heading } from './components/Typography/Heading';
 export { default as useMediaQuery } from './hooks/useMediaQuery';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/docs/README.md

@@ -28,7 +28,7 @@ import { Button, Card, Menu } from '@phpsoftbox/react-softbox';
 
 - `layout.md` — Grid, Flex, утилиты
 - `navigation.md` — Menu, Dropdown, CollapseButton
-- `forms.md` — Input (Field/Select/FloatLabel), Switch, Radio
+- `forms.md` — Input (Field/Select/FloatLabel), Switch, Radio, Checkbox, FileUploader
 - `overlays.md` — Modal, Drawer
 - `feedback.md` — Badge, Alert, Notifier
 - `card.md` — Card и его секции

package/docs/forms.md

@@ -41,6 +41,13 @@
 <Input.Radio name="mode" label="Резервный" />
 ```
 
+## Checkbox
+
+```tsx
+<Input.Checkbox label="Согласен с условиями" />
+<Input.Checkbox label="Премиум" description="Расширенные права" />
+```
+
 ## Switch
 
 ```tsx
@@ -173,3 +180,23 @@ const options = [
   </Input.Group>
 </Input>
 ```
+
+## FileUploader
+
+```tsx
+<FileUploader
+  allowedTypes={['.jpg', '.png', '.pdf']}
+  maxFileSizeKb={2048}
+  multiple
+  showPreview
+  onChange={(files) => console.log(files)}
+  onUpload={(files) => api.upload(files)}
+/>;
+```
+
+Параметры:
+- `allowedTypes` — допустимые типы (расширения `.png` или MIME `image/*`)
+- `maxFileSizeKb` — ограничение размера
+- `multiple` — разрешить множественный выбор
+- `showPreview` — превью для изображений
+- `onUpload` — колбэк загрузки (опционально)

package/docs/layout.md

@@ -52,3 +52,19 @@
 - `p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`
 - `m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`
 - `gap-`
+
+## Классы кнопок
+
+Глобальные классы для кнопок, которые можно применять к `a`/`button`.
+
+```tsx
+<a className="btn btn-primary btn-solid" href="/create">Создать</a>
+<a className="btn btn-info btn-outline" href="/details">Подробнее</a>
+<button className="btn btn-danger btn-ghost">Удалить</button>
+```
+
+Доступны:
+- базовый класс: `btn`
+- варианты: `btn-default`, `btn-primary`, `btn-info`, `btn-success`, `btn-warning`, `btn-danger`
+- внешность: `btn-solid`, `btn-outline`, `btn-ghost`
+- размеры: `btn-sm`, `btn-md`, `btn-lg`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phpsoftbox/react-softbox",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,6 +42,10 @@
     "axios": "^1.12.2"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "typescript": "^5.9.3"