@lobehub/ui 3.4.2 → 3.4.4

package/es/Form/type.d.mts

@@ -0,0 +1,119 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { DivProps } from "../types/index.mjs";
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import { ButtonProps as ButtonProps$1 } from "../Button/type.mjs";
+import "../Button/index.mjs";
+import { CollapseProps as CollapseProps$1 } from "../Collapse/type.mjs";
+import "../Collapse/index.mjs";
+import { TagProps as TagProps$1 } from "../Tag/type.mjs";
+import "../Tag/index.mjs";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { DividerProps, FormInstance, FormInstance as FormInstance$1, FormProps } from "antd";
+import { FormItemProps } from "antd/es/form/FormItem";
+
+//#region src/Form/type.d.ts
+type FormVariant = 'filled' | 'outlined' | 'borderless';
+type ItemsType = 'group' | 'flat';
+interface FormProps$1 extends Omit<FormProps, 'variant'> {
+  activeKey?: (string | number)[];
+  children?: ReactNode;
+  classNames?: FormGroupProps['classNames'] & {
+    group?: string;
+    item?: string;
+  };
+  collapsible?: boolean;
+  defaultActiveKey?: (string | number)[];
+  footer?: ReactNode;
+  gap?: number | string;
+  itemMinWidth?: FormItemProps$1['minWidth'];
+  itemVariant?: FormProps['variant'];
+  items?: FormGroupItemType[] | FormItemProps$1[];
+  itemsType?: ItemsType;
+  onCollapse?: (key: (string | number)[]) => void;
+  ref?: Ref<FormInstance>;
+  styles?: FormGroupProps['styles'] & {
+    group?: CSSProperties;
+    item?: CSSProperties;
+  };
+  variant?: FormVariant;
+}
+interface FormDividerProps extends DividerProps {
+  visible?: boolean;
+}
+interface FormFlatGroupProps extends FlexboxProps {
+  variant?: FormVariant;
+}
+type FormFooterProps = DivProps;
+interface FormGroupItemType {
+  children: FormItemProps$1[] | ReactNode;
+  collapsible?: boolean;
+  defaultActive?: boolean;
+  desc?: ReactNode;
+  extra?: ReactNode;
+  icon?: IconProps['icon'];
+  key?: string;
+  title: ReactNode;
+  variant?: FormVariant;
+}
+interface FormGroupProps extends Omit<CollapseProps$1, 'collapsible' | 'items' | 'defaultActiveKey' | 'activeKey'> {
+  active?: boolean;
+  children: ReactNode;
+  collapsible?: boolean;
+  defaultActive?: boolean;
+  desc?: ReactNode;
+  extra?: ReactNode;
+  icon?: IconProps['icon'];
+  keyValue?: string | number;
+  onCollapse?: (active: boolean) => void;
+  title?: ReactNode;
+  variant?: FormVariant;
+}
+interface FormItemProps$1 extends FormItemProps {
+  avatar?: FormTitleProps['avatar'];
+  desc?: FormTitleProps['desc'];
+  divider?: boolean;
+  hidden?: boolean;
+  minWidth?: string | number;
+  tag?: FormTitleProps['tag'];
+  variant?: FormVariant;
+}
+interface FormSubmitFooterProps extends Omit<FlexboxProps, 'onReset'> {
+  buttonProps?: Omit<ButtonProps$1, 'children'>;
+  children?: ReactNode;
+  enableReset?: boolean;
+  enableUnsavedWarning?: boolean;
+  float?: boolean;
+  onReset?: (value: any, preValue: any) => void;
+  resetButtonProps?: Omit<ButtonProps$1, 'children'>;
+  saveButtonProps?: Omit<ButtonProps$1, 'children'>;
+  texts?: {
+    reset?: string;
+    submit?: string;
+    unSaved?: string;
+    unSavedWarning?: string;
+  };
+}
+interface FormTitleProps extends Omit<FlexboxProps, 'title'> {
+  avatar?: ReactNode;
+  classNames?: {
+    content?: string;
+    desc?: string;
+    tag?: string;
+    title?: string;
+  };
+  desc?: ReactNode;
+  styles?: {
+    content?: CSSProperties;
+    desc?: CSSProperties;
+    tag?: CSSProperties;
+    title?: CSSProperties;
+  };
+  tag?: string;
+  tagProps?: Omit<TagProps$1, 'children'>;
+  title: ReactNode;
+}
+//#endregion
+export { FormDividerProps, FormFlatGroupProps, FormFooterProps, FormGroupItemType, FormGroupProps, type FormInstance$1 as FormInstance, FormItemProps$1 as FormItemProps, FormProps$1 as FormProps, FormSubmitFooterProps, FormTitleProps, FormVariant, ItemsType };
+//# sourceMappingURL=type.d.mts.map

package/es/FormModal/FormModal.d.mts

@@ -0,0 +1,8 @@
+import { FormModalProps } from "./type.mjs";
+import * as react68 from "react";
+
+//#region src/FormModal/FormModal.d.ts
+declare const FormModal: react68.NamedExoticComponent<FormModalProps>;
+//#endregion
+export { FormModal };
+//# sourceMappingURL=FormModal.d.mts.map

package/es/FormModal/FormModal.mjs

@@ -0,0 +1,93 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Button_default from "../Button/Button.mjs";
+import Form_default from "../Form/index.mjs";
+import Modal_default from "../Modal/Modal.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useResponsive } from "antd-style";
+
+//#region src/FormModal/FormModal.tsx
+const FormModal = memo(({ classNames = {}, className, style, closable, styles = {}, allowFullscreen, title, afterOpenChange, width, onCancel, centered, open, afterClose, destroyOnHidden, closeIcon, paddings, height, enableResponsive, zIndex, mask, getContainer, keyboard, focusTriggerAfterClose, forceRender, loading, footer, submitButtonProps, submitLoading, onFinish, submitText, variant = "borderless", gap, onSubmit, children, ref, ...rest }) => {
+	const { mobile } = useResponsive();
+	const { cx: cx$1, styles: s } = useStyles();
+	const { form: formClassName, ...modalClassNames } = classNames;
+	const { form: formStyle, ...modalStyles } = typeof styles === "function" ? { form: void 0 } : styles;
+	return /* @__PURE__ */ jsx(Modal_default, {
+		afterClose,
+		afterOpenChange,
+		allowFullscreen,
+		centered,
+		className,
+		classNames: modalClassNames,
+		closable,
+		closeIcon,
+		confirmLoading: submitLoading,
+		destroyOnHidden,
+		enableResponsive,
+		focusTriggerAfterClose,
+		footer: null,
+		forceRender,
+		getContainer,
+		height,
+		keyboard,
+		loading,
+		mask,
+		onCancel,
+		open,
+		paddings,
+		style,
+		styles: typeof styles === "function" ? styles : {
+			...modalStyles,
+			body: {
+				paddingTop: mobile ? 0 : void 0,
+				...modalStyles?.body
+			}
+		},
+		title,
+		width,
+		zIndex,
+		children: /* @__PURE__ */ jsx(Form_default, {
+			className: cx$1(s.form, formClassName),
+			clearOnDestroy: destroyOnHidden,
+			footer: /* @__PURE__ */ jsx(FlexBasic_default, {
+				align: "center",
+				className: cx$1(s.footer),
+				gap: 8,
+				horizontal: true,
+				children: footer || /* @__PURE__ */ jsx(Button_default, {
+					block: true,
+					htmlType: "submit",
+					loading: submitLoading,
+					onClick: onSubmit,
+					type: "primary",
+					...submitButtonProps,
+					style: {
+						flex: 1,
+						...submitButtonProps?.style
+					},
+					children: submitText || "Submit"
+				})
+			}),
+			gap: gap || (variant === "borderless" ? 24 : gap),
+			onFinish,
+			ref,
+			style: {
+				paddingBottom: 56,
+				...formStyle
+			},
+			styles: { title: { fontSize: 14 } },
+			variant,
+			...rest,
+			children
+		})
+	});
+});
+FormModal.displayName = "FormModal";
+var FormModal_default = FormModal;
+
+//#endregion
+export { FormModal_default as default };
+//# sourceMappingURL=FormModal.mjs.map

package/es/FormModal/FormModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormModal.mjs","names":["Modal","Form","cx","Flexbox","Button"],"sources":["../../src/FormModal/FormModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Form from '@/Form';\nimport Modal from '@/Modal';\n\nimport { useStyles } from './style';\nimport type { FormModalProps } from './type';\n\nconst FormModal = memo<FormModalProps>(\n  ({\n    classNames = {},\n    className,\n    style,\n    closable,\n    styles = {},\n    allowFullscreen,\n    title,\n\n    afterOpenChange,\n    width,\n    onCancel,\n    centered,\n    open,\n    afterClose,\n    destroyOnHidden,\n    closeIcon,\n    paddings,\n    height,\n    enableResponsive,\n    zIndex,\n    mask,\n    getContainer,\n    keyboard,\n    focusTriggerAfterClose,\n    forceRender,\n    loading,\n    footer,\n    submitButtonProps,\n    submitLoading,\n    onFinish,\n    submitText,\n    variant = 'borderless',\n    gap,\n    onSubmit,\n    children,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { cx, styles: s } = useStyles();\n    const { form: formClassName, ...modalClassNames } = classNames;\n    const { form: formStyle, ...modalStyles } =\n      typeof styles === 'function' ? { form: undefined } : styles;\n\n    return (\n      <Modal\n        afterClose={afterClose}\n        afterOpenChange={afterOpenChange}\n        allowFullscreen={allowFullscreen}\n        centered={centered}\n        className={className}\n        classNames={modalClassNames}\n        closable={closable}\n        closeIcon={closeIcon}\n        confirmLoading={submitLoading}\n        destroyOnHidden={destroyOnHidden}\n        enableResponsive={enableResponsive}\n        focusTriggerAfterClose={focusTriggerAfterClose}\n        footer={null}\n        forceRender={forceRender}\n        getContainer={getContainer}\n        height={height}\n        keyboard={keyboard}\n        loading={loading}\n        mask={mask}\n        onCancel={onCancel}\n        open={open}\n        paddings={paddings}\n        style={style}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...modalStyles,\n                body: {\n                  paddingTop: mobile ? 0 : undefined,\n                  ...modalStyles?.body,\n                },\n              }\n        }\n        title={title}\n        width={width}\n        zIndex={zIndex}\n      >\n        <Form\n          className={cx(s.form, formClassName)}\n          clearOnDestroy={destroyOnHidden}\n          footer={\n            <Flexbox align={'center'} className={cx(s.footer)} gap={8} horizontal>\n              {footer || (\n                <Button\n                  block\n                  htmlType=\"submit\"\n                  loading={submitLoading}\n                  onClick={onSubmit}\n                  type={'primary'}\n                  {...submitButtonProps}\n                  style={{\n                    flex: 1,\n                    ...submitButtonProps?.style,\n                  }}\n                >\n                  {submitText || 'Submit'}\n                </Button>\n              )}\n            </Flexbox>\n          }\n          gap={gap || (variant === 'borderless' ? 24 : gap)}\n          onFinish={onFinish}\n          ref={ref}\n          style={{\n            paddingBottom: 56,\n            ...formStyle,\n          }}\n          styles={{\n            title: { fontSize: 14 },\n          }}\n          variant={variant}\n          {...rest}\n        >\n          {children}\n        </Form>\n      </Modal>\n    );\n  },\n);\n\nFormModal.displayName = 'FormModal';\n\nexport default FormModal;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,aAAa,EAAE,EACf,WACA,OACA,UACA,SAAS,EAAE,EACX,iBACA,OAEA,iBACA,OACA,UACA,UACA,MACA,YACA,iBACA,WACA,UACA,QACA,kBACA,QACA,MACA,cACA,UACA,wBACA,aACA,SACA,QACA,mBACA,eACA,UACA,YACA,UAAU,cACV,KACA,UACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,UAAI,QAAQ,MAAM,WAAW;CACrC,MAAM,EAAE,MAAM,eAAe,GAAG,oBAAoB;CACpD,MAAM,EAAE,MAAM,WAAW,GAAG,gBAC1B,OAAO,WAAW,aAAa,EAAE,MAAM,QAAW,GAAG;AAEvD,QACE,oBAACA;EACa;EACK;EACA;EACP;EACC;EACX,YAAY;EACF;EACC;EACX,gBAAgB;EACC;EACC;EACM;EACxB,QAAQ;EACK;EACC;EACN;EACE;EACD;EACH;EACI;EACJ;EACI;EACH;EACP,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY,SAAS,IAAI;IACzB,GAAG,aAAa;IACjB;GACF;EAEA;EACA;EACC;YAER,oBAACC;GACC,WAAWC,KAAG,EAAE,MAAM,cAAc;GACpC,gBAAgB;GAChB,QACE,oBAACC;IAAQ,OAAO;IAAU,WAAWD,KAAG,EAAE,OAAO;IAAE,KAAK;IAAG;cACxD,UACC,oBAACE;KACC;KACA,UAAS;KACT,SAAS;KACT,SAAS;KACT,MAAM;KACN,GAAI;KACJ,OAAO;MACL,MAAM;MACN,GAAG,mBAAmB;MACvB;eAEA,cAAc;MACR;KAEH;GAEZ,KAAK,QAAQ,YAAY,eAAe,KAAK;GACnC;GACL;GACL,OAAO;IACL,eAAe;IACf,GAAG;IACJ;GACD,QAAQ,EACN,OAAO,EAAE,UAAU,IAAI,EACxB;GACQ;GACT,GAAI;GAEH;IACI;GACD;EAGb;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/FormModal/index.d.mts

@@ -0,0 +1,3 @@
+import { FormModalProps } from "./type.mjs";
+import { FormModal } from "./FormModal.mjs";
+export { FormModalProps, FormModal as default };

package/es/FormModal/index.d.ts

@@ -1,2 +1 @@
-export { default } from './FormModal';
-export type * from './type';
+export * from './index.d.mts';

package/es/FormModal/index.js

@@ -1 +1 @@
-export { default } from "./FormModal";
+export * from './index.mjs';

package/es/FormModal/index.mjs

@@ -0,0 +1,3 @@
+import FormModal_default from "./FormModal.mjs";
+
+export { FormModal_default as default };

package/es/FormModal/style.mjs

@@ -0,0 +1,46 @@
+import { createStyles } from "antd-style";
+import { rgba } from "polished";
+
+//#region src/FormModal/style.ts
+const useStyles = createStyles(({ css: css$1, token, prefixCls, responsive }) => ({
+	footer: css$1`
+    position: absolute;
+    z-index: 10;
+    inset-block-end: 0;
+    inset-inline: 0;
+
+    width: 100%;
+    margin: 0;
+    padding: 16px;
+
+    background: linear-gradient(
+      to bottom,
+      ${rgba(token.colorBgContainer, 0)} 0%,
+      ${token.colorBgContainer} 10%
+    );
+  `,
+	form: css$1`
+    position: static;
+    .${prefixCls}-form-group-title {
+      font-size: 15px;
+      font-weight: 500;
+    }
+
+    ${responsive.mobile} {
+      .${prefixCls}-form-group-title {
+        font-size: 14px;
+        font-weight: normal;
+      }
+
+      .${prefixCls}-form-group {
+        width: calc(100% + 32px);
+        margin-inline: -16px;
+        background: transparent;
+      }
+    }
+  `
+}));
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/FormModal/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FormModal/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(({ css, token, prefixCls, responsive }) => ({\n  footer: css`\n    position: absolute;\n    z-index: 10;\n    inset-block-end: 0;\n    inset-inline: 0;\n\n    width: 100%;\n    margin: 0;\n    padding: 16px;\n\n    background: linear-gradient(\n      to bottom,\n      ${rgba(token.colorBgContainer, 0)} 0%,\n      ${token.colorBgContainer} 10%\n    );\n  `,\n  form: css`\n    position: static;\n    .${prefixCls}-form-group-title {\n      font-size: 15px;\n      font-weight: 500;\n    }\n\n    ${responsive.mobile} {\n      .${prefixCls}-form-group-title {\n        font-size: 14px;\n        font-weight: normal;\n      }\n\n      .${prefixCls}-form-group {\n        width: calc(100% + 32px);\n        margin-inline: -16px;\n        background: transparent;\n      }\n    }\n  `,\n}));\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,WAAW,kBAAkB;CAChF,QAAQ,KAAG;;;;;;;;;;;;QAYL,KAAK,MAAM,kBAAkB,EAAE,CAAC;QAChC,MAAM,iBAAiB;;;CAG7B,MAAM,KAAG;;OAEJ,UAAU;;;;;MAKX,WAAW,OAAO;SACf,UAAU;;;;;SAKV,UAAU;;;;;;;CAOlB,EAAE"}

package/es/FormModal/type.d.mts

@@ -0,0 +1,27 @@
+import { ButtonProps } from "../Button/type.mjs";
+import "../Button/index.mjs";
+import { FormInstance, FormProps } from "../Form/type.mjs";
+import "../Form/index.mjs";
+import { ModalProps } from "../Modal/type.mjs";
+import "../Modal/index.mjs";
+import { Ref } from "react";
+
+//#region src/FormModal/type.d.ts
+type PickModalProps = Pick<ModalProps, 'style' | 'className' | 'allowFullscreen' | 'title' | 'width' | 'onCancel' | 'open' | 'centered' | 'destroyOnHidden' | 'paddings' | 'height' | 'enableResponsive' | 'afterClose' | 'afterOpenChange' | 'zIndex' | 'mask' | 'getContainer' | 'keyboard' | 'forceRender' | 'focusTriggerAfterClose' | 'closable' | 'loading' | 'closeIcon'>;
+type PickFormProps = Omit<FormProps, 'className' | 'style' | 'title' | 'styles' | 'classNames'>;
+interface FormModalProps extends PickModalProps, PickFormProps {
+  classNames?: ModalProps['classNames'] & {
+    form?: FormProps['className'];
+  };
+  onSubmit?: ModalProps['onOk'];
+  ref?: Ref<FormInstance>;
+  styles?: ModalProps['styles'] & {
+    form?: FormProps['style'];
+  };
+  submitButtonProps?: ButtonProps;
+  submitLoading?: ModalProps['confirmLoading'];
+  submitText?: ModalProps['okText'];
+}
+//#endregion
+export { FormModalProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Grid/Grid.d.mts

@@ -0,0 +1,8 @@
+import { GridProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Grid/Grid.d.ts
+declare const Grid: FC<GridProps>;
+//#endregion
+export { Grid };
+//# sourceMappingURL=Grid.d.mts.map

package/es/Grid/Grid.mjs

@@ -0,0 +1,27 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Grid/Grid.tsx
+const Grid = ({ className, gap = "1em", rows = 3, children, maxItemWidth = 240, ref, ...rest }) => {
+	const { cx, styles } = useStyles({
+		gap,
+		maxItemWidth,
+		rows
+	});
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(styles, className),
+		gap,
+		ref,
+		...rest,
+		children
+	});
+};
+Grid.displayName = "Grid";
+var Grid_default = Grid;
+
+//#endregion
+export { Grid_default as default };
+//# sourceMappingURL=Grid.mjs.map

package/es/Grid/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.mjs","names":["Grid: FC<GridProps>","Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  ...rest\n}) => {\n  const { cx, styles } = useStyles({ gap, maxItemWidth, rows });\n  return (\n    <Flexbox className={cx(styles, className)} gap={gap as any} ref={ref} {...rest}>\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;AASA,MAAMA,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,UAAU;EAAE;EAAK;EAAc;EAAM,CAAC;AAC7D,QACE,oBAACC;EAAQ,WAAW,GAAG,QAAQ,UAAU;EAAO;EAAiB;EAAK,GAAI;EACvE;GACO;;AAId,KAAK,cAAc;AAEnB,mBAAe"}

package/es/Grid/index.d.mts

@@ -0,0 +1,3 @@
+import { GridProps } from "./type.mjs";
+import { Grid } from "./Grid.mjs";
+export { GridProps, Grid as default };

package/es/Grid/index.d.ts

@@ -1,2 +1 @@
-export { default } from './Grid';
-export type * from './type';
+export * from './index.d.mts';

package/es/Grid/index.js

@@ -1 +1 @@
-export { default } from "./Grid";
+export * from './index.mjs';

package/es/Grid/index.mjs

@@ -0,0 +1,3 @@
+import Grid_default from "./Grid.mjs";
+
+export { Grid_default as default };

package/es/Grid/style.mjs

@@ -0,0 +1,24 @@
+import { createStyles } from "antd-style";
+import { isString } from "lodash-es";
+
+//#region src/Grid/style.ts
+const useStyles = createStyles(({ css: css$1 }, { rows, maxItemWidth, gap }) => {
+	return css$1`
+      --rows: ${rows};
+      --max-item-width: ${isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`};
+      --gap: ${isString(gap) ? gap : `${gap}px`};
+
+      display: grid !important;
+      grid-template-columns: repeat(
+        auto-fill,
+        minmax(
+          max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),
+          1fr
+        )
+      );
+    `;
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Grid/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { isString } from 'lodash-es';\n\nexport const useStyles = createStyles(\n  (\n    { css },\n    {\n      rows,\n      maxItemWidth,\n      gap,\n    }: { gap: string | number; maxItemWidth: string | number; rows: number },\n  ) => {\n    return css`\n      --rows: ${rows};\n      --max-item-width: ${isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`};\n      --gap: ${isString(gap) ? gap : `${gap}px`};\n\n      display: grid !important;\n      grid-template-columns: repeat(\n        auto-fill,\n        minmax(\n          max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),\n          1fr\n        )\n      );\n    `;\n  },\n);\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,cACF,EACE,MACA,cACA,UAEC;AACH,QAAO,KAAG;gBACE,KAAK;0BACK,SAAS,aAAa,GAAG,eAAe,GAAG,aAAa,IAAI;eACvE,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI,IAAI;;;;;;;;;;;EAY/C"}

package/es/Grid/type.d.mts

@@ -0,0 +1,14 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { Ref } from "react";
+
+//#region src/Grid/type.d.ts
+interface GridProps extends Omit<FlexboxProps, 'gap'> {
+  gap?: string | number;
+  maxItemWidth?: string | number;
+  ref?: Ref<HTMLDivElement>;
+  rows?: number;
+}
+//#endregion
+export { GridProps };
+//# sourceMappingURL=type.d.mts.map

package/es/GroupAvatar/GroupAvatar.d.mts

@@ -0,0 +1,8 @@
+import { GroupAvatarProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/GroupAvatar/GroupAvatar.d.ts
+declare const GroupAvatar: FC<GroupAvatarProps>;
+//#endregion
+export { GroupAvatar };
+//# sourceMappingURL=GroupAvatar.d.mts.map

package/es/GroupAvatar/GroupAvatar.mjs

@@ -0,0 +1,76 @@
+'use client';
+
+import Block_default from "../Block/Block.mjs";
+import Avatar_default from "../Avatar/index.mjs";
+import Grid_default from "../Grid/Grid.mjs";
+import { useStyles } from "./style.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/GroupAvatar/GroupAvatar.tsx
+const GroupAvatar = ({ className, style, avatars = [], size = 32, grid = 2, cornerShape = "square", avatarShape = "square", ...rest }) => {
+	const { cx, styles } = useStyles();
+	const calcSize = useMemo(() => {
+		const length = avatars.length;
+		const gridSize = grid === "auto" ? length > 4 ? 3 : 2 : grid;
+		const isCircle = cornerShape === "circle";
+		const avatarSize = Math.floor(size / gridSize * (isCircle ? .65 : .75));
+		const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));
+		return {
+			avatarSize,
+			gapSize,
+			gridSize,
+			gridWidth: avatarSize * gridSize + gapSize,
+			maxItemWidth: avatarSize - 1
+		};
+	}, [
+		avatars,
+		grid,
+		size,
+		cornerShape
+	]);
+	const calcAvatars = useMemo(() => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize), [avatars, calcSize.gridSize]);
+	return /* @__PURE__ */ jsx(Block_default, {
+		align: "center",
+		className: cx(useMemo(() => cva(styles.root, {
+			defaultVariants: { cornerShape: "squircle" },
+			variants: { cornerShape: {
+				circle: styles.circle,
+				ios: styles.ios,
+				sharp: styles.sharp,
+				smooth: styles.smooth,
+				square: styles.square,
+				squircle: styles.squircle
+			} }
+		}), [styles])({ cornerShape }), className),
+		height: size,
+		justify: "center",
+		style,
+		width: size,
+		...rest,
+		children: /* @__PURE__ */ jsx(Grid_default, {
+			gap: calcSize.gapSize,
+			maxItemWidth: 0,
+			rows: calcSize.gridSize,
+			width: calcSize.gridWidth,
+			children: calcAvatars.map((item, index) => {
+				if (typeof item === "string") return /* @__PURE__ */ jsx(Avatar_default, {
+					avatar: item,
+					shape: avatarShape,
+					size: calcSize.avatarSize
+				}, index);
+				return /* @__PURE__ */ jsx(Avatar_default, {
+					...item,
+					shape: avatarShape,
+					size: calcSize.avatarSize
+				}, index);
+			})
+		})
+	});
+};
+var GroupAvatar_default = GroupAvatar;
+
+//#endregion
+export { GroupAvatar_default as default };
+//# sourceMappingURL=GroupAvatar.mjs.map

package/es/GroupAvatar/GroupAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAvatar.mjs","names":["GroupAvatar: FC<GroupAvatarProps>","Block","Grid","Avatar"],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo } from 'react';\n\nimport Avatar from '@/Avatar';\nimport Block from '@/Block';\nimport Grid from '@/Grid';\n\nimport { useStyles } from './style';\nimport type { GroupAvatarProps } from './type';\n\nconst GroupAvatar: FC<GroupAvatarProps> = ({\n  className,\n  style,\n  avatars = [],\n  size = 32,\n  grid = 2,\n  cornerShape = 'square',\n  avatarShape = 'square',\n  ...rest\n}) => {\n  const { cx, styles } = useStyles();\n\n  const calcSize = useMemo(() => {\n    const length = avatars.length;\n    const isAutoGrid = grid === 'auto';\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\n    const isCircle = cornerShape === 'circle';\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\n\n    return {\n      avatarSize,\n      gapSize,\n      gridSize,\n      gridWidth: avatarSize * gridSize + gapSize,\n      maxItemWidth: avatarSize - 1,\n    };\n  }, [avatars, grid, size, cornerShape]);\n\n  const calcAvatars = useMemo(\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\n    [avatars, calcSize.gridSize],\n  );\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          cornerShape: 'squircle',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          cornerShape: {\n            circle: styles.circle,\n            ios: styles.ios,\n            sharp: styles.sharp,\n            smooth: styles.smooth,\n            square: styles.square,\n            squircle: styles.squircle,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <Block\n      align={'center'}\n      className={cx(variants({ cornerShape }), className)}\n      height={size}\n      justify={'center'}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <Grid\n        gap={calcSize.gapSize}\n        maxItemWidth={0}\n        rows={calcSize.gridSize}\n        width={calcSize.gridWidth}\n      >\n        {calcAvatars.map((item, index) => {\n          if (typeof item === 'string')\n            return (\n              <Avatar avatar={item} key={index} shape={avatarShape} size={calcSize.avatarSize} />\n            );\n          return <Avatar key={index} {...item} shape={avatarShape} size={calcSize.avatarSize} />;\n        })}\n      </Grid>\n    </Block>\n  );\n};\n\nexport default GroupAvatar;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAqC,EACzC,WACA,OACA,UAAU,EAAE,EACZ,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,KAAM;EAC3E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,GAAG;AAE/E,SAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;GAC5B;IACA;EAAC;EAAS;EAAM;EAAM;EAAY,CAAC;CAEtC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,SAAS,EAC9D,CAAC,SAAS,SAAS,SAAS,CAC7B;AAwBD,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAzBE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,aAAa,YACd;GAED,UAAU,EACR,aAAa;IACX,QAAQ,OAAO;IACf,KAAK,OAAO;IACZ,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,QAAQ,OAAO;IACf,UAAU,OAAO;IAClB,EACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAK0B,EAAE,aAAa,CAAC,EAAE,UAAU;EACnD,QAAQ;EACR,SAAS;EACF;EACP,OAAO;EACP,GAAI;YAEJ,oBAACC;GACC,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;aAEf,YAAY,KAAK,MAAM,UAAU;AAChC,QAAI,OAAO,SAAS,SAClB,QACE,oBAACC;KAAO,QAAQ;KAAkB,OAAO;KAAa,MAAM,SAAS;OAA1C,MAAwD;AAEvF,WAAO,oBAACA;KAAmB,GAAI;KAAM,OAAO;KAAa,MAAM,SAAS;OAApD,MAAkE;KACtF;IACG;GACD;;AAIZ,0BAAe"}

package/es/GroupAvatar/index.d.mts

@@ -0,0 +1,3 @@
+import { GroupAvatarProps } from "./type.mjs";
+import { GroupAvatar } from "./GroupAvatar.mjs";
+export { GroupAvatarProps, GroupAvatar as default };

package/es/GroupAvatar/index.d.ts

@@ -1,2 +1 @@
-export { default } from './GroupAvatar';
-export type * from './type';
+export * from './index.d.mts';

package/es/GroupAvatar/index.js

@@ -1 +1 @@
-export { default } from "./GroupAvatar";
+export * from './index.mjs';

package/es/GroupAvatar/index.mjs

@@ -0,0 +1,3 @@
+import GroupAvatar_default from "./GroupAvatar.mjs";
+
+export { GroupAvatar_default as default };

package/es/GroupAvatar/style.mjs

@@ -0,0 +1,37 @@
+import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
+import { createStyles } from "antd-style";
+
+//#region src/GroupAvatar/style.ts
+const useStyles = createStyles(({ css: css$1 }) => {
+	const baseRoot = css$1`
+    overflow: hidden;
+    flex: none;
+
+    /* Fallback for browsers without mask support */
+    border-radius: 15%;
+
+    /* Apply smooth corners mask with fallback */
+    @supports (mask-image: url('data:image/svg+xml;base64,')) {
+      border-radius: 0;
+    }
+  `;
+	const createCornerVariant = (cornerType) => css$1`
+    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+  `;
+	return {
+		circle: createCornerVariant("circle"),
+		ios: createCornerVariant("ios"),
+		root: baseRoot,
+		sharp: createCornerVariant("sharp"),
+		smooth: createCornerVariant("smooth"),
+		square: createCornerVariant("square"),
+		squircle: createCornerVariant("squircle")
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/GroupAvatar/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GroupAvatar/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nimport { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';\n\nexport const useStyles = createStyles(({ css }) => {\n  const baseRoot = css`\n    overflow: hidden;\n    flex: none;\n\n    /* Fallback for browsers without mask support */\n    border-radius: 15%;\n\n    /* Apply smooth corners mask with fallback */\n    @supports (mask-image: url('data:image/svg+xml;base64,')) {\n      border-radius: 0;\n    }\n  `;\n\n  const createCornerVariant = (cornerType: keyof typeof SMOOTH_CORNER_MASKS) => css`\n    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  `;\n\n  return {\n    circle: createCornerVariant('circle'),\n    ios: createCornerVariant('ios'),\n    root: baseRoot,\n    sharp: createCornerVariant('sharp'),\n    smooth: createCornerVariant('smooth'),\n    square: createCornerVariant('square'),\n    squircle: createCornerVariant('squircle'),\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,YAAY,cAAc,EAAE,iBAAU;CACjD,MAAM,WAAW,KAAG;;;;;;;;;;;;CAapB,MAAM,uBAAuB,eAAiD,KAAG;uBAC5D,oBAAoB,YAAY;;;;;AAMrD,QAAO;EACL,QAAQ,oBAAoB,SAAS;EACrC,KAAK,oBAAoB,MAAM;EAC/B,MAAM;EACN,OAAO,oBAAoB,QAAQ;EACnC,QAAQ,oBAAoB,SAAS;EACrC,QAAQ,oBAAoB,SAAS;EACrC,UAAU,oBAAoB,WAAW;EAC1C;EACD"}

package/es/GroupAvatar/type.d.mts

@@ -0,0 +1,18 @@
+import { BlockProps } from "../Block/type.mjs";
+import { AvatarProps } from "../Avatar/type.mjs";
+import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
+import { Ref } from "react";
+
+//#region src/GroupAvatar/type.d.ts
+type AvatarItem = string | Omit<AvatarProps, 'size'>;
+interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' | 'variant'> {
+  avatarShape?: AvatarProps['shape'];
+  avatars?: AvatarItem[];
+  cornerShape?: keyof typeof SMOOTH_CORNER_MASKS;
+  grid?: 2 | 3 | 'auto';
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+}
+//#endregion
+export { GroupAvatarProps };
+//# sourceMappingURL=type.d.mts.map

package/es/GuideCard/GuideCard.d.mts

@@ -0,0 +1,8 @@
+import { GuideCardProps } from "./type.mjs";
+import * as react104 from "react";
+
+//#region src/GuideCard/GuideCard.d.ts
+declare const GuideCard: react104.NamedExoticComponent<GuideCardProps>;
+//#endregion
+export { GuideCard };
+//# sourceMappingURL=GuideCard.d.mts.map