Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spark-ui/input

Package Overview
Dependencies
Maintainers
7
Versions
185
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spark-ui/input - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

6

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log

# [0.2.0](https://github.com/adevinta/spark/compare/@spark-ui/input@0.1.3...@spark-ui/input@0.2.0) (2023-06-09)
### Features
- **input:** export a needed hook ([2a2d799](https://github.com/adevinta/spark/commit/2a2d799df350c92dfcb97f61d72babb4f063d763))
## [0.1.3](https://github.com/adevinta/spark/compare/@spark-ui/input@0.1.2...@spark-ui/input@0.1.3) (2023-06-08)

@@ -8,0 +14,0 @@

1

dist/index.d.ts

@@ -7,2 +7,3 @@ import { FC } from 'react';

import { InputRightElementProps } from './InputRightElement';
export { useInputGroup } from './InputGroupContext';
export * from './Input';

@@ -9,0 +10,0 @@ export { type InputGroupProps } from './InputGroup';

2

dist/index.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=require("class-variance-authority"),_=require("@spark-ui/form-field"),C=o.cva(["relative","inline-flex","rounded-lg","outline-primary"],{variants:{intent:{neutral:["ring-outline-high"],success:["ring-success"],alert:["ring-alert"],error:["ring-error"]},isFocused:{true:["ring-1"],false:[]}}}),D=e.createContext(null),y=()=>e.useContext(D),w=e.forwardRef(({className:t,children:i,intent:s="neutral",isDisabled:r,...u},c)=>{const[l,R]=e.useState(!1),[V,f]=e.useState(!1),n=e.Children.toArray(i).filter(e.isValidElement),a=m=>m?m.type.displayName:"",b=m=>n.find(A=>m.includes(a(A)||"")),I=b(["Input"]),p=b(["InputGroup.LeftAddon","InputGroup.LeftElement"]),g=b(["InputGroup.RightAddon","InputGroup.RightElement"]),v=a(p)==="InputGroup.LeftAddon",L=a(g)==="InputGroup.RightAddon",h=a(p)==="InputGroup.LeftElement",N=a(g)==="InputGroup.RightElement",x=e.useMemo(()=>({intent:s,isDisabled:!!r,isHovered:V,isFocused:l,isLeftElementVisible:h,isRightElementVisible:N,isLeftAddonVisible:v,isRightAddonVisible:L,onFocus:()=>{R(!0)},onBlur:()=>{f(!1),R(!1)},onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)}}),[s,r,V,l,h,N,v,L]);return e.createElement(D.Provider,{value:x},e.createElement("div",{ref:c,className:C({className:t,intent:s,isFocused:l}),...u},p,I,g))});w.displayName="InputGroup";const j=o.cva(["border-sm","flex","items-center","rounded-lg","text-body-1"],{variants:{intent:{neutral:["border-outline"],success:["border-success"],alert:["border-alert"],error:["border-error"]},isDisabled:{true:["bg-on-surface/dim-5","text-on-surface/dim-3","cursor-not-allowed"],false:["bg-surface","text-on-surface"]},isFocused:{true:[],false:[]},isHovered:{true:[],false:[]}},compoundVariants:[{intent:"neutral",isHovered:!0,isDisabled:!1,class:"border-outline-high"},{intent:"neutral",isFocused:!0,isDisabled:!1,class:"border-outline-high"}]}),F=e.forwardRef(({className:t,...i},s)=>{const{intent:r,isDisabled:u,isHovered:c,isFocused:l}=y()||{};return e.createElement("div",{ref:s,className:j({className:t,intent:r,isDisabled:u,isHovered:c,isFocused:l}),...i})});F.displayName="InputAddon";const M=e.forwardRef(({className:t,...i},s)=>e.createElement(F,{ref:s,className:o.cx(t,"pl-lg border-r-none rounded-r-none"),...i}));M.displayName="InputLeftAddon";const O=o.cva(["text-neutral pointer-events-none absolute top-1/2 -translate-y-1/2"],{variants:{isFocused:{true:["text-outline-high"],false:[]}}}),G=e.forwardRef(({className:t,...i},s)=>{const{isFocused:r}=y()||{};return e.createElement("div",{ref:s,className:O({className:t,isFocused:!!r}),...i})});G.displayName="InputElement";const H=e.forwardRef(({className:t,...i},s)=>e.createElement(G,{ref:s,className:o.cx(t,"left-lg"),...i}));H.displayName="InputLeftElement";const q=e.forwardRef(({className:t,...i},s)=>e.createElement(F,{ref:s,className:o.cx(t,"pr-lg border-l-none rounded-l-none"),...i}));q.displayName="InputRightAddon";const B=e.forwardRef(({className:t,...i},s)=>e.createElement(G,{ref:s,className:o.cx(t,"right-lg"),...i}));B.displayName="InputRightElement";const P=o.cva(["h-sz-44","border-sm","outline-none","text-ellipsis","text-body-1","cursor-auto","caret-neutral","appearance-none","autofill:shadow-surface","autofill:shadow-[inset_0_0_0px_1000px]"],{variants:{intent:{neutral:["focus:border-outline-high","ring-outline-high"],success:["border-success","ring-success"],alert:["border-alert","ring-alert"],error:["border-error","ring-error"]},isHovered:{true:[],false:[]},isDisabled:{true:["bg-on-surface/dim-5","text-on-surface/dim-3","cursor-not-allowed"],false:["bg-surface","text-on-surface"]},isLeftElementVisible:{true:[],false:[]},isRightElementVisible:{true:[],false:[]},isLeftAddonVisible:{true:["border-l-none","rounded-l-none"],false:["rounded-l-lg"]},isRightAddonVisible:{true:["border-r-none","rounded-r-none"],false:["rounded-r-lg"]}},compoundVariants:[{intent:"neutral",isDisabled:!0,class:"border-outline"},{isLeftElementVisible:!1,isLeftAddonVisible:!1,class:"pl-lg"},{isLeftElementVisible:!1,isLeftAddonVisible:!0,class:"pl-md"},{isLeftElementVisible:!0,isLeftAddonVisible:!1,class:"pl-3xl"},{isRightElementVisible:!1,isRightAddonVisible:!1,class:"pr-lg"},{isRightElementVisible:!1,isRightAddonVisible:!0,class:"pr-md"},{isRightElementVisible:!0,isRightAddonVisible:!1,class:"pr-3xl"},{intent:"neutral",isHovered:!1,class:"border-outline"},{intent:"neutral",isDisabled:!1,isHovered:!0,class:"border-outline-high"},{intent:"neutral",isDisabled:!1,isLeftAddonVisible:!1,isRightAddonVisible:!1,class:"hover:border-outline-high"},{isLeftAddonVisible:!1,isRightAddonVisible:!1,class:"focus:ring-1"}]}),S=e.forwardRef(({className:t,intent:i,disabled:s,onFocus:r,onBlur:u,onMouseEnter:c,onMouseLeave:l,...R},V)=>{const f=_.useFormFieldState(),n=y()||{},{isHovered:a,isLeftAddonVisible:b,isRightAddonVisible:I,isLeftElementVisible:p,isRightElementVisible:g}=n,{id:v,name:L,isInvalid:h,isRequired:N,description:x}=f,m=h?"error":i||n.intent||"neutral",A=s??n.isDisabled;return e.createElement("input",{ref:V,id:v,name:L,className:P({className:t,intent:m,isHovered:!!a,isDisabled:!!A,isLeftAddonVisible:!!b,isRightAddonVisible:!!I,isLeftElementVisible:!!p,isRightElementVisible:!!g}),disabled:A,required:N,"aria-describedby":x,"aria-invalid":h,onFocus:d=>{r&&r(d),n.onFocus&&n.onFocus()},onBlur:d=>{u&&u(d),n.onBlur&&n.onBlur()},onMouseEnter:d=>{c&&c(d),n.onMouseEnter&&n.onMouseEnter()},onMouseLeave:d=>{l&&l(d),n.onMouseLeave&&n.onMouseLeave()},...R})});S.displayName="Input";const E=Object.assign(w,{LeftAddon:M,RightAddon:q,LeftElement:H,RightElement:B});E.LeftAddon.displayName="InputGroup.LeftAddon",E.RightAddon.displayName="InputGroup.RightAddon",E.LeftElement.displayName="InputGroup.LeftElement",E.RightElement.displayName="InputGroup.RightElement",exports.Input=S,exports.InputGroup=E;
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=require("class-variance-authority"),_=require("@spark-ui/form-field"),C=o.cva(["relative","inline-flex","rounded-lg","outline-primary"],{variants:{intent:{neutral:["ring-outline-high"],success:["ring-success"],alert:["ring-alert"],error:["ring-error"]},isFocused:{true:["ring-1"],false:[]}}}),D=e.createContext(null),I=()=>e.useContext(D),w=e.forwardRef(({className:t,children:i,intent:s="neutral",isDisabled:r,...u},c)=>{const[l,R]=e.useState(!1),[V,f]=e.useState(!1),n=e.Children.toArray(i).filter(e.isValidElement),a=m=>m?m.type.displayName:"",b=m=>n.find(A=>m.includes(a(A)||"")),x=b(["Input"]),p=b(["InputGroup.LeftAddon","InputGroup.LeftElement"]),g=b(["InputGroup.RightAddon","InputGroup.RightElement"]),v=a(p)==="InputGroup.LeftAddon",L=a(g)==="InputGroup.RightAddon",h=a(p)==="InputGroup.LeftElement",N=a(g)==="InputGroup.RightElement",y=e.useMemo(()=>({intent:s,isDisabled:!!r,isHovered:V,isFocused:l,isLeftElementVisible:h,isRightElementVisible:N,isLeftAddonVisible:v,isRightAddonVisible:L,onFocus:()=>{R(!0)},onBlur:()=>{f(!1),R(!1)},onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)}}),[s,r,V,l,h,N,v,L]);return e.createElement(D.Provider,{value:y},e.createElement("div",{ref:c,className:C({className:t,intent:s,isFocused:l}),...u},p,x,g))});w.displayName="InputGroup";const j=o.cva(["border-sm","flex","items-center","rounded-lg","text-body-1"],{variants:{intent:{neutral:["border-outline"],success:["border-success"],alert:["border-alert"],error:["border-error"]},isDisabled:{true:["bg-on-surface/dim-5","text-on-surface/dim-3","cursor-not-allowed"],false:["bg-surface","text-on-surface"]},isFocused:{true:[],false:[]},isHovered:{true:[],false:[]}},compoundVariants:[{intent:"neutral",isHovered:!0,isDisabled:!1,class:"border-outline-high"},{intent:"neutral",isFocused:!0,isDisabled:!1,class:"border-outline-high"}]}),F=e.forwardRef(({className:t,...i},s)=>{const{intent:r,isDisabled:u,isHovered:c,isFocused:l}=I()||{};return e.createElement("div",{ref:s,className:j({className:t,intent:r,isDisabled:u,isHovered:c,isFocused:l}),...i})});F.displayName="InputAddon";const M=e.forwardRef(({className:t,...i},s)=>e.createElement(F,{ref:s,className:o.cx(t,"pl-lg border-r-none rounded-r-none"),...i}));M.displayName="InputLeftAddon";const O=o.cva(["text-neutral pointer-events-none absolute top-1/2 -translate-y-1/2"],{variants:{isFocused:{true:["text-outline-high"],false:[]}}}),G=e.forwardRef(({className:t,...i},s)=>{const{isFocused:r}=I()||{};return e.createElement("div",{ref:s,className:O({className:t,isFocused:!!r}),...i})});G.displayName="InputElement";const H=e.forwardRef(({className:t,...i},s)=>e.createElement(G,{ref:s,className:o.cx(t,"left-lg"),...i}));H.displayName="InputLeftElement";const q=e.forwardRef(({className:t,...i},s)=>e.createElement(F,{ref:s,className:o.cx(t,"pr-lg border-l-none rounded-l-none"),...i}));q.displayName="InputRightAddon";const B=e.forwardRef(({className:t,...i},s)=>e.createElement(G,{ref:s,className:o.cx(t,"right-lg"),...i}));B.displayName="InputRightElement";const P=o.cva(["h-sz-44","border-sm","outline-none","text-ellipsis","text-body-1","cursor-auto","caret-neutral","appearance-none","autofill:shadow-surface","autofill:shadow-[inset_0_0_0px_1000px]"],{variants:{intent:{neutral:["focus:border-outline-high","ring-outline-high"],success:["border-success","ring-success"],alert:["border-alert","ring-alert"],error:["border-error","ring-error"]},isHovered:{true:[],false:[]},isDisabled:{true:["bg-on-surface/dim-5","text-on-surface/dim-3","cursor-not-allowed"],false:["bg-surface","text-on-surface"]},isLeftElementVisible:{true:[],false:[]},isRightElementVisible:{true:[],false:[]},isLeftAddonVisible:{true:["border-l-none","rounded-l-none"],false:["rounded-l-lg"]},isRightAddonVisible:{true:["border-r-none","rounded-r-none"],false:["rounded-r-lg"]}},compoundVariants:[{intent:"neutral",isDisabled:!0,class:"border-outline"},{isLeftElementVisible:!1,isLeftAddonVisible:!1,class:"pl-lg"},{isLeftElementVisible:!1,isLeftAddonVisible:!0,class:"pl-md"},{isLeftElementVisible:!0,isLeftAddonVisible:!1,class:"pl-3xl"},{isRightElementVisible:!1,isRightAddonVisible:!1,class:"pr-lg"},{isRightElementVisible:!1,isRightAddonVisible:!0,class:"pr-md"},{isRightElementVisible:!0,isRightAddonVisible:!1,class:"pr-3xl"},{intent:"neutral",isHovered:!1,class:"border-outline"},{intent:"neutral",isDisabled:!1,isHovered:!0,class:"border-outline-high"},{intent:"neutral",isDisabled:!1,isLeftAddonVisible:!1,isRightAddonVisible:!1,class:"hover:border-outline-high"},{isLeftAddonVisible:!1,isRightAddonVisible:!1,class:"focus:ring-1"}]}),S=e.forwardRef(({className:t,intent:i,disabled:s,onFocus:r,onBlur:u,onMouseEnter:c,onMouseLeave:l,...R},V)=>{const f=_.useFormFieldState(),n=I()||{},{isHovered:a,isLeftAddonVisible:b,isRightAddonVisible:x,isLeftElementVisible:p,isRightElementVisible:g}=n,{id:v,name:L,isInvalid:h,isRequired:N,description:y}=f,m=h?"error":i||n.intent||"neutral",A=s??n.isDisabled;return e.createElement("input",{ref:V,id:v,name:L,className:P({className:t,intent:m,isHovered:!!a,isDisabled:!!A,isLeftAddonVisible:!!b,isRightAddonVisible:!!x,isLeftElementVisible:!!p,isRightElementVisible:!!g}),disabled:A,required:N,"aria-describedby":y,"aria-invalid":h,onFocus:d=>{r&&r(d),n.onFocus&&n.onFocus()},onBlur:d=>{u&&u(d),n.onBlur&&n.onBlur()},onMouseEnter:d=>{c&&c(d),n.onMouseEnter&&n.onMouseEnter()},onMouseLeave:d=>{l&&l(d),n.onMouseLeave&&n.onMouseLeave()},...R})});S.displayName="Input";const E=Object.assign(w,{LeftAddon:M,RightAddon:q,LeftElement:H,RightElement:B});E.LeftAddon.displayName="InputGroup.LeftAddon",E.RightAddon.displayName="InputGroup.RightAddon",E.LeftElement.displayName="InputGroup.LeftElement",E.RightElement.displayName="InputGroup.RightElement",exports.Input=S,exports.InputGroup=E,exports.useInputGroup=I;
{
"name": "@spark-ui/input",
"version": "0.1.3",
"version": "0.2.0",
"description": "Component used to get user input in a text field",

@@ -33,3 +33,3 @@ "publishConfig": {

"license": "MIT",
"gitHead": "41085d490de00dc6f4f98499e70cd23728b10ab9"
"gitHead": "8e5813fbaa7ffda3fe2b64e2ca1ff9d3908fdd8f"
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc