plume-ui-react 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/chunk-3JUN2GK7.mjs +1 -0
- package/dist/chunk-SMKRX752.mjs +1 -0
- package/dist/components/form/input/input-reveal.mjs +1 -0
- package/dist/components/form/input/input.mjs +2 -2
- package/dist/components/form/numberinput/index.mjs +1 -0
- package/dist/components/form/numberinput/number-format.mjs +1 -0
- package/dist/components/form/numberinput/numberinput-stepper.mjs +1 -0
- package/dist/components/form/numberinput/numberinput.mjs +1 -0
- package/dist/components/form/numberinput/use-hold-repeat.mjs +1 -0
- package/dist/components/form/numberinput/use-number-input.mjs +1 -0
- package/dist/components/form/pininput/index.mjs +1 -0
- package/dist/components/form/pininput/pin-utils.mjs +1 -0
- package/dist/components/form/pininput/pininput.mjs +1 -0
- package/dist/components/form/pininput/use-pin-input.mjs +1 -0
- package/dist/components/form/rating/index.mjs +1 -0
- package/dist/components/form/rating/rating-icons.mjs +1 -0
- package/dist/components/form/rating/rating-item.mjs +1 -0
- package/dist/components/form/rating/rating.mjs +1 -0
- package/dist/components/form/rating/use-rating.mjs +1 -0
- package/dist/index.d.mts +85 -2
- package/dist/index.d.ts +85 -2
- package/dist/index.js +6 -6
- package/dist/index.mjs +1 -1
- package/dist/overlay/icons.mjs +1 -1
- package/dist/overlay/use-controllable-state.mjs +1 -0
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ export function App() {
|
|
|
38
38
|
|
|
39
39
|
## Components
|
|
40
40
|
|
|
41
|
-
`Accordion` (with `AccordionContent`, `AccordionItem` and `AccordionTrigger`), `Badge`, `Button`, `Card` (with `CardHeader`, `CardBody` and `CardFooter`), `Checkbox`, `Chip`, `DatePicker`, `Dropdown` (with `DropdownItem`, `DropdownLabel`, `DropdownMenu`, `DropdownSeparator` and `DropdownTrigger`), `Field`, `Icon`, `Input`, `List` (with `ListDivider`, `ListItem`, `ListItemButton`, `ListItemIcon`, `ListItemText` and `ListSubheader`), `Modal` (with `ModalBody`, `ModalClose`, `ModalContent`, `ModalFooter`, `ModalHeader` and `ModalTrigger`), `Popover` (with `PopoverClose`, `PopoverContent` and `PopoverTrigger`), `ProgressBar`, `Radio`, `RadioGroup`, `Select` (with `SelectContent`, `SelectGroup`, `SelectOption`, `SelectTrigger` and `SelectValue`), `Skeleton`, `Spinner`, `Tabs` (with `TabList`, `Tab`, `TabPanels` and `TabPanel`), `Textarea`, `ToastProvider` (with the `useToast` hook), `Toggle` and `Tooltip`.
|
|
41
|
+
`Accordion` (with `AccordionContent`, `AccordionItem` and `AccordionTrigger`), `Badge`, `Button`, `Card` (with `CardHeader`, `CardBody` and `CardFooter`), `Checkbox`, `Chip`, `DatePicker`, `Dropdown` (with `DropdownItem`, `DropdownLabel`, `DropdownMenu`, `DropdownSeparator` and `DropdownTrigger`), `Field`, `Icon`, `Input`, `List` (with `ListDivider`, `ListItem`, `ListItemButton`, `ListItemIcon`, `ListItemText` and `ListSubheader`), `Modal` (with `ModalBody`, `ModalClose`, `ModalContent`, `ModalFooter`, `ModalHeader` and `ModalTrigger`), `NumberInput`, `PinInput`, `Popover` (with `PopoverClose`, `PopoverContent` and `PopoverTrigger`), `ProgressBar`, `Radio`, `RadioGroup`, `Rating`, `Select` (with `SelectContent`, `SelectGroup`, `SelectOption`, `SelectTrigger` and `SelectValue`), `Skeleton`, `Spinner`, `Tabs` (with `TabList`, `Tab`, `TabPanels` and `TabPanel`), `Textarea`, `ToastProvider` (with the `useToast` hook), `Toggle` and `Tooltip`.
|
|
42
42
|
|
|
43
43
|
The [documentation site](https://darioegb.github.io/plume-ui-react/) has a live playground, props and examples for each one, plus the color palette, design tokens and framework integration guides.
|
|
44
44
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _={"input-padding":"var(--plume-space-4)","input-border-radius":"var(--plume-radius-4)","input-color":"var(--plume-foreground)","input-border-color":"var(--plume-border-strong)","input-background-color":"var(--plume-surface-muted)",base:"_base_1gj16_9",input:"_input_1gj16_16",sm:"_sm_1gj16_32",md:"_md_1gj16_38",lg:"_lg_1gj16_43",rounded:"_rounded_1gj16_49",outline:"_outline_1gj16_53 _input_1gj16_16",pill:"_pill_1gj16_53",filled:"_filled_1gj16_62 _input_1gj16_16",underline:"_underline_1gj16_70 _input_1gj16_16",invalid:"_invalid_1gj16_80",inputGroup:"_inputGroup_1gj16_89",disabled:"_disabled_1gj16_101",control:"_control_1gj16_116",addOn:"_addOn_1gj16_128",element:"_element_1gj16_129",addOnBefore:"_addOnBefore_1gj16_156",addOnAfter:"_addOnAfter_1gj16_161",elementBefore:"_elementBefore_1gj16_212",elementAfter:"_elementAfter_1gj16_216",revealButton:"_revealButton_1gj16_259",beforeReveal:"_beforeReveal_1gj16_279"};export{_ as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _={rating:"_rating_moha0_53",sm:"_sm_moha0_59",md:"_md_moha0_63",lg:"_lg_moha0_67",empty:"_empty_moha0_71",filled:"_filled_moha0_76",interactive:"_interactive_moha0_84",item:"_item_moha0_88",disabled:"_disabled_moha0_94"};export{_ as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{a as t}from"../../../chunk-3JUN2GK7.mjs";import{useState as p}from"react";import{joinClasses as i}from"../../../overlay/class-names.mjs";import{EyeIcon as u,EyeOffIcon as b}from"../../../overlay/icons.mjs";import{jsx as r}from"react/jsx-runtime";function v({className:o,disabled:a,isStyled:e,label:s,onToggle:n,visible:l}){return r("span",{className:e?`${t.element} ${t.elementAfter}`:void 0,children:r("button",{"aria-label":s,"aria-pressed":l,className:i(e&&t.revealButton,o),"data-plume-input-reveal":"",disabled:a,onClick:n,type:"button",children:l?r(b,{}):r(u,{})})})}function R(o,a){let[e,s]=p(!1),n=a&&o==="password";return{canReveal:n,inputType:n&&e?"text":o,revealed:e,toggle:()=>s(l=>!l)}}var y=(o,a)=>{if(!o)return"";let e=`${t.element} ${t.elementAfter}`;return a?`${e} ${t.beforeReveal}`:e};export{v as InputReveal,y as afterElementClass,R as usePasswordReveal};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{forwardRef as
|
|
2
|
-
${
|
|
1
|
+
"use client";import{a as e}from"../../../chunk-3JUN2GK7.mjs";import{forwardRef as k}from"react";import{useMask as A}from"../../../hooks/use-mask.mjs";import{afterElementClass as F,InputReveal as G,usePasswordReveal as q}from"./input-reveal.mjs";import{jsx as s,jsxs as O}from"react/jsx-runtime";var B=(a,l,r,n,u,d,c)=>{let o=l?e.disabled:"",p=r&&n?e.invalid:"",m=n?e[u]:"",f=n?e[d]:"",v=n?e[c]:"";return`${e.base} ${f} ${m} ${v}
|
|
2
|
+
${o} ${p} ${a}`.trim()},D=a=>({"--input-color":`var(--plume-color-${a}-text)`}),J=k(({addonBefore:a,addonAfter:l,elementBefore:r,elementAfter:n,style:u,className:d="",colorScheme:c="secondary",disabled:o=!1,readOnly:p=!1,revealClassName:m,revealLabel:f="Show password",revealable:v=!1,shape:w="rounded",size:L="md",type:x="text",variant:h="outline",mask:C,value:y,defaultValue:g,onChange:M,...i},b)=>{let t=h!=="unstyled",{canReveal:I,inputType:S,revealed:T,toggle:z}=q(x,v),N=i["aria-invalid"]===!0||i["aria-invalid"]==="true",$=B(d,o,N,t,w,L,h),P={...D(N?"error":c),...u},H=a||l||r||n||I,{value:V,onChange:E}=A({mask:C,value:typeof y=="string"?y:void 0,defaultValue:typeof g=="string"?g:void 0,onChange:M}),R={onChange:E,value:C?V:y,defaultValue:C?void 0:g};return H?O("div",{className:t?e.inputGroup:void 0,"data-plume-input-group":"",style:P,children:[a?s("span",{className:t?`${e.addOn} ${e.addOnBefore}`:void 0,children:a}):null,O("div",{className:t?e.control:void 0,"data-plume-input-control":"",children:[r?s("span",{className:t?`${e.element} ${e.elementBefore}`:void 0,children:r}):null,s("input",{className:$,disabled:o,readOnly:p,ref:b,type:S,...R,...i}),n?s("span",{className:F(t,I),children:n}):null,I?s(G,{className:m,disabled:o,isStyled:t,label:f,onToggle:z,visible:T}):null]}),l?s("span",{className:t?`${e.addOn} ${e.addOnAfter}`:void 0,children:l}):null]}):s("input",{className:$,disabled:o,readOnly:p,ref:b,style:P,type:S,...R,...i})});J.displayName="Input";export{J as Input};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{NumberInput as r}from"./numberinput.mjs";export{r as NumberInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var u=e=>{if(!Number.isFinite(e))return 0;let[n,t]=e.toString().split("e"),r=n.split(".")[1]?.length??0;return Math.max(0,r-Number(t??0))},m=(e,n)=>Number(e.toFixed(Math.min(Math.max(n,0),100))),o=(e,n,t)=>Math.min(Math.max(e,n),t),s=e=>{let n=e.trim().replace(",",".");if(n===""||n==="-"||n==="+"||n===".")return null;let t=Number(n);return Number.isFinite(t)?t:null},a=(e,n)=>(n===0?/^[+-]?\d*$/:/^[+-]?\d*(?:[.,]\d*)?$/).test(e),i=(e,n)=>Object.is(e,n);export{o as clamp,u as decimalsOf,s as defaultParse,a as isPartialNumber,m as roundTo,i as sameNumber};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{MinusIcon as l,PlusIcon as s}from"../../../overlay/icons.mjs";import{useHoldRepeat as i}from"./use-hold-repeat.mjs";import{jsx as e}from"react/jsx-runtime";function b({className:o,direction:t,disabled:n,label:r,onStep:p}){let u=i(p,!n);return e("button",{"aria-label":r,className:o,"data-plume-numberinput-stepper":t===1?"increment":"decrement",disabled:n,onMouseDown:a=>a.preventDefault(),tabIndex:-1,type:"button",...u,children:t===1?e(s,{}):e(l,{})})}export{b as NumberInputStepper};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{forwardRef as B,useRef as D}from"react";import{joinClasses as l}from"../../../overlay/class-names.mjs";import{mergeRefs as F}from"../../../overlay/trigger.mjs";import{NumberInputStepper as x}from"./numberinput-stepper.mjs";var t={"numberinput-border-color":"var(--plume-border-strong)","numberinput-background-color":"var(--plume-surface-muted)",control:"_control_82obi_31",sm:"_sm_82obi_43",lg:"_lg_82obi_48",outline:"_outline_82obi_53",filled:"_filled_82obi_57",underline:"_underline_82obi_64",pill:"_pill_82obi_69",disabled:"_disabled_82obi_73",invalid:"_invalid_82obi_88",input:"_input_82obi_97",stepper:"_stepper_82obi_111"};import{useNumberInput as j}from"./use-number-input.mjs";import{jsx as o,jsxs as q}from"react/jsx-runtime";var k=(i,u,a,p,m,r)=>{let n=r!=="unstyled";return l(n&&t.control,n&&t[r],n&&t[m],n&&t[p],n&&a&&t.invalid,n&&u&&t.disabled,i)},K=B(({className:i,classNames:u,colorScheme:a="secondary",decrementLabel:p="Decrease",defaultValue:m,disabled:r=!1,format:n,incrementLabel:P="Increase",largeStep:C,max:f,min:_,name:v,onBlur:R,onValueChange:L,parse:T,precision:I,readOnly:y=!1,shape:w="rounded",size:M="md",step:H=1,steppers:s=!0,style:O,value:V,variant:N="outline",...d},E)=>{let S=D(null),e=j({defaultValue:m,format:n,largeStep:C,max:f,min:_,onValueChange:L,parse:T,precision:I,readOnly:y,step:H,value:V}),b=N!=="unstyled",z=d["aria-invalid"]===!0||d["aria-invalid"]==="true",g=s&&!r,A={"--numberinput-color":`var(--plume-color-${a}-text)`,...O},h=()=>S.current?.focus();return q("div",{className:k(i,r,z,w,M,N),"data-plume-numberinput-control":"",style:A,children:[s?o(x,{className:l(b&&t.stepper,u?.decrement),direction:-1,disabled:!g||!e.canDecrement,label:p,onStep:()=>{h(),e.stepBy(-1)}}):null,o("input",{"aria-valuemax":f,"aria-valuemin":_,"aria-valuenow":e.value??void 0,"aria-valuetext":e.valueText,autoComplete:"off",className:l(b&&t.input,u?.input),"data-plume-numberinput-input":"",disabled:r,inputMode:I===0?"numeric":"decimal",onBlur:c=>{e.commit(),R?.(c)},onChange:c=>e.onTextChange(c.target.value),onKeyDown:e.onKeyDown,readOnly:y,ref:F(S,E),role:"spinbutton",type:"text",value:e.display,...d}),s?o(x,{className:l(b&&t.stepper,u?.increment),direction:1,disabled:!g||!e.canIncrement,label:P,onStep:()=>{h(),e.stepBy(1)}}):null,v?o("input",{name:v,type:"hidden",value:e.value??""}):null]})});K.displayName="NumberInput";export{K as NumberInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{useCallback as u,useEffect as c,useRef as v}from"react";var l=400,s=60;function m(r,i){let t=v(r);t.current=r;let n=v({}),e=u(()=>{window.clearTimeout(n.current.timeout),window.clearInterval(n.current.interval),window.removeEventListener("pointerup",e)},[]),a=u(()=>{t.current(),window.addEventListener("pointerup",e),n.current.timeout=window.setTimeout(()=>{n.current.interval=window.setInterval(()=>t.current(),s)},l)},[e]);return c(()=>{i||e()},[i,e]),c(()=>e,[e]),{onClick:o=>{o.detail===0&&t.current()},onPointerCancel:e,onPointerDown:o=>{o.button===0&&a()},onPointerLeave:e,onPointerUp:e}}export{m as useHoldRepeat};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{useState as A}from"react";import{useControllableState as F}from"../../../overlay/use-controllable-state.mjs";import{clamp as U,decimalsOf as E,defaultParse as k,isPartialNumber as H,roundTo as M,sameNumber as B}from"./number-format.mjs";function j({defaultValue:y=null,format:s,largeStep:D,max:b=Number.POSITIVE_INFINITY,min:c=Number.NEGATIVE_INFINITY,onValueChange:w,parse:f,precision:u,readOnly:r,step:p=1,value:S}){let[n,i]=F({defaultValue:y,onChange:w,value:S}),[o,m]=A(null),d=f??k,h=e=>s?s(e):u===void 0?String(e):e.toFixed(u),v=(e,t)=>{let a=U(e,c,b);return t===void 0?a:M(a,t)},l=(e,t=!1)=>{if(r)return;let a=t?D??p*10:p,T=n??0,P=u??Math.max(E(a),E(T));m(null),i(v(T+e*a,P))},x=e=>{r||!f&&!H(e,u)||(m(e),i(d(e)))},I=()=>{if(o===null)return;let e=d(o);m(null),i(e===null?null:v(e,u))},g=e=>{r||!Number.isFinite(e)||(m(null),i(e))},V={ArrowDown:()=>l(-1),ArrowUp:()=>l(1),End:()=>g(b),Enter:I,Home:()=>g(c),PageDown:()=>l(-1,!0),PageUp:()=>l(1,!0)},C=e=>{let t=V[e.key];t&&(e.key!=="Enter"&&e.preventDefault(),t())},K=o!==null&&B(d(o),n),N=n===null?"":h(n);return{canDecrement:!r&&(n===null||n>c),canIncrement:!r&&(n===null||n<b),commit:I,display:K?o:N,onKeyDown:C,onTextChange:x,stepBy:l,value:n,valueText:s&&n!==null?N:void 0}}export{j as useNumberInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{PinInput as n}from"./pininput.mjs";export{n as PinInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var g={alphanumeric:/[^a-z0-9]/gi,numeric:/\D/g,text:/\s/g},c=(t,n)=>t.replace(g[n],""),l=(t,n)=>t===""||n.length!==t.length+1?n:n.startsWith(t)?n.slice(t.length):n.slice(0,n.length-t.length),p=(t,n,r,i)=>{let e=Math.min(n,t.length),s=r.length===1?t.slice(e+1):"";return`${t.slice(0,e)}${r}${s}`.slice(0,i)},o=(t,n)=>n<0||n>=t.length?t:`${t.slice(0,n)}${t.slice(n+1)}`;export{l as extractTyped,p as insertAt,o as removeAt,c as sanitize};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{forwardRef as K}from"react";import{joinClasses as g}from"../../../overlay/class-names.mjs";import{useFieldContext as B}from"../field/field-context.mjs";var i={"pininput-border-color":"var(--plume-border-strong)","pininput-background-color":"var(--plume-surface-muted)",pin:"_pin_ygqih_21",cell:"_cell_ygqih_26",sm:"_sm_ygqih_37",lg:"_lg_ygqih_43",outline:"_outline_ygqih_53",filled:"_filled_ygqih_57",underline:"_underline_ygqih_65",pill:"_pill_ygqih_71",invalid:"_invalid_ygqih_84"};import{usePinInput as j}from"./use-pin-input.mjs";import{jsx as P,jsxs as Q}from"react/jsx-runtime";var G=o=>(r,a)=>`${o==="numeric"?"Digit":"Character"} ${r} of ${a}`,J=K(({"aria-describedby":o,"aria-invalid":r,"aria-label":a,"aria-labelledby":_,autoComplete:h="one-time-code",focusOnMount:v=!1,className:I,colorScheme:C="secondary",defaultValue:S,disabled:d=!1,getInputLabel:q,id:m,inputClassName:w,length:u=6,mask:T=!1,name:c,onComplete:F,onValueChange:L,placeholder:M,readOnly:b=!1,required:R=!1,shape:N="rounded",size:k="md",style:A,type:p="numeric",value:H,variant:f="outline",...O},V)=>{let y=B(),n=j({focusOnMount:v,defaultValue:S,length:u,onComplete:F,onValueChange:L,readOnly:b,type:p,value:H}),l=f!=="unstyled",s=r===!0||r==="true",$=y?.controlId===m?y?.labelId:void 0,z=_??(a?void 0:$),D=q??G(p),E={"--pininput-color":`var(--plume-color-${s?"error":C}-text)`,...A},x=g(l&&i.pin,l&&i[f],l&&i[k],l&&i[N],l&&s&&i.invalid,I);return Q("fieldset",{"aria-describedby":o,"aria-label":a,"aria-labelledby":z,className:x,"data-plume-pininput":"",disabled:d,ref:V,style:E,...O,children:[[...new Array(u).keys()].map(e=>P("input",{"aria-invalid":s||void 0,"aria-label":D(e+1,u),"aria-required":R||void 0,autoComplete:h,className:g(l&&i.cell,w),"data-filled":n.value[e]?"":void 0,"data-plume-pininput-cell":"",disabled:d,id:e===0?m:void 0,inputMode:p==="numeric"?"numeric":"text",onChange:t=>n.onChange(e,t.target.value),onFocus:t=>t.target.select(),onKeyDown:t=>n.onKeyDown(e,t),onPaste:t=>n.onPaste(e,t),placeholder:M,readOnly:b,ref:t=>{n.cells.current[e]=t},tabIndex:e===n.tabbable?0:-1,type:T?"password":"text",value:n.value[e]??""},e)),c?P("input",{name:c,type:"hidden",value:n.value}):null]})});J.displayName="PinInput";export{J as PinInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{useEffect as C,useRef as D}from"react";import{useControllableState as M}from"../../../overlay/use-controllable-state.mjs";import{extractTyped as h,insertAt as P,removeAt as l,sanitize as T}from"./pin-utils.mjs";function R({focusOnMount:p=!1,defaultValue:c="",length:o,onComplete:f,onValueChange:b,readOnly:i,type:v,value:d}){let a=D([]),[n,g]=M({defaultValue:c.slice(0,o),onChange:b,value:d});C(()=>{p&&a.current[0]?.focus()},[p]);let s=e=>{let t=Math.min(Math.max(e,0),o-1);a.current[t]?.focus()},u=e=>{e!==n&&(g(e),e.length===o&&f?.(e))},m=(e,t)=>{let r=T(t,v).slice(0,o);r&&(u(P(n,e,r,o)),s(Math.min(e,n.length)+r.length))},E=(e,t)=>{if(!i){if(t===""){u(l(n,e));return}m(e,h(n[e]??"",t))}},y=(e,t)=>{t.preventDefault(),i||m(e,t.clipboardData.getData("text"))},I={ArrowLeft:e=>e-1,ArrowRight:e=>e+1,End:()=>o-1,Home:()=>0};return{cells:a,onChange:E,onKeyDown:(e,t)=>{let r=I[t.key];r?(t.preventDefault(),s(r(e))):t.key==="Backspace"&&!i&&!n[e]?(t.preventDefault(),u(l(n,e-1)),s(e-1)):t.key==="Delete"&&!i&&(t.preventDefault(),u(l(n,e)))},onPaste:y,tabbable:Math.min(n.length,o-1),value:n}}export{R as usePinInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Rating as i}from"./rating.mjs";export{i as Rating};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";var t="m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z";function r({filled:o}){return e("svg",{"aria-hidden":"true",fill:o?"currentColor":"none",focusable:"false",height:"1em",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"1.5",viewBox:"0 0 24 24",width:"1em",children:e("path",{d:t})})}export{r as StarIcon};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a}from"../../../chunk-SMKRX752.mjs";import{joinClasses as r}from"../../../overlay/class-names.mjs";import{jsx as i,jsxs as l}from"react/jsx-runtime";var R=(e,t)=>t>=e?"full":t>=e-.5?"half":"empty";function c({children:e,classNames:t,emptyIcon:m,icon:p,isStyled:n,state:o}){return l("span",{className:r(n&&a.item,t?.item),"data-plume-rating-item":"","data-state":o,children:[i("span",{"aria-hidden":"true",className:r(n&&a.empty,t?.empty),children:m}),i("span",{"aria-hidden":"true",className:r(n&&a.filled,t?.filled),"data-plume-rating-filled":"",children:p}),e]})}export{c as RatingItem,R as itemState};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{a as l}from"../../../chunk-SMKRX752.mjs";import{forwardRef as B,useId as K}from"react";import{joinClasses as j}from"../../../overlay/class-names.mjs";import{useFieldContext as G}from"../field/field-context.mjs";import{StarIcon as I}from"./rating-icons.mjs";import{itemState as w,RatingItem as C}from"./rating-item.mjs";import{useRating as J}from"./use-rating.mjs";import{jsx as i,jsxs as Z}from"react/jsx-runtime";var Q=(e,o,d)=>{if(e)return o===d?"end":"start"},U=e=>`${e} ${e===1?"star":"stars"}`,W=(e,o)=>`${e} out of ${o}`,X={border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:1},Y=B(({allowHalf:e=!1,className:o,classNames:d,clearable:p=!1,colorScheme:L="warning",defaultValue:N,disabled:u=!1,emptyIcon:k,getItemLabel:V=U,icon:f,max:m=5,name:O,onValueChange:x,readOnly:b=!1,readOnlyLabel:H=W,required:M=!1,size:T="md",style:A,value:E,variant:F="solid",...s},g)=>{let y=G(),$=K(),t=J({allowHalf:e,defaultValue:N,max:m,onValueChange:x,value:E}),n=F!=="unstyled",z=y?.controlId===s.id?y?.labelId:void 0,D=s["aria-labelledby"]??(s["aria-label"]?void 0:z),R=f??i(I,{filled:!0}),v=k??f??i(I,{filled:!1}),q=e?.5:1,S=[...new Array(m).keys()].map(a=>a+1),P=j(n&&l.rating,n&&l[T],n&&!b&&!u&&l.interactive,n&&u&&l.disabled,o),h={"--rating-solid":`var(--plume-color-${L}-solid)`,"--rating-empty":"var(--plume-border-strong)",...A};return b?Z("span",{className:P,"data-plume-rating":"",ref:g,style:h,...s,"aria-invalid":void 0,"aria-label":void 0,"aria-labelledby":void 0,children:[i("span",{style:X,children:H(t.value,m)}),S.map(a=>i(C,{classNames:d,emptyIcon:v,icon:R,isStyled:n,state:w(a,t.value)},a))]}):i("fieldset",{...s,"aria-labelledby":D,"aria-required":M||void 0,className:P,"data-plume-rating":"",disabled:u,onPointerLeave:()=>t.setHover(void 0),ref:g,role:"radiogroup",style:h,children:S.map(a=>i(C,{classNames:d,emptyIcon:v,icon:R,isStyled:n,state:w(a,t.preview),children:(e?[a-q,a]:[a]).map(r=>i("input",{"aria-label":V(r,m),checked:t.value===r,className:n?l.radio:void 0,"data-half":Q(e,r,a),"data-plume-rating-radio":"",name:O??$,onChange:()=>t.setValue(r),onClick:()=>{p&&t.value===r&&t.setValue(0)},onKeyDown:c=>{p&&(c.key==="Backspace"||c.key==="Delete")&&(c.preventDefault(),t.setValue(0))},onPointerEnter:()=>t.setHover(r),type:"radio",value:r},r))},a))})});Y.displayName="Rating";export{Y as Rating};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{useState as d}from"react";import{useControllableState as v}from"../../../overlay/use-controllable-state.mjs";var a=(e,u,n)=>{let t=n?.5:1,r=Math.min(Math.max(Number.isFinite(e)?e:0,0),u);return Math.round(r/t)*t};function f({allowHalf:e,defaultValue:u=0,max:n,onValueChange:t,value:r}){let[s,m]=v({defaultValue:a(u,n,e),onChange:t,value:r}),[o,b]=d(void 0),i=a(s,n,e);return{hover:o,preview:o??i,setHover:b,setValue:l=>m(a(l,n,e)),value:i}}export{a as snap,f as useRating};
|
package/dist/index.d.mts
CHANGED
|
@@ -495,11 +495,14 @@ interface InputOwnProps {
|
|
|
495
495
|
elementAfter?: ReactNode;
|
|
496
496
|
colorScheme?: ColorScheme;
|
|
497
497
|
mask?: string;
|
|
498
|
+
revealClassName?: string;
|
|
499
|
+
revealLabel?: string;
|
|
500
|
+
revealable?: boolean;
|
|
498
501
|
shape?: Shape;
|
|
499
502
|
size?: Size;
|
|
500
503
|
variant?: InputVariant;
|
|
501
504
|
}
|
|
502
|
-
type InputRootAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'aria-invalid' | 'defaultValue' | 'disabled' | 'id' | 'inputMode' | 'max' | 'maxLength' | 'min' | 'minLength' | 'name' | 'onBlur' | 'onChange' | 'pattern' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value'>;
|
|
505
|
+
type InputRootAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'aria-invalid' | 'autoComplete' | 'defaultValue' | 'disabled' | 'id' | 'inputMode' | 'max' | 'maxLength' | 'min' | 'minLength' | 'name' | 'onBlur' | 'onChange' | 'pattern' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value'>;
|
|
503
506
|
type InputVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
504
507
|
type InputProps = ComponentProps & InputRootAttributes & InputOwnProps;
|
|
505
508
|
declare const Input: react.ForwardRefExoticComponent<ComponentProps & InputRootAttributes & InputOwnProps & react.RefAttributes<HTMLInputElement>>;
|
|
@@ -604,6 +607,59 @@ interface ModalTriggerProps {
|
|
|
604
607
|
}
|
|
605
608
|
declare const ModalTrigger: react.ForwardRefExoticComponent<ModalTriggerProps & react.RefAttributes<HTMLElement>>;
|
|
606
609
|
|
|
610
|
+
type NumberInputPart = 'decrement' | 'increment' | 'input';
|
|
611
|
+
type NumberInputVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
612
|
+
interface NumberInputOwnProps {
|
|
613
|
+
classNames?: Partial<Record<NumberInputPart, string>>;
|
|
614
|
+
colorScheme?: ColorScheme;
|
|
615
|
+
decrementLabel?: string;
|
|
616
|
+
defaultValue?: number | null;
|
|
617
|
+
format?: (value: number) => string;
|
|
618
|
+
incrementLabel?: string;
|
|
619
|
+
largeStep?: number;
|
|
620
|
+
max?: number;
|
|
621
|
+
min?: number;
|
|
622
|
+
name?: string;
|
|
623
|
+
onValueChange?: (value: number | null) => void;
|
|
624
|
+
parse?: (text: string) => number | null;
|
|
625
|
+
precision?: number;
|
|
626
|
+
shape?: Shape;
|
|
627
|
+
size?: Size;
|
|
628
|
+
step?: number;
|
|
629
|
+
steppers?: boolean;
|
|
630
|
+
value?: number | null;
|
|
631
|
+
variant?: NumberInputVariant;
|
|
632
|
+
}
|
|
633
|
+
type NumberInputRootAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-labelledby' | 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'placeholder' | 'readOnly' | 'required' | 'title'>;
|
|
634
|
+
type NumberInputProps = Omit<ComponentProps, 'index'> & NumberInputRootAttributes & NumberInputOwnProps;
|
|
635
|
+
declare const NumberInput: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & NumberInputRootAttributes & NumberInputOwnProps & react.RefAttributes<HTMLInputElement>>;
|
|
636
|
+
|
|
637
|
+
type PinInputType = 'numeric' | 'alphanumeric' | 'text';
|
|
638
|
+
|
|
639
|
+
type PinInputVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
640
|
+
interface PinInputOwnProps {
|
|
641
|
+
autoComplete?: string;
|
|
642
|
+
focusOnMount?: boolean;
|
|
643
|
+
colorScheme?: ColorScheme;
|
|
644
|
+
defaultValue?: string;
|
|
645
|
+
getInputLabel?: (index: number, length: number) => string;
|
|
646
|
+
inputClassName?: string;
|
|
647
|
+
length?: number;
|
|
648
|
+
mask?: boolean;
|
|
649
|
+
name?: string;
|
|
650
|
+
onComplete?: (value: string) => void;
|
|
651
|
+
onValueChange?: (value: string) => void;
|
|
652
|
+
placeholder?: string;
|
|
653
|
+
shape?: Shape;
|
|
654
|
+
size?: Size;
|
|
655
|
+
type?: PinInputType;
|
|
656
|
+
value?: string;
|
|
657
|
+
variant?: PinInputVariant;
|
|
658
|
+
}
|
|
659
|
+
type PinInputRootAttributes = Pick<InputHTMLAttributes<HTMLFieldSetElement>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-labelledby' | 'disabled' | 'hidden' | 'id' | 'readOnly' | 'required' | 'title'>;
|
|
660
|
+
type PinInputProps = Omit<ComponentProps, 'index'> & PinInputRootAttributes & PinInputOwnProps;
|
|
661
|
+
declare const PinInput: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & PinInputRootAttributes & PinInputOwnProps & react.RefAttributes<HTMLFieldSetElement>>;
|
|
662
|
+
|
|
607
663
|
type PopoverVariant = 'elevated' | 'outline' | 'unstyled';
|
|
608
664
|
|
|
609
665
|
interface PopoverProps {
|
|
@@ -683,6 +739,33 @@ type RadioGroupRootAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'aria-descr
|
|
|
683
739
|
type RadioGroupProps = Omit<ComponentProps, 'index'> & RadioGroupRootAttributes & RadioGroupOwnProps;
|
|
684
740
|
declare const RadioGroup: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & RadioGroupRootAttributes & RadioGroupOwnProps & react.RefAttributes<HTMLDivElement>>;
|
|
685
741
|
|
|
742
|
+
type RatingPart = 'empty' | 'filled' | 'item';
|
|
743
|
+
|
|
744
|
+
type RatingVariant = 'solid' | 'unstyled';
|
|
745
|
+
interface RatingOwnProps {
|
|
746
|
+
allowHalf?: boolean;
|
|
747
|
+
classNames?: Partial<Record<RatingPart, string>>;
|
|
748
|
+
clearable?: boolean;
|
|
749
|
+
colorScheme?: ColorScheme;
|
|
750
|
+
defaultValue?: number;
|
|
751
|
+
disabled?: boolean;
|
|
752
|
+
emptyIcon?: ReactNode;
|
|
753
|
+
getItemLabel?: (value: number, max: number) => string;
|
|
754
|
+
icon?: ReactNode;
|
|
755
|
+
max?: number;
|
|
756
|
+
name?: string;
|
|
757
|
+
onValueChange?: (value: number) => void;
|
|
758
|
+
readOnly?: boolean;
|
|
759
|
+
readOnlyLabel?: (value: number, max: number) => string;
|
|
760
|
+
required?: boolean;
|
|
761
|
+
size?: Size;
|
|
762
|
+
value?: number;
|
|
763
|
+
variant?: RatingVariant;
|
|
764
|
+
}
|
|
765
|
+
type RatingRootAttributes = Pick<HTMLAttributes<HTMLElement>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-labelledby' | 'hidden' | 'id' | 'title'>;
|
|
766
|
+
type RatingProps = Omit<ComponentProps, 'index'> & RatingRootAttributes & RatingOwnProps;
|
|
767
|
+
declare const Rating: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & RatingRootAttributes & RatingOwnProps & react.RefAttributes<HTMLElement>>;
|
|
768
|
+
|
|
686
769
|
type SelectVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
687
770
|
interface SelectedOption {
|
|
688
771
|
icon?: ReactNode;
|
|
@@ -938,4 +1021,4 @@ interface TooltipProps {
|
|
|
938
1021
|
type TooltipVariant = 'solid' | 'outline' | 'unstyled';
|
|
939
1022
|
declare function Tooltip({ children, className, closeDelay, content, defaultOpen, disabled, offset, onOpenChange, open: openProp, openDelay, placement, size, style, variant, }: Readonly<TooltipProps>): ReactNode;
|
|
940
1023
|
|
|
941
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionOwnProps, type AccordionProps, AccordionTrigger, type AccordionTriggerPart, type AccordionTriggerProps, type AccordionVariant, Badge, type BadgeProps, type Breakpoints, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipPart, type ChipProps, type ChipVariant, type ColorMode, type ColorModeSetting, type ColorPalette, type ColorScheme, type ColorShade, type ComponentProps, DatePicker, type DatePickerConfig, type DatePickerProps, type DateRange, type DeepPartial, Dropdown, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, Field, type FieldControlProps, type FieldOrientation, type FieldProps, type FontSizes, type FontWeights, Icon, type IconProps, Input, type InputProps, type LazyLoadedComponent, type LineHeights, List, ListDivider, type ListDividerProps, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, type MaskChangeHandler, Modal, ModalBody, type ModalBodyProps, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTrigger, type ModalTriggerProps, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, type Radii, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, SelectContent, type SelectContentPart, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectOption, type SelectOptionPart, type SelectOptionProps, type SelectProps, SelectTrigger, type SelectTriggerPart, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, type SelectedOption, type SemanticColors, type Shade, type ShadeLevel, type Shadows, type Shape, type Size, type Sizes, Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonVariant, type Spaces, Spinner, type SpinnerProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, Tabs, type TabsProps, Textarea, type TextareaProps, type Theme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastAction, type ToastApi, type ToastContent, type ToastIcons, type ToastOptions, type ToastPart, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastStatus, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipProps, type Typography, type UseClickOutsideProps, type UseDebounceProps, type UseMaskProps, type UseMaskResult, type ZIndeces, applyMask, colorVar, deepMerge, defaultDarkTheme, defaultTheme, formatDate, getContrastColor, getContrastRatio, getDarkenColor, getDateFormatByLanguage, getDateFromDateString, getDateStringByLanguage, getDaysOfWeekByLanguage, getLightenColor, getMonthsByLanguage, lazyLoadContent, themeToCssVars, useClickOutside, useDebounce, useMask, useTheme, useToast, validateFormatDate };
|
|
1024
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionOwnProps, type AccordionProps, AccordionTrigger, type AccordionTriggerPart, type AccordionTriggerProps, type AccordionVariant, Badge, type BadgeProps, type Breakpoints, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipPart, type ChipProps, type ChipVariant, type ColorMode, type ColorModeSetting, type ColorPalette, type ColorScheme, type ColorShade, type ComponentProps, DatePicker, type DatePickerConfig, type DatePickerProps, type DateRange, type DeepPartial, Dropdown, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, Field, type FieldControlProps, type FieldOrientation, type FieldProps, type FontSizes, type FontWeights, Icon, type IconProps, Input, type InputProps, type LazyLoadedComponent, type LineHeights, List, ListDivider, type ListDividerProps, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, type MaskChangeHandler, Modal, ModalBody, type ModalBodyProps, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTrigger, type ModalTriggerProps, NumberInput, type NumberInputPart, type NumberInputProps, type NumberInputVariant, PinInput, type PinInputProps, type PinInputType, type PinInputVariant, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, type Radii, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingPart, type RatingProps, type RatingVariant, Select, SelectContent, type SelectContentPart, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectOption, type SelectOptionPart, type SelectOptionProps, type SelectProps, SelectTrigger, type SelectTriggerPart, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, type SelectedOption, type SemanticColors, type Shade, type ShadeLevel, type Shadows, type Shape, type Size, type Sizes, Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonVariant, type Spaces, Spinner, type SpinnerProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, Tabs, type TabsProps, Textarea, type TextareaProps, type Theme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastAction, type ToastApi, type ToastContent, type ToastIcons, type ToastOptions, type ToastPart, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastStatus, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipProps, type Typography, type UseClickOutsideProps, type UseDebounceProps, type UseMaskProps, type UseMaskResult, type ZIndeces, applyMask, colorVar, deepMerge, defaultDarkTheme, defaultTheme, formatDate, getContrastColor, getContrastRatio, getDarkenColor, getDateFormatByLanguage, getDateFromDateString, getDateStringByLanguage, getDaysOfWeekByLanguage, getLightenColor, getMonthsByLanguage, lazyLoadContent, themeToCssVars, useClickOutside, useDebounce, useMask, useTheme, useToast, validateFormatDate };
|
package/dist/index.d.ts
CHANGED
|
@@ -495,11 +495,14 @@ interface InputOwnProps {
|
|
|
495
495
|
elementAfter?: ReactNode;
|
|
496
496
|
colorScheme?: ColorScheme;
|
|
497
497
|
mask?: string;
|
|
498
|
+
revealClassName?: string;
|
|
499
|
+
revealLabel?: string;
|
|
500
|
+
revealable?: boolean;
|
|
498
501
|
shape?: Shape;
|
|
499
502
|
size?: Size;
|
|
500
503
|
variant?: InputVariant;
|
|
501
504
|
}
|
|
502
|
-
type InputRootAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'aria-invalid' | 'defaultValue' | 'disabled' | 'id' | 'inputMode' | 'max' | 'maxLength' | 'min' | 'minLength' | 'name' | 'onBlur' | 'onChange' | 'pattern' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value'>;
|
|
505
|
+
type InputRootAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'aria-invalid' | 'autoComplete' | 'defaultValue' | 'disabled' | 'id' | 'inputMode' | 'max' | 'maxLength' | 'min' | 'minLength' | 'name' | 'onBlur' | 'onChange' | 'pattern' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value'>;
|
|
503
506
|
type InputVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
504
507
|
type InputProps = ComponentProps & InputRootAttributes & InputOwnProps;
|
|
505
508
|
declare const Input: react.ForwardRefExoticComponent<ComponentProps & InputRootAttributes & InputOwnProps & react.RefAttributes<HTMLInputElement>>;
|
|
@@ -604,6 +607,59 @@ interface ModalTriggerProps {
|
|
|
604
607
|
}
|
|
605
608
|
declare const ModalTrigger: react.ForwardRefExoticComponent<ModalTriggerProps & react.RefAttributes<HTMLElement>>;
|
|
606
609
|
|
|
610
|
+
type NumberInputPart = 'decrement' | 'increment' | 'input';
|
|
611
|
+
type NumberInputVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
612
|
+
interface NumberInputOwnProps {
|
|
613
|
+
classNames?: Partial<Record<NumberInputPart, string>>;
|
|
614
|
+
colorScheme?: ColorScheme;
|
|
615
|
+
decrementLabel?: string;
|
|
616
|
+
defaultValue?: number | null;
|
|
617
|
+
format?: (value: number) => string;
|
|
618
|
+
incrementLabel?: string;
|
|
619
|
+
largeStep?: number;
|
|
620
|
+
max?: number;
|
|
621
|
+
min?: number;
|
|
622
|
+
name?: string;
|
|
623
|
+
onValueChange?: (value: number | null) => void;
|
|
624
|
+
parse?: (text: string) => number | null;
|
|
625
|
+
precision?: number;
|
|
626
|
+
shape?: Shape;
|
|
627
|
+
size?: Size;
|
|
628
|
+
step?: number;
|
|
629
|
+
steppers?: boolean;
|
|
630
|
+
value?: number | null;
|
|
631
|
+
variant?: NumberInputVariant;
|
|
632
|
+
}
|
|
633
|
+
type NumberInputRootAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-labelledby' | 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'placeholder' | 'readOnly' | 'required' | 'title'>;
|
|
634
|
+
type NumberInputProps = Omit<ComponentProps, 'index'> & NumberInputRootAttributes & NumberInputOwnProps;
|
|
635
|
+
declare const NumberInput: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & NumberInputRootAttributes & NumberInputOwnProps & react.RefAttributes<HTMLInputElement>>;
|
|
636
|
+
|
|
637
|
+
type PinInputType = 'numeric' | 'alphanumeric' | 'text';
|
|
638
|
+
|
|
639
|
+
type PinInputVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
640
|
+
interface PinInputOwnProps {
|
|
641
|
+
autoComplete?: string;
|
|
642
|
+
focusOnMount?: boolean;
|
|
643
|
+
colorScheme?: ColorScheme;
|
|
644
|
+
defaultValue?: string;
|
|
645
|
+
getInputLabel?: (index: number, length: number) => string;
|
|
646
|
+
inputClassName?: string;
|
|
647
|
+
length?: number;
|
|
648
|
+
mask?: boolean;
|
|
649
|
+
name?: string;
|
|
650
|
+
onComplete?: (value: string) => void;
|
|
651
|
+
onValueChange?: (value: string) => void;
|
|
652
|
+
placeholder?: string;
|
|
653
|
+
shape?: Shape;
|
|
654
|
+
size?: Size;
|
|
655
|
+
type?: PinInputType;
|
|
656
|
+
value?: string;
|
|
657
|
+
variant?: PinInputVariant;
|
|
658
|
+
}
|
|
659
|
+
type PinInputRootAttributes = Pick<InputHTMLAttributes<HTMLFieldSetElement>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-labelledby' | 'disabled' | 'hidden' | 'id' | 'readOnly' | 'required' | 'title'>;
|
|
660
|
+
type PinInputProps = Omit<ComponentProps, 'index'> & PinInputRootAttributes & PinInputOwnProps;
|
|
661
|
+
declare const PinInput: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & PinInputRootAttributes & PinInputOwnProps & react.RefAttributes<HTMLFieldSetElement>>;
|
|
662
|
+
|
|
607
663
|
type PopoverVariant = 'elevated' | 'outline' | 'unstyled';
|
|
608
664
|
|
|
609
665
|
interface PopoverProps {
|
|
@@ -683,6 +739,33 @@ type RadioGroupRootAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'aria-descr
|
|
|
683
739
|
type RadioGroupProps = Omit<ComponentProps, 'index'> & RadioGroupRootAttributes & RadioGroupOwnProps;
|
|
684
740
|
declare const RadioGroup: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & RadioGroupRootAttributes & RadioGroupOwnProps & react.RefAttributes<HTMLDivElement>>;
|
|
685
741
|
|
|
742
|
+
type RatingPart = 'empty' | 'filled' | 'item';
|
|
743
|
+
|
|
744
|
+
type RatingVariant = 'solid' | 'unstyled';
|
|
745
|
+
interface RatingOwnProps {
|
|
746
|
+
allowHalf?: boolean;
|
|
747
|
+
classNames?: Partial<Record<RatingPart, string>>;
|
|
748
|
+
clearable?: boolean;
|
|
749
|
+
colorScheme?: ColorScheme;
|
|
750
|
+
defaultValue?: number;
|
|
751
|
+
disabled?: boolean;
|
|
752
|
+
emptyIcon?: ReactNode;
|
|
753
|
+
getItemLabel?: (value: number, max: number) => string;
|
|
754
|
+
icon?: ReactNode;
|
|
755
|
+
max?: number;
|
|
756
|
+
name?: string;
|
|
757
|
+
onValueChange?: (value: number) => void;
|
|
758
|
+
readOnly?: boolean;
|
|
759
|
+
readOnlyLabel?: (value: number, max: number) => string;
|
|
760
|
+
required?: boolean;
|
|
761
|
+
size?: Size;
|
|
762
|
+
value?: number;
|
|
763
|
+
variant?: RatingVariant;
|
|
764
|
+
}
|
|
765
|
+
type RatingRootAttributes = Pick<HTMLAttributes<HTMLElement>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-labelledby' | 'hidden' | 'id' | 'title'>;
|
|
766
|
+
type RatingProps = Omit<ComponentProps, 'index'> & RatingRootAttributes & RatingOwnProps;
|
|
767
|
+
declare const Rating: react.ForwardRefExoticComponent<Omit<ComponentProps, "index"> & RatingRootAttributes & RatingOwnProps & react.RefAttributes<HTMLElement>>;
|
|
768
|
+
|
|
686
769
|
type SelectVariant = 'outline' | 'filled' | 'underline' | 'unstyled';
|
|
687
770
|
interface SelectedOption {
|
|
688
771
|
icon?: ReactNode;
|
|
@@ -938,4 +1021,4 @@ interface TooltipProps {
|
|
|
938
1021
|
type TooltipVariant = 'solid' | 'outline' | 'unstyled';
|
|
939
1022
|
declare function Tooltip({ children, className, closeDelay, content, defaultOpen, disabled, offset, onOpenChange, open: openProp, openDelay, placement, size, style, variant, }: Readonly<TooltipProps>): ReactNode;
|
|
940
1023
|
|
|
941
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionOwnProps, type AccordionProps, AccordionTrigger, type AccordionTriggerPart, type AccordionTriggerProps, type AccordionVariant, Badge, type BadgeProps, type Breakpoints, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipPart, type ChipProps, type ChipVariant, type ColorMode, type ColorModeSetting, type ColorPalette, type ColorScheme, type ColorShade, type ComponentProps, DatePicker, type DatePickerConfig, type DatePickerProps, type DateRange, type DeepPartial, Dropdown, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, Field, type FieldControlProps, type FieldOrientation, type FieldProps, type FontSizes, type FontWeights, Icon, type IconProps, Input, type InputProps, type LazyLoadedComponent, type LineHeights, List, ListDivider, type ListDividerProps, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, type MaskChangeHandler, Modal, ModalBody, type ModalBodyProps, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTrigger, type ModalTriggerProps, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, type Radii, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, SelectContent, type SelectContentPart, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectOption, type SelectOptionPart, type SelectOptionProps, type SelectProps, SelectTrigger, type SelectTriggerPart, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, type SelectedOption, type SemanticColors, type Shade, type ShadeLevel, type Shadows, type Shape, type Size, type Sizes, Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonVariant, type Spaces, Spinner, type SpinnerProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, Tabs, type TabsProps, Textarea, type TextareaProps, type Theme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastAction, type ToastApi, type ToastContent, type ToastIcons, type ToastOptions, type ToastPart, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastStatus, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipProps, type Typography, type UseClickOutsideProps, type UseDebounceProps, type UseMaskProps, type UseMaskResult, type ZIndeces, applyMask, colorVar, deepMerge, defaultDarkTheme, defaultTheme, formatDate, getContrastColor, getContrastRatio, getDarkenColor, getDateFormatByLanguage, getDateFromDateString, getDateStringByLanguage, getDaysOfWeekByLanguage, getLightenColor, getMonthsByLanguage, lazyLoadContent, themeToCssVars, useClickOutside, useDebounce, useMask, useTheme, useToast, validateFormatDate };
|
|
1024
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionOwnProps, type AccordionProps, AccordionTrigger, type AccordionTriggerPart, type AccordionTriggerProps, type AccordionVariant, Badge, type BadgeProps, type Breakpoints, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipPart, type ChipProps, type ChipVariant, type ColorMode, type ColorModeSetting, type ColorPalette, type ColorScheme, type ColorShade, type ComponentProps, DatePicker, type DatePickerConfig, type DatePickerProps, type DateRange, type DeepPartial, Dropdown, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, Field, type FieldControlProps, type FieldOrientation, type FieldProps, type FontSizes, type FontWeights, Icon, type IconProps, Input, type InputProps, type LazyLoadedComponent, type LineHeights, List, ListDivider, type ListDividerProps, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, type MaskChangeHandler, Modal, ModalBody, type ModalBodyProps, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTrigger, type ModalTriggerProps, NumberInput, type NumberInputPart, type NumberInputProps, type NumberInputVariant, PinInput, type PinInputProps, type PinInputType, type PinInputVariant, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, type Radii, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingPart, type RatingProps, type RatingVariant, Select, SelectContent, type SelectContentPart, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectOption, type SelectOptionPart, type SelectOptionProps, type SelectProps, SelectTrigger, type SelectTriggerPart, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, type SelectedOption, type SemanticColors, type Shade, type ShadeLevel, type Shadows, type Shape, type Size, type Sizes, Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonVariant, type Spaces, Spinner, type SpinnerProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, Tabs, type TabsProps, Textarea, type TextareaProps, type Theme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastAction, type ToastApi, type ToastContent, type ToastIcons, type ToastOptions, type ToastPart, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastStatus, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipProps, type Typography, type UseClickOutsideProps, type UseDebounceProps, type UseMaskProps, type UseMaskResult, type ZIndeces, applyMask, colorVar, deepMerge, defaultDarkTheme, defaultTheme, formatDate, getContrastColor, getContrastRatio, getDarkenColor, getDateFormatByLanguage, getDateFromDateString, getDateStringByLanguage, getDaysOfWeekByLanguage, getLightenColor, getMonthsByLanguage, lazyLoadContent, themeToCssVars, useClickOutside, useDebounce, useMask, useTheme, useToast, validateFormatDate };
|