@zonos/amino 5.4.12 → 5.4.13

package/components/toggle/Toggle.d.ts

@@ -1,8 +1,13 @@
+import type { BaseProps } from "../../types/BaseProps";
 import type { SelectOption } from "../../types/SelectOption";
-export type ToggleProps<TValue extends string | number = string> = {
-    className?: string;
+export type ToggleProps<TValue extends string | number = string> = BaseProps & {
+    /**
+     * If true, the toggle will take up the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     options: SelectOption<TValue>[];
     value: TValue;
     onChange: (value: TValue) => void;
 };
-export declare const Toggle: <TValue extends string | number>({ className, onChange, options, value, }: ToggleProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: <TValue extends string | number>({ className, fullWidth, onChange, options, style, value, }: ToggleProps<TValue>) => import("react/jsx-runtime").JSX.Element;

package/components/toggle/Toggle.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-bd4862e8.js"),o=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),n=require("framer-motion"),l=require("../../style-inject.es-d4ddeae4.js");function t(e){return e&&e.__esModule?e:{default:e}}var a=t(i),u="Amino_Toggle-module__shrinkWrapper--osh3J",d="Amino_Toggle-module__wrapper--NF4v5",s="Amino_Toggle-module__optionWrapper--0wrNp",_="Amino_Toggle-module__selected--badUt",m="Amino_Toggle-module__selectedSlider--WsUDo";l.styleInject(".Amino_Toggle-module__shrinkWrapper--osh3J{display:inline-flex}.Amino_Toggle-module__wrapper--NF4v5{background-color:var(--amino-gray-50);border-radius:6px;display:flex;position:relative}.Amino_Toggle-module__optionWrapper--0wrNp{border-radius:6px;color:var(--amino-text-color-secondary);cursor:pointer;font-size:var(--amino-font-size-base);font-weight:500;padding:4px 12px;transition:var(--amino-transition);z-index:2}.Amino_Toggle-module__optionWrapper--0wrNp:focus{outline:none}.Amino_Toggle-module__optionWrapper--0wrNp.Amino_Toggle-module__selected--badUt,.Amino_Toggle-module__optionWrapper--0wrNp:hover:not(.Amino_Toggle-module__selected--badUt){color:var(--amino-text-color)}.Amino_Toggle-module__selectedSlider--WsUDo{background-color:var(--amino-raised-surface-color);border-radius:6px;box-shadow:var(--amino-shadow-button-standard);height:100%;position:absolute;z-index:1}");exports.Toggle=function(i){var l=i.className,t=i.onChange,c=i.options,p=i.value,g=r.useRef(null),f=r.useRef(null),v=e.__read(r.useState({left:0,width:0}),2),h=v[0],x=v[1];return r.useEffect((function(){var e,o,r=function(e,o){if(!o||!e)return{left:0,width:0};var r=o.width;return{left:o.left-e.left,width:r}}((null===(e=g.current)||void 0===e?void 0:e.getBoundingClientRect())||null,(null===(o=f.current)||void 0===o?void 0:o.getBoundingClientRect())||null);x(r)}),[p]),o.jsx("div",{className:u,children:o.jsxs("div",{ref:g,className:d,children:[o.jsx(n.motion.div,{animate:{width:h.width,x:h.left},className:m,initial:!1,transition:{duration:.2}}),c.map((function(e){return o.jsx("button",{ref:e.value===p?f:null,className:a.default([s,l,e.value===p&&_]),onClick:function(){return t(e.value)},type:"button",children:e.label},e.value)}))]})})};
+"use strict";var e=require("../../_tslib-bd4862e8.js"),o=require("react/jsx-runtime"),r=require("react"),l=require("clsx"),i=require("framer-motion"),n=require("../../style-inject.es-d4ddeae4.js");function t(e){return e&&e.__esModule?e:{default:e}}var d=t(l),_="Amino_Toggle-module__shrinkWrapper--osh3J",a="Amino_Toggle-module__wrapper--NF4v5",u="Amino_Toggle-module__selectedSlider--WsUDo",s="Amino_Toggle-module__optionWrapper--0wrNp",m="Amino_Toggle-module__selected--badUt",g="Amino_Toggle-module__fullWidth--vw3dd";n.styleInject(".Amino_Toggle-module__shrinkWrapper--osh3J{display:inline-flex}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__wrapper--NF4v5{background-color:var(--amino-gray-50);border-radius:6px;display:flex;position:relative}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__selectedSlider--WsUDo{background-color:var(--amino-raised-surface-color);border-radius:6px;box-shadow:var(--amino-shadow-button-standard);height:100%;position:absolute;z-index:1}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp{border-radius:6px;color:var(--amino-text-color-secondary);cursor:pointer;font-size:var(--amino-font-size-base);font-weight:500;padding:4px 12px;text-align:center;z-index:2}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp:focus{outline:none}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp.Amino_Toggle-module__selected--badUt,.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp:hover:not(.Amino_Toggle-module__selected--badUt){color:var(--amino-text-color)}.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd,.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd .Amino_Toggle-module__wrapper--NF4v5{width:100%}.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd .Amino_Toggle-module__wrapper--NF4v5 .Amino_Toggle-module__optionWrapper--0wrNp{flex-grow:1}");exports.Toggle=function(l){var n=l.className,t=l.fullWidth,p=void 0!==t&&t,c=l.onChange,h=l.options,f=l.style,v=l.value,A=r.useRef(null),T=r.useRef(null),w=e.__read(r.useState({left:0,width:0}),2),W=w[0],x=w[1],b=e.__read(r.useState(!1),2),N=b[0],k=b[1];return r.useEffect((function(){var e,o,r=function(e,o){if(!o||!e)return{left:0,width:0};var r=o.width;return{left:o.left-e.left,width:r}}((null===(e=A.current)||void 0===e?void 0:e.getBoundingClientRect())||null,(null===(o=T.current)||void 0===o?void 0:o.getBoundingClientRect())||null);x(r)}),[v]),o.jsx("div",{className:d.default(n,_,p&&g),style:f,children:o.jsxs("div",{ref:A,className:a,children:[o.jsx(i.motion.div,{animate:{width:W.width,x:W.left},className:u,initial:!1,onAnimationComplete:function(){k(!0)},transition:{duration:N?.2:0}}),h.map((function(e){var r=e.value===v;return o.jsx("button",{ref:r?T:null,className:d.default([s,r&&m]),onClick:function(){return c(e.value)},type:"button",children:e.label},e.value)}))]})})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "5.4.12",
+  "version": "5.4.13",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/types/SelectOption.d.ts

@@ -1,8 +1,11 @@
 import type { ReactNode } from 'react';
-export type SelectOption<V extends string | number = string | number> = {
+export type SelectOption<V extends string | number | null = string | number> = {
     icon?: ReactNode;
     isDisabled?: boolean;
     label: string;
+    /**
+     * For checkboxes
+     */
     labelDescription?: string;
     value: V;
 };