ioloco-ui - npm Package Compare versions

Comparing version 0.6.5 to 0.6.6

dist/Components/Components/RadioSlider/index.d.ts

 import { RadioSliderProps } from './types';
-declare const RadioSlider: ({ options, defaultValue, onValueChange, size, variant, className }: RadioSliderProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioSlider: ({ options, defaultValue, size, variant, onValueChange, ariaLabel }: RadioSliderProps) => import("react/jsx-runtime").JSX.Element;
 export default RadioSlider;

dist/Components/Components/RadioSlider/index.js

@@ -1,2 +0,1 @@
-"use client";
-import{jsxs as l,jsx as n}from"react/jsx-runtime";import*as r from"react";import o from"@stylexjs/stylex";const t=t=>{let{options:i,defaultValue:d,onValueChange:u,size:a="medium",variant:s="default",className:b}=t;var c;const[x,g]=r.useState(null!=d?d:null===(c=i[0])||void 0===c?void 0:c.value),p=r.useRef(null),h=r.useCallback((l=>{g(l),null==u||u(l)}),[u]),f=r.useCallback((()=>{if(!p.current)return"0%";const l=i.findIndex((l=>l.value===x));if(-1===l)return"0%";const n=p.current.offsetWidth,r=n/i.length,o=n-r-8;return`${Math.min(r*l,o)}px`}),[i,x]);return l("div",Object.assign({ref:p,className:b,role:"radiogroup","aria-labelledby":`${b}-label`},o.props(e.container,e[a],e[s]),{style:{width:120*i.length+"px"},children:[n("div",Object.assign({},o.props(e.slider,e[`${s}Slider`]),{style:{width:100/i.length+"%",transform:`translateX(${f()})`}})),i.map((l=>n("button",Object.assign({role:"radio","aria-checked":x===l.value,onClick:()=>h(l.value),type:"button"},o.props(e.button,x===l.value&&e.activeButton),{children:l.label}),l.value)))]}))},e={container:{display:"x3nfvp2",alignItems:"x6s0dn4",position:"x1n2onr6",borderRadius:"x10hpsqq",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,backgroundColor:"x15yo4kd",overflow:"xb3r6kr",overflowX:null,overflowY:null,padding:"xfawy5m",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,transition:"xr405v8",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,$$css:!0},slider:{position:"x10l6tqk",top:"xndqk7f",bottom:"xbfrwjf",left:"xcqyyxr",insetInlineStart:null,insetInlineEnd:null,backgroundColor:"x1c5tqo3",borderRadius:"x10hpsqq",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,boxShadow:"x1mh2kpm",transition:"x1rl8rtn",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,willChange:"x1so62im",$$css:!0},button:{flex:"x98rzlu",flexGrow:null,flexShrink:null,flexBasis:null,border:"x1gs6z28",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"xjbqb8w",padding:"x1ff1495",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,fontSize:"xngnso2",fontWeight:"xk50ysn",textTransform:"xn80e1m",color:"xdif06o",cursor:"x1ypdohk",zIndex:"x1vjfegm",position:"x1n2onr6",transition:"x1rl8rtn",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,":hover_color":"x19lk8rd",$$css:!0},activeButton:{color:"x1cejap5",$$css:!0},small:{height:"x10w6t97",fontSize:"x1603h9y",$$css:!0},medium:{height:"x1vqgdyp",fontSize:"xngnso2",$$css:!0},large:{height:"xsdox4t",fontSize:"x1elmx46",$$css:!0},default:{backgroundColor:"x15yo4kd",$$css:!0},primary:{backgroundColor:"x11g1w8x",$$css:!0},secondary:{backgroundColor:"x1cy90ux",$$css:!0},defaultSlider:{backgroundColor:"x1c5tqo3",$$css:!0},primarySlider:{backgroundColor:"x1efvng4",boxShadow:"xkqr26v",$$css:!0},secondarySlider:{backgroundColor:"x11g8ltn",boxShadow:"x1cjs6me",$$css:!0}};export{t as default};
+import{jsx as l,jsxs as n}from"react/jsx-runtime";import r,{useEffect as o,useCallback as t}from"react";import e from"@stylexjs/stylex";const i=i=>{let{options:u,defaultValue:a,size:s="medium",variant:b="default",onValueChange:c,ariaLabel:x="Select an option"}=i;var g;const p=r.useRef(null),[h,f]=r.useState(null!=a?a:null===(g=u[0])||void 0===g?void 0:g.value);o((()=>{a&&a!==h&&f(a)}),[a]);const m=t((l=>{f(l),null==c||c(l)}),[c]),S=t((()=>{if(!p.current)return"0%";const l=u.findIndex((l=>l.value===h));if(-1===l)return"0%";const n=p.current.offsetWidth,r=n/u.length,o=n-r-8;return`${Math.min(r*l,o)}px`}),[u,h]),y=r.useMemo((()=>u.map((n=>l("button",Object.assign({type:"button",role:"radio","aria-checked":h===n.value,onClick:()=>m(n.value)},e.props(d.button,h===n.value&&d.activeButton),{children:n.label}),n.value)))),[u,h,m]);return n("div",Object.assign({ref:p,role:"radiogroup","aria-label":x},e.props(d.container,d[s],d[b]),{style:{width:120*u.length+"px"},children:[l("div",Object.assign({},e.props(d.slider,d[`${b}Slider`]),{style:{width:100/u.length+"%",transform:`translateX(${S()})`}})),y]}))},d={container:{display:"x3nfvp2",alignItems:"x6s0dn4",position:"x1n2onr6",borderRadius:"x10hpsqq",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,backgroundColor:"x15yo4kd",overflow:"xb3r6kr",overflowX:null,overflowY:null,padding:"xfawy5m",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,transition:"xr405v8",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,$$css:!0},slider:{position:"x10l6tqk",top:"xndqk7f",bottom:"xbfrwjf",left:"xcqyyxr",insetInlineStart:null,insetInlineEnd:null,backgroundColor:"x1c5tqo3",borderRadius:"x10hpsqq",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,boxShadow:"x1mh2kpm",transition:"x1rl8rtn",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,willChange:"x1so62im",$$css:!0},button:{flex:"x98rzlu",flexGrow:null,flexShrink:null,flexBasis:null,border:"x1gs6z28",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"xjbqb8w",padding:"x1ff1495",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,fontSize:"xngnso2",fontWeight:"xk50ysn",textTransform:"xn80e1m",color:"xdif06o",cursor:"x1ypdohk",zIndex:"x1vjfegm",position:"x1n2onr6",transition:"x1rl8rtn",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,":hover_color":"x19lk8rd",$$css:!0},activeButton:{color:"x1cejap5",$$css:!0},small:{height:"x10w6t97",fontSize:"x1603h9y",$$css:!0},medium:{height:"x1vqgdyp",fontSize:"xngnso2",$$css:!0},large:{height:"xsdox4t",fontSize:"x1elmx46",$$css:!0},default:{backgroundColor:"x15yo4kd",$$css:!0},primary:{backgroundColor:"x18h0cds",$$css:!0},secondary:{backgroundColor:"x1cy90ux",$$css:!0},defaultSlider:{backgroundColor:"x1c5tqo3",$$css:!0},primarySlider:{backgroundColor:"x15ezhdg",boxShadow:"xkqr26v",$$css:!0},secondarySlider:{backgroundColor:"x11g8ltn",boxShadow:"x1cjs6me",$$css:!0}};export{i as default};

dist/Components/Components/RadioSlider/types.d.ts

@@ -8,6 +8,6 @@ export interface Option {
     defaultValue?: string;
-    onValueChange?: (value: string) => void;
     size?: 'small' | 'medium' | 'large';
     variant?: 'default' | 'primary' | 'secondary';
-    className?: string;
+    ariaLabel?: string;
+    onValueChange?: (value: string) => void;
 }

package.json

 {
   "name": "ioloco-ui",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Stylex UI components for React",
@@ -5,0 +5,0 @@ "author": {

No alert changes

Improved metrics

Total package byte prevSize

215339

0.02%

No dependency changes