@spark-ui/form-field - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [0.3.0](https://github.com/adevinta/spark/compare/@spark-ui/form-field@0.2.3...@spark-ui/form-field@0.3.0) (2023-06-16)
+
+### Features
+
+- **form-field:** use spark label instead of the radix one ([e014ed3](https://github.com/adevinta/spark/commit/e014ed3601f204c6ce2b5702f38cbb8e47e9beeb))
+
 ## [0.2.3](https://github.com/adevinta/spark/compare/@spark-ui/form-field@0.2.2...@spark-ui/form-field@0.2.3) (2023-06-15)
@@ -8,0 +14,0 @@

dist/FormFieldLabel.d.ts

@@ -1,2 +0,2 @@
-import { LabelProps } from '@radix-ui/react-label';
+import { LabelProps } from '@spark-ui/label';
 import { ReactNode } from 'react';
@@ -3,0 +3,0 @@ export interface FormFieldLabelProps extends LabelProps {

dist/FormFieldRequiredIndicator.d.ts

@@ -1,3 +0,3 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type FormFieldRequiredIndicatorProps = ComponentPropsWithoutRef<'span'>;
+import { LabelRequiredIndicatorProps } from '@spark-ui/label';
+export type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps;
 export declare const FormFieldRequiredIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),F=require("@radix-ui/react-id"),b=require("@spark-ui/slot"),c=require("class-variance-authority"),S=require("@radix-ui/react-label"),I=e.createContext(null),v=()=>{const r=e.useContext(I);if(!r)throw Error("useFormField must be used within a FormField provider");return r},g=({id:r,name:a,isInvalid:s,isRequired:i,children:t})=>{const l=F.useId(),[n,d]=e.useState([]),o=n.length>0?n.join(" "):void 0,m=e.useCallback(p=>{d(f=>[...f,p])},[]),u=e.useCallback(p=>{d(f=>f.filter(C=>C!==p))},[]),w=e.useMemo(()=>({id:r,labelId:l,name:a,isInvalid:s,isRequired:i,description:o,onMessageIdAdd:m,onMessageIdRemove:u}),[r,l,a,o,s,i,m,u]);return e.createElement(I.Provider,{value:w},t)};g.displayName="FormFieldProvider";const q=e.forwardRef(({className:r,name:a,isInvalid:s=!1,isRequired:i=!1,asChild:t=!1,...l},n)=>{const d=F.useId(),o=t?b.Slot:"div";return e.createElement(g,{id:d,name:a,isRequired:i,isInvalid:s},e.createElement(o,{ref:n,"data-spark-component":"form-control",className:c.cx(r,"flex flex-col gap-xl"),...l}))});q.displayName="FormField";const N=e.forwardRef(({id:r,className:a,...s},i)=>{const{onMessageIdAdd:t,onMessageIdRemove:l}=v(),n=F.useId(),d=r||n;return e.useEffect(()=>(t(d),()=>{l(d)}),[d,t,l]),e.createElement("span",{ref:i,id:d,className:c.cx(a,"text-caption"),...s})});N.displayName="FormField.Message";const x=e.forwardRef(({className:r,...a},s)=>{const{isInvalid:i}=v();return i?e.createElement(N,{ref:s,"data-spark-component":"form-error-message","aria-live":"polite",className:c.cx(r,"text-error"),...a}):null});x.displayName="FormField.ErrorMessage";const E=e.forwardRef(({className:r,...a},s)=>e.createElement(N,{ref:s,"data-spark-component":"form-helper-message",className:c.cx(r,"text-neutral"),...a}));E.displayName="FormField.HelperMessage";const R=e.forwardRef(({className:r,children:a="*",...s},i)=>e.createElement("span",{ref:i,"data-spark-component":"form-required-indicator",role:"presentation","aria-hidden":"true",className:c.cx(r,"text-error"),...s},a));R.displayName="FormField.RequiredIndicator";const h=e.forwardRef(({htmlFor:r,className:a,children:s,requiredIndicator:i=e.createElement(R,null),asChild:t,...l},n)=>{const d=v(),{labelId:o,isRequired:m}=d,u=t?void 0:r||d.id;return e.createElement(S.Label,{ref:n,id:o,"data-spark-component":"form-label",htmlFor:u,className:c.cx(a,"flex items-center gap-sm text-body-1"),asChild:t,...l},e.createElement(b.Slottable,null,s),m&&i)});h.displayName="FormField.Label";const y=()=>{const{id:r,name:a,description:s,labelId:i,isRequired:t,isInvalid:l}=e.useContext(I)||{};return{id:r,name:a,description:s,labelId:i,isRequired:t,isInvalid:l}},M=({children:r})=>{const{id:a,name:s,isInvalid:i,labelId:t,isRequired:l,description:n}=y();return e.createElement(e.Fragment,null,r({id:a,labelId:t,name:s,isRequired:l,isInvalid:i,description:n}))};M.displayName="FormField.State";const k=Object.assign(q,{Label:h,State:M,ErrorMessage:x,HelperMessage:E,RequiredIndicator:R});exports.FormField=k,exports.useFormFieldState=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),F=require("@radix-ui/react-id"),b=require("@spark-ui/slot"),m=require("class-variance-authority"),q=require("@spark-ui/label"),I=e.createContext(null),v=()=>{const r=e.useContext(I);if(!r)throw Error("useFormField must be used within a FormField provider");return r},N=({id:r,name:a,isInvalid:i,isRequired:s,children:l})=>{const d=F.useId(),[n,t]=e.useState([]),o=n.length>0?n.join(" "):void 0,c=e.useCallback(f=>{t(p=>[...p,f])},[]),u=e.useCallback(f=>{t(p=>p.filter(S=>S!==f))},[]),C=e.useMemo(()=>({id:r,labelId:d,name:a,isInvalid:i,isRequired:s,description:o,onMessageIdAdd:c,onMessageIdRemove:u}),[r,d,a,o,i,s,c,u]);return e.createElement(I.Provider,{value:C},l)};N.displayName="FormFieldProvider";const x=e.forwardRef(({className:r,name:a,isInvalid:i=!1,isRequired:s=!1,asChild:l=!1,...d},n)=>{const t=F.useId(),o=l?b.Slot:"div";return e.createElement(N,{id:t,name:a,isRequired:s,isInvalid:i},e.createElement(o,{ref:n,"data-spark-component":"form-field",className:m.cx(r,"flex flex-col gap-xl"),...d}))});x.displayName="FormField";const R=e.forwardRef(({id:r,className:a,...i},s)=>{const{onMessageIdAdd:l,onMessageIdRemove:d}=v(),n=F.useId(),t=r||n;return e.useEffect(()=>(l(t),()=>{d(t)}),[t,l,d]),e.createElement("span",{ref:s,id:t,"data-spark-component":"form-field-message",className:m.cx(a,"text-caption"),...i})});R.displayName="FormField.Message";const E=e.forwardRef(({className:r,...a},i)=>{const{isInvalid:s}=v();return s?e.createElement(R,{ref:i,"data-spark-component":"form-field-error-message","aria-live":"polite",className:m.cx(r,"text-error"),...a}):null});E.displayName="FormField.ErrorMessage";const h=e.forwardRef(({className:r,...a},i)=>e.createElement(R,{ref:i,"data-spark-component":"form-field-helper-message",className:m.cx(r,"text-neutral"),...a}));h.displayName="FormField.HelperMessage";const g=e.forwardRef((r,a)=>e.createElement(q.Label.RequiredIndicator,{ref:a,...r}));g.displayName="FormField.RequiredIndicator";const M=e.forwardRef(({htmlFor:r,className:a,children:i,requiredIndicator:s=e.createElement(g,null),asChild:l,...d},n)=>{const t=v(),{labelId:o,isRequired:c}=t,u=l?void 0:r||t.id;return e.createElement(q.Label,{ref:n,id:o,"data-spark-component":"form-field-label",htmlFor:u,className:m.cx(a,"flex items-center gap-sm"),asChild:l,...d},e.createElement(b.Slottable,null,i),c&&s)});M.displayName="FormField.Label";const y=()=>{const{id:r,name:a,description:i,labelId:s,isRequired:l,isInvalid:d}=e.useContext(I)||{};return{id:r,name:a,description:i,labelId:s,isRequired:l,isInvalid:d}},w=({children:r})=>{const{id:a,name:i,isInvalid:s,labelId:l,isRequired:d,description:n}=y();return e.createElement(e.Fragment,null,r({id:a,labelId:l,name:i,isRequired:d,isInvalid:s,description:n}))};w.displayName="FormField.State";const k=Object.assign(x,{Label:M,State:w,ErrorMessage:E,HelperMessage:h,RequiredIndicator:g});exports.FormField=k,exports.useFormFieldState=y;

package.json

 {
   "name": "@spark-ui/form-field",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Provide context to your form elements",
@@ -31,6 +31,6 @@ "publishConfig": {
     "@radix-ui/react-id": "1.0.0",
-    "@radix-ui/react-label": "2.0.1",
-    "@spark-ui/slot": "^1.6.0"
+    "@spark-ui/label": "^1.3.0",
+    "@spark-ui/slot": "^1.5.2"
   },
-  "gitHead": "cf57bd12f1267bbe7131c630e861cd691b150b2a"
+  "gitHead": "0bc9089b9b9be19ffd3845c0d78382220905c3c5"
 }

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

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

Improved metrics

Total package byte prevSize

17148

increased by0.48%

Dependency changes

• + Added@spark-ui/label@^1.3.0

• + Added@radix-ui/react-label@2.0.2(transitive)

• + Added@radix-ui/react-primitive@1.0.3(transitive)

• + Added@spark-ui/label@1.7.2(transitive)

• + Added@spark-ui/theme-utils@4.1.1(transitive)

• + Addedclass-variance-authority@0.7.0(transitive)

• + Addedclsx@2.0.0(transitive)

• + Addeddeepmerge@4.3.1(transitive)

• + Addedtype-fest@3.13.1(transitive)

• - Removed@radix-ui/react-label@2.0.1

• - Removed@radix-ui/react-compose-refs@1.0.0(transitive)

• - Removed@radix-ui/react-label@2.0.1(transitive)

• - Removed@radix-ui/react-primitive@1.0.2(transitive)

• - Removed@radix-ui/react-slot@1.0.1(transitive)

• Updated@spark-ui/slot@^1.5.2