@infomaximum/ui-kit 0.9.1 → 0.10.0

package/LICENSE

@@ -186,7 +186,7 @@ APPENDIX: How to apply the Apache License to your work.
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-Copyright [yyyy] [name of copyright owner]
+Copyright 2025 Infomaximum
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FormProps, WithItem } from './Form.types';
+export declare const Form: FC<FormProps> & WithItem;

package/dist/components/Form/Form.js

@@ -0,0 +1,12 @@
+import { FormItem } from "./components/FormItem/FormItem.js";
+const FormComponent = (props) => {
+  const {
+    children
+  } = props;
+  return children;
+};
+const Form = FormComponent;
+FormComponent.Item = FormItem;
+export {
+  Form
+};

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

@@ -0,0 +1,7 @@
+import { ComponentType, PropsWithChildren } from 'react';
+import { FormItemProps } from './components/FormItem/FormItem.types';
+export interface FormProps extends PropsWithChildren {
+}
+export interface WithItem {
+    Item: ComponentType<FormItemProps>;
+}

package/dist/components/Form/components/FormItem/FormItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FormItemProps } from './FormItem.types';
+export declare const FormItem: FC<FormItemProps>;

package/dist/components/Form/components/FormItem/FormItem.js

@@ -0,0 +1,17 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { FormItemContext } from "./contexts/FormItemContext.js";
+const FormItemComponent = (props) => {
+  const {
+    validateStatus,
+    children
+  } = props;
+  const contextValue = useMemo(() => ({
+    status: validateStatus
+  }), [validateStatus]);
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: contextValue, children });
+};
+const FormItem = FormItemComponent;
+export {
+  FormItem
+};

package/dist/components/Form/components/FormItem/FormItem.types.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type ValidateStatus = "success" | "error";
+export interface FormItemProps extends PropsWithChildren {
+    validateStatus?: ValidateStatus;
+}

package/dist/components/Form/components/FormItem/contexts/FormItemContext.d.ts

@@ -0,0 +1,5 @@
+import { ValidateStatus } from '../FormItem.types';
+export interface FormItemContext {
+    status?: ValidateStatus;
+}
+export declare const FormItemContext: import('react').Context<FormItemContext>;

package/dist/components/Form/components/FormItem/contexts/FormItemContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const FormItemContext = createContext({});
+export {
+  FormItemContext
+};

package/dist/components/Form/index.d.ts

@@ -0,0 +1,3 @@
+export { Form } from './Form';
+export type { FormProps } from './Form.types';
+export type { FormItemProps } from './components/FormItem/FormItem.types';

package/dist/components/InternalPicker/pickers/RangePicker/RangePicker.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from "react";
+import { forwardRef, useContext, memo } from "react";
 import { RangePicker as RangePicker$1 } from "rc-picker";
 import { ClassNames } from "@emotion/react";
 import { getPickerTokens } from "../../tokens.js";
@@ -9,6 +9,7 @@ import { getRangeSelectorStyle } from "../../styles/RangeSelector.styles.js";
 import dayjs from "dayjs";
 import { getFormatByPicker, defaultProps } from "../SinglePicker/SinglePicker.utils.js";
 import { getRangePlaceholder } from "./RangePicker.utils.js";
+import { FormItemContext } from "../../../Form/components/FormItem/contexts/FormItemContext.js";
 import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
 import { useConfig } from "../../../ConfigProvider/hooks/useConfig/useConfig.js";
 import { useComponents } from "../hooks/useComponents/useComponents.js";
@@ -19,6 +20,7 @@ const RangePickerComponent = forwardRef((props, ref) => {
   const {
     components: componentsProp,
     placeholder,
+    status: statusProp,
     ...rest
   } = props;
   const theme = useTheme();
@@ -31,13 +33,19 @@ const RangePickerComponent = forwardRef((props, ref) => {
   } = useComponents({
     components: componentsProp
   });
+  const {
+    status: contextStatus
+  } = useContext(FormItemContext);
+  const status = statusProp || contextStatus;
   return /* @__PURE__ */ jsx(ClassNames, { children: ({
     css,
     cx
   }) => {
     var _a;
     return /* @__PURE__ */ jsx(RangePicker$1, { ref, locale, placeholder: getRangePlaceholder(locale, rest.picker, placeholder), separator: defaultSeparator, format: getFormatByPicker(rest.picker, Boolean(rest.showTime)), ...defaultProps, ...rest, components, prefixCls, className: cx(css(getRangeSelectorStyle(pickerTokens)(theme)), {
-      [`${prefixCls}-error-status`]: rest.status === "error"
+      [`${prefixCls}-success-status`]: status === "success"
+    }, {
+      [`${prefixCls}-error-status`]: status === "error"
     }, rest.className), classNames: {
       popup: cx(css(getPopupStyle(pickerTokens)(theme)), (_a = rest.classNames) == null ? void 0 : _a.popup)
     } });

package/dist/components/InternalPicker/pickers/RangePicker/RangePicker.utils.js

@@ -3,9 +3,12 @@ const getRangePlaceholder = (locale, picker, placeholder) => {
   if (placeholder) {
     return placeholder;
   }
-  if (isNull(placeholder) || !picker) {
+  if (isNull(placeholder)) {
     return;
   }
+  if (!picker) {
+    return locale.rangeDatePlaceholder;
+  }
   return locale[`range${capitalize(picker)}Placeholder`];
 };
 export {

package/dist/components/InternalPicker/pickers/SinglePicker/SinglePicker.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from "react";
+import { forwardRef, useContext, memo } from "react";
 import { Picker } from "rc-picker";
 import { ClassNames } from "@emotion/react";
 import { getPickerTokens } from "../../tokens.js";
@@ -9,6 +9,7 @@ import { getPopupStyle } from "../../styles/Popup.styles.js";
 import { getSingleSelectorStyle } from "../../styles/SingleSelector.styles.js";
 import dayjs from "dayjs";
 import { getSinglePlaceholder, getFormatByPicker, defaultProps } from "./SinglePicker.utils.js";
+import { FormItemContext } from "../../../Form/components/FormItem/contexts/FormItemContext.js";
 import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
 import { useConfig } from "../../../ConfigProvider/hooks/useConfig/useConfig.js";
 import { useComponents } from "../hooks/useComponents/useComponents.js";
@@ -18,6 +19,7 @@ const SinglePickerComponent = forwardRef((props, ref) => {
   const {
     components: componentsProp,
     placeholder,
+    status: statusProp,
     ...rest
   } = props;
   const theme = useTheme();
@@ -30,13 +32,19 @@ const SinglePickerComponent = forwardRef((props, ref) => {
   } = useComponents({
     components: componentsProp
   });
+  const {
+    status: contextStatus
+  } = useContext(FormItemContext);
+  const status = statusProp || contextStatus;
   return /* @__PURE__ */ jsx(ClassNames, { children: ({
     css,
     cx
   }) => {
     var _a;
     return /* @__PURE__ */ jsx(Picker, { ref, locale, placeholder: getSinglePlaceholder(locale, rest.picker, placeholder), format: getFormatByPicker(rest.picker, Boolean(rest.showTime)), ...defaultProps, ...rest, components, prefixCls, className: cx(css(getSingleSelectorStyle(pickerTokens)(theme)), {
-      [`${prefixCls}-error-status`]: rest.status === "error"
+      [`${prefixCls}-success-status`]: status === "success"
+    }, {
+      [`${prefixCls}-error-status`]: status === "error"
     }, rest.className), classNames: {
       popup: cx(css(getPopupStyle(pickerTokens)(theme)), (_a = rest.classNames) == null ? void 0 : _a.popup)
     } });

package/dist/components/InternalPicker/pickers/SinglePicker/SinglePicker.utils.js

@@ -89,9 +89,12 @@ const getSinglePlaceholder = (locale, picker, placeholder) => {
   if (placeholder) {
     return placeholder;
   }
-  if (isNull(placeholder) || !picker) {
+  if (isNull(placeholder)) {
     return;
   }
+  if (!picker) {
+    return locale.datePlaceholder;
+  }
   return locale[`${picker}Placeholder`];
 };
 export {

package/dist/components/InternalPicker/styles/Popup.styles.d.ts

@@ -1000,7 +1000,6 @@ export declare const getPopupStyle: (pickerTokens: PickerTokens) => (theme: Them
         readonly color: "#BFBFBF";
     };
     ".picker-time-panel-column": {
-        readonly scrollbarWidth: "thin";
         readonly boxSizing: "border-box";
         readonly listStyle: "none";
         readonly margin: "4px 0";

package/dist/components/InternalPicker/styles/RangeSelector.styles.d.ts

@@ -58,6 +58,7 @@ export declare const getRangeSelectorStyle: (pickerTokens: PickerTokens) => (the
     ".picker-input > input": {
         "::placeholder": {
             color: "#BFBFBF";
+            textOverflow: string;
         };
         fontFamily: "Roboto";
         fontSize: 14;

package/dist/components/InternalPicker/styles/SingleSelector.styles.d.ts

@@ -30,6 +30,7 @@ export declare const getSingleSelectorStyle: (pickerTokens: PickerTokens) => (th
     ".picker-input > input": {
         "::placeholder": {
             color: "#BFBFBF";
+            textOverflow: string;
         };
         fontFamily: "Roboto";
         fontSize: 14;

package/dist/components/InternalPicker/styles/SingleSelector.styles.js

@@ -52,7 +52,8 @@ const getPickerInputStyle = (pickerTokens, theme) => ({
     background: "inherit",
     ...theme.typography.body2,
     "::placeholder": {
-      color: pickerTokens.pickerPlaceholder
+      color: pickerTokens.pickerPlaceholder,
+      textOverflow: "unset"
     }
   },
   [`.${prefixCls}-input > input:placeholder-shown`]: {

package/dist/components/InternalPicker/styles/TimePanel.styles.d.ts

@@ -22,7 +22,6 @@ export declare const getPickerTimePanelStyle: (pickerTokens: PickerTokens, theme
         readonly color: "#BFBFBF";
     };
     ".picker-time-panel-column": {
-        readonly scrollbarWidth: "thin";
         readonly boxSizing: "border-box";
         readonly listStyle: "none";
         readonly margin: "4px 0";

package/dist/components/InternalPicker/styles/TimePanel.styles.js

@@ -15,8 +15,6 @@ const getPickerTimePanelContentStyle = () => ({
 });
 const getPickerTimePanelColumnStyle = (pickerTokens, theme) => ({
   [`.${prefixCls}-time-panel-column`]: {
-    scrollbarWidth: "thin",
-    // TODO: пока непонятно, на чьей стороне стилизация скролла, пока без задачи.
     boxSizing: "border-box",
     listStyle: "none",
     margin: `${theme.paddingXS}px 0`,

package/dist/index.d.ts

@@ -37,4 +37,5 @@ export type { AvatarProps } from './components/Avatar';
 export { Tag } from './components/Tag';
 export type { TagProps, CheckableProps } from './components/Tag';
 export { ConfigProvider, useConfig, type Locale } from './components/ConfigProvider';
-export type { PickerLocale } from './components/InternalPicker';
+export type { PickerLocale, RangePickerProps } from './components/InternalPicker';
+export { type FormProps, type FormItemProps, Form } from './components/Form';

package/dist/index.js

@@ -24,6 +24,7 @@ import { Avatar } from "./components/Avatar/Avatar.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { ConfigProvider } from "./components/ConfigProvider/ConfigProvider.js";
 import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig.js";
+import { Form } from "./components/Form/Form.js";
 export {
   Alert,
   Avatar,
@@ -32,6 +33,7 @@ export {
   ConfigProvider,
   DatePicker,
   Dropdown,
+  Form,
   Input,
   InputNumber,
   LoadingOutlined,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",