@uspk-ui/form-control - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/index.cjs.js

@@ -47,11 +47,27 @@ "use strict";
 // src/form-control.tsx
-var import_react_use_boolean = require("@uspk-ui/react-use-boolean");
-var import_react_utils = require("@uspk-ui/react-utils");
-var React2 = __toESM(require("react"));
+var import_react_context = require("@uspk-ui/react-context");
+var import_react_use_merge_refs = require("@uspk-ui/react-use-merge-refs");
+var import_system = require("@uspk-ui/system");
+
+// ../../utilities/shared-utils/src/index.ts
+var cx = (...classNames) => classNames.filter(Boolean).join(" ");
+var dataAttr = (condition) => condition ? "" : void 0;
+var ariaAttr = (condition) => condition ? true : void 0;
+function callAllHandlers(...fns) {
+  return function func(event) {
+    fns.some((fn) => {
+      fn == null ? void 0 : fn(event);
+      return event == null ? void 0 : event.defaultPrevented;
+    });
+  };
+}
+
+// src/form-control.tsx
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var [FormControlStylesProvider, useFormControlStyles] = (0, import_react_utils.createContext)({
+var [FormControlStylesProvider, useFormControlStyles] = (0, import_react_context.createContext)({
   name: `FormControlStylesContext`,
   errorMessage: `useFormControlStyles returned is 'undefined'. Seems you forgot to wrap the components in "<FormControl />" `
 });
-var [FormControlProvider, useFormControlContext] = (0, import_react_utils.createContext)({
+var [FormControlProvider, useFormControlContext] = (0, import_react_context.createContext)({
   strict: false,
@@ -69,3 +85,3 @@ name: "FormControlContext"
   } = props;
-  const uuid = React2.useId();
+  const uuid = (0, import_react2.useId)();
   const id = idProp || `field-${uuid}`;
@@ -75,10 +91,10 @@ const labelId = `${id}-label`;
   const helpTextId = `${id}-helptext`;
-  const [hasFeedbackText, setHasFeedbackText] = React2.useState(false);
-  const [hasHelpText, setHasHelpText] = React2.useState(false);
-  const [isFocused, setFocus] = (0, import_react_use_boolean.useBoolean)();
-  const getHelpTextProps = React2.useCallback(
+  const [hasFeedbackText, setHasFeedbackText] = (0, import_react2.useState)(false);
+  const [hasHelpText, setHasHelpText] = (0, import_react2.useState)(false);
+  const [isFocused, setFocus] = (0, import_react2.useState)(false);
+  const getHelpTextProps = (0, import_react2.useCallback)(
     (props2 = {}, forwardedRef = null) => ({
       id: helpTextId,
       ...props2,
-      ref: (0, import_react_utils.mergeRefs)(forwardedRef, (node) => {
+      ref: (0, import_react_use_merge_refs.mergeRefs)(forwardedRef, (node) => {
         if (!node)
@@ -91,10 +107,10 @@ return;
   );
-  const getLabelProps = React2.useCallback(
+  const getLabelProps = (0, import_react2.useCallback)(
     (props2 = {}, forwardedRef = null) => ({
       ...props2,
       ref: forwardedRef,
-      "data-focus": (0, import_react_utils.dataAttr)(isFocused),
-      "data-disabled": (0, import_react_utils.dataAttr)(isDisabled),
-      "data-invalid": (0, import_react_utils.dataAttr)(isInvalid),
-      "data-readonly": (0, import_react_utils.dataAttr)(isReadOnly),
+      "data-focus": dataAttr(isFocused),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-readonly": dataAttr(isReadOnly),
       id: props2.id ?? labelId,
@@ -105,7 +121,7 @@ htmlFor: props2.htmlFor ?? id
   );
-  const getErrorMessageProps = React2.useCallback(
+  const getErrorMessageProps = (0, import_react2.useCallback)(
     (props2 = {}, forwardedRef = null) => ({
       id: feedbackId,
       ...props2,
-      ref: (0, import_react_utils.mergeRefs)(forwardedRef, (node) => {
+      ref: (0, import_react_use_merge_refs.mergeRefs)(forwardedRef, (node) => {
         if (!node)
@@ -119,3 +135,3 @@ return;
   );
-  const getRootProps = React2.useCallback(
+  const getRootProps = (0, import_react2.useCallback)(
     (props2 = {}, forwardedRef = null) => ({
@@ -129,3 +145,3 @@ ...props2,
   );
-  const getRequiredIndicatorProps = React2.useCallback(
+  const getRequiredIndicatorProps = (0, import_react2.useCallback)(
     (props2 = {}, forwardedRef = null) => ({
@@ -146,4 +162,4 @@ ...props2,
     isFocused: !!isFocused,
-    onFocus: setFocus.on,
-    onBlur: setFocus.off,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
     hasFeedbackText,
@@ -165,37 +181,41 @@ setHasFeedbackText,
 }
-var FormControl = (0, import_react_utils.forwardRef)((props, ref) => {
-  const styles = (0, import_react_utils.useMultiStyleConfig)("Form", props);
-  const ownProps = (0, import_react_utils.omitThemingProps)(props);
-  const {
-    getRootProps,
-    htmlProps: _,
-    ...context
-  } = useFormControlProvider(ownProps);
-  const className = (0, import_react_utils.cx)("uspk-form-control", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControlProvider, {
-    value: context,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControlStylesProvider, {
-      value: styles,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_utils.uspk.div, {
-        ...getRootProps({}, ref),
-        className,
-        __css: styles["container"]
+var FormControl = (0, import_system.forwardRef)(
+  function FormControl2(props, ref) {
+    const styles = (0, import_system.useMultiStyleConfig)("Form", props);
+    const ownProps = (0, import_system.omitThemingProps)(props);
+    const {
+      getRootProps,
+      htmlProps: _,
+      ...context
+    } = useFormControlProvider(ownProps);
+    const className = cx("uspk-form-control", props.className);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControlProvider, {
+      value: context,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControlStylesProvider, {
+        value: styles,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.uspk.div, {
+          ...getRootProps({}, ref),
+          className,
+          __css: styles["container"]
+        })
       })
-    })
-  });
-});
-var FormHelperText = (0, import_react_utils.forwardRef)((props, ref) => {
-  const field = useFormControlContext();
-  const styles = useFormControlStyles();
-  const className = (0, import_react_utils.cx)("uspk-form__helper-text", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_utils.uspk.div, {
-    ...field == null ? void 0 : field.getHelpTextProps(props, ref),
-    __css: styles.helperText,
-    className
-  });
-});
+    });
+  }
+);
+FormControl.displayName = "FormControl";
+var FormHelperText = (0, import_system.forwardRef)(
+  function FormHelperText2(props, ref) {
+    const field = useFormControlContext();
+    const styles = useFormControlStyles();
+    const className = cx("uspk-form__helper-text", props.className);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.uspk.div, {
+      ...field == null ? void 0 : field.getHelpTextProps(props, ref),
+      __css: styles.helperText,
+      className
+    });
+  }
+);
 FormHelperText.displayName = "FormHelperText";
 
 // src/use-form-control.ts
-var import_react_utils2 = require("@uspk-ui/react-utils");
 function useFormControl(props) {
@@ -208,5 +228,5 @@ const { isDisabled, isInvalid, isReadOnly, isRequired, ...rest } = useFormControlProps(props);
     required: isRequired,
-    "aria-invalid": (0, import_react_utils2.ariaAttr)(isInvalid),
-    "aria-required": (0, import_react_utils2.ariaAttr)(isRequired),
-    "aria-readonly": (0, import_react_utils2.ariaAttr)(isReadOnly)
+    "aria-invalid": ariaAttr(isInvalid),
+    "aria-required": ariaAttr(isRequired),
+    "aria-readonly": ariaAttr(isReadOnly)
   };
@@ -244,4 +264,4 @@ }
     isInvalid: isInvalid ?? (field == null ? void 0 : field.isInvalid),
-    onFocus: (0, import_react_utils2.callAllHandlers)(field == null ? void 0 : field.onFocus, onFocus),
-    onBlur: (0, import_react_utils2.callAllHandlers)(field == null ? void 0 : field.onBlur, onBlur)
+    onFocus: callAllHandlers(field == null ? void 0 : field.onFocus, onFocus),
+    onBlur: callAllHandlers(field == null ? void 0 : field.onBlur, onBlur)
   };
@@ -251,14 +271,14 @@ }
 // src/form-error.tsx
-var import_icons = require("@uspk-ui/icons");
-var import_react_utils3 = require("@uspk-ui/react-utils");
-var React3 = __toESM(require("react"));
+var import_icon = require("@uspk-ui/icon");
+var import_react_context2 = require("@uspk-ui/react-context");
+var import_system2 = require("@uspk-ui/system");
 var import_jsx_runtime = require("react/jsx-runtime");
-var [FormErrorStylesProvider, useFormErrorStyles] = (0, import_react_utils3.createContext)({
+var [FormErrorStylesProvider, useFormErrorStyles] = (0, import_react_context2.createContext)({
   name: `FormErrorStylesContext`,
   errorMessage: `useFormErrorStyles returned is 'undefined'. Seems you forgot to wrap the components in "<FormError />" `
 });
-var FormErrorMessage = (0, import_react_utils3.forwardRef)(
+var FormErrorMessage = (0, import_system2.forwardRef)(
   (props, ref) => {
-    const styles = (0, import_react_utils3.useMultiStyleConfig)("FormError", props);
-    const ownProps = (0, import_react_utils3.omitThemingProps)(props);
+    const styles = (0, import_system2.useMultiStyleConfig)("FormError", props);
+    const ownProps = (0, import_system2.omitThemingProps)(props);
     const field = useFormControlContext();
@@ -269,5 +289,5 @@ if (!(field == null ? void 0 : field.isInvalid))
       value: styles,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_utils3.uspk.div, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system2.uspk.div, {
         ...field == null ? void 0 : field.getErrorMessageProps(ownProps, ref),
-        className: (0, import_react_utils3.cx)("uspk-form__error-message", props.className),
+        className: cx("uspk-form__error-message", props.className),
         __css: {
@@ -283,15 +303,14 @@ display: "flex",
 FormErrorMessage.displayName = "FormErrorMessage";
-var FormErrorIcon = React3.forwardRef((props, ref) => {
-  const styles = (0, import_react_utils3.useStyles)();
+var FormErrorIcon = (0, import_system2.forwardRef)((props, ref) => {
+  const styles = useFormErrorStyles();
   const field = useFormControlContext();
   if (!(field == null ? void 0 : field.isInvalid))
     return null;
-  const _className = (0, import_react_utils3.cx)("uspk-form__error-icon", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.IconContainer, {
+  const _className = cx("uspk-form__error-icon", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, {
     ref,
     "aria-hidden": true,
     ...props,
-    style: styles.icon,
+    __css: styles.icon,
     className: _className,
-    size: "sm",
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
@@ -306,35 +325,33 @@ fill: "currentColor",
 // src/form-label.tsx
-var import_react_utils4 = require("@uspk-ui/react-utils");
+var import_system3 = require("@uspk-ui/system");
 var import_jsx_runtime = require("react/jsx-runtime");
-var FormLabel = (0, import_react_utils4.forwardRef)(
-  (passedProps, ref) => {
-    const styles = (0, import_react_utils4.useStyleConfig)("FormLabel", passedProps);
-    const props = (0, import_react_utils4.omitThemingProps)(passedProps);
-    const {
-      className,
+var FormLabel = (0, import_system3.forwardRef)(function FormLabel2(passedProps, ref) {
+  const styles = (0, import_system3.useStyleConfig)("FormLabel", passedProps);
+  const props = (0, import_system3.omitThemingProps)(passedProps);
+  const {
+    className,
+    children,
+    requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredIndicator, {}),
+    optionalIndicator = null,
+    ...rest
+  } = props;
+  const field = useFormControlContext();
+  const ownProps = (field == null ? void 0 : field.getLabelProps(rest, ref)) ?? { ref, ...rest };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_system3.uspk.label, {
+    ...ownProps,
+    className: cx("uspk-form__label", props.className),
+    __css: {
+      display: "block",
+      textAlign: "start",
+      ...styles
+    },
+    children: [
       children,
-      requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredIndicator, {}),
-      optionalIndicator = null,
-      ...rest
-    } = props;
-    const field = useFormControlContext();
-    const ownProps = (field == null ? void 0 : field.getLabelProps(rest, ref)) ?? { ref, ...rest };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_utils4.uspk.label, {
-      ...ownProps,
-      className: (0, import_react_utils4.cx)("uspk-form__label", props.className),
-      __css: {
-        display: "block",
-        textAlign: "start",
-        ...styles
-      },
-      children: [
-        children,
-        (field == null ? void 0 : field.isRequired) ? requiredIndicator : optionalIndicator
-      ]
-    });
-  }
-);
+      (field == null ? void 0 : field.isRequired) ? requiredIndicator : optionalIndicator
+    ]
+  });
+});
 FormLabel.displayName = "FormLabel";
-var RequiredIndicator = (0, import_react_utils4.forwardRef)(
-  (props, ref) => {
+var RequiredIndicator = (0, import_system3.forwardRef)(
+  function RequiredIndicator2(props, ref) {
     const field = useFormControlContext();
@@ -344,4 +361,4 @@ const styles = useFormControlStyles();
       return null;
-    const className = (0, import_react_utils4.cx)("uspk-form__required-indicator", props.className);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_utils4.uspk.span, {
+    const className = cx("uspk-form__required-indicator", props.className);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system3.uspk.span, {
       ...field == null ? void 0 : field.getRequiredIndicatorProps(props, ref),
@@ -348,0 +365,0 @@ __css: styles.requiredIndicator,

dist/index.esm.js

@@ -5,14 +5,26 @@ // ../../../react-shim.js
 // src/form-control.tsx
-import { useBoolean } from "@uspk-ui/react-use-boolean";
+import { createContext } from "@uspk-ui/react-context";
+import { mergeRefs } from "@uspk-ui/react-use-merge-refs";
 import {
-  createContext,
-  cx,
-  dataAttr,
+  uspk,
   forwardRef,
-  mergeRefs,
   omitThemingProps,
-  useMultiStyleConfig,
-  uspk
-} from "@uspk-ui/react-utils";
-import * as React2 from "react";
+  useMultiStyleConfig
+} from "@uspk-ui/system";
+
+// ../../utilities/shared-utils/src/index.ts
+var cx = (...classNames) => classNames.filter(Boolean).join(" ");
+var dataAttr = (condition) => condition ? "" : void 0;
+var ariaAttr = (condition) => condition ? true : void 0;
+function callAllHandlers(...fns) {
+  return function func(event) {
+    fns.some((fn) => {
+      fn == null ? void 0 : fn(event);
+      return event == null ? void 0 : event.defaultPrevented;
+    });
+  };
+}
+
+// src/form-control.tsx
+import { useCallback, useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -36,3 +48,3 @@ var [FormControlStylesProvider, useFormControlStyles] = createContext({
   } = props;
-  const uuid = React2.useId();
+  const uuid = useId();
   const id = idProp || `field-${uuid}`;
@@ -42,6 +54,6 @@ const labelId = `${id}-label`;
   const helpTextId = `${id}-helptext`;
-  const [hasFeedbackText, setHasFeedbackText] = React2.useState(false);
-  const [hasHelpText, setHasHelpText] = React2.useState(false);
-  const [isFocused, setFocus] = useBoolean();
-  const getHelpTextProps = React2.useCallback(
+  const [hasFeedbackText, setHasFeedbackText] = useState(false);
+  const [hasHelpText, setHasHelpText] = useState(false);
+  const [isFocused, setFocus] = useState(false);
+  const getHelpTextProps = useCallback(
     (props2 = {}, forwardedRef = null) => ({
@@ -58,3 +70,3 @@ id: helpTextId,
   );
-  const getLabelProps = React2.useCallback(
+  const getLabelProps = useCallback(
     (props2 = {}, forwardedRef = null) => ({
@@ -72,3 +84,3 @@ ...props2,
   );
-  const getErrorMessageProps = React2.useCallback(
+  const getErrorMessageProps = useCallback(
     (props2 = {}, forwardedRef = null) => ({
@@ -86,3 +98,3 @@ id: feedbackId,
   );
-  const getRootProps = React2.useCallback(
+  const getRootProps = useCallback(
     (props2 = {}, forwardedRef = null) => ({
@@ -96,3 +108,3 @@ ...props2,
   );
-  const getRequiredIndicatorProps = React2.useCallback(
+  const getRequiredIndicatorProps = useCallback(
     (props2 = {}, forwardedRef = null) => ({
@@ -113,4 +125,4 @@ ...props2,
     isFocused: !!isFocused,
-    onFocus: setFocus.on,
-    onBlur: setFocus.off,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
     hasFeedbackText,
@@ -132,37 +144,41 @@ setHasFeedbackText,
 }
-var FormControl = forwardRef((props, ref) => {
-  const styles = useMultiStyleConfig("Form", props);
-  const ownProps = omitThemingProps(props);
-  const {
-    getRootProps,
-    htmlProps: _,
-    ...context
-  } = useFormControlProvider(ownProps);
-  const className = cx("uspk-form-control", props.className);
-  return /* @__PURE__ */ jsx(FormControlProvider, {
-    value: context,
-    children: /* @__PURE__ */ jsx(FormControlStylesProvider, {
-      value: styles,
-      children: /* @__PURE__ */ jsx(uspk.div, {
-        ...getRootProps({}, ref),
-        className,
-        __css: styles["container"]
+var FormControl = forwardRef(
+  function FormControl2(props, ref) {
+    const styles = useMultiStyleConfig("Form", props);
+    const ownProps = omitThemingProps(props);
+    const {
+      getRootProps,
+      htmlProps: _,
+      ...context
+    } = useFormControlProvider(ownProps);
+    const className = cx("uspk-form-control", props.className);
+    return /* @__PURE__ */ jsx(FormControlProvider, {
+      value: context,
+      children: /* @__PURE__ */ jsx(FormControlStylesProvider, {
+        value: styles,
+        children: /* @__PURE__ */ jsx(uspk.div, {
+          ...getRootProps({}, ref),
+          className,
+          __css: styles["container"]
+        })
       })
-    })
-  });
-});
-var FormHelperText = forwardRef((props, ref) => {
-  const field = useFormControlContext();
-  const styles = useFormControlStyles();
-  const className = cx("uspk-form__helper-text", props.className);
-  return /* @__PURE__ */ jsx(uspk.div, {
-    ...field == null ? void 0 : field.getHelpTextProps(props, ref),
-    __css: styles.helperText,
-    className
-  });
-});
+    });
+  }
+);
+FormControl.displayName = "FormControl";
+var FormHelperText = forwardRef(
+  function FormHelperText2(props, ref) {
+    const field = useFormControlContext();
+    const styles = useFormControlStyles();
+    const className = cx("uspk-form__helper-text", props.className);
+    return /* @__PURE__ */ jsx(uspk.div, {
+      ...field == null ? void 0 : field.getHelpTextProps(props, ref),
+      __css: styles.helperText,
+      className
+    });
+  }
+);
 FormHelperText.displayName = "FormHelperText";
 
 // src/use-form-control.ts
-import { ariaAttr, callAllHandlers } from "@uspk-ui/react-utils";
 function useFormControl(props) {
@@ -216,13 +232,10 @@ const { isDisabled, isInvalid, isReadOnly, isRequired, ...rest } = useFormControlProps(props);
 // src/form-error.tsx
-import { IconContainer } from "@uspk-ui/icons";
+import { Icon } from "@uspk-ui/icon";
+import { createContext as createContext2 } from "@uspk-ui/react-context";
 import {
-  createContext as createContext2,
-  cx as cx2,
+  uspk as uspk2,
   forwardRef as forwardRef2,
   omitThemingProps as omitThemingProps2,
-  useMultiStyleConfig as useMultiStyleConfig2,
-  useStyles,
-  uspk as uspk2
-} from "@uspk-ui/react-utils";
-import * as React3 from "react";
+  useMultiStyleConfig as useMultiStyleConfig2
+} from "@uspk-ui/system";
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -244,3 +257,3 @@ var [FormErrorStylesProvider, useFormErrorStyles] = createContext2({
         ...field == null ? void 0 : field.getErrorMessageProps(ownProps, ref),
-        className: cx2("uspk-form__error-message", props.className),
+        className: cx("uspk-form__error-message", props.className),
         __css: {
@@ -256,15 +269,14 @@ display: "flex",
 FormErrorMessage.displayName = "FormErrorMessage";
-var FormErrorIcon = React3.forwardRef((props, ref) => {
-  const styles = useStyles();
+var FormErrorIcon = forwardRef2((props, ref) => {
+  const styles = useFormErrorStyles();
   const field = useFormControlContext();
   if (!(field == null ? void 0 : field.isInvalid))
     return null;
-  const _className = cx2("uspk-form__error-icon", props.className);
-  return /* @__PURE__ */ jsx2(IconContainer, {
+  const _className = cx("uspk-form__error-icon", props.className);
+  return /* @__PURE__ */ jsx2(Icon, {
     ref,
     "aria-hidden": true,
     ...props,
-    style: styles.icon,
+    __css: styles.icon,
     className: _className,
-    size: "sm",
     children: /* @__PURE__ */ jsx2("path", {
@@ -280,40 +292,37 @@ fill: "currentColor",
 import {
-  cx as cx3,
-  forwardRef as forwardRef4,
+  uspk as uspk3,
+  forwardRef as forwardRef3,
   omitThemingProps as omitThemingProps3,
-  useStyleConfig,
-  uspk as uspk3
-} from "@uspk-ui/react-utils";
+  useStyleConfig
+} from "@uspk-ui/system";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var FormLabel = forwardRef4(
-  (passedProps, ref) => {
-    const styles = useStyleConfig("FormLabel", passedProps);
-    const props = omitThemingProps3(passedProps);
-    const {
-      className,
+var FormLabel = forwardRef3(function FormLabel2(passedProps, ref) {
+  const styles = useStyleConfig("FormLabel", passedProps);
+  const props = omitThemingProps3(passedProps);
+  const {
+    className,
+    children,
+    requiredIndicator = /* @__PURE__ */ jsx3(RequiredIndicator, {}),
+    optionalIndicator = null,
+    ...rest
+  } = props;
+  const field = useFormControlContext();
+  const ownProps = (field == null ? void 0 : field.getLabelProps(rest, ref)) ?? { ref, ...rest };
+  return /* @__PURE__ */ jsxs(uspk3.label, {
+    ...ownProps,
+    className: cx("uspk-form__label", props.className),
+    __css: {
+      display: "block",
+      textAlign: "start",
+      ...styles
+    },
+    children: [
       children,
-      requiredIndicator = /* @__PURE__ */ jsx3(RequiredIndicator, {}),
-      optionalIndicator = null,
-      ...rest
-    } = props;
-    const field = useFormControlContext();
-    const ownProps = (field == null ? void 0 : field.getLabelProps(rest, ref)) ?? { ref, ...rest };
-    return /* @__PURE__ */ jsxs(uspk3.label, {
-      ...ownProps,
-      className: cx3("uspk-form__label", props.className),
-      __css: {
-        display: "block",
-        textAlign: "start",
-        ...styles
-      },
-      children: [
-        children,
-        (field == null ? void 0 : field.isRequired) ? requiredIndicator : optionalIndicator
-      ]
-    });
-  }
-);
+      (field == null ? void 0 : field.isRequired) ? requiredIndicator : optionalIndicator
+    ]
+  });
+});
 FormLabel.displayName = "FormLabel";
-var RequiredIndicator = forwardRef4(
-  (props, ref) => {
+var RequiredIndicator = forwardRef3(
+  function RequiredIndicator2(props, ref) {
     const field = useFormControlContext();
@@ -323,3 +332,3 @@ const styles = useFormControlStyles();
       return null;
-    const className = cx3("uspk-form__required-indicator", props.className);
+    const className = cx("uspk-form__required-indicator", props.className);
     return /* @__PURE__ */ jsx3(uspk3.span, {
@@ -326,0 +335,0 @@ ...field == null ? void 0 : field.getRequiredIndicatorProps(props, ref),

package.json

 {
   "name": "@uspk-ui/form-control",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React component to provide validation states to form fields.",
@@ -12,10 +12,6 @@ "keywords": [
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
-  "preconstruct": {},
+  "sideEffects": false,
   "publishConfig": {
@@ -33,15 +29,19 @@ "access": "public"
   "dependencies": {
-    "@uspk-ui/react-use-boolean": "1.1.0",
-    "@uspk-ui/icons": "2.0.0",
-    "@uspk-ui/react-utils": "2.0.0"
+    "@uspk-ui/icon": "1.0.0",
+    "@uspk-ui/react-context": "2.0.4",
+    "@uspk-ui/react-types": "1.0.0",
+    "@uspk-ui/react-use-merge-refs": "1.1.0"
   },
   "devDependencies": {
+    "@uspk-ui/shared-utils": "1.0.0",
+    "@uspk-ui/system": "1.0.0",
     "react": "^18.0.0",
-    "styled-system": "^5.1.5",
     "clean-package": "2.1.1"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "styled-system": ">=5.0.0"
+    "@uspk-ui/system": ">=2.0.0",
+    "react": ">=18"
   },
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "exports": {
@@ -48,0 +48,0 @@ ".": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

32756

decreased by-70.25%

Dependency count

6

increased by20%

Dev dependency count

4

increased by33.33%

Number of package files

5

decreased by-50%

Lines of code

877

decreased by-72.6%

Dependency changes

• + Added@uspk-ui/icon@1.0.0

• + Added@uspk-ui/react-context@2.0.4

• + Added@uspk-ui/react-types@1.0.0

• + Added@uspk-ui/react-use-merge-refs@1.1.0

• + Added@uspk-ui/icon@1.0.0(transitive)

• + Added@uspk-ui/react-context@2.0.4(transitive)

• + Added@uspk-ui/react-types@1.0.0(transitive)

• + Added@uspk-ui/react-use-merge-refs@1.1.0(transitive)

• + Added@uspk-ui/shared-utils@1.0.0(transitive)

• - Removed@uspk-ui/icons@2.0.0

• - Removed@uspk-ui/react-use-boolean@1.1.0

• - Removed@uspk-ui/react-utils@2.0.0

• - Removed@styled-system/background@5.1.2(transitive)

• - Removed@styled-system/border@5.1.5(transitive)

• - Removed@styled-system/color@5.1.2(transitive)

• - Removed@styled-system/core@5.1.2(transitive)

• - Removed@styled-system/css@5.1.5(transitive)

• - Removed@styled-system/flexbox@5.1.2(transitive)

• - Removed@styled-system/grid@5.1.2(transitive)

• - Removed@styled-system/layout@5.1.2(transitive)

• - Removed@styled-system/position@5.1.2(transitive)

• - Removed@styled-system/shadow@5.1.2(transitive)

• - Removed@styled-system/space@5.1.2(transitive)

• - Removed@styled-system/typography@5.1.2(transitive)

• - Removed@styled-system/variant@5.1.5(transitive)

• - Removed@uspk-ui/color-mode@2.0.0(transitive)

• - Removed@uspk-ui/icons@2.0.0(transitive)

• - Removed@uspk-ui/react-env@2.0.0(transitive)

• - Removed@uspk-ui/react-use-boolean@1.1.0(transitive)

• - Removed@uspk-ui/react-utils@2.0.0(transitive)

• - Removedcss-box-model@1.2.1(transitive)

• - Removedframesync@5.3.0(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact-fast-compare@3.2.0(transitive)

• - Removedstyled-system@5.1.5(transitive)

• - Removedtiny-invariant@1.3.3(transitive)

• - Removedtslib@2.8.1(transitive)