@lobehub/ui 5.19.2 → 5.20.0

package/es/base-ui/Form/components/FormTitle.mjs

@@ -0,0 +1,42 @@
+"use client";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import Tag from "../../../Tag/Tag.mjs";
+import { titleStyles } from "../style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/Form/components/FormTitle.tsx
+const FormTitle = ({ tag, title, desc, avatar, classNames, styles: customStyles, tagProps, ...rest }) => {
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		gap: 8,
+		...rest,
+		children: [avatar, /* @__PURE__ */ jsxs(FlexBasic_default, {
+			className: cx(titleStyles.content, classNames?.content),
+			gap: 8,
+			style: customStyles?.content,
+			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				className: cx(titleStyles.title, classNames?.title),
+				gap: 8,
+				style: customStyles?.title,
+				children: [title, tag && /* @__PURE__ */ jsx(Tag, {
+					className: classNames?.tag,
+					style: customStyles?.tag,
+					...tagProps,
+					children: tag
+				})]
+			}), desc && /* @__PURE__ */ jsx("small", {
+				className: cx(titleStyles.desc, classNames?.desc),
+				style: customStyles?.desc,
+				children: desc
+			})]
+		})]
+	});
+};
+FormTitle.displayName = "FormTitle";
+//#endregion
+export { FormTitle as default };
+
+//# sourceMappingURL=FormTitle.mjs.map

package/es/base-ui/Form/components/FormTitle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTitle.mjs","names":["Flexbox","styles"],"sources":["../../../../src/base-ui/Form/components/FormTitle.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Tag from '@/Tag';\n\nimport { titleStyles as styles } from '../style';\nimport type { FormTitleProps } from '../type';\n\nconst FormTitle: FC<FormTitleProps> = ({\n  tag,\n  title,\n  desc,\n  avatar,\n  classNames,\n  styles: customStyles,\n  tagProps,\n  ...rest\n}) => {\n  return (\n    <Flexbox horizontal align={'center'} gap={8} {...rest}>\n      {avatar}\n      <Flexbox\n        className={cx(styles.content, classNames?.content)}\n        gap={8}\n        style={customStyles?.content}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.title, classNames?.title)}\n          gap={8}\n          style={customStyles?.title}\n        >\n          {title}\n          {tag && (\n            <Tag className={classNames?.tag} style={customStyles?.tag} {...tagProps}>\n              {tag}\n            </Tag>\n          )}\n        </Flexbox>\n        {desc && (\n          <small className={cx(styles.desc, classNames?.desc)} style={customStyles?.desc}>\n            {desc}\n          </small>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nFormTitle.displayName = 'FormTitle';\n\nexport default FormTitle;\n"],"mappings":";;;;;;;AAWA,MAAM,aAAiC,EACrC,KACA,OACA,MACA,QACA,YACA,QAAQ,cACR,UACA,GAAG,WACC;AACJ,QACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAG,GAAI;YAAjD,CACG,QACD,qBAACA,mBAAD;GACE,WAAW,GAAGC,YAAO,SAAS,YAAY,QAAQ;GAClD,KAAK;GACL,OAAO,cAAc;aAHvB,CAKE,qBAACD,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,GAAGC,YAAO,OAAO,YAAY,MAAM;IAC9C,KAAK;IACL,OAAO,cAAc;cALvB,CAOG,OACA,OACC,oBAAC,KAAD;KAAK,WAAW,YAAY;KAAK,OAAO,cAAc;KAAK,GAAI;eAC5D;KACG,CAAA,CAEA;OACT,QACC,oBAAC,SAAD;IAAO,WAAW,GAAGA,YAAO,MAAM,YAAY,KAAK;IAAE,OAAO,cAAc;cACvE;IACK,CAAA,CAEF;KACF;;;AAId,UAAU,cAAc"}

package/es/base-ui/Form/context.d.mts

@@ -0,0 +1,6 @@
+import { FormContextValue } from "./type.mjs";
+//#region src/base-ui/Form/context.d.ts
+declare const useFormContext: () => FormContextValue;
+//#endregion
+export { useFormContext };
+//# sourceMappingURL=context.d.mts.map

package/es/base-ui/Form/context.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/base-ui/Form/context.ts
+const FormContext = createContext({
+	hasUnsavedChanges: false,
+	layout: "horizontal",
+	requestReset: () => {},
+	submitLoading: false,
+	variant: "borderless"
+});
+const useFormContext = () => use(FormContext);
+//#endregion
+export { FormContext, useFormContext };
+
+//# sourceMappingURL=context.mjs.map

package/es/base-ui/Form/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/base-ui/Form/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { FormContextValue } from './type';\n\nexport const FormContext = createContext<FormContextValue>({\n  hasUnsavedChanges: false,\n  layout: 'horizontal',\n  requestReset: () => {},\n  submitLoading: false,\n  variant: 'borderless',\n});\n\nexport const useFormContext = () => use(FormContext);\n"],"mappings":";;;AAMA,MAAa,cAAc,cAAgC;CACzD,mBAAmB;CACnB,QAAQ;CACR,oBAAoB;CACpB,eAAe;CACf,SAAS;CACV,CAAC;AAEF,MAAa,uBAAuB,IAAI,YAAY"}

package/es/base-ui/Form/index.d.mts

@@ -0,0 +1,25 @@
+import { FlexBasicProps } from "../../Flex/type.mjs";
+import { FormContextValue, FormDividerProps, FormFieldProps, FormFlatGroupProps, FormFooterProps, FormGroupItemType, FormGroupProps, FormLayout, FormProps, FormSubmitFooterProps, FormTitleProps, FormValues, FormVariant, ItemsType } from "./type.mjs";
+import { FormDivider } from "./components/FormDivider.mjs";
+import { FormField } from "./components/FormField.mjs";
+import { FormFlatGroup } from "./components/FormFlatGroup.mjs";
+import { FormFooter } from "./components/FormFooter.mjs";
+import { FormGroup } from "./components/FormGroup.mjs";
+import { FormSubmitFooter } from "./components/FormSubmitFooter.mjs";
+import { FormTitle } from "./components/FormTitle.mjs";
+import { useFormContext } from "./context.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Form/index.d.ts
+declare const Form: _$react.NamedExoticComponent<FormProps> & {
+  Divider: _$react.FC<FormDividerProps>;
+  Field: _$react.NamedExoticComponent<FormFieldProps>;
+  FlatGroup: _$react.NamedExoticComponent<FormFlatGroupProps>;
+  Footer: _$react.FC<FlexBasicProps>;
+  Group: _$react.NamedExoticComponent<FormGroupProps>;
+  SubmitFooter: _$react.NamedExoticComponent<FormSubmitFooterProps>;
+  Title: _$react.FC<FormTitleProps>;
+};
+//#endregion
+export { Form };
+//# sourceMappingURL=index.d.mts.map

package/es/base-ui/Form/index.mjs

@@ -0,0 +1,24 @@
+"use client";
+import FormDivider from "./components/FormDivider.mjs";
+import "./context.mjs";
+import FormTitle from "./components/FormTitle.mjs";
+import FormField from "./components/FormField.mjs";
+import FormFlatGroup from "./components/FormFlatGroup.mjs";
+import FormFooter from "./components/FormFooter.mjs";
+import FormGroup from "./components/FormGroup.mjs";
+import FormSubmitFooter from "./components/FormSubmitFooter.mjs";
+import Form$1 from "./Form.mjs";
+//#region src/base-ui/Form/index.ts
+const Form = Object.assign(Form$1, {
+	Divider: FormDivider,
+	Field: FormField,
+	FlatGroup: FormFlatGroup,
+	Footer: FormFooter,
+	Group: FormGroup,
+	SubmitFooter: FormSubmitFooter,
+	Title: FormTitle
+});
+//#endregion
+export { Form as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/base-ui/Form/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["FormParent"],"sources":["../../../src/base-ui/Form/index.ts"],"sourcesContent":["'use client';\n\nimport FormDivider from './components/FormDivider';\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormFooter from './components/FormFooter';\nimport FormGroup from './components/FormGroup';\nimport FormSubmitFooter from './components/FormSubmitFooter';\nimport FormTitle from './components/FormTitle';\nimport FormParent from './Form';\n\nexport const Form = Object.assign(FormParent, {\n  Divider: FormDivider,\n  Field: FormField,\n  FlatGroup: FormFlatGroup,\n  Footer: FormFooter,\n  Group: FormGroup,\n  SubmitFooter: FormSubmitFooter,\n  Title: FormTitle,\n});\n\nexport { useFormContext } from './context';\nexport {\n  FormDivider,\n  FormField,\n  FormFlatGroup,\n  FormFooter,\n  FormGroup,\n  FormSubmitFooter,\n  FormTitle,\n};\nexport type {\n  FormContextValue,\n  FormDividerProps,\n  FormFieldProps,\n  FormFlatGroupProps,\n  FormFooterProps,\n  FormGroupItemType,\n  FormGroupProps,\n  FormLayout,\n  FormProps,\n  FormSubmitFooterProps,\n  FormTitleProps,\n  FormValues,\n  FormVariant,\n  ItemsType,\n} from './type';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,OAAO,OAAO,OAAOA,QAAY;CAC5C,SAAS;CACT,OAAO;CACP,WAAW;CACX,QAAQ;CACR,OAAO;CACP,cAAc;CACd,OAAO;CACR,CAAC"}

package/es/base-ui/Form/style.mjs

@@ -0,0 +1,288 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, responsive } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Form/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	root: css`
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    width: 100%;
+
+    ${responsive.sm} {
+      gap: 0 !important;
+    }
+  `,
+	rootBorderless: css`
+    gap: 48px;
+  `
+}));
+const rootVariants = cva(styles.root, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		borderless: styles.rootBorderless,
+		filled: null,
+		outlined: null
+	} }
+});
+const fieldStyles = createStaticStyles(({ css, cssVar }) => ({
+	control: css`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-end;
+
+    min-width: var(--form-field-min-width, unset);
+  `,
+	controlVertical: css`
+    align-items: stretch;
+    width: 100%;
+  `,
+	error: css`
+    font-size: 12px;
+    color: ${cssVar.colorError};
+  `,
+	horizontal: css`
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  `,
+	label: css`
+    display: block;
+    flex: 1;
+    max-width: 100%;
+    text-align: start;
+  `,
+	root: css`
+    display: flex;
+    gap: 12px;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding-block: 16px;
+  `,
+	vertical: css`
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+  `
+}));
+const fieldVariants = cva(fieldStyles.root, {
+	defaultVariants: { layout: "horizontal" },
+	variants: { layout: {
+		horizontal: fieldStyles.horizontal,
+		vertical: fieldStyles.vertical
+	} }
+});
+const dividerStyles = createStaticStyles(({ css, cssVar }) => ({ root: css`
+    width: 100%;
+    height: 1px;
+    margin: 0;
+    border: none;
+
+    background: ${cssVar.colorBorderSecondary};
+  ` }));
+const groupStyles = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    display: flex;
+    flex-direction: column;
+  `,
+	bodyBoxed: css`
+    padding-inline: 16px;
+  `,
+	chevron: css`
+    flex: none;
+    color: ${cssVar.colorTextDescription};
+    transition: transform 200ms ${cssVar.motionEaseOut};
+
+    [data-panel-open] & {
+      transform: rotate(180deg);
+    }
+  `,
+	desc: css`
+    font-size: 12px;
+    font-weight: 400;
+    color: ${cssVar.colorTextDescription};
+  `,
+	header: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+  `,
+	headerBorderless: css`
+    padding-block-end: 16px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	headerBoxed: css`
+    padding: 16px;
+  `,
+	mobileBody: css`
+    padding-block: 0;
+    padding-inline: 16px;
+    background: ${cssVar.colorBgContainer};
+  `,
+	mobileHeader: css`
+    padding: 16px;
+    background: ${cssVar.colorBgLayout};
+  `,
+	mobileTitle: css`
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.5;
+  `,
+	panel: css`
+    overflow: hidden;
+    height: var(--collapsible-panel-height);
+    transition: height 200ms ${cssVar.motionEaseOut};
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      height: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	rootFilled: css`
+    border-radius: ${cssVar.borderRadiusLG};
+    ${staticStylish.variantFilledWithoutHover}
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	rootOutlined: css`
+    border-radius: ${cssVar.borderRadiusLG};
+    ${staticStylish.variantOutlinedWithoutHover}
+  `,
+	title: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    font-size: 16px;
+    font-weight: bold;
+    color: ${cssVar.colorText};
+  `,
+	titleBorderless: css`
+    font-size: 18px;
+  `,
+	trigger: css`
+    cursor: pointer;
+
+    display: flex;
+    flex: 1;
+    gap: 12px;
+    align-items: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    text-align: start;
+
+    background: none;
+    outline: none;
+
+    &:focus-visible {
+      border-radius: ${cssVar.borderRadius};
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
+    }
+  `
+}));
+const groupVariants = cva(null, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		borderless: null,
+		filled: groupStyles.rootFilled,
+		outlined: groupStyles.rootOutlined
+	} }
+});
+const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({
+	borderless: cx(staticStylish.variantBorderlessWithoutHover, css`
+      padding-inline: 0;
+    `),
+	filled: cx(staticStylish.variantFilledWithoutHover, css`
+      background: ${cssVar.colorFillQuaternary};
+    `),
+	mobile: css`
+    padding-block: 0;
+    padding-inline: 16px;
+    border-radius: 0;
+    background: ${cssVar.colorBgContainer};
+  `,
+	outlined: staticStylish.variantOutlinedWithoutHover,
+	root: css`
+    padding-inline: 16px;
+    border-radius: ${cssVar.borderRadiusLG};
+  `
+}));
+const flatGroupVariants = cva(flatGroupStyles.root, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		borderless: flatGroupStyles.borderless,
+		filled: flatGroupStyles.filled,
+		outlined: flatGroupStyles.outlined
+	} }
+});
+const footerStyles = createStaticStyles(({ css, cssVar }) => ({ root: css`
+    ${responsive.sm} {
+      padding: 16px;
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+      background: ${cssVar.colorBgContainer};
+    }
+  ` }));
+const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({
+	floatFooter: css`
+    position: fixed;
+    z-index: 1000;
+    inset-block-end: 24px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    width: max-content;
+    padding: 8px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 48px;
+
+    background: ${cssVar.colorBgContainer};
+    box-shadow: ${cssVar.boxShadowSecondary};
+  `,
+	footer: css`
+    ${responsive.sm} {
+      margin-block-start: calc(-1 * ${cssVar.borderRadius});
+      padding: 16px;
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+      background: ${cssVar.colorBgContainer};
+    }
+  `
+}));
+const titleStyles = createStaticStyles(({ css, cssVar }) => ({
+	content: css`
+    position: relative;
+    text-align: start;
+  `,
+	desc: css`
+    display: block;
+
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.44;
+    color: ${cssVar.colorTextDescription};
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  `,
+	title: css`
+    font-weight: 500;
+    line-height: 1;
+    color: ${cssVar.colorText};
+  `
+}));
+//#endregion
+export { dividerStyles, fieldStyles, fieldVariants, flatGroupStyles, flatGroupVariants, footerStyles, groupStyles, groupVariants, rootVariants, submitFooterStyles, titleStyles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Form/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n  rootBorderless: css`\n    gap: 48px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      filled: null,\n      outlined: null,\n    },\n  },\n});\n\nexport const fieldStyles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: flex-end;\n\n    min-width: var(--form-field-min-width, unset);\n  `,\n  controlVertical: css`\n    align-items: stretch;\n    width: 100%;\n  `,\n  error: css`\n    font-size: 12px;\n    color: ${cssVar.colorError};\n  `,\n  horizontal: css`\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  `,\n  label: css`\n    display: block;\n    flex: 1;\n    max-width: 100%;\n    text-align: start;\n  `,\n  root: css`\n    display: flex;\n    gap: 12px;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: 16px;\n  `,\n  vertical: css`\n    flex-direction: column;\n    gap: 8px;\n    align-items: stretch;\n  `,\n}));\n\nexport const fieldVariants = cva(fieldStyles.root, {\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n  variants: {\n    layout: {\n      horizontal: fieldStyles.horizontal,\n      vertical: fieldStyles.vertical,\n    },\n  },\n});\n\nexport const dividerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    width: 100%;\n    height: 1px;\n    margin: 0;\n    border: none;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n}));\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  bodyBoxed: css`\n    padding-inline: 16px;\n  `,\n  chevron: css`\n    flex: none;\n    color: ${cssVar.colorTextDescription};\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  desc: css`\n    font-size: 12px;\n    font-weight: 400;\n    color: ${cssVar.colorTextDescription};\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n  `,\n  headerBorderless: css`\n    padding-block-end: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerBoxed: css`\n    padding: 16px;\n  `,\n  mobileBody: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    background: ${cssVar.colorBgContainer};\n  `,\n  mobileHeader: css`\n    padding: 16px;\n    background: ${cssVar.colorBgLayout};\n  `,\n  mobileTitle: css`\n    font-size: 14px;\n    font-weight: 400;\n    opacity: 0.5;\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--collapsible-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantFilledWithoutHover}\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: bold;\n    color: ${cssVar.colorText};\n  `,\n  titleBorderless: css`\n    font-size: 18px;\n  `,\n  trigger: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding-inline: 0;\n    `,\n  ),\n  filled: cx(\n    lobeStaticStylish.variantFilledWithoutHover,\n    css`\n      background: ${cssVar.colorFillQuaternary};\n    `,\n  ),\n  mobile: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    border-radius: 0;\n    background: ${cssVar.colorBgContainer};\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n}));\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: flatGroupStyles.borderless,\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    ${responsive.sm} {\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n  desc: css`\n    display: block;\n\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,MAAM,GAAG;;;;;;;;;MASL,WAAW,GAAG;;;;CAIlB,gBAAgB,GAAG;;;CAGpB,EAAE;AAEH,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,cACV;CACD,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,QAAQ;EACR,UAAU;EACX,EACF;CACF,CAAC;AAEF,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,SAAS,GAAG;;;;;;;;CAQZ,iBAAiB,GAAG;;;;CAIpB,OAAO,GAAG;;aAEC,OAAO,WAAW;;CAE7B,YAAY,GAAG;;;;;CAKf,OAAO,GAAG;;;;;;CAMV,MAAM,GAAG;;;;;;;;CAQT,UAAU,GAAG;;;;;CAKd,EAAE;AAEH,MAAa,gBAAgB,IAAI,YAAY,MAAM;CACjD,iBAAiB,EACf,QAAQ,cACT;CACD,UAAU,EACR,QAAQ;EACN,YAAY,YAAY;EACxB,UAAU,YAAY;EACvB,EACF;CACF,CAAC;AAEF,MAAa,gBAAgB,oBAAoB,EAAE,KAAK,cAAc,EACpE,MAAM,GAAG;;;;;;kBAMO,OAAO,qBAAqB;KAE7C,EAAE;AAEH,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,MAAM,GAAG;;;;CAIT,WAAW,GAAG;;;CAGd,SAAS,GAAG;;aAED,OAAO,qBAAqB;kCACP,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;;;aAGE,OAAO,qBAAqB;;CAEvC,QAAQ,GAAG;;;;;;;;CAQX,kBAAkB,GAAG;;kCAEW,OAAO,qBAAqB;;CAE5D,aAAa,GAAG;;;CAGhB,YAAY,GAAG;;;kBAGC,OAAO,iBAAiB;;CAExC,cAAc,GAAG;;kBAED,OAAO,cAAc;;CAErC,aAAa,GAAG;;;;;CAKhB,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;CAWlD,YAAY,GAAG;qBACI,OAAO,eAAe;MACrCA,cAAkB,0BAA0B;kBAChC,OAAO,oBAAoB;;CAE3C,cAAc,GAAG;qBACE,OAAO,eAAe;MACrCA,cAAkB,4BAA4B;;CAElD,OAAO,GAAG;;;;;;;aAOC,OAAO,UAAU;;CAE5B,iBAAiB,GAAG;;;CAGpB,SAAS,GAAG;;;;;;;;;;;;;;;;;;uBAkBS,OAAO,aAAa;8BACb,OAAO,mBAAmB;;;CAGvD,EAAE;AAEH,MAAa,gBAAgB,IAAI,MAAM;CACrC,iBAAiB,EACf,SAAS,cACV;CACD,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ,YAAY;EACpB,UAAU,YAAY;EACvB,EACF;CACF,CAAC;AAEF,MAAa,kBAAkB,oBAAoB,EAAE,IAAI,KAAK,cAAc;CAC1E,YAAY,GACVA,cAAkB,+BAClB,GAAG;;MAGJ;CACD,QAAQ,GACNA,cAAkB,2BAClB,GAAG;oBACa,OAAO,oBAAoB;MAE5C;CACD,QAAQ,GAAG;;;;kBAIK,OAAO,iBAAiB;;CAExC,UAAUA,cAAkB;CAC5B,MAAM,GAAG;;qBAEU,OAAO,eAAe;;CAE1C,EAAE;AAEH,MAAa,oBAAoB,IAAI,gBAAgB,MAAM;CACzD,iBAAiB,EACf,SAAS,cACV;CACD,UAAU,EACR,SAAS;EACP,YAAY,gBAAgB;EAC5B,QAAQ,gBAAgB;EACxB,UAAU,gBAAgB;EAC3B,EACF;CACF,CAAC;AAEF,MAAa,eAAe,oBAAoB,EAAE,KAAK,cAAc,EACnE,MAAM,GAAG;MACL,WAAW,GAAG;;sCAEkB,OAAO,qBAAqB;oBAC9C,OAAO,iBAAiB;;KAG3C,EAAE;AAEH,MAAa,qBAAqB,oBAAoB,EAAE,KAAK,cAAc;CACzE,aAAa,GAAG;;;;;;;;;wBASM,OAAO,qBAAqB;;;kBAGlC,OAAO,iBAAiB;kBACxB,OAAO,mBAAmB;;CAE1C,QAAQ,GAAG;MACP,WAAW,GAAG;sCACkB,OAAO,aAAa;;sCAEpB,OAAO,qBAAqB;oBAC9C,OAAO,iBAAiB;;;CAG3C,EAAE;AAEH,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,SAAS,GAAG;;;;CAIZ,MAAM,GAAG;;;;;;aAME,OAAO,qBAAqB;;;;CAIvC,OAAO,GAAG;;;aAGC,OAAO,UAAU;;CAE7B,EAAE"}

package/es/base-ui/Form/type.d.mts

@@ -0,0 +1,139 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import { DivProps } from "../../types/index.mjs";
+import { IconProps } from "../../Icon/type.mjs";
+import { TagProps } from "../../Tag/type.mjs";
+import { ButtonProps } from "../Button/type.mjs";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { Field } from "@base-ui/react/field";
+import { Form } from "@base-ui/react/form";
+
+//#region src/base-ui/Form/type.d.ts
+type FormVariant = 'filled' | 'outlined' | 'borderless';
+type FormLayout = 'horizontal' | 'vertical';
+type ItemsType = 'group' | 'flat';
+type FormValues = Record<string, any>;
+type BaseFormProps = Omit<ComponentProps<typeof Form>, 'render' | 'className' | 'style'>;
+interface FormProps extends BaseFormProps {
+  activeKey?: (string | number)[];
+  className?: string;
+  classNames?: {
+    group?: string;
+    item?: string;
+  };
+  collapsible?: boolean;
+  defaultActiveKey?: (string | number)[];
+  footer?: ReactNode;
+  gap?: number | string;
+  /**
+   * Initial values distributed to fields as `defaultValue` by name.
+   * Also the baseline for unsaved-changes detection and native reset.
+   */
+  initialValues?: FormValues;
+  itemMinWidth?: FormFieldProps['minWidth'];
+  items?: FormGroupItemType[] | FormFieldProps[];
+  itemsType?: ItemsType;
+  layout?: FormLayout;
+  onCollapse?: (key: (string | number)[]) => void;
+  /**
+   * Called with collected field values on submit. Async callbacks drive submit loading state.
+   */
+  onFinish?: (values: FormValues, eventDetails: Parameters<NonNullable<BaseFormProps['onFormSubmit']>>[1]) => void | Promise<void>;
+  ref?: Ref<HTMLFormElement>;
+  style?: CSSProperties;
+  styles?: {
+    group?: CSSProperties;
+    item?: CSSProperties;
+  };
+  variant?: FormVariant;
+}
+interface FormFieldProps extends Omit<ComponentProps<typeof Field.Root>, 'render' | 'children' | 'className' | 'style'> {
+  avatar?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  desc?: ReactNode;
+  divider?: boolean;
+  hidden?: boolean;
+  label?: ReactNode;
+  layout?: FormLayout;
+  minWidth?: string | number;
+  required?: boolean;
+  style?: CSSProperties;
+  tag?: string;
+  variant?: FormVariant;
+}
+interface FormGroupItemType {
+  children: FormFieldProps[] | ReactNode;
+  collapsible?: boolean;
+  defaultActive?: boolean;
+  desc?: ReactNode;
+  extra?: ReactNode;
+  icon?: IconProps['icon'];
+  key?: string;
+  title: ReactNode;
+  variant?: FormVariant;
+}
+interface FormGroupProps extends Omit<DivProps, 'title'> {
+  active?: boolean;
+  collapsible?: boolean;
+  defaultActive?: boolean;
+  desc?: ReactNode;
+  extra?: ReactNode;
+  icon?: IconProps['icon'];
+  keyValue?: string | number;
+  onCollapse?: (active: boolean) => void;
+  title?: ReactNode;
+  variant?: FormVariant;
+}
+interface FormFlatGroupProps extends FlexboxProps {
+  variant?: FormVariant;
+}
+interface FormDividerProps extends DivProps {
+  visible?: boolean;
+}
+type FormFooterProps = FlexboxProps;
+interface FormSubmitFooterProps extends Omit<FlexboxProps, 'onReset'> {
+  buttonProps?: Omit<ButtonProps, 'children'>;
+  enableReset?: boolean;
+  enableUnsavedWarning?: boolean;
+  float?: boolean;
+  onReset?: () => void;
+  resetButtonProps?: Omit<ButtonProps, 'children'>;
+  saveButtonProps?: Omit<ButtonProps, '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, 'children'>;
+  title: ReactNode;
+}
+interface FormContextValue {
+  hasUnsavedChanges: boolean;
+  initialValues?: FormValues;
+  itemMinWidth?: FormFieldProps['minWidth'];
+  layout: FormLayout;
+  requestReset: () => void;
+  submitLoading: boolean;
+  variant: FormVariant;
+}
+//#endregion
+export { FormContextValue, FormDividerProps, FormFieldProps, FormFlatGroupProps, FormFooterProps, FormGroupItemType, FormGroupProps, FormLayout, FormProps, FormSubmitFooterProps, FormTitleProps, FormValues, FormVariant, ItemsType };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Input/Input.d.mts

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

package/es/base-ui/Input/Input.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { rootVariants, styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { Input } from "@base-ui/react/input";
+//#region src/base-ui/Input/Input.tsx
+const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", prefix, suffix, disabled, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(rootVariants({
+			shadow,
+			size,
+			variant: variant || (isDarkMode ? "filled" : "outlined")
+		}), className),
+		"data-disabled": disabled ? "" : void 0,
+		style,
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				className: cx(styles.slot, classNames?.prefix),
+				style: customStyles?.prefix,
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				className: cx(styles.input, classNames?.input),
+				disabled,
+				ref,
+				style: customStyles?.input,
+				...rest
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: cx(styles.slot, classNames?.suffix),
+				style: customStyles?.suffix,
+				children: suffix
+			})
+		]
+	});
+});
+Input$1.displayName = "Input";
+//#endregion
+export { Input$1 as default };
+
+//# sourceMappingURL=Input.mjs.map

package/es/base-ui/Input/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../../src/base-ui/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { rootVariants, styles } from './style';\nimport type { InputProps } from './type';\n\nconst Input = memo<InputProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    prefix,\n    suffix,\n    disabled,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    return (\n      <div\n        className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n        data-disabled={disabled ? '' : undefined}\n        style={style}\n      >\n        {prefix && (\n          <span className={cx(styles.slot, classNames?.prefix)} style={customStyles?.prefix}>\n            {prefix}\n          </span>\n        )}\n        <BaseInput\n          className={cx(styles.input, classNames?.input)}\n          disabled={disabled}\n          ref={ref}\n          style={customStyles?.input}\n          {...rest}\n        />\n        {suffix && (\n          <span className={cx(styles.slot, classNames?.suffix)} style={customStyles?.suffix}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AASA,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;AAGrC,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAJzB,YAAY,aAAa,WAAW;GAIa,CAAC,EAAE,UAAU;EAChF,iBAAe,WAAW,KAAK,KAAA;EACxB;YAHT;GAKG,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,OAAO;IAAE,OAAO,cAAc;cACxE;IACI,CAAA;GAET,oBAACC,OAAD;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IACpC;IACL;IACL,OAAO,cAAc;IACrB,GAAI;IACJ,CAAA;GACD,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,OAAO;IAAE,OAAO,cAAc;cACxE;IACI,CAAA;GAEL;;EAGX;AAED,QAAM,cAAc"}

package/es/base-ui/Input/InputNumber.d.mts

@@ -0,0 +1,8 @@
+import { InputNumberProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Input/InputNumber.d.ts
+declare const InputNumber: _$react.NamedExoticComponent<InputNumberProps>;
+//#endregion
+export { InputNumber };
+//# sourceMappingURL=InputNumber.d.mts.map