@astral/ui 4.0.0-alpha.32 → 4.0.0-alpha.33

package/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { InputGroupProps } from './types';
+export declare const InputGroup: ({ children, columns }: InputGroupProps) => JSX.Element;

package/components/InputGroup/InputGroup.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputsWrapper } from './styles';
+import { useLogic } from './useLogic';
+export const InputGroup = ({ children, columns }) => {
+    const { gridColumnTemplate } = useLogic({ children, columns });
+    return (_jsx(InputsWrapper, { "$columnsTemplate": gridColumnTemplate(), children: children }));
+};

package/components/InputGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InputGroup';
+export type { InputGroupProps } from './types';

package/components/InputGroup/index.js

@@ -0,0 +1 @@
+export * from './InputGroup';

package/components/InputGroup/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const InputsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $columnsTemplate: string;
+}, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;

package/components/InputGroup/styles.js

@@ -0,0 +1,88 @@
+import { formControlClasses, inputBaseClasses } from '@mui/material';
+import { styled } from '../styles';
+export const InputsWrapper = styled.fieldset `
+  display: grid;
+  grid-template-columns: ${({ $columnsTemplate }) => $columnsTemplate};
+
+  margin-inline: 0;
+  padding: 0;
+
+  border: unset;
+
+  & .${formControlClasses.root} {
+    width: 100%;
+
+    .${inputBaseClasses.root} {
+      position: relative;
+      z-index: 2;
+
+      border-radius: 0;
+
+      &.${inputBaseClasses.focused} {
+        z-index: 4;
+      }
+    }
+  }
+
+  /* Скругления только крайних инпутов */
+  & > :first-child .${inputBaseClasses.root} {
+    border-top-left-radius: ${({ theme }) => theme.shape.medium};
+    border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
+    
+    &.${inputBaseClasses.disabled} {
+      z-index: 1;
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        right: 0;
+
+        width: 1px;
+        height: 100%;
+
+        background-color: ${({ theme }) => theme.palette.grey[500]};
+      }
+    }
+  }
+
+  & > :last-child .${inputBaseClasses.root} {
+    border-top-right-radius: ${({ theme }) => theme.shape.medium};
+    border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
+  }
+
+  & > :not(:first-child) .${inputBaseClasses.root} {
+    &.${inputBaseClasses.disabled} {
+      z-index: 1;
+ 
+    
+    &::after {
+        content: '';
+  
+        position: absolute;
+        left: 0;
+  
+        width: 1px;
+        height: 100%;
+  
+        background-color: ${({ theme }) => theme.palette.grey[500]};
+      }
+    }
+  
+  }
+  
+  & > :not(:last-child) .${inputBaseClasses.root} {
+    width: auto;
+    margin-right: -2px;
+    
+    &:hover {
+      z-index: 3;
+      
+      &.${inputBaseClasses.disabled} {
+        z-index: 1;
+      }
+    }
+  }
+
+  
+`;

package/components/InputGroup/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export type InputGroupProps = {
+    children: ReactNode;
+    /**
+     * Определяет шаблон колонок для grid группы инпутов
+     * @example
+     *  columns={['300px', '1fr', '30%]}
+     */
+    columns?: string[];
+};

package/components/InputGroup/types.js

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

package/components/InputGroup/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/InputGroup/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/InputGroup/useLogic/useLogic.d.ts

@@ -0,0 +1,6 @@
+import type { InputGroupProps } from '../types';
+type UseLogicParams = InputGroupProps;
+export declare const useLogic: ({ children, columns }: UseLogicParams) => {
+    gridColumnTemplate: () => string;
+};
+export {};

package/components/InputGroup/useLogic/useLogic.js

@@ -0,0 +1,11 @@
+import { Children } from 'react';
+export const useLogic = ({ children, columns }) => {
+    const gridColumnTemplate = () => {
+        if (columns) {
+            return columns.join(' ');
+        }
+        const childrenCount = Children.count(children);
+        return `repeat(${childrenCount}, 1fr)`;
+    };
+    return { gridColumnTemplate };
+};

package/node/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { InputGroupProps } from './types';
+export declare const InputGroup: ({ children, columns }: InputGroupProps) => JSX.Element;

package/node/components/InputGroup/InputGroup.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const InputGroup = ({ children, columns }) => {
+    const { gridColumnTemplate } = (0, useLogic_1.useLogic)({ children, columns });
+    return ((0, jsx_runtime_1.jsx)(styles_1.InputsWrapper, { "$columnsTemplate": gridColumnTemplate(), children: children }));
+};
+exports.InputGroup = InputGroup;

package/node/components/InputGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InputGroup';
+export type { InputGroupProps } from './types';

package/node/components/InputGroup/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InputGroup"), exports);

package/node/components/InputGroup/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const InputsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $columnsTemplate: string;
+}, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;

package/node/components/InputGroup/styles.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputsWrapper = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("../styles");
+exports.InputsWrapper = styles_1.styled.fieldset `
+  display: grid;
+  grid-template-columns: ${({ $columnsTemplate }) => $columnsTemplate};
+
+  margin-inline: 0;
+  padding: 0;
+
+  border: unset;
+
+  & .${material_1.formControlClasses.root} {
+    width: 100%;
+
+    .${material_1.inputBaseClasses.root} {
+      position: relative;
+      z-index: 2;
+
+      border-radius: 0;
+
+      &.${material_1.inputBaseClasses.focused} {
+        z-index: 4;
+      }
+    }
+  }
+
+  /* Скругления только крайних инпутов */
+  & > :first-child .${material_1.inputBaseClasses.root} {
+    border-top-left-radius: ${({ theme }) => theme.shape.medium};
+    border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
+    
+    &.${material_1.inputBaseClasses.disabled} {
+      z-index: 1;
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        right: 0;
+
+        width: 1px;
+        height: 100%;
+
+        background-color: ${({ theme }) => theme.palette.grey[500]};
+      }
+    }
+  }
+
+  & > :last-child .${material_1.inputBaseClasses.root} {
+    border-top-right-radius: ${({ theme }) => theme.shape.medium};
+    border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
+  }
+
+  & > :not(:first-child) .${material_1.inputBaseClasses.root} {
+    &.${material_1.inputBaseClasses.disabled} {
+      z-index: 1;
+ 
+    
+    &::after {
+        content: '';
+  
+        position: absolute;
+        left: 0;
+  
+        width: 1px;
+        height: 100%;
+  
+        background-color: ${({ theme }) => theme.palette.grey[500]};
+      }
+    }
+  
+  }
+  
+  & > :not(:last-child) .${material_1.inputBaseClasses.root} {
+    width: auto;
+    margin-right: -2px;
+    
+    &:hover {
+      z-index: 3;
+      
+      &.${material_1.inputBaseClasses.disabled} {
+        z-index: 1;
+      }
+    }
+  }
+
+  
+`;

package/node/components/InputGroup/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export type InputGroupProps = {
+    children: ReactNode;
+    /**
+     * Определяет шаблон колонок для grid группы инпутов
+     * @example
+     *  columns={['300px', '1fr', '30%]}
+     */
+    columns?: string[];
+};

package/node/components/InputGroup/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/InputGroup/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/InputGroup/useLogic/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/InputGroup/useLogic/useLogic.d.ts

@@ -0,0 +1,6 @@
+import type { InputGroupProps } from '../types';
+type UseLogicParams = InputGroupProps;
+export declare const useLogic: ({ children, columns }: UseLogicParams) => {
+    gridColumnTemplate: () => string;
+};
+export {};

package/node/components/InputGroup/useLogic/useLogic.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const useLogic = ({ children, columns }) => {
+    const gridColumnTemplate = () => {
+        if (columns) {
+            return columns.join(' ');
+        }
+        const childrenCount = react_1.Children.count(children);
+        return `repeat(${childrenCount}, 1fr)`;
+    };
+    return { gridColumnTemplate };
+};
+exports.useLogic = useLogic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.0.0-alpha.32",
+  "version": "4.0.0-alpha.33",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {