@lssm/lib.ui-kit 1.7.3 → 1.9.0

package/README.md

@@ -0,0 +1,82 @@
+# @lssm/lib.ui-kit
+
+Universal UI components for React Native and Web, built on top of `nativewind` and `@rn-primitives`.
+
+## Purpose
+
+To provide a set of high-quality, accessible, and unstyled components that work seamlessly across mobile (React Native) and web (React/Next.js) platforms. This library serves as the foundation for the LSSM design system.
+
+## Installation
+
+```bash
+npm install @lssm/lib.ui-kit
+# or
+bun add @lssm/lib.ui-kit
+```
+
+## Key Concepts
+
+- **Universal**: Components are designed to render natively on iOS/Android and as standard HTML on the web.
+- **Styled with NativeWind**: Uses Tailwind CSS classes for styling, enabling rapid UI development with a familiar syntax.
+- **Accessible Primitives**: Leverages `@rn-primitives` (Radix UI for Native) to ensure accessibility best practices.
+- **Atomic Design**: Exports atoms, molecules, and organisms to build complex UIs.
+
+## Exports
+
+The library exports components via subpaths to allow for tree-shaking and cleaner imports.
+
+### Core UI Components
+
+- `accordion`, `alert-dialog`, `alert`, `aspect-ratio`, `avatar`, `badge`
+- `breadcrumb`, `button`, `card`, `checkbox`, `collapsible`, `command`
+- `context-menu`, `date-picker`, `dialog`, `dropdown-menu`, `form`
+- `hover-card`, `input`, `label`, `menubar`, `navigation-menu`, `popover`
+- `progress`, `radio-group`, `select`, `separator`, `sheet`, `skeleton`
+- `slider`, `switch`, `table`, `tabs`, `textarea`, `toggle-group`, `toggle`, `tooltip`
+
+### Layout & Utilities
+
+- `stack`, `text`, `typography`
+- `useColorScheme`
+
+### Higher-Order Patterns (Molecules/Organisms)
+
+- `marketing/*`: `Hero`, `FeatureGrid`, `PricingTable`
+- `usecases/*`: `UseCaseCard`, `UserStoryCard`
+- `molecules/*`: `SearchAndFilter`, `Autocomplete`
+- `organisms/*`: `ListPage`, `ErrorBoundary`
+
+## Usage
+
+```tsx
+import { Button } from '@lssm/lib.ui-kit/ui/button';
+import { Text } from '@lssm/lib.ui-kit/ui/text';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from '@lssm/lib.ui-kit/ui/card';
+
+export function MyComponent() {
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent className="gap-4">
+        <Text>This is a universal component.</Text>
+        <Button onPress={() => console.log('Clicked!')}>Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+
+
+
+
+
+
+

package/dist/node_modules/react-hook-form/dist/index.esm.js

@@ -138,7 +138,7 @@ const useFormContext = () => React.useContext(HookFormContext);
 * ```
 */
 const FormProvider = (props) => {
-	const { children,...data } = props;
+	const { children, ...data } = props;
 	return React.createElement(HookFormContext.Provider, { value: data }, children);
 };
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
@@ -228,7 +228,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 };
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new WeakSet()) {
-	if (isPrimitive(object1) || isPrimitive(object2)) return object1 === object2;
+	if (isPrimitive(object1) || isPrimitive(object2)) return Object.is(object1, object2);
 	if (isDateObject(object1) && isDateObject(object2)) return object1.getTime() === object2.getTime();
 	const keys1 = Object.keys(object1);
 	const keys2 = Object.keys(object2);
@@ -241,7 +241,7 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
 		if (!keys2.includes(key)) return false;
 		if (key !== "ref") {
 			const val2 = object2[key];
-			if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) return false;
+			if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : !Object.is(val1, val2)) return false;
 		}
 	}
 	return true;
@@ -622,17 +622,26 @@ function isTraversable(value) {
 	return Array.isArray(value) || isObject(value) && !objectHasFunction(value);
 }
 function markFieldsDirty(data, fields = {}) {
-	for (const key in data) if (isTraversable(data[key])) {
-		fields[key] = Array.isArray(data[key]) ? [] : {};
-		markFieldsDirty(data[key], fields[key]);
-	} else if (!isUndefined(data[key])) fields[key] = true;
+	for (const key in data) {
+		const value = data[key];
+		if (isTraversable(value)) {
+			fields[key] = Array.isArray(value) ? [] : {};
+			markFieldsDirty(value, fields[key]);
+		} else if (!isUndefined(value)) fields[key] = true;
+	}
 	return fields;
 }
 function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
 	if (!dirtyFieldsFromValues) dirtyFieldsFromValues = markFieldsDirty(formValues);
-	for (const key in data) if (isTraversable(data[key])) if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) dirtyFieldsFromValues[key] = markFieldsDirty(data[key], Array.isArray(data[key]) ? [] : {});
-	else getDirtyFields(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
-	else dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+	for (const key in data) {
+		const value = data[key];
+		if (isTraversable(value)) if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
+		else getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+		else {
+			const formValue = formValues[key];
+			dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
+		}
+	}
 	return dirtyFieldsFromValues;
 }
 const defaultResult = {
@@ -706,7 +715,7 @@ const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
 	for (const key of fieldsNames || Object.keys(fields)) {
 		const field = get(fields, key);
 		if (field) {
-			const { _f,...currentField } = field;
+			const { _f, ...currentField } = field;
 			if (_f) {
 				if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) return true;
 				else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) return true;
@@ -743,7 +752,7 @@ function schemaErrorLookup(errors, _fields, name) {
 }
 var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
 	updateFormState(formStateData);
-	const { name,...formState } = formStateData;
+	const { name, ...formState } = formStateData;
 	return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
 };
 var shouldSubscribeByName = (name, signalName, exact) => !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (exact ? currentName === signalName : currentName.startsWith(signalName) || signalName.startsWith(currentName)));
@@ -1029,7 +1038,7 @@ function createFormControl(props = {}) {
 		if (field) {
 			const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
 			isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
-			_state.mount && _setValid();
+			_state.mount && !_state.action && _setValid();
 		}
 	};
 	const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -1105,7 +1114,7 @@ function createFormControl(props = {}) {
 		for (const name in fields) {
 			const field = fields[name];
 			if (field) {
-				const { _f,...fieldValue } = field;
+				const { _f, ...fieldValue } = field;
 				if (_f) {
 					const isFieldArrayRoot = _names.array.has(_f.name);
 					const isPromiseFunction = field._f && hasPromiseValidation(field._f);
@@ -1311,7 +1320,7 @@ function createFormControl(props = {}) {
 	};
 	const setError = (name, error, options) => {
 		const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
-		const { ref: currentRef, message, type,...restOfErrorTree } = get(_formState.errors, name) || {};
+		const { ref: currentRef, message, type, ...restOfErrorTree } = get(_formState.errors, name) || {};
 		set(_formState.errors, name, {
 			...restOfErrorTree,
 			...error,
@@ -1987,7 +1996,7 @@ function useForm(props = {}) {
 		};
 		if (props.defaultValues && !isFunction(props.defaultValues)) props.formControl.reset(props.defaultValues, props.resetOptions);
 	} else {
-		const { formControl,...rest } = createFormControl(props);
+		const { formControl, ...rest } = createFormControl(props);
 		_formControl.current = {
 			...rest,
 			formState
@@ -2033,11 +2042,13 @@ function useForm(props = {}) {
 		}
 	}, [control, formState.isDirty]);
 	React.useEffect(() => {
+		var _a;
 		if (props.values && !deepEqual(props.values, _values.current)) {
 			control._reset(props.values, {
 				keepFieldsRef: true,
 				...control._options.resetOptions
 			});
+			if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) control._setValid();
 			_values.current = props.values;
 			updateFormState((state) => ({ ...state }));
 		} else control._resetDefaultValues();