@hanwenbo/x-taro-ui 0.0.1

package/lib/components/flatList/scrollTargetMeasurement.js

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/flatList/scrollTargetMeasurement.ts
+var scrollTargetMeasurement_exports = {};
+__export(scrollTargetMeasurement_exports, {
+  measureScrollTarget: () => measureScrollTarget
+});
+module.exports = __toCommonJS(scrollTargetMeasurement_exports);
+var import_taro = __toESM(require("@tarojs/taro"));
+function measureScrollTarget(scrollHostId, scrollTargetId, callback) {
+  var _a, _b;
+  const query = (_b = (_a = import_taro.default).createSelectorQuery) == null ? void 0 : _b.call(_a);
+  if (!query) return;
+  query.select(`#${scrollHostId}`).boundingClientRect();
+  query.select(`#${scrollHostId}`).scrollOffset();
+  query.select(`#${scrollTargetId}`).boundingClientRect();
+  query.exec((results) => {
+    callback({
+      hostRect: results == null ? void 0 : results[0],
+      hostOffset: results == null ? void 0 : results[1],
+      targetRect: results == null ? void 0 : results[2]
+    });
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  measureScrollTarget
+});

package/lib/components/flatList/types.d.ts

@@ -0,0 +1,88 @@
+import type { CSSProperties, ReactNode } from 'react';
+export declare type FlatListVariant = 'plain' | 'card' | 'outline';
+export interface FlatListRenderItemInfo<T> {
+    item: T;
+    index: number;
+}
+export declare type FlatListRenderItem<T> = ((info: FlatListRenderItemInfo<T>) => ReactNode) | ((item: T, index: number) => ReactNode);
+export declare type FlatListSlot = ReactNode | (() => ReactNode);
+export interface FlatListScrollEvent {
+    nativeEvent: {
+        contentOffset: {
+            x: number;
+            y: number;
+        };
+        contentSize: {
+            width: number;
+            height: number;
+        };
+        layoutMeasurement: {
+            width: number;
+            height: number;
+        };
+    };
+    originalEvent: unknown;
+}
+export interface FlatListRef {
+    scrollToIndex: (params: {
+        index: number;
+        animated?: boolean;
+    }) => void;
+    scrollToOffset: (params: {
+        offset: number;
+        animated?: boolean;
+    }) => void;
+    scrollToTop: (animated?: boolean) => void;
+    scrollToEnd: (animated?: boolean) => void;
+    /** @deprecated Use scrollToTop. */
+    scrollToStart: (animated?: boolean) => void;
+    /** Compatibility helper retained for existing x-taro-ui callers. */
+    getItemCount: () => number;
+}
+export interface FlatListProps<T = unknown> {
+    /** Canonical data source from x-design-system/x-mobile-ui. */
+    data?: T[];
+    /** @deprecated Use data. */
+    dataSource?: T[];
+    /** Canonical renderer receives { item, index }; the legacy two-argument form remains supported. */
+    renderItem?: FlatListRenderItem<T>;
+    keyExtractor?: (item: T, index: number) => string;
+    horizontal?: boolean;
+    numColumns?: number;
+    gap?: number | string;
+    divider?: boolean;
+    dividerInset?: number | string;
+    loading?: boolean;
+    loadingText?: ReactNode;
+    emptyText?: ReactNode;
+    /** @deprecated Use ListHeaderComponent. */
+    header?: ReactNode;
+    /** @deprecated Use ListFooterComponent. */
+    footer?: ReactNode;
+    refreshing?: boolean;
+    refreshText?: ReactNode;
+    /** Compatibility switch; canonical scrolling also activates for height, refresh, and end-reach props. */
+    scrollable?: boolean;
+    /** @deprecated Use height. */
+    scrollHeight?: number | string;
+    showScrollbar?: boolean;
+    variant?: FlatListVariant;
+    itemStyle?: CSSProperties;
+    getItemStyle?: (item: T, index: number) => CSSProperties | undefined;
+    onEndReached?: () => void;
+    ListEmptyComponent?: FlatListSlot;
+    ListFooterComponent?: FlatListSlot;
+    ListHeaderComponent?: FlatListSlot;
+    onEndReachedThreshold?: number;
+    onRefresh?: () => void;
+    height?: number | string;
+    contentContainerStyle?: CSSProperties;
+    itemHeight?: number | string;
+    initialScrollOffset?: number;
+    onScroll?: (event: FlatListScrollEvent) => void;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/flatList/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/flatList/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/form/form.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FormProps } from './types';
+declare const Form: React.FC<FormProps>;
+export default Form;
+//# sourceMappingURL=form.d.ts.map

package/lib/components/form/form.js

@@ -0,0 +1,508 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/form/form.tsx
+var form_exports = {};
+__export(form_exports, {
+  default: () => form_default
+});
+module.exports = __toCommonJS(form_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_locale = require("../../utils/locale");
+var import_button = require("../button");
+var import_configProvider = require("../configProvider");
+var import_inputItem = require("../inputItem");
+var import_select = require("../select");
+var import_textarea = require("../textarea");
+var FORM_LAYOUT_TOKENS = {
+  defaultLabelWidth: "var(--x-form-label-width)",
+  inlineFieldMinWidth: "var(--x-form-inline-field-min-width)"
+};
+function isEmptyValue(value) {
+  if (Array.isArray(value)) return value.length === 0;
+  return value === void 0 || value === null || value === "";
+}
+function buildInitialValues(fields, defaultValues) {
+  const nextValues = { ...defaultValues };
+  fields.forEach((field) => {
+    if (Object.prototype.hasOwnProperty.call(nextValues, field.key)) return;
+    if (field.initialValue !== void 0) {
+      nextValues[field.key] = field.initialValue;
+      return;
+    }
+    if (field.type === "select" && field.multiple) {
+      nextValues[field.key] = [];
+      return;
+    }
+    if (field.type !== "custom") nextValues[field.key] = "";
+  });
+  return nextValues;
+}
+function renderTextNode(node, style) {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node);
+  }
+  return node;
+}
+function nodeToText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    const text = node.map((item) => nodeToText(item)).filter(Boolean).join(" ").trim();
+    return text || void 0;
+  }
+  if (import_react.default.isValidElement(node)) return nodeToText(node.props.children);
+  return void 0;
+}
+function resolveSemanticValue(value, props) {
+  return typeof value === "function" ? value({ props }) : value;
+}
+function mapControlVariant(variant) {
+  if (variant === "outlined") return "default";
+  if (variant === "underlined") return "underline";
+  return variant;
+}
+function mapSelectVariant(variant) {
+  if (variant === "outlined") return "default";
+  return variant;
+}
+function getColumnStyle(config) {
+  const style = { ...(config == null ? void 0 : config.style) ?? {} };
+  if ((config == null ? void 0 : config.flex) !== void 0) {
+    style.flex = typeof config.flex === "number" ? `0 0 ${config.flex}px` : String(config.flex);
+  } else if ((config == null ? void 0 : config.span) !== void 0) {
+    style.width = `${Math.max(0, Math.min(24, config.span)) / 24 * 100}%`;
+  }
+  if (config == null ? void 0 : config.offset) {
+    style.marginLeft = `${Math.max(0, Math.min(24, config.offset)) / 24 * 100}%`;
+  }
+  return style;
+}
+function shallowEqualValues(left, right) {
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  return leftKeys.length === rightKeys.length && leftKeys.every(
+    (key) => Object.prototype.hasOwnProperty.call(right, key) && Object.is(left[key], right[key])
+  );
+}
+function renderMarkedLabel(label, required, requiredMark, optionalText, colon, colors, labelWrap, labelAlign) {
+  const baseLabel = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, requiredMark !== false && required ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { color: colors.destructive } }, "*") : null, renderTextNode(label, {
+    color: colors.foreground,
+    fontSize: 14,
+    fontWeight: "600",
+    whiteSpace: labelWrap ? "normal" : "nowrap",
+    textAlign: labelAlign
+  }), requiredMark === "optional" && !required ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { color: colors.muted, fontSize: 12, fontWeight: "400" } }, optionalText) : null);
+  const markedLabel = typeof requiredMark === "function" ? requiredMark(baseLabel, { required }) : baseLabel;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, markedLabel, colon ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { color: colors.foreground } }, ":") : null);
+}
+var Form = (rawProps) => {
+  const hasValuesProp = Object.prototype.hasOwnProperty.call(rawProps, "values");
+  const hasErrorsProp = Object.prototype.hasOwnProperty.call(rawProps, "errors");
+  const {
+    fields = [],
+    values,
+    defaultValues,
+    errors,
+    layout = "vertical",
+    size,
+    disabled,
+    gap = 20,
+    showFooter = true,
+    submitText,
+    resetText,
+    header,
+    footer,
+    validate,
+    onValuesChange,
+    onSubmit,
+    onReset,
+    children,
+    prefixCls,
+    colon,
+    labelAlign,
+    labelWrap = false,
+    labelCol,
+    wrapperCol,
+    classNames: semanticClassNames,
+    styles: semanticStyles,
+    scrollToFirstError = false,
+    requiredMark = true,
+    hideRequiredMark = false,
+    rootClassName,
+    variant = "outlined",
+    name,
+    className,
+    style
+  } = rawProps;
+  const { colors } = (0, import_theme.useTokens)();
+  const config = (0, import_configProvider.useConfigProvider)();
+  const resolvedSize = size === "medium" ? "middle" : size ?? config.size;
+  const isDisabled = Boolean(disabled ?? config.disabled);
+  const resolvedPrefix = prefixCls ?? config.prefixCls;
+  const resolvedRequiredMark = hideRequiredMark ? false : requiredMark;
+  const resolvedLabelAlign = labelAlign ?? (layout === "horizontal" ? "right" : "left");
+  const resolvedColon = colon ?? layout === "horizontal";
+  const resolvedClassNames = resolveSemanticValue(
+    semanticClassNames,
+    rawProps
+  );
+  const resolvedStyles = resolveSemanticValue(semanticStyles, rawProps);
+  const finalSubmitText = submitText ?? (0, import_locale.resolveLocaleText)(config.locale, "button.submit", "提交");
+  const finalResetText = resetText ?? (0, import_locale.resolveLocaleText)(config.locale, "common.reset", "重置");
+  const optionalText = (0, import_locale.resolveLocaleText)(config.locale, "form.optional", "选填");
+  const requiredTemplate = (0, import_locale.resolveLocaleText)(
+    config.locale,
+    "form.validation.required",
+    "{{field}}不能为空"
+  );
+  const initialValues = (0, import_react.useMemo)(
+    () => buildInitialValues(fields, defaultValues ?? {}),
+    [defaultValues, fields]
+  );
+  const [internalValues, setInternalValues] = (0, import_react.useState)(initialValues);
+  const [internalErrors, setInternalErrors] = (0, import_react.useState)({});
+  const fieldRefs = (0, import_react.useRef)({});
+  const isControlled = hasValuesProp;
+  const currentValues = isControlled ? { ...initialValues, ...values ?? {} } : internalValues;
+  const currentErrors = hasErrorsProp ? errors ?? {} : internalErrors;
+  (0, import_react.useEffect)(() => {
+    if (isControlled) return;
+    const allowedKeys = /* @__PURE__ */ new Set([...Object.keys(initialValues), ...fields.map((field) => field.key)]);
+    setInternalValues((current) => {
+      const nextValues = { ...initialValues };
+      Object.entries(current).forEach(([key, value]) => {
+        if (allowedKeys.has(key)) nextValues[key] = value;
+      });
+      return shallowEqualValues(current, nextValues) ? current : nextValues;
+    });
+  }, [fields, initialValues, isControlled]);
+  const runValidation = (0, import_react.useCallback)(
+    (nextValues) => {
+      const nextErrors = {};
+      fields.forEach((field) => {
+        var _a;
+        if (field.hidden) return;
+        const fieldValue = nextValues[field.key];
+        if (field.required && isEmptyValue(fieldValue)) {
+          const fieldName = nodeToText(field.label) ?? field.key;
+          nextErrors[field.key] = requiredTemplate.replace("{{field}}", fieldName);
+          return;
+        }
+        const validatorResult = (_a = field.validator) == null ? void 0 : _a.call(field, fieldValue, nextValues, field);
+        if (validatorResult) nextErrors[field.key] = validatorResult;
+      });
+      const customErrors = (validate == null ? void 0 : validate(nextValues)) ?? {};
+      Object.entries(customErrors).forEach(([key, message]) => {
+        if (message) nextErrors[key] = message;
+      });
+      return nextErrors;
+    },
+    [fields, requiredTemplate, validate]
+  );
+  const updateValues = (0, import_react.useCallback)(
+    (changedKey, nextValue) => {
+      const nextValues = { ...currentValues, [changedKey]: nextValue };
+      if (!isControlled) {
+        setInternalValues(nextValues);
+        setInternalErrors((current) => {
+          if (!Object.prototype.hasOwnProperty.call(current, changedKey)) return current;
+          const nextErrors = { ...current };
+          delete nextErrors[changedKey];
+          return nextErrors;
+        });
+      }
+      onValuesChange == null ? void 0 : onValuesChange(nextValues, changedKey);
+    },
+    [currentValues, isControlled, onValuesChange]
+  );
+  const focusFirstError = (0, import_react.useCallback)(
+    (nextErrors) => {
+      var _a, _b;
+      if (!scrollToFirstError) return;
+      const firstErrorKey = (_a = fields.find((field) => !field.hidden && nextErrors[field.key])) == null ? void 0 : _a.key;
+      if (!firstErrorKey) return;
+      const fieldRef = fieldRefs.current[firstErrorKey];
+      const options = scrollToFirstError === true ? {} : scrollToFirstError;
+      const inputElement = (fieldRef == null ? void 0 : fieldRef.inputElement) ?? (fieldRef == null ? void 0 : fieldRef.textAreaElement);
+      (_b = inputElement == null ? void 0 : inputElement.scrollIntoView) == null ? void 0 : _b.call(inputElement, {
+        behavior: options.behavior ?? "smooth",
+        block: options.block ?? "center"
+      });
+      if (options.focus !== false) fieldRef == null ? void 0 : fieldRef.focus();
+    },
+    [fields, scrollToFirstError]
+  );
+  const handleSubmit = (0, import_react.useCallback)(() => {
+    const nextErrors = runValidation(currentValues);
+    const valid = Object.values(nextErrors).every((errorValue) => !errorValue);
+    if (!hasErrorsProp) setInternalErrors(nextErrors);
+    if (!valid) focusFirstError(nextErrors);
+    onSubmit == null ? void 0 : onSubmit({ values: currentValues, errors: nextErrors, valid });
+  }, [currentValues, focusFirstError, hasErrorsProp, onSubmit, runValidation]);
+  const handleReset = (0, import_react.useCallback)(() => {
+    if (!isControlled) {
+      setInternalValues(initialValues);
+      setInternalErrors({});
+    }
+    onValuesChange == null ? void 0 : onValuesChange(initialValues, "__reset__");
+    onReset == null ? void 0 : onReset(initialValues);
+  }, [initialValues, isControlled, onReset, onValuesChange]);
+  const renderField = (0, import_react.useCallback)(
+    (field) => {
+      const fieldDisabled = Boolean(isDisabled || field.disabled);
+      const fieldError = currentErrors[field.key];
+      const fieldValue = currentValues[field.key];
+      const fieldVariant = mapControlVariant(field.variant ?? variant);
+      const accessibleLabel = field.ariaLabel ?? nodeToText(field.label) ?? field.placeholder ?? field.key;
+      const renderProps = {
+        field,
+        value: fieldValue,
+        values: currentValues,
+        error: fieldError,
+        disabled: fieldDisabled,
+        onChange: (nextValue) => updateValues(field.key, nextValue)
+      };
+      if (field.render) return field.render(renderProps);
+      if (field.type === "select") {
+        const selectVariant = mapSelectVariant(field.variant ?? variant);
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_select.Select,
+          {
+            value: fieldValue,
+            options: field.options,
+            multiple: field.multiple,
+            placeholder: field.placeholder,
+            size: resolvedSize,
+            variant: selectVariant,
+            disabled: fieldDisabled,
+            error: Boolean(fieldError),
+            allowClear: field.clearable,
+            onChange: (nextValue) => updateValues(field.key, nextValue),
+            onClear: () => updateValues(field.key, field.multiple ? [] : void 0)
+          }
+        );
+      }
+      const supportingText = fieldError ?? field.helperText;
+      const control = field.type === "textarea" ? /* @__PURE__ */ import_react.default.createElement(
+        import_textarea.Textarea,
+        {
+          ref: (instance) => {
+            fieldRefs.current[field.key] = instance;
+          },
+          value: fieldValue,
+          placeholder: field.placeholder,
+          size: resolvedSize,
+          variant: fieldVariant,
+          disabled: fieldDisabled,
+          error: Boolean(fieldError),
+          maxLength: field.maxLength,
+          rows: field.rows,
+          ariaLabel: accessibleLabel,
+          onChange: (nextValue) => updateValues(field.key, nextValue)
+        }
+      ) : /* @__PURE__ */ import_react.default.createElement(
+        import_inputItem.InputItem,
+        {
+          ref: (instance) => {
+            fieldRefs.current[field.key] = instance;
+          },
+          value: fieldValue,
+          placeholder: field.placeholder,
+          size: resolvedSize,
+          variant: fieldVariant,
+          disabled: fieldDisabled,
+          error: Boolean(fieldError),
+          clearable: field.clearable,
+          maxLength: field.maxLength,
+          ariaLabel: accessibleLabel,
+          onChange: (nextValue) => updateValues(field.key, nextValue)
+        }
+      );
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, control, supportingText ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "form-field-help" }, renderTextNode(supportingText, {
+        fontSize: 12,
+        lineHeight: "20px",
+        color: fieldError ? colors.destructive : colors["muted-foreground"]
+      })) : null);
+    },
+    [colors, currentErrors, currentValues, isDisabled, resolvedSize, updateValues, variant]
+  );
+  const formContext = (0, import_react.useMemo)(
+    () => ({
+      values: currentValues,
+      errors: currentErrors,
+      submit: handleSubmit,
+      reset: handleReset
+    }),
+    [currentErrors, currentValues, handleReset, handleSubmit]
+  );
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap,
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box",
+    ...resolvedStyles == null ? void 0 : resolvedStyles.root,
+    ...style
+  };
+  const fieldsWrapperStyle = {
+    display: "flex",
+    flexDirection: layout === "inline" ? "row" : "column",
+    flexWrap: layout === "inline" ? "wrap" : "nowrap",
+    gap,
+    width: "100%",
+    minWidth: 0
+  };
+  const rowStyle = (mode) => ({
+    display: "flex",
+    flexDirection: mode === "horizontal" ? "row" : "column",
+    alignItems: mode === "horizontal" ? "flex-start" : "stretch",
+    gap: 12,
+    flexGrow: mode === "inline" ? 1 : void 0,
+    flexShrink: mode === "inline" ? 1 : void 0,
+    flexBasis: mode === "inline" ? FORM_LAYOUT_TOKENS.inlineFieldMinWidth : void 0,
+    width: mode === "inline" ? void 0 : "100%",
+    minWidth: 0
+  });
+  const hasCustomLabelWidth = (labelCol == null ? void 0 : labelCol.flex) !== void 0 || (labelCol == null ? void 0 : labelCol.span) !== void 0;
+  const labelColumnStyle = {
+    width: layout === "horizontal" ? hasCustomLabelWidth ? void 0 : FORM_LAYOUT_TOKENS.defaultLabelWidth : "100%",
+    flexGrow: layout === "horizontal" && !hasCustomLabelWidth ? 0 : void 0,
+    flexBasis: layout === "horizontal" && !hasCustomLabelWidth ? FORM_LAYOUT_TOKENS.defaultLabelWidth : void 0,
+    paddingTop: layout === "horizontal" ? 10 : 0,
+    flexShrink: 0,
+    textAlign: resolvedLabelAlign,
+    ...getColumnStyle(labelCol),
+    ...resolvedStyles == null ? void 0 : resolvedStyles.label
+  };
+  const contentColumnStyle = {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    width: layout === "horizontal" ? void 0 : "100%",
+    minWidth: 0,
+    gap: 8,
+    ...getColumnStyle(wrapperCol),
+    ...resolvedStyles == null ? void 0 : resolvedStyles.content
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: name,
+      className: (0, import_utils.classNames)(
+        `${resolvedPrefix}-form`,
+        `${resolvedPrefix}-form--${layout}`,
+        `${resolvedPrefix}-form--${resolvedSize}`,
+        `${resolvedPrefix}-form--${variant}`,
+        isDisabled && `${resolvedPrefix}-form--disabled`,
+        resolvedClassNames == null ? void 0 : resolvedClassNames.root,
+        rootClassName,
+        className
+      ),
+      style: containerStyle
+    },
+    header,
+    /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: `${resolvedPrefix}-form__fields`, style: fieldsWrapperStyle }, fields.filter((field) => !field.hidden).map((field) => /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        key: field.key,
+        className: `${resolvedPrefix}-form__item`,
+        style: rowStyle(layout)
+      },
+      field.label || field.description ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: (0, import_utils.classNames)(
+            `${resolvedPrefix}-form__label`,
+            labelCol == null ? void 0 : labelCol.className,
+            resolvedClassNames == null ? void 0 : resolvedClassNames.label
+          ),
+          style: labelColumnStyle
+        },
+        field.label ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: resolvedLabelAlign === "right" ? "flex-end" : "flex-start",
+              gap: 6,
+              width: "100%"
+            }
+          },
+          renderMarkedLabel(
+            field.label,
+            Boolean(field.required),
+            resolvedRequiredMark,
+            optionalText,
+            resolvedColon,
+            {
+              foreground: colors.foreground,
+              destructive: colors.destructive,
+              muted: colors["muted-foreground"]
+            },
+            labelWrap,
+            resolvedLabelAlign
+          )
+        ) : null,
+        field.description ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { marginTop: 8 } }, renderTextNode(field.description, {
+          fontSize: 12,
+          color: colors["muted-foreground"],
+          textAlign: resolvedLabelAlign
+        })) : null
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: (0, import_utils.classNames)(
+            `${resolvedPrefix}-form__content`,
+            wrapperCol == null ? void 0 : wrapperCol.className,
+            resolvedClassNames == null ? void 0 : resolvedClassNames.content
+          ),
+          style: contentColumnStyle
+        },
+        renderField(field)
+      )
+    ))),
+    typeof children === "function" ? children(formContext) : children,
+    showFooter ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${resolvedPrefix}-form__footer`,
+        style: { display: "flex", flexDirection: "row", gap: 12, flexWrap: "wrap" }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_button.Button, { size: resolvedSize, variant: "outline", onClick: handleReset, disabled: isDisabled }, finalResetText),
+      /* @__PURE__ */ import_react.default.createElement(import_button.Button, { size: resolvedSize, onClick: handleSubmit, disabled: isDisabled }, finalSubmitText)
+    ) : null,
+    footer
+  );
+};
+var form_default = Form;

package/lib/components/form/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as Form } from './form';
+export { default } from './form';
+//# sourceMappingURL=index.d.ts.map