@lobehub/ui 5.54.0 → 5.56.0

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

@@ -1 +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 { focusRing } from '@/base-ui/focusRing';\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    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\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":"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"}
+{"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 { focusRing } from '@/base-ui/focusRing';\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    [data-form-group-body] {\n      padding-block: 0;\n    }\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-block: 16px;\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  bodyFilled: css`\n    margin-block-end: 3px;\n    margin-inline: 3px;\n    border-radius: ${cssVar.borderRadius};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  bodyFilledLight: lobeStaticStylish.shadow,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootFilledDark: css`\n    background: ${cssVar.colorBgLayout};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    flex-shrink: 0;\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    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  compoundVariants: [\n    {\n      class: groupStyles.rootFilledDark,\n      isDarkMode: true,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n    isDarkMode: {\n      false: null,\n      true: null,\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":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,MAAM,GAAG;;;;;;;;;;;;;MAaL,WAAW,GAAG;;;;CAIlB,gBAAgB,GAAG;;;AAGrB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,aACX;CACA,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,QAAQ;EACR,UAAU;CACZ,EACF;AACF,CAAC;AAED,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;;;;;AAKf,EAAE;AAEF,MAAa,gBAAgB,IAAI,YAAY,MAAM;CACjD,iBAAiB,EACf,QAAQ,aACV;CACA,UAAU,EACR,QAAQ;EACN,YAAY,YAAY;EACxB,UAAU,YAAY;CACxB,EACF;AACF,CAAC;AAED,MAAa,gBAAgB,oBAAoB,EAAE,KAAK,cAAc,EACpE,MAAM,GAAG;;;;;;kBAMO,OAAO,qBAAqB;IAE9C,EAAE;AAEF,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,MAAM,GAAG;;;;CAIT,WAAW,GAAG;;;;CAId,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;;;qBAGI,OAAO,aAAa;MACnCA,cAAkB,4BAA4B;;CAElD,iBAAiBA,cAAkB;CACnC,YAAY,GAAG;qBACI,OAAO,eAAe;kBACzB,OAAO,oBAAoB;;CAE3C,gBAAgB,GAAG;kBACH,OAAO,cAAc;;CAErC,cAAc,GAAG;qBACE,OAAO,eAAe;MACrCA,cAAkB,4BAA4B;;CAElD,OAAO,GAAG;;;;;;;;aAQC,OAAO,UAAU;;CAE5B,iBAAiB,GAAG;;;CAGpB,SAAS,GAAG;;;;;;;;;;;;;;;;;qBAiBO,OAAO,aAAa;MACnC,UAAU;;AAEhB,EAAE;AAEF,MAAa,gBAAgB,IAAI,MAAM;CACrC,kBAAkB,CAChB;EACE,OAAO,YAAY;EACnB,YAAY;EACZ,SAAS;CACX,CACF;CACA,iBAAiB,EACf,SAAS,aACX;CACA,UAAU;EACR,SAAS;GACP,YAAY;GACZ,QAAQ,YAAY;GACpB,UAAU,YAAY;EACxB;EACA,YAAY;GACV,OAAO;GACP,MAAM;EACR;CACF;AACF,CAAC;AAED,MAAa,kBAAkB,oBAAoB,EAAE,IAAI,KAAK,cAAc;CAC1E,YAAY,GACVA,cAAkB,+BAClB,GAAG;;KAGL;CACA,QAAQ,GACNA,cAAkB,2BAClB,GAAG;oBACa,OAAO,oBAAoB;KAE7C;CACA,QAAQ,GAAG;;;;kBAIK,OAAO,iBAAiB;;CAExC,UAAUA,cAAkB;CAC5B,MAAM,GAAG;;qBAEU,OAAO,eAAe;;AAE3C,EAAE;AAEF,MAAa,oBAAoB,IAAI,gBAAgB,MAAM;CACzD,iBAAiB,EACf,SAAS,aACX;CACA,UAAU,EACR,SAAS;EACP,YAAY,gBAAgB;EAC5B,QAAQ,gBAAgB;EACxB,UAAU,gBAAgB;CAC5B,EACF;AACF,CAAC;AAED,MAAa,eAAe,oBAAoB,EAAE,KAAK,cAAc,EACnE,MAAM,GAAG;MACL,WAAW,GAAG;;sCAEkB,OAAO,qBAAqB;oBAC9C,OAAO,iBAAiB;;IAG5C,EAAE;AAEF,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;;;AAG5C,EAAE;AAEF,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,SAAS,GAAG;;;;CAIZ,MAAM,GAAG;;;;;;aAME,OAAO,qBAAqB;;;;CAIvC,OAAO,GAAG;;;aAGC,OAAO,UAAU;;AAE9B,EAAE"}

package/es/base-ui/FormKit/Field.d.mts

@@ -0,0 +1,9 @@
+import { FormFieldProps, FormValues } from "./type.mjs";
+import { ReactNode } from "react";
+//#region src/base-ui/FormKit/Field.d.ts
+declare const _default: (<T extends FormValues = FormValues>(props: FormFieldProps<T>) => ReactNode) & {
+  displayName?: string;
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=Field.d.mts.map

package/es/base-ui/FormKit/Field.mjs

@@ -0,0 +1,167 @@
+"use client";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import form_default from "../../i18n/resources/en/form.mjs";
+import { fieldStyles, fieldVariants } from "../Form/style.mjs";
+import FormDivider from "../Form/components/FormDivider.mjs";
+import FormTitle from "../Form/components/FormTitle.mjs";
+import { resolveBinding } from "./binding.mjs";
+import { useFormKitContext } from "./context.mjs";
+import { toFieldValidator } from "./schema.mjs";
+import { getInternals } from "./instance.mjs";
+import { fieldKitStyles } from "./style.mjs";
+import { useStoreSelector } from "./useStoreSelector.mjs";
+import { cloneElement, isValidElement, memo, useCallback, useEffect, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+//#region src/base-ui/FormKit/Field.tsx
+const isEmpty = (value) => value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+const FieldControl = memo(({ bare, children, deps, emptyValue, getValue, id, name, render, required, trigger, validate, validateDebounce, validateOn, valueProp }) => {
+	const { form } = useFormKitContext();
+	const { engine, validateOn: formValidateOn } = getInternals(form);
+	const { t } = useTranslation(form_default);
+	const errorId = `${id}-error`;
+	const requiredMessage = typeof required === "string" ? required : t("form.required");
+	const fieldValidator = validate ? toFieldValidator(validate) : void 0;
+	const validatorRef = useRef(void 0);
+	validatorRef.current = async (value, values) => {
+		if (required && isEmpty(value)) return requiredMessage;
+		return fieldValidator?.(value, values);
+	};
+	const hasValidator = Boolean(required || validate);
+	const depsKey = deps?.join("\0");
+	useEffect(() => engine.registerField(name, {
+		debounceMs: validateDebounce,
+		deps: depsKey ? depsKey.split("\0") : void 0,
+		validate: hasValidator ? (value, values) => validatorRef.current(value, values) : void 0,
+		validateOn: validateOn ?? formValidateOn
+	}), [
+		engine,
+		name,
+		hasValidator,
+		depsKey,
+		validateDebounce,
+		validateOn,
+		formValidateOn
+	]);
+	const field = useStoreSelector(engine, (e) => e.getField(name));
+	const child = isValidElement(children) ? children : void 0;
+	const binding = child ? resolveBinding(child, {
+		emptyValue,
+		getValue,
+		trigger,
+		valueProp
+	}) : void 0;
+	const handlerRef = useRef({
+		binding,
+		childProps: child?.props
+	});
+	handlerRef.current = {
+		binding,
+		childProps: child?.props
+	};
+	const onChange = useCallback((...args) => {
+		const { binding: current, childProps } = handlerRef.current;
+		if (current) childProps?.[current.trigger]?.(...args);
+		const next = current ? current.getValue(...args) : args[0];
+		engine.setValue(name, next, "user");
+	}, [engine, name]);
+	const onBlur = useCallback((...args) => {
+		handlerRef.current.childProps?.onBlur?.(...args);
+		engine.blurField(name);
+	}, [engine, name]);
+	const warnedRef = useRef(false);
+	useEffect(() => {
+		if (render || child || warnedRef.current || process.env.NODE_ENV === "production") return;
+		warnedRef.current = true;
+		console.warn(`[@lobehub/ui/base-ui/form] Form.Field "${name}" needs a single element child or a render prop; nothing was bound.`);
+	}, [
+		render,
+		child,
+		name
+	]);
+	const errorNode = field.error && !bare ? /* @__PURE__ */ jsx("div", {
+		className: fieldStyles.error,
+		id: errorId,
+		children: field.error
+	}) : null;
+	if (render) {
+		const renderProps = {
+			error: field.error,
+			name,
+			onBlur,
+			onChange,
+			touched: field.touched,
+			validating: field.validating,
+			value: field.value
+		};
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [render(renderProps), errorNode] });
+	}
+	if (!child || !binding) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	const control = cloneElement(child, {
+		"aria-describedby": field.error ? errorId : void 0,
+		"aria-invalid": field.error ? true : void 0,
+		"id": child.props.id ?? id,
+		[binding.trigger]: onChange,
+		[binding.valueProp]: field.value === void 0 ? binding.emptyValue : field.value,
+		"onBlur": onBlur
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [control, errorNode] });
+});
+FieldControl.displayName = "FormFieldControl";
+const FormField = memo(({ avatar, bare, children, className, deps, desc, divider, emptyValue, extra, getValue, hidden, label, layout, minWidth, name, render, required, style, tag, trigger, validate, validateDebounce, validateOn, valueProp, variant }) => {
+	const id = useId();
+	const { mobile } = useResponsive();
+	const config = useFormKitContext();
+	if (hidden) return null;
+	const control = !name ? children : /* @__PURE__ */ jsx(FieldControl, {
+		bare,
+		deps,
+		emptyValue,
+		getValue,
+		id,
+		name,
+		render,
+		required,
+		trigger,
+		validate,
+		validateDebounce,
+		validateOn,
+		valueProp,
+		children
+	});
+	if (bare) return /* @__PURE__ */ jsx(Fragment$1, { children: control });
+	const labelFor = render ? void 0 : name ? id : isValidElement(children) ? children.props.id : void 0;
+	const mergedLayout = layout || (mobile ? "vertical" : config.layout);
+	const mergedVariant = variant || config.variant;
+	const controlWidth = mergedLayout === "vertical" || minWidth === void 0 || minWidth === "" ? void 0 : typeof minWidth === "number" ? `${minWidth}px` : minWidth;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [divider && /* @__PURE__ */ jsx(FormDivider, { visible: mergedVariant !== "borderless" }), /* @__PURE__ */ jsxs("div", {
+		className: cx(fieldVariants({ layout: mergedLayout }), className),
+		style,
+		children: [/* @__PURE__ */ jsx("label", {
+			className: fieldStyles.label,
+			htmlFor: labelFor,
+			children: /* @__PURE__ */ jsx(FormTitle, {
+				avatar,
+				desc,
+				tag,
+				title: required ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: fieldKitStyles.required,
+					children: "*"
+				})] }) : label
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			style: controlWidth ? { width: controlWidth } : void 0,
+			className: cx(fieldStyles.control, mergedLayout === "vertical" && fieldStyles.controlVertical, controlWidth && fieldKitStyles.controlFixed),
+			children: [control, extra && /* @__PURE__ */ jsx("div", {
+				className: fieldKitStyles.extra,
+				children: extra
+			})]
+		})]
+	})] });
+});
+FormField.displayName = "FormField";
+//#endregion
+export { FormField as default };
+
+//# sourceMappingURL=Field.mjs.map

package/es/base-ui/FormKit/Field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.mjs","names":["formMessages"],"sources":["../../../src/base-ui/FormKit/Field.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport {\n  cloneElement,\n  isValidElement,\n  memo,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport FormDivider from '../Form/components/FormDivider';\nimport FormTitle from '../Form/components/FormTitle';\nimport { fieldStyles, fieldVariants } from '../Form/style';\nimport { resolveBinding } from './binding';\nimport { useFormKitContext } from './context';\nimport type { FieldValidator } from './engine/types';\nimport { getInternals } from './instance';\nimport { toFieldValidator } from './schema';\nimport { fieldKitStyles } from './style';\nimport type { FieldRenderProps, FormFieldProps, FormValues } from './type';\nimport { useStoreSelector } from './useStoreSelector';\n\nconst isEmpty = (value: unknown) =>\n  value === undefined ||\n  value === null ||\n  value === '' ||\n  (Array.isArray(value) && value.length === 0);\n\ntype ControlProps = Pick<\n  FormFieldProps,\n  | 'bare'\n  | 'children'\n  | 'deps'\n  | 'emptyValue'\n  | 'getValue'\n  | 'name'\n  | 'render'\n  | 'required'\n  | 'trigger'\n  | 'validate'\n  | 'validateDebounce'\n  | 'validateOn'\n  | 'valueProp'\n> & { id: string; name: string };\n\nconst FieldControl = memo<ControlProps>(\n  ({\n    bare,\n    children,\n    deps,\n    emptyValue,\n    getValue,\n    id,\n    name,\n    render,\n    required,\n    trigger,\n    validate,\n    validateDebounce,\n    validateOn,\n    valueProp,\n  }) => {\n    const { form } = useFormKitContext();\n    const { engine, validateOn: formValidateOn } = getInternals(form);\n    const { t } = useTranslation(formMessages);\n    const errorId = `${id}-error`;\n\n    const requiredMessage = typeof required === 'string' ? required : t('form.required');\n    const fieldValidator = validate ? toFieldValidator(validate) : undefined;\n    const validatorRef = useRef<FieldValidator | undefined>(undefined);\n    validatorRef.current = async (value, values) => {\n      if (required && isEmpty(value)) return requiredMessage;\n      return fieldValidator?.(value, values);\n    };\n    const hasValidator = Boolean(required || validate);\n    const depsKey = deps?.join('\\u0000');\n\n    useEffect(\n      () =>\n        engine.registerField(name, {\n          debounceMs: validateDebounce,\n          deps: depsKey ? depsKey.split('\\u0000') : undefined,\n          validate: hasValidator\n            ? (value, values) => validatorRef.current!(value, values)\n            : undefined,\n          validateOn: validateOn ?? formValidateOn,\n        }),\n      [engine, name, hasValidator, depsKey, validateDebounce, validateOn, formValidateOn],\n    );\n\n    const field = useStoreSelector(engine, (e) => e.getField(name));\n\n    const child = isValidElement(children) ? (children as ReactElement<any>) : undefined;\n    const binding = child\n      ? resolveBinding(child, { emptyValue, getValue, trigger, valueProp })\n      : undefined;\n    const handlerRef = useRef({ binding, childProps: child?.props as Record<string, any> });\n    handlerRef.current = { binding, childProps: child?.props as Record<string, any> };\n\n    const onChange = useCallback(\n      (...args: unknown[]) => {\n        const { binding: current, childProps } = handlerRef.current;\n        if (current) childProps?.[current.trigger]?.(...args);\n        const next = current ? current.getValue(...args) : args[0];\n        engine.setValue(name, next, 'user');\n      },\n      [engine, name],\n    );\n    const onBlur = useCallback(\n      (...args: unknown[]) => {\n        handlerRef.current.childProps?.onBlur?.(...args);\n        engine.blurField(name);\n      },\n      [engine, name],\n    );\n\n    const warnedRef = useRef(false);\n    useEffect(() => {\n      if (render || child || warnedRef.current || process.env.NODE_ENV === 'production') return;\n      warnedRef.current = true;\n      console.warn(\n        `[@lobehub/ui/base-ui/form] Form.Field \"${name}\" needs a single element child or a render prop; nothing was bound.`,\n      );\n    }, [render, child, name]);\n\n    const errorNode =\n      field.error && !bare ? (\n        <div className={fieldStyles.error} id={errorId}>\n          {field.error}\n        </div>\n      ) : null;\n\n    if (render) {\n      const renderProps: FieldRenderProps = {\n        error: field.error,\n        name,\n        onBlur,\n        onChange,\n        touched: field.touched,\n        validating: field.validating,\n        value: field.value,\n      };\n      return (\n        <>\n          {render(renderProps)}\n          {errorNode}\n        </>\n      );\n    }\n\n    if (!child || !binding) return <>{children}</>;\n\n    const control = cloneElement(child, {\n      'aria-describedby': field.error ? errorId : undefined,\n      'aria-invalid': field.error ? true : undefined,\n      'id': child.props.id ?? id,\n      [binding.trigger]: onChange,\n      [binding.valueProp]: field.value === undefined ? binding.emptyValue : field.value,\n      'onBlur': onBlur,\n    });\n\n    return (\n      <>\n        {control}\n        {errorNode}\n      </>\n    );\n  },\n);\n\nFieldControl.displayName = 'FormFieldControl';\n\nconst FormField = memo<FormFieldProps>(\n  ({\n    avatar,\n    bare,\n    children,\n    className,\n    deps,\n    desc,\n    divider,\n    emptyValue,\n    extra,\n    getValue,\n    hidden,\n    label,\n    layout,\n    minWidth,\n    name,\n    render,\n    required,\n    style,\n    tag,\n    trigger,\n    validate,\n    validateDebounce,\n    validateOn,\n    valueProp,\n    variant,\n  }) => {\n    const id = useId();\n    const { mobile } = useResponsive();\n    const config = useFormKitContext();\n\n    if (hidden) return null;\n\n    const control = !name ? (\n      children\n    ) : (\n      <FieldControl\n        bare={bare}\n        deps={deps}\n        emptyValue={emptyValue}\n        getValue={getValue}\n        id={id}\n        name={name}\n        render={render}\n        required={required}\n        trigger={trigger}\n        validate={validate}\n        validateDebounce={validateDebounce}\n        validateOn={validateOn}\n        valueProp={valueProp}\n      >\n        {children}\n      </FieldControl>\n    );\n\n    if (bare) return <>{control}</>;\n\n    const labelFor = render\n      ? undefined\n      : name\n        ? id\n        : isValidElement<{ id?: string }>(children)\n          ? children.props.id\n          : undefined;\n    const mergedLayout = layout || (mobile ? 'vertical' : config.layout);\n    const mergedVariant = variant || config.variant;\n    const controlWidth =\n      mergedLayout === 'vertical' || minWidth === undefined || minWidth === ''\n        ? undefined\n        : typeof minWidth === 'number'\n          ? `${minWidth}px`\n          : minWidth;\n\n    return (\n      <>\n        {divider && <FormDivider visible={mergedVariant !== 'borderless'} />}\n        <div className={cx(fieldVariants({ layout: mergedLayout }), className)} style={style}>\n          <label className={fieldStyles.label} htmlFor={labelFor}>\n            <FormTitle\n              avatar={avatar}\n              desc={desc}\n              tag={tag}\n              title={\n                required ? (\n                  <>\n                    {label}\n                    <span aria-hidden className={fieldKitStyles.required}>\n                      *\n                    </span>\n                  </>\n                ) : (\n                  label\n                )\n              }\n            />\n          </label>\n          <div\n            style={controlWidth ? { width: controlWidth } : undefined}\n            className={cx(\n              fieldStyles.control,\n              mergedLayout === 'vertical' && fieldStyles.controlVertical,\n              controlWidth && fieldKitStyles.controlFixed,\n            )}\n          >\n            {control}\n            {extra && <div className={fieldKitStyles.extra}>{extra}</div>}\n          </div>\n        </div>\n      </>\n    );\n  },\n);\n\nFormField.displayName = 'FormField';\n\nexport default FormField as unknown as (<T extends FormValues = FormValues>(\n  props: FormFieldProps<T>,\n) => ReactNode) & { displayName?: string };\n"],"mappings":"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"}

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

@@ -0,0 +1,96 @@
+"use client";
+import { rootVariants } from "../Form/style.mjs";
+import FormFlatGroup from "../Form/components/FormFlatGroup.mjs";
+import FormGroup from "../Form/components/FormGroup.mjs";
+import { FormKitContext } from "./context.mjs";
+import FormField from "./Field.mjs";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+//#region src/base-ui/FormKit/Form.tsx
+const focusFirstInvalid = (root) => {
+	const target = root?.querySelector("[aria-invalid=\"true\"]");
+	if (!target) return;
+	target.scrollIntoView?.({ block: "center" });
+	target.focus();
+};
+const Form = ({ activeKey, children, className, classNames, collapsible, defaultActiveKey, footer, form, gap, itemMinWidth, items, itemsType = "group", layout, onCollapse, ref, style, styles: customStyles, variant = "borderless", ...rest }) => {
+	const { mobile } = useResponsive();
+	const formRef = useRef(null);
+	const context = useMemo(() => ({
+		form,
+		layout: layout || (mobile ? "vertical" : "horizontal"),
+		variant
+	}), [
+		form,
+		layout,
+		mobile,
+		variant
+	]);
+	const mergedRef = useCallback((node) => {
+		formRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const handleSubmit = useCallback(async (event) => {
+		event.preventDefault();
+		if (!(await form.submit()).valid) setTimeout(() => focusFirstInvalid(formRef.current), 0);
+	}, [form]);
+	const renderField = (item, index) => /* @__PURE__ */ jsx(FormField, {
+		className: classNames?.item,
+		divider: index !== 0,
+		style: customStyles?.item,
+		...item,
+		minWidth: "minWidth" in item ? item.minWidth : itemMinWidth
+	}, item.name ?? index);
+	const renderGroup = (group, index) => {
+		const key = group.key ?? index;
+		return /* @__PURE__ */ jsx(FormGroup, {
+			active: activeKey && group.key ? activeKey.includes(key) : void 0,
+			className: classNames?.group,
+			collapsible: group.collapsible ?? collapsible,
+			desc: group.desc,
+			extra: group.extra,
+			icon: group.icon,
+			style: customStyles?.group,
+			title: group.title,
+			variant: group.variant || variant,
+			defaultActive: defaultActiveKey && group.key ? defaultActiveKey.includes(key) : group.defaultActive,
+			onCollapse: (active) => {
+				const keys = (activeKey || defaultActiveKey || []).filter((k) => k !== key);
+				onCollapse?.(active ? [...keys, key] : keys);
+			},
+			children: Array.isArray(group.children) ? group.children.filter((item) => !item.hidden).map(renderField) : group.children
+		}, key);
+	};
+	const renderedItems = items && items.length > 0 ? itemsType === "group" ? items.map(renderGroup) : /* @__PURE__ */ jsx(FormFlatGroup, {
+		className: classNames?.group,
+		style: customStyles?.group,
+		variant,
+		children: items.filter((item) => !item.hidden).map(renderField)
+	}) : null;
+	return /* @__PURE__ */ jsx(FormKitContext, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("form", {
+			...rest,
+			noValidate: true,
+			className: cx(rootVariants({ variant }), className),
+			ref: mergedRef,
+			style: {
+				gap: gap ?? (layout === "vertical" ? 0 : void 0),
+				...style
+			},
+			onSubmit: handleSubmit,
+			children: [
+				renderedItems,
+				children,
+				footer
+			]
+		})
+	});
+};
+Form.displayName = "Form";
+//#endregion
+export { Form as default };
+
+//# sourceMappingURL=Form.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.mjs","names":[],"sources":["../../../src/base-ui/FormKit/Form.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { type FormEvent, useCallback, useMemo, useRef } from 'react';\n\nimport FormFlatGroup from '../Form/components/FormFlatGroup';\nimport FormGroup from '../Form/components/FormGroup';\nimport { rootVariants } from '../Form/style';\nimport { FormKitContext, type FormKitContextValue } from './context';\nimport FormField from './Field';\nimport type { FormFieldProps, FormGroupItem, FormProps, FormValues } from './type';\n\nconst focusFirstInvalid = (root: HTMLFormElement | null) => {\n  const target = root?.querySelector<HTMLElement>('[aria-invalid=\"true\"]');\n  if (!target) return;\n  target.scrollIntoView?.({ block: 'center' });\n  target.focus();\n};\n\nconst Form = <T extends FormValues>({\n  activeKey,\n  children,\n  className,\n  classNames,\n  collapsible,\n  defaultActiveKey,\n  footer,\n  form,\n  gap,\n  itemMinWidth,\n  items,\n  itemsType = 'group',\n  layout,\n  onCollapse,\n  ref,\n  style,\n  styles: customStyles,\n  variant = 'borderless',\n  ...rest\n}: FormProps<T>) => {\n  const { mobile } = useResponsive();\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  const context = useMemo<FormKitContextValue>(\n    () => ({\n      form,\n      layout: layout || (mobile ? 'vertical' : 'horizontal'),\n      variant,\n    }),\n    [form, layout, mobile, variant],\n  );\n\n  const mergedRef = useCallback(\n    (node: HTMLFormElement | null) => {\n      formRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      const result = await form.submit();\n      if (!result.valid) setTimeout(() => focusFirstInvalid(formRef.current), 0);\n    },\n    [form],\n  );\n\n  const renderField = (item: FormFieldProps<T>, index: number) => (\n    <FormField\n      className={classNames?.item}\n      divider={index !== 0}\n      key={item.name ?? index}\n      style={customStyles?.item}\n      {...(item as FormFieldProps)}\n      minWidth={'minWidth' in item ? item.minWidth : itemMinWidth}\n    />\n  );\n\n  const renderGroup = (group: FormGroupItem<T>, index: number) => {\n    const key = group.key ?? index;\n    return (\n      <FormGroup\n        active={activeKey && group.key ? activeKey.includes(key) : undefined}\n        className={classNames?.group}\n        collapsible={group.collapsible ?? collapsible}\n        desc={group.desc}\n        extra={group.extra}\n        icon={group.icon}\n        key={key}\n        style={customStyles?.group}\n        title={group.title}\n        variant={group.variant || variant}\n        defaultActive={\n          defaultActiveKey && group.key ? defaultActiveKey.includes(key) : group.defaultActive\n        }\n        onCollapse={(active) => {\n          const keys = (activeKey || defaultActiveKey || []).filter((k) => k !== key);\n          onCollapse?.(active ? [...keys, key] : keys);\n        }}\n      >\n        {Array.isArray(group.children)\n          ? group.children.filter((item) => !item.hidden).map(renderField)\n          : group.children}\n      </FormGroup>\n    );\n  };\n\n  const renderedItems =\n    items && items.length > 0 ? (\n      itemsType === 'group' ? (\n        (items as FormGroupItem<T>[]).map(renderGroup)\n      ) : (\n        <FormFlatGroup className={classNames?.group} style={customStyles?.group} variant={variant}>\n          {(items as FormFieldProps<T>[]).filter((item) => !item.hidden).map(renderField)}\n        </FormFlatGroup>\n      )\n    ) : null;\n\n  return (\n    <FormKitContext value={context}>\n      <form\n        {...rest}\n        noValidate\n        className={cx(rootVariants({ variant }), className)}\n        ref={mergedRef}\n        style={{ gap: gap ?? (layout === 'vertical' ? 0 : undefined), ...style }}\n        onSubmit={handleSubmit}\n      >\n        {renderedItems}\n        {children}\n        {footer}\n      </form>\n    </FormKitContext>\n  );\n};\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,qBAAqB,SAAiC;CAC1D,MAAM,SAAS,MAAM,cAA2B,yBAAuB;CACvE,IAAI,CAAC,QAAQ;CACb,OAAO,iBAAiB,EAAE,OAAO,SAAS,CAAC;CAC3C,OAAO,MAAM;AACf;AAEA,MAAM,QAA8B,EAClC,WACA,UACA,WACA,YACA,aACA,kBACA,QACA,MACA,KACA,cACA,OACA,YAAY,SACZ,QACA,YACA,KACA,OACA,QAAQ,cACR,UAAU,cACV,GAAG,WACe;CAClB,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,UAAU,OAA+B,IAAI;CAEnD,MAAM,UAAU,eACP;EACL;EACA,QAAQ,WAAW,SAAS,aAAa;EACzC;CACF,IACA;EAAC;EAAM;EAAQ;EAAQ;CAAO,CAChC;CAEA,MAAM,YAAY,aACf,SAAiC;EAChC,QAAQ,UAAU;EAClB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B,GACA,CAAC,GAAG,CACN;CAEA,MAAM,eAAe,YACnB,OAAO,UAAsC;EAC3C,MAAM,eAAe;EAErB,IAAI,EAAC,MADgB,KAAK,OAAO,EAAA,CACrB,OAAO,iBAAiB,kBAAkB,QAAQ,OAAO,GAAG,CAAC;CAC3E,GACA,CAAC,IAAI,CACP;CAEA,MAAM,eAAe,MAAyB,UAC5C,oBAAC,WAAD;EACE,WAAW,YAAY;EACvB,SAAS,UAAU;EAEnB,OAAO,cAAc;EACrB,GAAK;EACL,UAAU,cAAc,OAAO,KAAK,WAAW;CAChD,GAJM,KAAK,QAAQ,KAInB;CAGH,MAAM,eAAe,OAAyB,UAAkB;EAC9D,MAAM,MAAM,MAAM,OAAO;EACzB,OACE,oBAAC,WAAD;GACE,QAAQ,aAAa,MAAM,MAAM,UAAU,SAAS,GAAG,IAAI,KAAA;GAC3D,WAAW,YAAY;GACvB,aAAa,MAAM,eAAe;GAClC,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,MAAM,MAAM;GAEZ,OAAO,cAAc;GACrB,OAAO,MAAM;GACb,SAAS,MAAM,WAAW;GAC1B,eACE,oBAAoB,MAAM,MAAM,iBAAiB,SAAS,GAAG,IAAI,MAAM;GAEzE,aAAa,WAAW;IACtB,MAAM,QAAQ,aAAa,oBAAoB,CAAC,EAAA,CAAG,QAAQ,MAAM,MAAM,GAAG;IAC1E,aAAa,SAAS,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI;GAC7C;GAEC,UAAA,MAAM,QAAQ,MAAM,QAAQ,IACzB,MAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC,IAAI,WAAW,IAC7D,MAAM;EACD,GAfJ,GAeI;CAEf;CAEA,MAAM,gBACJ,SAAS,MAAM,SAAS,IACtB,cAAc,UACX,MAA6B,IAAI,WAAW,IAE7C,oBAAC,eAAD;EAAe,WAAW,YAAY;EAAO,OAAO,cAAc;EAAgB;EAC9E,UAAA,MAA8B,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC,IAAI,WAAW;CACjE,CAAA,IAEf;CAEN,OACE,oBAAC,gBAAD;EAAgB,OAAO;EACrB,UAAA,qBAAC,QAAD;GACE,GAAI;GACJ,YAAA;GACA,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;GAClD,KAAK;GACL,OAAO;IAAE,KAAK,QAAQ,WAAW,aAAa,IAAI,KAAA;IAAY,GAAG;GAAM;GACvE,UAAU;GANZ,UAAA;IAQG;IACA;IACA;GACG;;CACQ,CAAA;AAEpB;AAEA,KAAK,cAAc"}

package/es/base-ui/FormKit/List.d.mts

@@ -0,0 +1,34 @@
+import { FieldValidate } from "./schema.mjs";
+import { ReactElement, ReactNode } from "react";
+//#region src/base-ui/FormKit/List.d.ts
+interface FormListField {
+  index: number;
+  key: string;
+  name: string;
+}
+interface FormListRenderProps {
+  add: (item?: unknown) => void;
+  fields: FormListField[];
+  move: (from: number, to: number) => void;
+  remove: (index: number) => void;
+}
+interface FormListColumn {
+  children: ReactElement;
+  flex?: number;
+  name: string;
+  required?: boolean | string;
+  title?: ReactNode;
+  validate?: FieldValidate;
+}
+interface FormListProps {
+  addText?: ReactNode;
+  children?: (props: FormListRenderProps) => ReactNode;
+  columns?: FormListColumn[];
+  emptyText?: ReactNode;
+  name: string;
+  newItem?: unknown;
+}
+declare const FormList: import("react").NamedExoticComponent<FormListProps>;
+//#endregion
+export { FormListColumn, FormListField, FormListProps, FormListRenderProps, FormList as default };
+//# sourceMappingURL=List.d.mts.map

package/es/base-ui/FormKit/List.mjs

@@ -0,0 +1,102 @@
+"use client";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import form_default from "../../i18n/resources/en/form.mjs";
+import { useFormKitContext } from "./context.mjs";
+import { getInternals } from "./instance.mjs";
+import { listStyles } from "./style.mjs";
+import { useStoreSelector } from "./useStoreSelector.mjs";
+import FormField from "./Field.mjs";
+import { cloneElement, memo, useCallback, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon, XIcon } from "lucide-react";
+//#region src/base-ui/FormKit/List.tsx
+let rowSeed = 0;
+const nextRowKey = () => `row-${rowSeed += 1}`;
+const createItem = (newItem) => typeof newItem === "function" ? newItem() : newItem && typeof newItem === "object" ? structuredClone(newItem) : newItem ?? {};
+const labelFor = (column, index) => column.children.props["aria-label"] ?? (typeof column.title === "string" ? `${column.title} ${index + 1}` : void 0);
+const FormList = memo(({ addText, children, columns, emptyText, name, newItem }) => {
+	const { form } = useFormKitContext();
+	const { engine } = getInternals(form);
+	const { t } = useTranslation(form_default);
+	const length = useStoreSelector(engine, (e) => {
+		const value = e.getValue(name);
+		return Array.isArray(value) ? value.length : 0;
+	});
+	const keysRef = useRef([]);
+	const keys = keysRef.current;
+	if (keys.length > length) keys.length = length;
+	while (keys.length < length) keys.push(nextRowKey());
+	const add = useCallback((item) => {
+		keysRef.current.push(nextRowKey());
+		engine.pushItem(name, item);
+	}, [engine, name]);
+	const remove = useCallback((index) => {
+		keysRef.current.splice(index, 1);
+		engine.removeItem(name, index);
+	}, [engine, name]);
+	const move = useCallback((from, to) => {
+		const [moved] = keysRef.current.splice(from, 1);
+		keysRef.current.splice(to, 0, moved);
+		engine.moveItem(name, from, to);
+	}, [engine, name]);
+	const fields = keys.map((key, index) => ({
+		index,
+		key,
+		name: `${name}.${index}`
+	}));
+	if (children || !columns) return /* @__PURE__ */ jsx(Fragment$1, { children: children?.({
+		add,
+		fields,
+		move,
+		remove
+	}) });
+	const gridTemplateColumns = `${columns.map((c) => `minmax(0, ${c.flex ?? 1}fr)`).join(" ")} 36px`;
+	const addButton = /* @__PURE__ */ jsxs("button", {
+		className: listStyles.add,
+		type: "button",
+		onClick: () => add(createItem(newItem)),
+		children: [/* @__PURE__ */ jsx(PlusIcon, { size: 14 }), addText ?? t("form.list.add")]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: listStyles.table,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: listStyles.head,
+			style: { gridTemplateColumns },
+			children: columns.map((column) => /* @__PURE__ */ jsx("div", {
+				className: listStyles.title,
+				children: column.title
+			}, column.name))
+		}), fields.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: listStyles.empty,
+			children: [/* @__PURE__ */ jsx("span", { children: emptyText ?? t("form.list.empty") }), addButton]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [fields.map((field) => /* @__PURE__ */ jsxs("div", {
+			className: listStyles.row,
+			style: { gridTemplateColumns },
+			children: [columns.map((column) => /* @__PURE__ */ jsx("div", {
+				className: listStyles.cell,
+				children: /* @__PURE__ */ jsx(FormField, {
+					bare: true,
+					name: `${field.name}.${column.name}`,
+					required: column.required,
+					validate: column.validate,
+					children: cloneElement(column.children, { "aria-label": labelFor(column, field.index) })
+				})
+			}, column.name)), /* @__PURE__ */ jsx(ActionIcon, {
+				"aria-label": t("form.list.remove"),
+				icon: XIcon,
+				size: "small",
+				title: t("form.list.remove"),
+				onClick: () => remove(field.index)
+			})]
+		}, field.key)), /* @__PURE__ */ jsx("div", {
+			className: listStyles.foot,
+			children: addButton
+		})] })]
+	});
+});
+FormList.displayName = "FormList";
+//#endregion
+export { FormList as default };
+
+//# sourceMappingURL=List.mjs.map

package/es/base-ui/FormKit/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.mjs","names":["formMessages"],"sources":["../../../src/base-ui/FormKit/List.tsx"],"sourcesContent":["'use client';\n\nimport { PlusIcon, XIcon } from 'lucide-react';\nimport { cloneElement, memo, type ReactElement, type ReactNode, useCallback, useRef } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useFormKitContext } from './context';\nimport FormField from './Field';\nimport { getInternals } from './instance';\nimport type { FieldValidate } from './schema';\nimport { listStyles } from './style';\nimport { useStoreSelector } from './useStoreSelector';\n\nexport interface FormListField {\n  index: number;\n  key: string;\n  name: string;\n}\n\nexport interface FormListRenderProps {\n  add: (item?: unknown) => void;\n  fields: FormListField[];\n  move: (from: number, to: number) => void;\n  remove: (index: number) => void;\n}\n\nexport interface FormListColumn {\n  children: ReactElement;\n  flex?: number;\n  name: string;\n  required?: boolean | string;\n  title?: ReactNode;\n  validate?: FieldValidate;\n}\n\nexport interface FormListProps {\n  addText?: ReactNode;\n  children?: (props: FormListRenderProps) => ReactNode;\n  columns?: FormListColumn[];\n  emptyText?: ReactNode;\n  name: string;\n  newItem?: unknown;\n}\n\nlet rowSeed = 0;\nconst nextRowKey = () => `row-${(rowSeed += 1)}`;\n\nconst createItem = (newItem: unknown) =>\n  typeof newItem === 'function'\n    ? newItem()\n    : newItem && typeof newItem === 'object'\n      ? structuredClone(newItem)\n      : (newItem ?? {});\n\nconst labelFor = (column: FormListColumn, index: number) =>\n  (column.children as ReactElement<{ 'aria-label'?: string }>).props['aria-label'] ??\n  (typeof column.title === 'string' ? `${column.title} ${index + 1}` : undefined);\n\nconst FormList = memo<FormListProps>(({ addText, children, columns, emptyText, name, newItem }) => {\n  const { form } = useFormKitContext();\n  const { engine } = getInternals(form);\n  const { t } = useTranslation(formMessages);\n  const length = useStoreSelector(engine, (e) => {\n    const value = e.getValue(name);\n    return Array.isArray(value) ? value.length : 0;\n  });\n\n  const keysRef = useRef<string[]>([]);\n  const keys = keysRef.current;\n  if (keys.length > length) keys.length = length;\n  while (keys.length < length) keys.push(nextRowKey());\n\n  const add = useCallback(\n    (item?: unknown) => {\n      keysRef.current.push(nextRowKey());\n      engine.pushItem(name, item);\n    },\n    [engine, name],\n  );\n  const remove = useCallback(\n    (index: number) => {\n      keysRef.current.splice(index, 1);\n      engine.removeItem(name, index);\n    },\n    [engine, name],\n  );\n  const move = useCallback(\n    (from: number, to: number) => {\n      const [moved] = keysRef.current.splice(from, 1);\n      keysRef.current.splice(to, 0, moved);\n      engine.moveItem(name, from, to);\n    },\n    [engine, name],\n  );\n\n  const fields = keys.map((key, index) => ({ index, key, name: `${name}.${index}` }));\n\n  if (children || !columns) return <>{children?.({ add, fields, move, remove })}</>;\n\n  const gridTemplateColumns = `${columns.map((c) => `minmax(0, ${c.flex ?? 1}fr)`).join(' ')} 36px`;\n  const addButton = (\n    <button className={listStyles.add} type=\"button\" onClick={() => add(createItem(newItem))}>\n      <PlusIcon size={14} />\n      {addText ?? t('form.list.add')}\n    </button>\n  );\n\n  return (\n    <div className={listStyles.table}>\n      <div className={listStyles.head} style={{ gridTemplateColumns }}>\n        {columns.map((column) => (\n          <div className={listStyles.title} key={column.name}>\n            {column.title}\n          </div>\n        ))}\n      </div>\n      {fields.length === 0 ? (\n        <div className={listStyles.empty}>\n          <span>{emptyText ?? t('form.list.empty')}</span>\n          {addButton}\n        </div>\n      ) : (\n        <>\n          {fields.map((field) => (\n            <div className={listStyles.row} key={field.key} style={{ gridTemplateColumns }}>\n              {columns.map((column) => (\n                <div className={listStyles.cell} key={column.name}>\n                  <FormField\n                    bare\n                    name={`${field.name}.${column.name}`}\n                    required={column.required}\n                    validate={column.validate}\n                  >\n                    {cloneElement(column.children as ReactElement<any>, {\n                      'aria-label': labelFor(column, field.index),\n                    })}\n                  </FormField>\n                </div>\n              ))}\n              <ActionIcon\n                aria-label={t('form.list.remove')}\n                icon={XIcon}\n                size={'small'}\n                title={t('form.list.remove')}\n                onClick={() => remove(field.index)}\n              />\n            </div>\n          ))}\n          <div className={listStyles.foot}>{addButton}</div>\n        </>\n      )}\n    </div>\n  );\n});\n\nFormList.displayName = 'FormList';\n\nexport default FormList;\n"],"mappings":"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"}

package/es/base-ui/FormKit/SubmitFooter.d.mts

@@ -0,0 +1,6 @@
+import { FormSubmitFooterProps } from "../Form/type.mjs";
+//#region src/base-ui/FormKit/SubmitFooter.d.ts
+declare const SubmitFooter: import("react").NamedExoticComponent<FormSubmitFooterProps>;
+//#endregion
+export { SubmitFooter as default };
+//# sourceMappingURL=SubmitFooter.d.mts.map

package/es/base-ui/FormKit/SubmitFooter.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { FormContext } from "../Form/context.mjs";
+import FormSubmitFooter from "../Form/components/FormSubmitFooter.mjs";
+import { useFormKitContext } from "./context.mjs";
+import { getInternals } from "./instance.mjs";
+import { useStoreSelector } from "./useStoreSelector.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/base-ui/FormKit/SubmitFooter.tsx
+const SubmitFooter = memo((props) => {
+	const { form, layout, variant } = useFormKitContext();
+	const { engine } = getInternals(form);
+	const status = useStoreSelector(engine, (e) => e.getStatus());
+	const legacyContext = useMemo(() => ({
+		hasUnsavedChanges: status.dirty,
+		layout,
+		requestReset: () => form.reset(),
+		submitLoading: status.submitting,
+		variant
+	}), [
+		form,
+		layout,
+		status.dirty,
+		status.submitting,
+		variant
+	]);
+	return /* @__PURE__ */ jsx(FormContext, {
+		value: legacyContext,
+		children: /* @__PURE__ */ jsx(FormSubmitFooter, { ...props })
+	});
+});
+SubmitFooter.displayName = "FormSubmitFooter";
+//#endregion
+export { SubmitFooter as default };
+
+//# sourceMappingURL=SubmitFooter.mjs.map

package/es/base-ui/FormKit/SubmitFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitFooter.mjs","names":[],"sources":["../../../src/base-ui/FormKit/SubmitFooter.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport FormSubmitFooter from '../Form/components/FormSubmitFooter';\nimport { FormContext } from '../Form/context';\nimport type { FormSubmitFooterProps } from '../Form/type';\nimport { useFormKitContext } from './context';\nimport { getInternals } from './instance';\nimport { useStoreSelector } from './useStoreSelector';\n\nconst SubmitFooter = memo<FormSubmitFooterProps>((props) => {\n  const { form, layout, variant } = useFormKitContext();\n  const { engine } = getInternals(form);\n  const status = useStoreSelector(engine, (e) => e.getStatus());\n\n  const legacyContext = useMemo(\n    () => ({\n      hasUnsavedChanges: status.dirty,\n      layout,\n      requestReset: () => form.reset(),\n      submitLoading: status.submitting,\n      variant,\n    }),\n    [form, layout, status.dirty, status.submitting, variant],\n  );\n\n  return (\n    <FormContext value={legacyContext}>\n      <FormSubmitFooter {...props} />\n    </FormContext>\n  );\n});\n\nSubmitFooter.displayName = 'FormSubmitFooter';\n\nexport default SubmitFooter;\n"],"mappings":";;;;;;;;;AAWA,MAAM,eAAe,MAA6B,UAAU;CAC1D,MAAM,EAAE,MAAM,QAAQ,YAAY,kBAAkB;CACpD,MAAM,EAAE,WAAW,aAAa,IAAI;CACpC,MAAM,SAAS,iBAAiB,SAAS,MAAM,EAAE,UAAU,CAAC;CAE5D,MAAM,gBAAgB,eACb;EACL,mBAAmB,OAAO;EAC1B;EACA,oBAAoB,KAAK,MAAM;EAC/B,eAAe,OAAO;EACtB;CACF,IACA;EAAC;EAAM;EAAQ,OAAO;EAAO,OAAO;EAAY;CAAO,CACzD;CAEA,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,oBAAC,kBAAD,EAAkB,GAAI,MAAQ,CAAA;CACnB,CAAA;AAEjB,CAAC;AAED,aAAa,cAAc"}

package/es/base-ui/FormKit/binding.mjs

@@ -0,0 +1,23 @@
+//#region src/base-ui/FormKit/binding.ts
+const isEventLike = (arg) => typeof arg === "object" && arg !== null && "target" in arg && typeof arg.target === "object" && arg.target !== null;
+const defaultGetValue = (arg) => {
+	if (!isEventLike(arg)) return arg;
+	const { target } = arg;
+	return target.type === "checkbox" || target.type === "radio" ? target.checked : target.value;
+};
+const resolveBinding = (child, override) => {
+	const { type } = child;
+	const declared = typeof type === "object" || typeof type === "function" ? type.formBinding : void 0;
+	const props = child.props;
+	const nativeCheckable = type === "input" && (props.type === "checkbox" || props.type === "radio");
+	return {
+		emptyValue: override.emptyValue ?? declared?.emptyValue,
+		getValue: override.getValue ?? declared?.getValue ?? defaultGetValue,
+		trigger: override.trigger ?? declared?.trigger ?? "onChange",
+		valueProp: override.valueProp ?? declared?.valueProp ?? (nativeCheckable ? "checked" : "value")
+	};
+};
+//#endregion
+export { defaultGetValue, resolveBinding };
+
+//# sourceMappingURL=binding.mjs.map

package/es/base-ui/FormKit/binding.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"binding.mjs","names":[],"sources":["../../../src/base-ui/FormKit/binding.ts"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport type { FieldBinding } from './type';\n\nconst isEventLike = (arg: unknown): arg is { target: HTMLInputElement } =>\n  typeof arg === 'object' &&\n  arg !== null &&\n  'target' in arg &&\n  typeof (arg as { target: unknown }).target === 'object' &&\n  (arg as { target: unknown }).target !== null;\n\nexport const defaultGetValue = (arg: unknown) => {\n  if (!isEventLike(arg)) return arg;\n  const { target } = arg;\n  return target.type === 'checkbox' || target.type === 'radio' ? target.checked : target.value;\n};\n\nexport interface ResolvedBinding {\n  emptyValue: unknown;\n  getValue: (...args: any[]) => unknown;\n  trigger: string;\n  valueProp: string;\n}\n\nexport const resolveBinding = (child: ReactElement, override: FieldBinding): ResolvedBinding => {\n  const { type } = child;\n  const declared =\n    typeof type === 'object' || typeof type === 'function'\n      ? (type as { formBinding?: FieldBinding }).formBinding\n      : undefined;\n  const props = child.props as { type?: string };\n  const nativeCheckable = type === 'input' && (props.type === 'checkbox' || props.type === 'radio');\n\n  return {\n    emptyValue: override.emptyValue ?? declared?.emptyValue,\n    getValue: override.getValue ?? declared?.getValue ?? defaultGetValue,\n    trigger: override.trigger ?? declared?.trigger ?? 'onChange',\n    valueProp: override.valueProp ?? declared?.valueProp ?? (nativeCheckable ? 'checked' : 'value'),\n  };\n};\n"],"mappings":";AAIA,MAAM,eAAe,QACnB,OAAO,QAAQ,YACf,QAAQ,QACR,YAAY,OACZ,OAAQ,IAA4B,WAAW,YAC9C,IAA4B,WAAW;AAE1C,MAAa,mBAAmB,QAAiB;CAC/C,IAAI,CAAC,YAAY,GAAG,GAAG,OAAO;CAC9B,MAAM,EAAE,WAAW;CACnB,OAAO,OAAO,SAAS,cAAc,OAAO,SAAS,UAAU,OAAO,UAAU,OAAO;AACzF;AASA,MAAa,kBAAkB,OAAqB,aAA4C;CAC9F,MAAM,EAAE,SAAS;CACjB,MAAM,WACJ,OAAO,SAAS,YAAY,OAAO,SAAS,aACvC,KAAwC,cACzC,KAAA;CACN,MAAM,QAAQ,MAAM;CACpB,MAAM,kBAAkB,SAAS,YAAY,MAAM,SAAS,cAAc,MAAM,SAAS;CAEzF,OAAO;EACL,YAAY,SAAS,cAAc,UAAU;EAC7C,UAAU,SAAS,YAAY,UAAU,YAAY;EACrD,SAAS,SAAS,WAAW,UAAU,WAAW;EAClD,WAAW,SAAS,aAAa,UAAU,cAAc,kBAAkB,YAAY;CACzF;AACF"}

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

@@ -0,0 +1,7 @@
+import "../Form/type.mjs";
+import { FormInstance, FormValues } from "./type.mjs";
+//#region src/base-ui/FormKit/context.d.ts
+declare const useFormInstance: <T extends FormValues = FormValues>() => FormInstance<T>;
+//#endregion
+export { useFormInstance };
+//# sourceMappingURL=context.d.mts.map

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

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/base-ui/FormKit/context.ts
+const FormKitContext = createContext(null);
+const useFormKitContext = () => {
+	const value = use(FormKitContext);
+	if (!value) throw new Error("[@lobehub/ui/base-ui/form] Form.Field must be rendered inside <Form>");
+	return value;
+};
+const useFormInstance = () => useFormKitContext().form;
+//#endregion
+export { FormKitContext, useFormInstance, useFormKitContext };
+
+//# sourceMappingURL=context.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/base-ui/FormKit/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { FormLayout, FormVariant } from '../Form/type';\nimport type { FormInstance, FormValues } from './type';\n\nexport interface FormKitContextValue {\n  form: FormInstance<any>;\n  layout: FormLayout;\n  variant: FormVariant;\n}\n\nexport const FormKitContext = createContext<FormKitContextValue | null>(null);\n\nexport const useFormKitContext = () => {\n  const value = use(FormKitContext);\n  if (!value)\n    throw new Error('[@lobehub/ui/base-ui/form] Form.Field must be rendered inside <Form>');\n  return value;\n};\n\nexport const useFormInstance = <T extends FormValues = FormValues>() =>\n  useFormKitContext().form as FormInstance<T>;\n"],"mappings":";;;AAaA,MAAa,iBAAiB,cAA0C,IAAI;AAE5E,MAAa,0BAA0B;CACrC,MAAM,QAAQ,IAAI,cAAc;CAChC,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,sEAAsE;CACxF,OAAO;AACT;AAEA,MAAa,wBACX,kBAAkB,CAAC,CAAC"}