@phpsoftbox/react-softbox 0.3.0 → 0.4.1

package/README.md

@@ -9,7 +9,39 @@ import '@phpsoftbox/react-softbox/foundations/index.css';
 ```
 
 ```ts
-import { Alert, Badge, Breadcrumbs, Button, Card, CollapseButton, Drawer, Dropdown, FloatLabel, FormField, Grid, Heading, Image, Input, Menu, Modal, Notifier, Pagination, Progress, Radio, Row, Select, Stack, Switch, Tabs, Text, Textarea } from '@phpsoftbox/react-softbox';
+import {
+  Alert,
+  Badge,
+  Breadcrumbs,
+  Button,
+  Card,
+  Checkbox,
+  CollapseButton,
+  Drawer,
+  Dropdown,
+  FileUploader,
+  FloatLabel,
+  FormField,
+  Grid,
+  Heading,
+  Image,
+  Input,
+  Menu,
+  Modal,
+  Notifier,
+  Pagination,
+  Progress,
+  Radio,
+  Row,
+  Select,
+  Stack,
+  Switch,
+  Table,
+  Tabs,
+  Text,
+  Textarea,
+  Tooltip,
+} from '@phpsoftbox/react-softbox';
 ```
 
 ## Тема
@@ -27,6 +59,8 @@ setThemeMode('dark');
 - `docs/layout.md`
 - `docs/navigation.md`
 - `docs/forms.md`
+- `docs/table.md`
+- `docs/tooltip.md`
 - `docs/overlays.md`
 - `docs/feedback.md`
 - `docs/card.md`
@@ -62,6 +96,7 @@ yarn build
 <Button variant="primary">Primary</Button>
 <Button variant="info" appearance="outline">Info</Button>
 <Button variant="danger" appearance="ghost">Danger</Button>
+<Button variant="primary" size="sm">Small</Button>
 ```
 
 ### Input / FloatLabel
@@ -84,6 +119,7 @@ yarn build
 ```tsx
 <Textarea placeholder="Комментарий" />
 <Radio name="mode" label="Основной" />
+<Checkbox label="Согласен с условиями" />
 ```
 
 ### Switch
@@ -99,6 +135,50 @@ yarn build
 <Select label="Сервисы" options={options} multiple searchable />
 ```
 
+### Table
+
+```tsx
+const columns = [
+  { id: 'name', header: 'Название', accessor: 'name' },
+  { id: 'amount', header: 'Сумма', accessor: 'amount', align: 'right', sortable: true },
+];
+
+<Table columns={columns} data={rows} />;
+```
+
+```tsx
+<Table
+  columns={columns}
+  data={rows}
+  selection={{
+    selectedIds,
+    onToggle: (id) => setSelected((prev) => prev.includes(id) ? prev.filter((key) => key !== id) : [...prev, id]),
+    onToggleAll: (ids) => setSelected((prev) => ids.length > 0 && ids.every((id) => prev.includes(id)) ? [] : ids),
+  }}
+  renderBulkAction={(ids) => <span>Выбрано: {ids.length}</span>}
+/>;
+```
+
+### FileUploader
+
+```tsx
+<FileUploader
+  allowedTypes={['.jpg', '.png', '.pdf']}
+  maxFileSizeKb={2048}
+  multiple
+  showPreview
+  onUpload={(files) => api.upload(files)}
+/>;
+```
+
+### Tooltip
+
+```tsx
+<Tooltip content="Подсказка">
+  <Button>Наведи</Button>
+</Tooltip>
+```
+
 ### Grid / Flex
 
 ```tsx

package/dist/components/Badge/Badge.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { UiVariant } from '../../types';
 type BadgeVariant = UiVariant;
+type BadgeSize = 'sm' | 'md' | 'lg';
 type Props = React.HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
+    size?: BadgeSize;
 };
-export default function Badge({ variant, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Badge({ variant, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Badge/Badge.js

@@ -8,8 +8,13 @@ const classMap = {
     warning: styles.warning,
     danger: styles.danger,
 };
-export default function Badge({ variant = 'default', className, ...props }) {
-    const classes = [styles.badge, classMap[variant], className].filter(Boolean).join(' ');
+const sizeMap = {
+    sm: styles.sizeSm,
+    md: styles.sizeMd,
+    lg: styles.sizeLg,
+};
+export default function Badge({ variant = 'default', size = 'md', className, ...props }) {
+    const classes = [styles.badge, classMap[variant], sizeMap[size], className].filter(Boolean).join(' ');
     return _jsx("span", { className: classes, ...props });
 }
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AASxC,MAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAC/E,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvF,OAAO,eAAM,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACjD,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAWxC,MAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM;CACtB,CAAC;AAEF,MAAM,OAAO,GAA8B;IACzC,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAC5F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtG,OAAO,eAAM,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACjD,CAAC"}

package/dist/components/Badge/Badge.module.css

@@ -5,11 +5,29 @@
   padding: 4px 10px;
   border-radius: 999px;
   font-size: 12px;
+  line-height: 1;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border: 1px solid transparent;
 }
 
+.sizeSm {
+  padding: 2px 8px;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+}
+
+.sizeMd {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.sizeLg {
+  padding: 6px 12px;
+  font-size: 13px;
+  letter-spacing: 0.07em;
+}
+
 .default {
   background: var(--badge-default-bg, #1e3355);
   color: var(--badge-default-color, var(--color-muted));

package/dist/components/Input/ErrorTooltip/ErrorTooltip.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type TooltipPlacement, type TooltipVariant } from '../../Tooltip/Tooltip';
+type Props = {
+    content: React.ReactNode;
+    placement?: TooltipPlacement;
+    variant?: TooltipVariant;
+    target?: 'icon' | 'input';
+    icon?: React.ReactNode;
+    className?: string;
+};
+export default function ErrorTooltip({ content, placement, variant, target, icon, className, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Input/ErrorTooltip/ErrorTooltip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import Tooltip from '../../Tooltip/Tooltip';
+import { useFormFieldContext } from '../FormField/FormField';
+import styles from './ErrorTooltip.module.css';
+export default function ErrorTooltip({ content, placement = 'right', variant = 'danger', target = 'icon', icon = '!', className, }) {
+    const context = useFormFieldContext();
+    React.useEffect(() => {
+        if (target !== 'icon') {
+            return;
+        }
+        if (!context?.registerErrorTooltip) {
+            return;
+        }
+        return context.registerErrorTooltip();
+    }, [context, target]);
+    if (target === 'input') {
+        if (!context?.fieldId) {
+            return null;
+        }
+        return (_jsx(Tooltip, { content: content, placement: placement, variant: variant, anchorId: context.fieldId, openOnHover: true, openOnFocus: true }));
+    }
+    return (_jsx(Tooltip, { content: content, placement: placement, variant: variant, openOnHover: true, openOnFocus: true, children: _jsx("button", { type: "button", className: [styles.icon, styles.iconButton, className].filter(Boolean).join(' '), "aria-label": "\u041E\u0448\u0438\u0431\u043A\u0430", children: icon }) }));
+}
+//# sourceMappingURL=ErrorTooltip.js.map

package/dist/components/Input/ErrorTooltip/ErrorTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTooltip.js","sourceRoot":"","sources":["../../../../src/components/Input/ErrorTooltip/ErrorTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAuD,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAW/C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAO,EACP,SAAS,GAAG,OAAO,EACnB,OAAO,GAAG,QAAQ,EAClB,MAAM,GAAG,MAAM,EACf,IAAI,GAAG,GAAG,EACV,SAAS,GACH;IACN,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IAEtC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,OAAO,EAAE,oBAAoB,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QACD,OAAO,OAAO,CAAC,oBAAoB,EAAE,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtB,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,KAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,OAAO,EACzB,WAAW,QACX,WAAW,SACX,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,QAAC,WAAW,kBACxF,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAa,sCAAQ,YACxH,IAAI,GACE,GACD,CACX,CAAC;AACJ,CAAC"}

package/dist/components/Input/ErrorTooltip/ErrorTooltip.module.css

@@ -0,0 +1,31 @@
+.icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(255, 107, 107, 0.16);
+  border: 1px solid rgba(255, 107, 107, 0.6);
+  color: #ff8f8f;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  pointer-events: auto;
+}
+
+.iconButton {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.content {
+  max-width: 240px;
+}

package/dist/components/Input/Field.js

@@ -8,7 +8,14 @@ const InputField = React.forwardRef(({ hasError, className, ...props }, ref) =>
     const generatedId = React.useId();
     const resolvedId = props.id ?? context?.fieldId ?? (props.name ? buildIdFromName(props.name) : generatedId);
     const autoComplete = props.autoComplete ?? 'off';
-    const classes = [styles.input, hasError ? styles.error : null, className].filter(Boolean).join(' ');
+    const classes = [
+        styles.input,
+        hasError ? styles.error : null,
+        context?.hasErrorTooltip ? styles.withErrorTooltip : null,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
     if (process.env.NODE_ENV !== 'production') {
         if (!props.id && !props.name) {
             // eslint-disable-next-line no-console

package/dist/components/Input/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Input/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAM5D,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC;AAE1F,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAA0B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtG,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAClC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,IAAI,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC5G,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC;IACjD,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpG,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAC7B,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEtC,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;AACxG,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Input/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAM5D,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC;AAE1F,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAA0B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtG,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAClC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,IAAI,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC5G,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC;IACjD,MAAM,OAAO,GAAG;QACd,MAAM,CAAC,KAAK;QACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC9B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI;QACzD,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAC7B,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEtC,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;AACxG,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,UAAU,CAAC"}

package/dist/components/Input/FloatLabel/FloatLabel.module.css

@@ -8,7 +8,8 @@
   left: 16px;
   top: 16px;
   color: var(--color-muted-2);
-  font-size: 13px;
+  font-size: var(--ui-control-font-size, var(--font-size-3));
+  line-height: 1.2;
   letter-spacing: 0.02em;
   transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
   pointer-events: none;
@@ -50,6 +51,7 @@
 
 .wrapper > input,
 .wrapper > textarea {
-  padding-top: 22px;
-  padding-bottom: 12px;
+  min-height: var(--ui-control-height, 48px);
+  padding-top: calc(var(--ui-control-padding-y, 12px) + 6px);
+  padding-bottom: calc(var(--ui-control-padding-y, 12px) - 2px);
 }

package/dist/components/Input/FormField/FormField.d.ts

@@ -23,6 +23,8 @@ type FormFieldContextValue = {
     fieldId?: string;
     fieldName?: string;
     registerField: (id: string, name?: string) => void;
+    registerErrorTooltip?: () => () => void;
+    hasErrorTooltip?: boolean;
 };
 export declare const useFormFieldContext: () => FormFieldContextValue | null;
 declare const FormField: FormFieldComponent;

package/dist/components/Input/FormField/FormField.js

@@ -16,12 +16,17 @@ const labelAlignMap = {
 function FormFieldRoot({ layout = 'column', gap = '8px', labelWidth, align = 'start', labelAlign = 'left', className, style, ...props }) {
     const [fieldId, setFieldId] = React.useState(undefined);
     const [fieldName, setFieldName] = React.useState(undefined);
+    const [errorTooltipCount, setErrorTooltipCount] = React.useState(0);
     const registerField = React.useCallback((id, name) => {
         setFieldId(id);
         if (name) {
             setFieldName(name);
         }
     }, []);
+    const registerErrorTooltip = React.useCallback(() => {
+        setErrorTooltipCount((prev) => prev + 1);
+        return () => setErrorTooltipCount((prev) => Math.max(prev - 1, 0));
+    }, []);
     const classes = [styles.field, layout === 'row' ? styles.fieldRow : null, className]
         .filter(Boolean)
         .join(' ');
@@ -32,7 +37,13 @@ function FormFieldRoot({ layout = 'column', gap = '8px', labelWidth, align = 'st
         ['--ui-field-align']: alignMap[align],
         ['--ui-label-align']: labelAlignMap[labelAlign],
     };
-    return (_jsx(FormFieldContext.Provider, { value: { fieldId, fieldName, registerField }, children: _jsx("div", { className: classes, style: inlineStyle, ...props }) }));
+    return (_jsx(FormFieldContext.Provider, { value: {
+            fieldId,
+            fieldName,
+            registerField,
+            registerErrorTooltip,
+            hasErrorTooltip: errorTooltipCount > 0,
+        }, children: _jsx("div", { className: classes, style: inlineStyle, ...props }) }));
 }
 function FormFieldLabel({ className, ...props }) {
     const context = useFormFieldContext();

package/dist/components/Input/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../../src/components/Input/FormField/FormField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../../src/components/Input/FormField/FormField.tsx"],"names":[],"mappings":"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"}

package/dist/components/Input/FormField/FormField.module.css

@@ -22,6 +22,7 @@
 .control {
   flex: 1;
   min-width: 0;
+  position: relative;
 }
 
 .error {

package/dist/components/Input/Input.d.ts

@@ -10,6 +10,7 @@ import DateRangePicker from './DateRangePicker';
 import Radio from './Radio/Radio';
 import Switch from './Switch/Switch';
 import Checkbox from './Checkbox/Checkbox';
+import ErrorTooltip from './ErrorTooltip/ErrorTooltip';
 declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivElement> & {
     layout?: "row" | "column";
     gap?: number | string;
@@ -44,6 +45,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
     Radio: typeof Radio;
     Switch: typeof Switch;
     Checkbox: typeof Checkbox;
+    ErrorTooltip: typeof ErrorTooltip;
     FormField: import("react").FC<import("react").HTMLAttributes<HTMLDivElement> & {
         layout?: "row" | "column";
         gap?: number | string;

package/dist/components/Input/Input.js

@@ -12,6 +12,7 @@ import DateRangePicker from './DateRangePicker';
 import Radio from './Radio/Radio';
 import Switch from './Switch/Switch';
 import Checkbox from './Checkbox/Checkbox';
+import ErrorTooltip from './ErrorTooltip/ErrorTooltip';
 const Input = Object.assign(FormField, {
     Label: FormField.Label,
     Control: FormField.Control,
@@ -30,6 +31,7 @@ const Input = Object.assign(FormField, {
     Radio,
     Switch,
     Checkbox,
+    ErrorTooltip,
     FormField,
 });
 export default Input;

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,SAAS,CAAC;AACjC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACrC,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,OAAO,EAAE,SAAS,CAAC,OAAO;IAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ;IAC5B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,QAAQ;IAClB,MAAM;IACN,UAAU;IACV,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,UAAU;IACjB,WAAW;IACX,MAAM,EAAE,WAAW;IACnB,UAAU;IACV,UAAU;IACV,SAAS,EAAE,eAAe;IAC1B,KAAK;IACL,MAAM;IACN,QAAQ;IACR,SAAS;CACV,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,SAAS,CAAC;AACjC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAEvD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACrC,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,OAAO,EAAE,SAAS,CAAC,OAAO;IAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ;IAC5B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,QAAQ;IAClB,MAAM;IACN,UAAU;IACV,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,UAAU;IACjB,WAAW;IACX,MAAM,EAAE,WAAW;IACnB,UAAU;IACV,UAAU;IACV,SAAS,EAAE,eAAe;IAC1B,KAAK;IACL,MAAM;IACN,QAAQ;IACR,YAAY;IACZ,SAAS;CACV,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/components/Input/Input.module.css

@@ -1,13 +1,20 @@
 .input {
   width: 100%;
-  padding: 16px 16px;
+  min-height: var(--ui-control-height, 48px);
+  padding: var(--ui-control-padding-y, 12px) var(--ui-control-padding-x, 16px);
   border-radius: var(--radius-sm);
   border: 1px solid rgba(30, 99, 233, 0.25);
   background: var(--surface-input);
   color: var(--color-text);
+  font-size: var(--ui-control-font-size, var(--font-size-4));
+  line-height: var(--ui-control-line-height, 1.2);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
+.withErrorTooltip {
+  padding-right: calc(var(--ui-control-padding-x, 16px) + 26px);
+}
+
 .input:focus {
   outline: none;
   border-color: rgba(20, 201, 214, 0.8);

package/dist/components/Input/Select/Select.d.ts

@@ -1,37 +1,76 @@
-export type SelectOption = {
-    value: string;
+export type SelectOptionValue = string | number | null;
+export type SelectOption<T extends string | number = string | number> = {
+    value: T;
     label: string;
     disabled?: boolean;
 };
-type RequestConfig = {
+type RequestConfig<T extends string | number = string | number> = {
     url: string;
     method?: 'get' | 'post';
     params?: Record<string, unknown>;
     data?: Record<string, unknown>;
-    mapOptions?: (data: unknown) => SelectOption[];
+    mapOptions?: (data: unknown) => SelectOption<T>[];
 };
-type Props = {
+type SharedProps<T extends string | number> = {
     label?: string;
     id?: string;
     name?: string;
-    options?: SelectOption[];
-    value?: string | string[];
-    defaultValue?: string | string[];
+    options?: SelectOption<T>[];
     placeholder?: string;
     multiple?: boolean;
     searchable?: boolean;
+    clearable?: boolean;
+    clearLabel?: string;
+    allowEmptyValue?: boolean;
+    emptyOptionLabel?: string;
+    emptyOptionValue?: T | null;
     loadingText?: string;
     emptyText?: string;
-    loadOptions?: (query: string) => Promise<SelectOption[]>;
-    request?: RequestConfig;
-    onAfterRequest?: (options: SelectOption[], query: string) => void;
+    loadOptions?: (query: string) => Promise<SelectOption<T>[]>;
+    request?: RequestConfig<T>;
+    onAfterRequest?: (options: SelectOption<T>[], query: string) => void;
     placement?: 'auto' | 'down' | 'up';
     disabled?: boolean;
     floatLabel?: boolean;
     className?: string;
-    onChange?: (value: string | string[], options: SelectOption[]) => void;
 };
-declare function Select({ label, id, name, options, value, defaultValue, placeholder, multiple, searchable, loadingText, emptyText, loadOptions, request, onAfterRequest, placement, disabled, floatLabel, className, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+type SingleProps<T extends string | number> = SharedProps<T> & {
+    multiple?: false;
+    clearable?: false;
+    allowEmptyValue?: false;
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T, options: SelectOption<T>[]) => void;
+};
+type SingleClearableProps<T extends string | number> = SharedProps<T> & {
+    multiple?: false;
+    clearable: true;
+    allowEmptyValue?: false;
+    value?: T | undefined;
+    defaultValue?: T | undefined;
+    onChange?: (value: T | undefined, options: SelectOption<T>[]) => void;
+};
+type SingleAllowEmptyProps<T extends string | number> = SharedProps<T> & {
+    multiple?: false;
+    allowEmptyValue: true;
+    clearable?: boolean;
+    value?: T | null | undefined;
+    defaultValue?: T | null | undefined;
+    emptyOptionValue?: T | null;
+    onChange?: (value: T | null | undefined, options: Array<SelectOption<T> | {
+        value: T | null;
+        label: string;
+        disabled?: boolean;
+    }>) => void;
+};
+type MultiProps<T extends string | number> = SharedProps<T> & {
+    multiple: true;
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[], options: SelectOption<T>[]) => void;
+};
+type Props<T extends string | number> = SingleProps<T> | SingleClearableProps<T> | SingleAllowEmptyProps<T> | MultiProps<T>;
+declare function Select<T extends string | number = string | number>({ label, id, name, options, value, defaultValue, placeholder, multiple, searchable, clearable, clearLabel, allowEmptyValue, emptyOptionLabel, emptyOptionValue, loadingText, emptyText, loadOptions, request, onAfterRequest, placement, disabled, floatLabel, className, onChange, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Select {
     var supportsFloatLabel: boolean;
 }