@zonos/amino 5.4.12 → 5.4.14

package/components/filter/filter-multi-select/FilterMultiSelect.d.ts

@@ -1,8 +1,8 @@
 import { type BaseFilterProps } from "../useFilterWrapper";
-import type { SelectOption } from "../../../types/SelectOption";
-export type FilterMultiSelectProps<T extends string | number = string> = BaseFilterProps & {
+import type { SelectOption, SelectValue } from "../../../types/SelectOption";
+export type FilterMultiSelectProps<T extends SelectValue = SelectValue> = BaseFilterProps & {
     options: SelectOption<T>[];
     value: T[];
     onChange: (value: T[]) => void;
 };
-export declare const FilterMultiSelect: <T extends string | number = string>({ dropdownTitle, label, onChange, options, value, }: FilterMultiSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterMultiSelect: <T extends SelectValue = SelectValue>({ dropdownTitle, label, onChange, options, value, }: FilterMultiSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/components/filter/filter-select/FilterSelect.d.ts

@@ -1,7 +1,7 @@
 import { type BaseFilterProps } from "../useFilterWrapper";
 import { type SelectProps } from "../../select/Select";
 import type { SelectOption } from "../../../types/SelectOption";
-type CustomSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = Omit<SelectProps<O>, 'onChange' | 'value' | 'options'>;
+type CustomSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = Omit<SelectProps<T, O>, 'onChange' | 'value' | 'options'>;
 export type FilterSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = BaseFilterProps & {
     filterTextCharacterLimit?: number;
     options: O[];

package/components/select/CountrySelect.d.ts

@@ -5,11 +5,11 @@ type CountrySelectType<T extends string> = {
     autoFocus?: SelectProps['autoFocus'];
     countryOptions: CountryOption<T>[];
     label?: string;
-    onChange: SelectProps<CountryOption<T>>['onChange'];
+    onChange: SelectProps<T, CountryOption<T>>['onChange'];
     placeholder?: string;
     value: T | null;
     filter?: (country: CountryOption<T>) => boolean;
 };
-export type CountrySelectProps<T extends string = string> = CountrySelectType<T> & BaseProps & Omit<SelectProps<CountryOption<T>>, keyof CountrySelectType<T> | 'options'>;
+export type CountrySelectProps<T extends string = string> = CountrySelectType<T> & BaseProps & Omit<SelectProps<T, CountryOption<T>>, keyof CountrySelectType<T> | 'options'>;
 export declare const CountrySelect: <T extends string>({ autoFocus, countryOptions, filter, label, onChange, placeholder, value, ...props }: CountrySelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/select/Select.d.ts

@@ -2,10 +2,10 @@ import type { ReactNode } from 'react';
 import type { ActionMeta, GroupBase, Props, SelectComponentsConfig, StylesConfig } from 'react-select';
 import type { HelpTextProps } from "../help-text/HelpText";
 import type { BaseProps } from "../../types/BaseProps";
-import type { SelectOption } from "../../types/SelectOption";
+import type { SelectOption, SelectValue } from "../../types/SelectOption";
 import type { Size } from "../../types/Size";
 type RequiredProps = 'options' | 'value';
-export type SelectProps<Option extends SelectOption = SelectOption, IsMulti extends false = false, Group extends GroupBase<Option> = GroupBase<Option>> = BaseProps & {
+export type SelectProps<V extends SelectValue = SelectValue, Option = SelectOption<V>, IsMulti extends false = false, Group extends GroupBase<Option> = GroupBase<Option>> = BaseProps & {
     /** Close the select dropdown menu when scrolling outside of menu to prevent graphical jank */
     closeOnOutsideScroll?: boolean;
     components?: SelectComponentsConfig<Option, IsMulti, Group>;
@@ -22,12 +22,12 @@ export type SelectProps<Option extends SelectOption = SelectOption, IsMulti exte
     /**
      * An easier way to override the option rendering without having to use the typical component props and recreating all the styles.
      */
-    customOption?: (value: Option['value']) => ReactNode;
+    customOption?: (value: V) => ReactNode;
     /**
      * @example
      * onChange={changed => setExampleValue(changed?.value || null)}
      */
     onChange: (changed: Option | null, actionMeta: ActionMeta<Option>) => void;
 } & Omit<Props<Option, IsMulti, Group>, 'isMulti' | RequiredProps> & Required<Pick<Props<Option, IsMulti, Group>, RequiredProps>> & HelpTextProps;
-export declare const Select: <Option extends SelectOption, Group extends GroupBase<Option> = GroupBase<Option>>({ isClearable, label, value, ...props }: SelectProps<Option, false, Group>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <V extends SelectValue, Option extends SelectOption<V>, Group extends GroupBase<Option> = GroupBase<Option>>({ isClearable, label, value, ...props }: SelectProps<V, Option, false, Group>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/toggle/Toggle.d.ts

@@ -1,8 +1,18 @@
-import type { SelectOption } from "../../types/SelectOption";
-export type ToggleProps<TValue extends string | number = string> = {
-    className?: string;
+import type { BaseProps } from "../../types/BaseProps";
+import type { SelectOption, SelectValue } from "../../types/SelectOption";
+import type { Size } from "../../types/Size";
+export type ToggleProps<TValue extends SelectValue = SelectValue> = BaseProps & {
+    /**
+     * If true, the toggle will take up the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     options: SelectOption<TValue>[];
+    /**
+     * @default 'sm'
+     */
+    size?: Size;
     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 SelectValue>({ className, fullWidth, onChange, options, size, 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 _(e){return e&&e.__esModule?e:{default:e}}var d=_(l),t="Amino_Toggle-module__shrinkWrapper--osh3J",a="Amino_Toggle-module__wrapper--NF4v5",p="Amino_Toggle-module__selectedSlider--WsUDo",u="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}.Amino_Toggle-module__shrinkWrapper--osh3J.sm .Amino_Toggle-module__optionWrapper--0wrNp{padding:6px 12px}.Amino_Toggle-module__shrinkWrapper--osh3J.md .Amino_Toggle-module__optionWrapper--0wrNp{padding:10px 12px}.Amino_Toggle-module__shrinkWrapper--osh3J.lg .Amino_Toggle-module__optionWrapper--0wrNp{padding:14px}.Amino_Toggle-module__shrinkWrapper--osh3J.xl .Amino_Toggle-module__optionWrapper--0wrNp{padding:18px 16px}");exports.Toggle=function(l){var n=l.className,_=l.fullWidth,s=void 0!==_&&_,h=l.onChange,c=l.options,A=l.size,T=void 0===A?"sm":A,f=l.style,v=l.value,W=r.useRef(null),x=r.useRef(null),w=e.__read(r.useState({left:0,width:0}),2),N=w[0],k=w[1],b=e.__read(r.useState(!1),2),J=b[0],j=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=W.current)||void 0===e?void 0:e.getBoundingClientRect())||null,(null===(o=x.current)||void 0===o?void 0:o.getBoundingClientRect())||null);k(r)}),[v,T]),o.jsx("div",{className:d.default(n,t,s&&g,T),style:f,children:o.jsxs("div",{ref:W,className:a,children:[o.jsx(i.motion.div,{animate:{width:N.width,x:N.left},className:p,initial:!1,onAnimationComplete:function(){j(!0)},transition:{duration:J?.2:0}}),c.map((function(e){var r=e.value===v;return o.jsx("button",{ref:r?x:null,className:d.default([u,r&&m]),onClick:function(){return h(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.14",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/types/SelectOption.d.ts

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