@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/FormKit/schema.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.mjs","names":[],"sources":["../../src/FormKit/schema.ts"],"sourcesContent":["import type { FieldValidator, FormValidator } from './engine/types';\n\nexport interface StandardSchemaIssue {\n  message: string;\n  path?: ReadonlyArray<PropertyKey | { key: PropertyKey }>;\n}\n\nexport interface StandardSchema<Input = unknown, Output = Input> {\n  readonly '~standard': {\n    readonly types?: { readonly input: Input; readonly output: Output };\n    readonly validate: (\n      value: unknown,\n    ) =>\n      | { readonly issues?: undefined; readonly value: Output }\n      | { readonly issues: ReadonlyArray<StandardSchemaIssue> }\n      | Promise<\n          | { readonly issues?: undefined; readonly value: Output }\n          | { readonly issues: ReadonlyArray<StandardSchemaIssue> }\n        >;\n    readonly vendor: string;\n    readonly version: 1;\n  };\n}\n\nexport type InferSchemaInput<S> = S extends StandardSchema<infer I, any> ? I : never;\n\nexport type FieldValidate =\n  StandardSchema | ((value: any, values: any) => string | undefined | Promise<string | undefined>);\n\nexport const isStandardSchema = (value: unknown): value is StandardSchema =>\n  typeof value === 'object' && value !== null && '~standard' in value;\n\nconst issuePath = (issue: StandardSchemaIssue) =>\n  (issue.path ?? [])\n    .map((segment) => String(typeof segment === 'object' ? segment.key : segment))\n    .join('.');\n\nexport const schemaToFormValidator =\n  (schema: StandardSchema): FormValidator =>\n  async (values) => {\n    const result = await schema['~standard'].validate(values);\n    if (!result.issues) return undefined;\n    const errors: Record<string, string> = {};\n    for (const issue of result.issues) {\n      const path = issuePath(issue);\n      if (errors[path] === undefined) errors[path] = issue.message;\n    }\n    return errors;\n  };\n\nexport const toFieldValidator = (validate: FieldValidate): FieldValidator => {\n  if (!isStandardSchema(validate)) return validate;\n  return async (value) => {\n    const result = await validate['~standard'].validate(value);\n    return result.issues?.[0]?.message;\n  };\n};\n"],"mappings":";AA6BA,MAAa,oBAAoB,UAC/B,OAAO,UAAU,YAAY,UAAU,QAAQ,eAAe;AAEhE,MAAM,aAAa,WAChB,MAAM,QAAQ,CAAC,EAAA,CACb,KAAK,YAAY,OAAO,OAAO,YAAY,WAAW,QAAQ,MAAM,OAAO,CAAC,CAAC,CAC7E,KAAK,GAAG;AAEb,MAAa,yBACV,WACD,OAAO,WAAW;CAChB,MAAM,SAAS,MAAM,OAAO,YAAY,CAAC,SAAS,MAAM;CACxD,IAAI,CAAC,OAAO,QAAQ,OAAO,KAAA;CAC3B,MAAM,SAAiC,CAAC;CACxC,KAAK,MAAM,SAAS,OAAO,QAAQ;EACjC,MAAM,OAAO,UAAU,KAAK;EAC5B,IAAI,OAAO,UAAU,KAAA,GAAW,OAAO,QAAQ,MAAM;CACvD;CACA,OAAO;AACT;AAEF,MAAa,oBAAoB,aAA4C;CAC3E,IAAI,CAAC,iBAAiB,QAAQ,GAAG,OAAO;CACxC,OAAO,OAAO,UAAU;EAEtB,QAAO,MADc,SAAS,YAAY,CAAC,SAAS,KAAK,EAAA,CAC3C,SAAS,EAAE,EAAE;CAC7B;AACF"}

package/es/FormKit/style.mjs

@@ -0,0 +1,107 @@
+//#region src/FormKit/style.ts
+const fieldKitStyles = {
+	controlFixed: {
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb1qjc9v5",
+		$$css: true
+	},
+	extra: {
+		kMwMTN: "lb19ppog9",
+		kGuDYH: "lbfifm61",
+		$$css: true
+	},
+	required: {
+		kMwMTN: "lb12ap7uz",
+		keTefX: "lbdwrcjd",
+		$$css: true
+	}
+};
+const listStyles = {
+	add: {
+		kVVagm: "lbln7xf2",
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb1vihcfj",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kOIVth: "lb17d4w8g",
+		kg3NbH: "lbdqyycr",
+		kmkexE: "lb1noqm3w",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w lb1gowcop",
+		kMwMTN: "lbc77et8 lb1bxu9lh",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbk50ysn",
+		kZKoxP: "lb1fgtraw",
+		$$css: true
+	},
+	cell: {
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	empty: {
+		kOIVth: "lb1jnr06f",
+		kg3NbH: "lbaope02",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kGuDYH: "lb4z9k3i",
+		kGO01o: "lb1l90r2v",
+		kLKAdn: "lb1cnzs8",
+		$$css: true
+	},
+	foot: {
+		kmVPX3: "lbfawy5m",
+		$$css: true
+	},
+	head: {
+		kOIVth: "lb1jnr06f",
+		kg3NbH: "lbfn1xvj",
+		kWkggS: "lb91pywm",
+		kL6WhQ: "lb1nkj3if",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		k1xSpc: "lbrvj5dj",
+		$$css: true
+	},
+	remove: {
+		kFhvOy: "lb7v7x1q",
+		$$css: true
+	},
+	row: {
+		kmVPX3: "lbfawy5m",
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		kL6WhQ: "lb125g9du",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		k1xSpc: "lbrvj5dj",
+		$$css: true
+	},
+	table: {
+		kVAM5u: "lb10cypdb",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kVQacm: "lbb3r6kr",
+		kWkggS: "lb6yijhg",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	title: {
+		k8WAf4: "lb1vvogim",
+		kg3NbH: "lbaope02",
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb1j6dyjg",
+		k63SB2: "lb1s688f",
+		kb6lSQ: "lb9pfba7",
+		kP9fke: "lbtvhhri",
+		$$css: true
+	}
+};
+//#endregion
+export { fieldKitStyles, listStyles };
+
+//# sourceMappingURL=style.mjs.map

package/es/FormKit/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FormKit/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const fieldKitStyles = stylex.create({\n  controlFixed: {\n    flex: 'none',\n    alignItems: 'stretch',\n  },\n  extra: {\n    color: cssVar.colorTextDescription,\n    fontSize: 12,\n  },\n  required: {\n    color: cssVar.colorError,\n    marginInlineStart: 4,\n  },\n});\n\nexport const listStyles = stylex.create({\n  add: {\n    font: 'inherit',\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    gap: 6,\n    paddingInline: 8,\n    transition: `color 150ms ${cssVar.motionEaseOut}, background 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillTertiary },\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontSize: 13,\n    fontWeight: 500,\n    height: 28,\n  },\n  cell: {\n    minWidth: 0,\n  },\n  empty: {\n    gap: 4,\n    paddingInline: 12,\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    display: 'flex',\n    flexDirection: 'column',\n    fontSize: 13,\n    paddingBlockEnd: 16,\n    paddingBlockStart: 20,\n  },\n  foot: {\n    padding: 4,\n  },\n  head: {\n    gap: 4,\n    paddingInline: 4,\n    backgroundColor: cssVar.colorFillQuaternary,\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'grid',\n  },\n  remove: {\n    justifySelf: 'center',\n  },\n  row: {\n    padding: 4,\n    gap: 4,\n    alignItems: 'center',\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'grid',\n  },\n  table: {\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorBgContainer,\n    width: '100%',\n  },\n  title: {\n    paddingBlock: 8,\n    paddingInline: 12,\n    color: cssVar.colorTextSecondary,\n    fontSize: 11,\n    fontWeight: 600,\n    letterSpacing: '0.08em',\n    textTransform: 'uppercase',\n  },\n});\n"],"mappings":";AAGA,MAAa,iBAAiB;CAC5B,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,aAAa;CACxB,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/FormKit/type.d.mts

@@ -0,0 +1,122 @@
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import { FormLayout, FormVariant } from "../Form/type.mjs";
+import { ValidateOn } from "./engine/types.mjs";
+import { FieldValidate, StandardSchema } from "./schema.mjs";
+import { CSSProperties, FormHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+//#region src/FormKit/type.d.ts
+type Depth = [never, 0, 1, 2, 3, 4, 5];
+type IsAny<T> = 0 extends 1 & T ? true : false;
+export type FieldPath<T, D extends number = 6> = [D] extends [never] ? string : IsAny<T> extends true ? string : T extends readonly (infer U)[] ? `${number}` | `${number}.${FieldPath<U, Depth[D]>}` : T extends object ? { [K in keyof T & string]: K | (NonNullable<T[K]> extends object ? `${K}.${FieldPath<NonNullable<T[K]>, Depth[D]>}` : never); }[keyof T & string] : never;
+export type FieldPathValue<T, P extends string> = IsAny<T> extends true ? any : P extends `${infer K}.${infer Rest}` ? K extends keyof T ? FieldPathValue<NonNullable<T[K]>, Rest> : T extends readonly (infer U)[] ? FieldPathValue<U, Rest> : unknown : P extends keyof T ? T[P] : T extends readonly (infer U)[] ? U : unknown;
+export type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]>; } : T;
+export type FormValues = Record<string, any>;
+export interface SetValueOptions {
+  asUser?: boolean;
+}
+export interface FormValidateResult<T> {
+  errors: Partial<Record<FieldPath<T>, string>>;
+  valid: boolean;
+}
+export interface FormInstance<T extends FormValues = FormValues> {
+  getValue: <P extends FieldPath<T>>(name: P) => FieldPathValue<T, P>;
+  getValues: () => T;
+  isDirty: () => boolean;
+  isTouched: (name: FieldPath<T>) => boolean;
+  reset: (values?: T) => void;
+  resetField: (name: FieldPath<T>) => void;
+  setErrors: (errors: Partial<Record<FieldPath<T>, string | undefined>>) => void;
+  setSchema: (schema: StandardSchema | undefined) => void;
+  setValue: <P extends FieldPath<T>>(name: P, value: FieldPathValue<T, P>, options?: SetValueOptions) => void;
+  setValues: (values: DeepPartial<T>, options?: SetValueOptions) => void;
+  submit: () => Promise<FormValidateResult<T>>;
+  subscribe: <S>(selector: (values: T) => S, callback: (selected: S) => void) => () => void;
+  validate: (names?: FieldPath<T>[]) => Promise<FormValidateResult<T>>;
+}
+export interface UseFormOptions<T extends FormValues> {
+  initialValues?: T;
+  onSubmit?: (values: T) => unknown;
+  onValuesChange?: (changed: DeepPartial<T>, values: T) => void;
+  schema?: StandardSchema;
+  validateOn?: ValidateOn;
+  values?: T;
+  valuesChangeDebounce?: number;
+}
+export interface FieldBinding {
+  emptyValue?: unknown;
+  getValue?: (...args: any[]) => unknown;
+  trigger?: string;
+  valueProp?: string;
+}
+export interface FieldRenderProps<V = any> {
+  error: string | undefined;
+  name: string;
+  onBlur: () => void;
+  onChange: (value: V) => void;
+  touched: boolean;
+  validating: boolean;
+  value: V;
+}
+export interface FormGroupItem<T extends FormValues = FormValues> {
+  children: FormFieldProps<T>[] | ReactNode;
+  collapsible?: boolean;
+  defaultActive?: boolean;
+  desc?: ReactNode;
+  extra?: ReactNode;
+  icon?: IconProps['icon'];
+  key?: string;
+  title: ReactNode;
+  variant?: FormVariant;
+}
+export interface FormProps<T extends FormValues = FormValues> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'children' | 'className' | 'onSubmit' | 'style'> {
+  activeKey?: (string | number)[];
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    group?: string;
+    item?: string;
+  };
+  collapsible?: boolean;
+  defaultActiveKey?: (string | number)[];
+  footer?: ReactNode;
+  form: FormInstance<T>;
+  gap?: number | string;
+  itemMinWidth?: string | number;
+  items?: FormGroupItem<T>[] | FormFieldProps<T>[];
+  itemsType?: 'group' | 'flat';
+  layout?: FormLayout;
+  onCollapse?: (keys: (string | number)[]) => void;
+  ref?: Ref<HTMLFormElement>;
+  style?: CSSProperties;
+  styles?: {
+    group?: CSSProperties;
+    item?: CSSProperties;
+  };
+  variant?: FormVariant;
+}
+export interface FormFieldProps<T extends FormValues = FormValues> extends FieldBinding {
+  avatar?: ReactNode;
+  bare?: boolean;
+  children?: ReactElement | ReactNode;
+  className?: string;
+  deps?: FieldPath<T>[];
+  desc?: ReactNode;
+  divider?: boolean;
+  extra?: ReactNode;
+  hidden?: boolean;
+  label?: ReactNode;
+  layout?: FormLayout;
+  minWidth?: string | number;
+  name?: FieldPath<T>;
+  render?: (field: FieldRenderProps) => ReactNode;
+  required?: boolean | string;
+  style?: CSSProperties;
+  tag?: string;
+  validate?: FieldValidate;
+  validateDebounce?: number;
+  validateOn?: ValidateOn;
+  variant?: FormVariant;
+}
+//#endregion
+export type { FieldValidate, StandardSchema };
+//# sourceMappingURL=type.d.mts.map

package/es/FormKit/useForm.d.mts

@@ -0,0 +1,9 @@
+import { InferSchemaInput, StandardSchema } from "./schema.mjs";
+import { FormInstance, FormValues, UseFormOptions } from "./type.mjs";
+//#region src/FormKit/useForm.d.ts
+export declare function useForm<S extends StandardSchema<FormValues>>(options: UseFormOptions<InferSchemaInput<S>> & {
+  schema: S;
+}): FormInstance<InferSchemaInput<S>>;
+export declare function useForm<T extends FormValues = FormValues>(options?: UseFormOptions<T>): FormInstance<T>;
+//#endregion
+//# sourceMappingURL=useForm.d.mts.map

package/es/FormKit/useForm.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { createFormInstance, getIn, getInternals, leafPaths, setIn } from "./instance.mjs";
+import { useEffect, useRef, useState } from "react";
+//#region src/FormKit/useForm.ts
+function useForm(options = {}) {
+	const [form] = useState(() => createFormInstance({
+		initialValues: options.initialValues ?? options.values ?? {},
+		schema: options.schema,
+		validateOn: options.validateOn ?? "auto"
+	}));
+	const latest = useRef(options);
+	latest.current = options;
+	getInternals(form).onSubmit = (values) => latest.current.onSubmit?.(values);
+	useEffect(() => {
+		const { engine } = getInternals(form);
+		const pending = /* @__PURE__ */ new Set();
+		let timer;
+		const flush = () => {
+			const changed = {};
+			for (const path of pending) setIn(changed, path, engine.getValue(path));
+			pending.clear();
+			latest.current.onValuesChange?.(changed, engine.getValues());
+		};
+		const off = engine.onValueChange(({ path, source }) => {
+			if (source !== "user" || !latest.current.onValuesChange) return;
+			pending.add(path);
+			const debounce = latest.current.valuesChangeDebounce ?? 0;
+			if (debounce <= 0) {
+				flush();
+				return;
+			}
+			clearTimeout(timer);
+			timer = setTimeout(flush, debounce);
+		});
+		return () => {
+			off();
+			clearTimeout(timer);
+		};
+	}, [form]);
+	const { values } = options;
+	useEffect(() => {
+		if (!values) return;
+		const { engine } = getInternals(form);
+		for (const path of leafPaths(values)) {
+			const next = getIn(values, path);
+			if (!engine.isTouched(path) && !Object.is(engine.getValue(path), next)) engine.setValue(path, next, "api");
+		}
+	}, [form, values]);
+	return form;
+}
+//#endregion
+export { useForm };
+
+//# sourceMappingURL=useForm.mjs.map

package/es/FormKit/useForm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.mjs","names":[],"sources":["../../src/FormKit/useForm.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { createFormInstance, getIn, getInternals, leafPaths, setIn } from './instance';\nimport type { InferSchemaInput, StandardSchema } from './schema';\nimport type { DeepPartial, FormInstance, FormValues, UseFormOptions } from './type';\n\nexport function useForm<S extends StandardSchema<FormValues>>(\n  options: UseFormOptions<InferSchemaInput<S>> & { schema: S },\n): FormInstance<InferSchemaInput<S>>;\nexport function useForm<T extends FormValues = FormValues>(\n  options?: UseFormOptions<T>,\n): FormInstance<T>;\nexport function useForm<T extends FormValues = FormValues>(\n  options: UseFormOptions<T> = {},\n): FormInstance<T> {\n  const [form] = useState(() =>\n    createFormInstance<T>({\n      initialValues: options.initialValues ?? options.values ?? {},\n      schema: options.schema,\n      validateOn: options.validateOn ?? 'auto',\n    }),\n  );\n  const latest = useRef(options);\n  latest.current = options;\n  getInternals(form).onSubmit = (values) => latest.current.onSubmit?.(values as T);\n\n  useEffect(() => {\n    const { engine } = getInternals(form);\n    const pending = new Set<string>();\n    let timer: ReturnType<typeof setTimeout> | undefined;\n\n    const flush = () => {\n      const changed: Record<string, unknown> = {};\n      for (const path of pending) setIn(changed, path, engine.getValue(path));\n      pending.clear();\n      latest.current.onValuesChange?.(changed as DeepPartial<T>, engine.getValues() as T);\n    };\n\n    const off = engine.onValueChange(({ path, source }) => {\n      if (source !== 'user' || !latest.current.onValuesChange) return;\n      pending.add(path);\n      const debounce = latest.current.valuesChangeDebounce ?? 0;\n      if (debounce <= 0) {\n        flush();\n        return;\n      }\n      clearTimeout(timer);\n      timer = setTimeout(flush, debounce);\n    });\n\n    return () => {\n      off();\n      clearTimeout(timer);\n    };\n  }, [form]);\n\n  const { values } = options;\n  useEffect(() => {\n    if (!values) return;\n    const { engine } = getInternals(form);\n    for (const path of leafPaths(values)) {\n      const next = getIn(values, path);\n      if (!engine.isTouched(path) && !Object.is(engine.getValue(path), next))\n        engine.setValue(path, next, 'api');\n    }\n  }, [form, values]);\n\n  return form;\n}\n"],"mappings":";;;;AAcA,SAAgB,QACd,UAA6B,CAAC,GACb;CACjB,MAAM,CAAC,QAAQ,eACb,mBAAsB;EACpB,eAAe,QAAQ,iBAAiB,QAAQ,UAAU,CAAC;EAC3D,QAAQ,QAAQ;EAChB,YAAY,QAAQ,cAAc;CACpC,CAAC,CACH;CACA,MAAM,SAAS,OAAO,OAAO;CAC7B,OAAO,UAAU;CACjB,aAAa,IAAI,CAAC,CAAC,YAAY,WAAW,OAAO,QAAQ,WAAW,MAAW;CAE/E,gBAAgB;EACd,MAAM,EAAE,WAAW,aAAa,IAAI;EACpC,MAAM,0BAAU,IAAI,IAAY;EAChC,IAAI;EAEJ,MAAM,cAAc;GAClB,MAAM,UAAmC,CAAC;GAC1C,KAAK,MAAM,QAAQ,SAAS,MAAM,SAAS,MAAM,OAAO,SAAS,IAAI,CAAC;GACtE,QAAQ,MAAM;GACd,OAAO,QAAQ,iBAAiB,SAA2B,OAAO,UAAU,CAAM;EACpF;EAEA,MAAM,MAAM,OAAO,eAAe,EAAE,MAAM,aAAa;GACrD,IAAI,WAAW,UAAU,CAAC,OAAO,QAAQ,gBAAgB;GACzD,QAAQ,IAAI,IAAI;GAChB,MAAM,WAAW,OAAO,QAAQ,wBAAwB;GACxD,IAAI,YAAY,GAAG;IACjB,MAAM;IACN;GACF;GACA,aAAa,KAAK;GAClB,QAAQ,WAAW,OAAO,QAAQ;EACpC,CAAC;EAED,aAAa;GACX,IAAI;GACJ,aAAa,KAAK;EACpB;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,EAAE,WAAW;CACnB,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,EAAE,WAAW,aAAa,IAAI;EACpC,KAAK,MAAM,QAAQ,UAAU,MAAM,GAAG;GACpC,MAAM,OAAO,MAAM,QAAQ,IAAI;GAC/B,IAAI,CAAC,OAAO,UAAU,IAAI,KAAK,CAAC,OAAO,GAAG,OAAO,SAAS,IAAI,GAAG,IAAI,GACnE,OAAO,SAAS,MAAM,MAAM,KAAK;EACrC;CACF,GAAG,CAAC,MAAM,MAAM,CAAC;CAEjB,OAAO;AACT"}

package/es/FormKit/useStoreSelector.mjs

@@ -0,0 +1,25 @@
+import { useCallback, useRef, useSyncExternalStore } from "react";
+//#region src/FormKit/useStoreSelector.ts
+const shallowEqual = (a, b) => {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	const keysA = Object.keys(a);
+	if (keysA.length !== Object.keys(b).length) return false;
+	return keysA.every((key) => Object.is(a[key], b[key]));
+};
+const useStoreSelector = (engine, select) => {
+	const selectRef = useRef(select);
+	selectRef.current = select;
+	const cache = useRef(null);
+	const getSnapshot = useCallback(() => {
+		const next = selectRef.current(engine);
+		if (cache.current && shallowEqual(cache.current.value, next)) return cache.current.value;
+		cache.current = { value: next };
+		return next;
+	}, [engine]);
+	return useSyncExternalStore(engine.subscribe, getSnapshot, getSnapshot);
+};
+//#endregion
+export { shallowEqual, useStoreSelector };
+
+//# sourceMappingURL=useStoreSelector.mjs.map

package/es/FormKit/useStoreSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoreSelector.mjs","names":[],"sources":["../../src/FormKit/useStoreSelector.ts"],"sourcesContent":["import { useCallback, useRef, useSyncExternalStore } from 'react';\n\nimport type { FormEngine } from './engine/types';\n\nexport const shallowEqual = (a: unknown, b: unknown) => {\n  if (Object.is(a, b)) return true;\n  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false;\n  const keysA = Object.keys(a);\n  if (keysA.length !== Object.keys(b).length) return false;\n  return keysA.every((key) => Object.is((a as any)[key], (b as any)[key]));\n};\n\nexport const useStoreSelector = <S>(engine: FormEngine, select: (engine: FormEngine) => S): S => {\n  const selectRef = useRef(select);\n  selectRef.current = select;\n  const cache = useRef<{ value: S } | null>(null);\n\n  const getSnapshot = useCallback(() => {\n    const next = selectRef.current(engine);\n    if (cache.current && shallowEqual(cache.current.value, next)) return cache.current.value;\n    cache.current = { value: next };\n    return next;\n  }, [engine]);\n\n  return useSyncExternalStore(engine.subscribe, getSnapshot, getSnapshot);\n};\n"],"mappings":";;AAIA,MAAa,gBAAgB,GAAY,MAAe;CACtD,IAAI,OAAO,GAAG,GAAG,CAAC,GAAG,OAAO;CAC5B,IAAI,OAAO,MAAM,YAAY,OAAO,MAAM,YAAY,MAAM,QAAQ,MAAM,MAAM,OAAO;CACvF,MAAM,QAAQ,OAAO,KAAK,CAAC;CAC3B,IAAI,MAAM,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,OAAO;CACnD,OAAO,MAAM,OAAO,QAAQ,OAAO,GAAI,EAAU,MAAO,EAAU,IAAI,CAAC;AACzE;AAEA,MAAa,oBAAuB,QAAoB,WAAyC;CAC/F,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CACpB,MAAM,QAAQ,OAA4B,IAAI;CAE9C,MAAM,cAAc,kBAAkB;EACpC,MAAM,OAAO,UAAU,QAAQ,MAAM;EACrC,IAAI,MAAM,WAAW,aAAa,MAAM,QAAQ,OAAO,IAAI,GAAG,OAAO,MAAM,QAAQ;EACnF,MAAM,UAAU,EAAE,OAAO,KAAK;EAC9B,OAAO;CACT,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,qBAAqB,OAAO,WAAW,aAAa,WAAW;AACxE"}

package/es/FormKit/useWatch.d.mts

@@ -0,0 +1,6 @@
+import { FieldPath, FieldPathValue, FormInstance, FormValues } from "./type.mjs";
+//#region src/FormKit/useWatch.d.ts
+export declare function useWatch<T extends FormValues, P extends FieldPath<T>>(form: FormInstance<T>, name: P): FieldPathValue<T, P>;
+export declare function useWatch<T extends FormValues, S>(form: FormInstance<T>, selector: (values: T) => S): S;
+//#endregion
+//# sourceMappingURL=useWatch.d.mts.map

package/es/FormKit/useWatch.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { getInternals } from "./instance.mjs";
+import { useStoreSelector } from "./useStoreSelector.mjs";
+//#region src/FormKit/useWatch.ts
+function useWatch(form, nameOrSelector) {
+	const { engine } = getInternals(form);
+	return useStoreSelector(engine, (e) => typeof nameOrSelector === "function" ? nameOrSelector(e.getValues()) : e.getValue(nameOrSelector));
+}
+//#endregion
+export { useWatch };
+
+//# sourceMappingURL=useWatch.mjs.map

package/es/FormKit/useWatch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWatch.mjs","names":[],"sources":["../../src/FormKit/useWatch.ts"],"sourcesContent":["'use client';\n\nimport { getInternals } from './instance';\nimport type { FieldPath, FieldPathValue, FormInstance, FormValues } from './type';\nimport { useStoreSelector } from './useStoreSelector';\n\nexport function useWatch<T extends FormValues, P extends FieldPath<T>>(\n  form: FormInstance<T>,\n  name: P,\n): FieldPathValue<T, P>;\nexport function useWatch<T extends FormValues, S>(\n  form: FormInstance<T>,\n  selector: (values: T) => S,\n): S;\nexport function useWatch<T extends FormValues>(\n  form: FormInstance<T>,\n  nameOrSelector: string | ((values: T) => unknown),\n) {\n  const { engine } = getInternals(form);\n  return useStoreSelector(engine, (e) =>\n    typeof nameOrSelector === 'function'\n      ? nameOrSelector(e.getValues() as T)\n      : e.getValue(nameOrSelector),\n  );\n}\n"],"mappings":";;;;AAcA,SAAgB,SACd,MACA,gBACA;CACA,MAAM,EAAE,WAAW,aAAa,IAAI;CACpC,OAAO,iBAAiB,SAAS,MAC/B,OAAO,mBAAmB,aACtB,eAAe,EAAE,UAAU,CAAM,IACjC,EAAE,SAAS,cAAc,CAC/B;AACF"}

package/es/Freeze/type.d.mts

@@ -1,9 +1,8 @@
 import { ReactNode } from "react";
 //#region src/Freeze/type.d.ts
-interface FreezeProps {
+export interface FreezeProps {
   children: ReactNode;
   frozen: boolean;
 }
 //#endregion
-export { FreezeProps };
 //# sourceMappingURL=type.d.mts.map

package/es/GlobalFocusRing/index.d.mts

@@ -1,6 +1,5 @@
 //#region src/GlobalFocusRing/index.d.ts
 /** Install once per document. The returned cleanup is safe for nested providers and Strict Mode. */
-declare const installGlobalFocusRing: (doc?: Document) => (() => void);
+export declare const installGlobalFocusRing: (doc?: Document) => (() => void);
 //#endregion
-export { installGlobalFocusRing };
 //# sourceMappingURL=index.d.mts.map

package/es/GlobalFocusRing/index.mjs

@@ -57,7 +57,7 @@ const installGlobalFocusRing = (doc = document) => {
 		if (moved) ringParent.append(ring);
 		const computed = win.getComputedStyle(element);
 		const borderRadius = computed.borderRadius;
-		const color = computed.getPropertyValue("--lobe-focus-ring-color").trim() || computed.getPropertyValue("--ant-color-info").trim() || "#1677ff";
+		const color = computed.getPropertyValue("--lobe-focus-ring-color").trim() || computed.getPropertyValue("--lobe-color-info").trim() || "#1677ff";
 		const styleChanged = ring.style.borderRadius !== borderRadius || ring.style.getPropertyValue("--lobe-focus-ring-color") !== color;
 		if (styleChanged) {
 			ring.style.borderRadius = borderRadius;

package/es/GlobalFocusRing/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/GlobalFocusRing/index.ts"],"sourcesContent":["import { globalFocusRingCSS } from './style';\n\nconst installations = new WeakMap<Document, { dispose: () => void; users: number }>();\n\n/** Install once per document. The returned cleanup is safe for nested providers and Strict Mode. */\nexport const installGlobalFocusRing = (doc: Document = document): (() => void) => {\n  const existing = installations.get(doc);\n  if (existing) {\n    existing.users += 1;\n    let released = false;\n    return () => {\n      if (released) return;\n      released = true;\n      if (--existing.users === 0) existing.dispose();\n    };\n  }\n\n  const win = doc.defaultView;\n  if (\n    !win ||\n    !doc.body ||\n    !win.CSS?.supports('top', 'anchor(top)') ||\n    !win.CSS.supports('position-visibility', 'anchors-visible') ||\n    !('showPopover' in doc.createElement('div'))\n  )\n    return () => {};\n\n  const sheet = doc.createElement('style');\n  sheet.textContent = globalFocusRingCSS;\n  const ring = doc.createElement('div');\n  ring.setAttribute('data-lobe-global-focus-ring', '');\n  ring.setAttribute('aria-hidden', 'true');\n  ring.setAttribute('popover', 'manual');\n  doc.head.append(sheet);\n  doc.body.append(ring);\n\n  let target: HTMLElement | undefined;\n  let restoreTarget: (() => void) | undefined;\n  let frame = 0;\n  let disposed = false;\n\n  const clear = () => {\n    if (ring.matches(':popover-open')) ring.hidePopover();\n    restoreTarget?.();\n    restoreTarget = undefined;\n    target = undefined;\n  };\n\n  const sync = () => {\n    if (disposed) return;\n    const next = doc.activeElement;\n    if (\n      next === target &&\n      next?.matches(':focus-visible') &&\n      next.isConnected &&\n      ring.matches(':popover-open')\n    )\n      return;\n    clear();\n    // Shadow roots and fragmented inline text retain their own focus treatment.\n    if (\n      !next ||\n      next === doc.body ||\n      next.namespaceURI !== 'http://www.w3.org/1999/xhtml' ||\n      next.shadowRoot ||\n      next.closest('[data-lobe-focus-ring=\"off\"]') ||\n      next.matches('textarea') ||\n      (next as HTMLElement).isContentEditable ||\n      (next.matches('input') &&\n        ![\n          'button',\n          'submit',\n          'reset',\n          'image',\n          'checkbox',\n          'radio',\n          'range',\n          'color',\n          'file',\n        ].includes((next as HTMLInputElement).type)) ||\n      !next.matches(':focus-visible')\n    )\n      return;\n\n    const element = next as HTMLElement;\n    let scope = element.parentElement;\n    while (scope && win.getComputedStyle(scope).contain === 'none') scope = scope.parentElement;\n    // Anchor names do not cross CSS containment, while a popover still escapes its clipping.\n    const ringParent = scope || doc.body;\n    const moved = ring.parentElement !== ringParent;\n    if (moved) ringParent.append(ring);\n\n    const computed = win.getComputedStyle(element);\n    const borderRadius = computed.borderRadius;\n    const color =\n      computed.getPropertyValue('--lobe-focus-ring-color').trim() ||\n      computed.getPropertyValue('--ant-color-info').trim() ||\n      '#1677ff';\n    const styleChanged =\n      ring.style.borderRadius !== borderRadius ||\n      ring.style.getPropertyValue('--lobe-focus-ring-color') !== color;\n    if (styleChanged) {\n      ring.style.borderRadius = borderRadius;\n      ring.style.setProperty('--lobe-focus-ring-color', color);\n    }\n    if (moved || styleChanged) {\n      schedule();\n      return;\n    }\n\n    const saved = ['anchor-name', 'outline'].map((property) => ({\n      priority: element.style.getPropertyPriority(property),\n      property,\n      value: element.style.getPropertyValue(property),\n    }));\n    const oldMarker = element.getAttribute('data-lobe-focus-ring');\n    const anchor = computed.getPropertyValue('anchor-name').trim();\n    const assignedAnchor =\n      anchor && anchor !== 'none' ? `${anchor}, --lobe-global-focus` : '--lobe-global-focus';\n    element.style.setProperty('anchor-name', assignedAnchor, 'important');\n\n    restoreTarget = () => {\n      for (const { property, value, priority } of saved) {\n        const assigned = property === 'anchor-name' ? assignedAnchor : 'none';\n        if (element.style.getPropertyValue(property) !== assigned) continue;\n        if (value) element.style.setProperty(property, value, priority);\n        else element.style.removeProperty(property);\n      }\n      if (element.getAttribute('data-lobe-focus-ring') === 'managed') {\n        if (oldMarker === null) element.removeAttribute('data-lobe-focus-ring');\n        else element.setAttribute('data-lobe-focus-ring', oldMarker);\n      }\n    };\n    const rect = element.getBoundingClientRect();\n    if (\n      element.getClientRects().length !== 1 ||\n      !rect.width ||\n      !rect.height ||\n      computed.visibility !== 'visible'\n    ) {\n      clear();\n      return;\n    }\n    try {\n      ring.showPopover();\n      // Do not suppress a working native outline when an anchor cannot resolve.\n      const bounds = ring.getBoundingClientRect();\n      if (\n        Math.max(\n          ...(['top', 'right', 'bottom', 'left'] as const).map((edge) =>\n            Math.abs(bounds[edge] - rect[edge]),\n          ),\n        ) > 1\n      ) {\n        clear();\n        return;\n      }\n      element.style.setProperty('outline', 'none', 'important');\n      element.setAttribute('data-lobe-focus-ring', 'managed');\n      target = element;\n    } catch {\n      clear();\n    }\n  };\n\n  const schedule = () => {\n    if (!frame)\n      frame = win.requestAnimationFrame(() => {\n        frame = 0;\n        sync();\n      });\n  };\n  const focus = () => win.queueMicrotask(sync);\n  const blur = () => {\n    win.cancelAnimationFrame(frame);\n    frame = 0;\n    if (ring.matches(':popover-open')) ring.hidePopover();\n  };\n  const observer = new MutationObserver(() => {\n    if (target && !target.isConnected) clear();\n  });\n  observer.observe(doc.body, { childList: true, subtree: true });\n  doc.addEventListener('focusin', focus, true);\n  doc.addEventListener('focusout', schedule, true);\n  doc.addEventListener('keydown', schedule, true);\n  doc.addEventListener('pointerdown', schedule, true);\n  win.addEventListener('blur', blur);\n  win.addEventListener('focus', schedule);\n\n  const installation = {\n    dispose: () => {\n      disposed = true;\n      win.cancelAnimationFrame(frame);\n      observer.disconnect();\n      doc.removeEventListener('focusin', focus, true);\n      doc.removeEventListener('focusout', schedule, true);\n      doc.removeEventListener('keydown', schedule, true);\n      doc.removeEventListener('pointerdown', schedule, true);\n      win.removeEventListener('blur', blur);\n      win.removeEventListener('focus', schedule);\n      clear();\n      ring.remove();\n      sheet.remove();\n      installations.delete(doc);\n    },\n    users: 0,\n  };\n  installations.set(doc, installation);\n  sync();\n  return installGlobalFocusRing(doc);\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/GlobalFocusRing/index.ts"],"sourcesContent":["import { globalFocusRingCSS } from './style';\n\nconst installations = new WeakMap<Document, { dispose: () => void; users: number }>();\n\n/** Install once per document. The returned cleanup is safe for nested providers and Strict Mode. */\nexport const installGlobalFocusRing = (doc: Document = document): (() => void) => {\n  const existing = installations.get(doc);\n  if (existing) {\n    existing.users += 1;\n    let released = false;\n    return () => {\n      if (released) return;\n      released = true;\n      if (--existing.users === 0) existing.dispose();\n    };\n  }\n\n  const win = doc.defaultView;\n  if (\n    !win ||\n    !doc.body ||\n    !win.CSS?.supports('top', 'anchor(top)') ||\n    !win.CSS.supports('position-visibility', 'anchors-visible') ||\n    !('showPopover' in doc.createElement('div'))\n  )\n    return () => {};\n\n  const sheet = doc.createElement('style');\n  sheet.textContent = globalFocusRingCSS;\n  const ring = doc.createElement('div');\n  ring.setAttribute('data-lobe-global-focus-ring', '');\n  ring.setAttribute('aria-hidden', 'true');\n  ring.setAttribute('popover', 'manual');\n  doc.head.append(sheet);\n  doc.body.append(ring);\n\n  let target: HTMLElement | undefined;\n  let restoreTarget: (() => void) | undefined;\n  let frame = 0;\n  let disposed = false;\n\n  const clear = () => {\n    if (ring.matches(':popover-open')) ring.hidePopover();\n    restoreTarget?.();\n    restoreTarget = undefined;\n    target = undefined;\n  };\n\n  const sync = () => {\n    if (disposed) return;\n    const next = doc.activeElement;\n    if (\n      next === target &&\n      next?.matches(':focus-visible') &&\n      next.isConnected &&\n      ring.matches(':popover-open')\n    )\n      return;\n    clear();\n    // Shadow roots and fragmented inline text retain their own focus treatment.\n    if (\n      !next ||\n      next === doc.body ||\n      next.namespaceURI !== 'http://www.w3.org/1999/xhtml' ||\n      next.shadowRoot ||\n      next.closest('[data-lobe-focus-ring=\"off\"]') ||\n      next.matches('textarea') ||\n      (next as HTMLElement).isContentEditable ||\n      (next.matches('input') &&\n        ![\n          'button',\n          'submit',\n          'reset',\n          'image',\n          'checkbox',\n          'radio',\n          'range',\n          'color',\n          'file',\n        ].includes((next as HTMLInputElement).type)) ||\n      !next.matches(':focus-visible')\n    )\n      return;\n\n    const element = next as HTMLElement;\n    let scope = element.parentElement;\n    while (scope && win.getComputedStyle(scope).contain === 'none') scope = scope.parentElement;\n    // Anchor names do not cross CSS containment, while a popover still escapes its clipping.\n    const ringParent = scope || doc.body;\n    const moved = ring.parentElement !== ringParent;\n    if (moved) ringParent.append(ring);\n\n    const computed = win.getComputedStyle(element);\n    const borderRadius = computed.borderRadius;\n    const color =\n      computed.getPropertyValue('--lobe-focus-ring-color').trim() ||\n      computed.getPropertyValue('--lobe-color-info').trim() ||\n      '#1677ff';\n    const styleChanged =\n      ring.style.borderRadius !== borderRadius ||\n      ring.style.getPropertyValue('--lobe-focus-ring-color') !== color;\n    if (styleChanged) {\n      ring.style.borderRadius = borderRadius;\n      ring.style.setProperty('--lobe-focus-ring-color', color);\n    }\n    if (moved || styleChanged) {\n      schedule();\n      return;\n    }\n\n    const saved = ['anchor-name', 'outline'].map((property) => ({\n      priority: element.style.getPropertyPriority(property),\n      property,\n      value: element.style.getPropertyValue(property),\n    }));\n    const oldMarker = element.getAttribute('data-lobe-focus-ring');\n    const anchor = computed.getPropertyValue('anchor-name').trim();\n    const assignedAnchor =\n      anchor && anchor !== 'none' ? `${anchor}, --lobe-global-focus` : '--lobe-global-focus';\n    element.style.setProperty('anchor-name', assignedAnchor, 'important');\n\n    restoreTarget = () => {\n      for (const { property, value, priority } of saved) {\n        const assigned = property === 'anchor-name' ? assignedAnchor : 'none';\n        if (element.style.getPropertyValue(property) !== assigned) continue;\n        if (value) element.style.setProperty(property, value, priority);\n        else element.style.removeProperty(property);\n      }\n      if (element.getAttribute('data-lobe-focus-ring') === 'managed') {\n        if (oldMarker === null) element.removeAttribute('data-lobe-focus-ring');\n        else element.setAttribute('data-lobe-focus-ring', oldMarker);\n      }\n    };\n    const rect = element.getBoundingClientRect();\n    if (\n      element.getClientRects().length !== 1 ||\n      !rect.width ||\n      !rect.height ||\n      computed.visibility !== 'visible'\n    ) {\n      clear();\n      return;\n    }\n    try {\n      ring.showPopover();\n      // Do not suppress a working native outline when an anchor cannot resolve.\n      const bounds = ring.getBoundingClientRect();\n      if (\n        Math.max(\n          ...(['top', 'right', 'bottom', 'left'] as const).map((edge) =>\n            Math.abs(bounds[edge] - rect[edge]),\n          ),\n        ) > 1\n      ) {\n        clear();\n        return;\n      }\n      element.style.setProperty('outline', 'none', 'important');\n      element.setAttribute('data-lobe-focus-ring', 'managed');\n      target = element;\n    } catch {\n      clear();\n    }\n  };\n\n  const schedule = () => {\n    if (!frame)\n      frame = win.requestAnimationFrame(() => {\n        frame = 0;\n        sync();\n      });\n  };\n  const focus = () => win.queueMicrotask(sync);\n  const blur = () => {\n    win.cancelAnimationFrame(frame);\n    frame = 0;\n    if (ring.matches(':popover-open')) ring.hidePopover();\n  };\n  const observer = new MutationObserver(() => {\n    if (target && !target.isConnected) clear();\n  });\n  observer.observe(doc.body, { childList: true, subtree: true });\n  doc.addEventListener('focusin', focus, true);\n  doc.addEventListener('focusout', schedule, true);\n  doc.addEventListener('keydown', schedule, true);\n  doc.addEventListener('pointerdown', schedule, true);\n  win.addEventListener('blur', blur);\n  win.addEventListener('focus', schedule);\n\n  const installation = {\n    dispose: () => {\n      disposed = true;\n      win.cancelAnimationFrame(frame);\n      observer.disconnect();\n      doc.removeEventListener('focusin', focus, true);\n      doc.removeEventListener('focusout', schedule, true);\n      doc.removeEventListener('keydown', schedule, true);\n      doc.removeEventListener('pointerdown', schedule, true);\n      win.removeEventListener('blur', blur);\n      win.removeEventListener('focus', schedule);\n      clear();\n      ring.remove();\n      sheet.remove();\n      installations.delete(doc);\n    },\n    users: 0,\n  };\n  installations.set(doc, installation);\n  sync();\n  return installGlobalFocusRing(doc);\n};\n"],"mappings":"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"}

package/es/Grid/Grid.mjs

@@ -1,9 +1,9 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 import { isString } from "es-toolkit/compat";
 //#region src/Grid/Grid.tsx
 const Grid = ({ className, gap = "1em", rows = 3, children, maxItemWidth = 240, ref, style, ...rest }) => {
@@ -19,7 +19,7 @@ const Grid = ({ className, gap = "1em", rows = 3, children, maxItemWidth = 240,
 		rows
 	]);
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: cx(styles, className),
+		className: styleProps(styles.root, className).className,
 		gap,
 		ref,
 		style: {

package/es/Grid/Grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.mjs","names":["Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  style,\n  ...rest\n}) => {\n  // Convert props to CSS variables\n  const cssVariables = useMemo<Record<string, string>>(() => {\n    const vars: Record<string, string> = {\n      '--grid-gap': isString(gap) ? gap : `${gap}px`,\n      '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n      '--grid-rows': `${rows}`,\n    };\n    return vars;\n  }, [gap, maxItemWidth, rows]);\n\n  return (\n    <Flexbox\n      className={cx(styles, className)}\n      gap={gap as any}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;EAMzD,OAAO;GAJL,cAAc,SAAS,GAAG,IAAI,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,YAAY,IAAI,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;EAEV;CACZ,GAAG;EAAC;EAAK;EAAc;CAAI,CAAC;CAE5B,OACE,oBAACA,mBAAD;EACE,WAAW,GAAG,QAAQ,SAAS;EAC1B;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Grid.mjs","names":["Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  style,\n  ...rest\n}) => {\n  // Convert props to CSS variables\n  const cssVariables = useMemo<Record<string, string>>(() => {\n    const vars: Record<string, string> = {\n      '--grid-gap': isString(gap) ? gap : `${gap}px`,\n      '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n      '--grid-rows': `${rows}`,\n    };\n    return vars;\n  }, [gap, maxItemWidth, rows]);\n\n  return (\n    <Flexbox\n      className={styleProps(styles.root, className).className}\n      gap={gap as any}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;EAMzD,OAAO;GAJL,cAAc,SAAS,GAAG,IAAI,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,YAAY,IAAI,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;EAEV;CACZ,GAAG;EAAC;EAAK;EAAc;CAAI,CAAC;CAE5B,OACE,oBAACA,mBAAD;EACE,WAAW,WAAW,OAAO,MAAM,SAAS,CAAC,CAAC;EACzC;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,KAAK,cAAc"}

package/es/Grid/style.mjs

@@ -1,21 +1,12 @@
-import { createStaticStyles } from "antd-style";
 //#region src/Grid/style.ts
-const styles = createStaticStyles(({ css }) => {
-	return css`
-    --rows: var(--grid-rows, 3);
-    --max-item-width: var(--grid-max-item-width, 240px);
-    --gap: var(--grid-gap, 1em);
-
-    display: grid !important;
-    grid-template-columns: repeat(
-      auto-fill,
-      minmax(
-        max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),
-        1fr
-      )
-    );
-  `;
-});
+const styles = { root: {
+	"--gap": "lb1by5cad",
+	"--max-item-width": "lb18upadf",
+	"--rows": "lbb27uya",
+	k1xSpc: "lbrvj5dj",
+	kumcoG: "lb1h17qkj",
+	$$css: true
+} };
 //#endregion
 export { styles };
 

package/es/Grid/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return css`\n    --rows: var(--grid-rows, 3);\n    --max-item-width: var(--grid-max-item-width, 240px);\n    --gap: var(--grid-gap, 1em);\n\n    display: grid !important;\n    grid-template-columns: repeat(\n      auto-fill,\n      minmax(\n        max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),\n        1fr\n      )\n    );\n  `;\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO,GAAG;;;;;;;;;;;;;;AAcZ,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  root: {\n    '--gap': 'var(--grid-gap, 1em)',\n    '--max-item-width': 'var(--grid-max-item-width, 240px)',\n    '--rows': 'var(--grid-rows, 3)',\n    'display': 'grid',\n    'gridTemplateColumns':\n      'repeat(auto-fill, minmax(max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))), 1fr))',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS,EACpB,MAAM;CACJ,SAAS;CACT,oBAAoB;CACpB,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}

package/es/Grid/type.d.mts

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

package/es/GroupAvatar/GroupAvatar.mjs

@@ -1,11 +1,11 @@
 "use client";
-import Block from "../Block/Block.mjs";
-import Avatar from "../base-ui/Avatar/index.mjs";
+import Avatar from "../Avatar/index.mjs";
+import { BlockImpl } from "../Block/Block.mjs";
 import Grid from "../Grid/Grid.mjs";
-import { variants } from "./style.mjs";
+import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
+import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 //#region src/GroupAvatar/GroupAvatar.tsx
 const GroupAvatar = ({ className, style, avatars = [], size = 32, grid = 2, cornerShape = "square", avatarShape = "square", ...rest }) => {
 	const calcSize = useMemo(() => {
@@ -29,13 +29,17 @@ const GroupAvatar = ({ className, style, avatars = [], size = 32, grid = 2, corn
 	]);
 	const calcAvatars = useMemo(() => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize), [avatars, calcSize.gridSize]);
 	const isSingle = calcAvatars?.length === 1;
-	return /* @__PURE__ */ jsx(Block, {
+	return /* @__PURE__ */ jsx(BlockImpl, {
 		align: "center",
-		className: cx(variants({ cornerShape }), className),
+		className,
 		height: size,
 		justify: "center",
-		style,
 		width: size,
+		xstyle: styles.root,
+		style: {
+			"--lobe-group-avatar-mask": `url('${SMOOTH_CORNER_MASKS[cornerShape]}')`,
+			...style
+		},
 		...rest,
 		children: /* @__PURE__ */ jsx(Grid, {
 			gap: calcSize.gapSize,

package/es/GroupAvatar/GroupAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GroupAvatar.mjs","names":[],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport Avatar from '@/base-ui/Avatar';\nimport Block from '@/Block';\nimport Grid from '@/Grid';\n\nimport { variants } from './style';\nimport type { GroupAvatarProps } from './type';\n\nconst GroupAvatar: FC<GroupAvatarProps> = ({\n  className,\n  style,\n  avatars = [],\n  size = 32,\n  grid = 2,\n  cornerShape = 'square',\n  avatarShape = 'square',\n  ...rest\n}) => {\n  const calcSize = useMemo(() => {\n    const length = avatars.length;\n    const isAutoGrid = grid === 'auto';\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\n    const isCircle = cornerShape === 'circle';\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\n\n    return {\n      avatarSize,\n      gapSize,\n      gridSize,\n      gridWidth: avatarSize * gridSize + gapSize,\n      maxItemWidth: avatarSize - 1,\n    };\n  }, [avatars, grid, size, cornerShape]);\n\n  const calcAvatars = useMemo(\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\n    [avatars, calcSize.gridSize],\n  );\n\n  const isSingle = calcAvatars?.length === 1;\n\n  return (\n    <Block\n      align={'center'}\n      className={cx(variants({ cornerShape }), className)}\n      height={size}\n      justify={'center'}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <Grid\n        gap={calcSize.gapSize}\n        maxItemWidth={0}\n        rows={calcSize.gridSize}\n        width={calcSize.gridWidth}\n      >\n        {calcAvatars.map((item, index) => {\n          if (typeof item === 'string')\n            return (\n              <Avatar\n                avatar={item}\n                key={index}\n                shape={avatarShape}\n                size={isSingle ? size * 0.8 : calcSize.avatarSize}\n              />\n            );\n          return (\n            <Avatar\n              key={index}\n              {...item}\n              shape={avatarShape}\n              size={isSingle ? size * 0.8 : calcSize.avatarSize}\n            />\n          );\n        })}\n      </Grid>\n    </Block>\n  );\n};\n\nexport default GroupAvatar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,eAAqC,EACzC,WACA,OACA,UAAU,CAAC,GACX,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,IAAK;EAC1E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,EAAE;EAE9E,OAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;EAC7B;CACF,GAAG;EAAC;EAAS;EAAM;EAAM;CAAW,CAAC;CAErC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,QAAQ,GAC7D,CAAC,SAAS,SAAS,QAAQ,CAC7B;CAEA,MAAM,WAAW,aAAa,WAAW;CAEzC,OACE,oBAAC,OAAD;EACE,OAAO;EACP,WAAW,GAAG,SAAS,EAAE,YAAY,CAAC,GAAG,SAAS;EAClD,QAAQ;EACR,SAAS;EACF;EACP,OAAO;EACP,GAAI;EAEJ,UAAA,oBAAC,MAAD;GACE,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;GAEf,UAAA,YAAY,KAAK,MAAM,UAAU;IAChC,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,QAAD;KACE,QAAQ;KAER,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAHM,KAGN;IAEL,OACE,oBAAC,QAAD;KAEE,GAAI;KACJ,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAJM,KAIN;GAEL,CAAC;EACG,CAAA;CACD,CAAA;AAEX"}
+{"version":3,"file":"GroupAvatar.mjs","names":["Block"],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, type FC, useMemo } from 'react';\n\nimport Avatar from '@/Avatar';\nimport { BlockImpl as Block } from '@/Block/Block';\nimport Grid from '@/Grid';\nimport { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';\n\nimport { styles } from './style';\nimport type { GroupAvatarProps } from './type';\n\nconst GroupAvatar: FC<GroupAvatarProps> = ({\n  className,\n  style,\n  avatars = [],\n  size = 32,\n  grid = 2,\n  cornerShape = 'square',\n  avatarShape = 'square',\n  ...rest\n}) => {\n  const calcSize = useMemo(() => {\n    const length = avatars.length;\n    const isAutoGrid = grid === 'auto';\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\n    const isCircle = cornerShape === 'circle';\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\n\n    return {\n      avatarSize,\n      gapSize,\n      gridSize,\n      gridWidth: avatarSize * gridSize + gapSize,\n      maxItemWidth: avatarSize - 1,\n    };\n  }, [avatars, grid, size, cornerShape]);\n\n  const calcAvatars = useMemo(\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\n    [avatars, calcSize.gridSize],\n  );\n\n  const isSingle = calcAvatars?.length === 1;\n\n  return (\n    <Block\n      align={'center'}\n      className={className}\n      height={size}\n      justify={'center'}\n      width={size}\n      xstyle={styles.root}\n      style={\n        {\n          '--lobe-group-avatar-mask': `url('${SMOOTH_CORNER_MASKS[cornerShape]}')`,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n    >\n      <Grid\n        gap={calcSize.gapSize}\n        maxItemWidth={0}\n        rows={calcSize.gridSize}\n        width={calcSize.gridWidth}\n      >\n        {calcAvatars.map((item, index) => {\n          if (typeof item === 'string')\n            return (\n              <Avatar\n                avatar={item}\n                key={index}\n                shape={avatarShape}\n                size={isSingle ? size * 0.8 : calcSize.avatarSize}\n              />\n            );\n          return (\n            <Avatar\n              key={index}\n              {...item}\n              shape={avatarShape}\n              size={isSingle ? size * 0.8 : calcSize.avatarSize}\n            />\n          );\n        })}\n      </Grid>\n    </Block>\n  );\n};\n\nexport default GroupAvatar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,eAAqC,EACzC,WACA,OACA,UAAU,CAAC,GACX,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,IAAK;EAC1E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,EAAE;EAE9E,OAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;EAC7B;CACF,GAAG;EAAC;EAAS;EAAM;EAAM;CAAW,CAAC;CAErC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,QAAQ,GAC7D,CAAC,SAAS,SAAS,QAAQ,CAC7B;CAEA,MAAM,WAAW,aAAa,WAAW;CAEzC,OACE,oBAACA,WAAD;EACE,OAAO;EACI;EACX,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ,OAAO;EACf,OACE;GACE,4BAA4B,QAAQ,oBAAoB,aAAa;GACrE,GAAG;EACL;EAEF,GAAI;EAEJ,UAAA,oBAAC,MAAD;GACE,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;GAEf,UAAA,YAAY,KAAK,MAAM,UAAU;IAChC,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,QAAD;KACE,QAAQ;KAER,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAHM,KAGN;IAEL,OACE,oBAAC,QAAD;KAEE,GAAI;KACJ,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAJM,KAIN;GAEL,CAAC;EACG,CAAA;CACD,CAAA;AAEX"}