@zonos/amino 5.5.30 → 5.5.32

package/components/filter/useFilterWrapper.d.ts

@@ -0,0 +1,154 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type BaseFilterProps = BaseProps & {
+    dropdownTitle: string;
+    label: string;
+};
+export type FilterApplyCallback = (setFilterText: (newFilterText: string) => void) => void;
+type UseFilterProps = {
+    initialFilterText?: string;
+    isActive: boolean;
+    onApply: FilterApplyCallback;
+    /**
+     * This is called in a use effect to allow for initial states from URL, needs to be memoized.
+     */
+    onApplyFilterText: FilterApplyCallback;
+    /**
+     * When the menu is closed without applying.
+     */
+    onClose: () => void;
+    onRemove: () => void;
+    setActive?: (active: boolean) => void;
+};
+export type FilterProps = BaseFilterProps & UseFilterProps;
+/**
+ * A custom hook that provides state management and behavior for filter components.
+ * It works with the FilterWrapper component to create consistent filtering experiences.
+ *
+ * The hook handles filter state, dropdown behavior, keyboard interactions, and filter application.
+ * It returns methods to manage filter state and a renderWrapper function to render the FilterWrapper component.
+ *
+ * @example Basic filter with select options
+ * ```tsx
+ * const [isFilterActive, setIsFilterActive] = useState(false);
+ * const [selectedOption, setSelectedOption] = useState<Option | null>(null);
+ *
+ * const {
+ *   renderWrapper,
+ *   setFilterText
+ * } = useFilterWrapper({
+ *   dropdownTitle: "Status",
+ *   isActive: isFilterActive,
+ *   label: "Status",
+ *   setActive: setIsFilterActive,
+ *   initialFilterText: "All statuses",
+ *   onApply: (setFilterText) => {
+ *     // Update filter text and apply the filter
+ *     setFilterText(selectedOption ? selectedOption.label : "All statuses");
+ *     applyFilter(selectedOption?.value);
+ *   },
+ *   onApplyFilterText: (setFilterText) => {
+ *     // Update text only (for URL-derived state)
+ *     setFilterText(selectedOption ? selectedOption.label : "All statuses");
+ *   },
+ *   onClose: () => {
+ *     // Handle dropdown close without applying
+ *   },
+ *   onRemove: () => {
+ *     // Clear filter when removed
+ *     setSelectedOption(null);
+ *     applyFilter(null);
+ *   }
+ * });
+ *
+ * // Use the renderWrapper function to create the filter UI
+ * const statusFilter = renderWrapper(
+ *   <FilterSelect
+ *     options={statusOptions}
+ *     value={selectedOption}
+ *     onChange={setSelectedOption}
+ *   />
+ * );
+ * ```
+ *
+ * @example Date range filter
+ * ```tsx
+ * const [isDateFilterActive, setIsDateFilterActive] = useState(false);
+ * const [startDate, setStartDate] = useState<Date | null>(null);
+ * const [endDate, setEndDate] = useState<Date | null>(null);
+ *
+ * const formatDateForDisplay = (date: Date) => {
+ *   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+ * };
+ *
+ * const {
+ *   renderWrapper
+ * } = useFilterWrapper({
+ *   dropdownTitle: "Date Range",
+ *   isActive: isDateFilterActive,
+ *   label: "Date",
+ *   setActive: setIsDateFilterActive,
+ *   initialFilterText: "All time",
+ *   onApply: (setFilterText) => {
+ *     if (startDate && endDate) {
+ *       const dateRangeText = `${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`;
+ *       setFilterText(dateRangeText);
+ *       applyDateRangeFilter(startDate, endDate);
+ *     }
+ *   },
+ *   onApplyFilterText: (setFilterText) => {
+ *     if (startDate && endDate) {
+ *       setFilterText(`${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`);
+ *     }
+ *   },
+ *   onClose: () => {
+ *     // Optional cleanup when closing without applying
+ *   },
+ *   onRemove: () => {
+ *     setStartDate(null);
+ *     setEndDate(null);
+ *     applyDateRangeFilter(null, null);
+ *   }
+ * });
+ *
+ * const dateFilter = renderWrapper(
+ *   <FilterDate
+ *     startDate={startDate}
+ *     endDate={endDate}
+ *     onStartDateChange={setStartDate}
+ *     onEndDateChange={setEndDate}
+ *   />
+ * );
+ * ```
+ *
+ * @example Multiple filters in a filter bar
+ * ```tsx
+ * // First, create your individual filters using useFilterWrapper
+ * const statusFilter =  useFilterWrapper implementation ;
+ * const dateFilter =  useFilterWrapper implementation ;
+ * const searchFilter =  useFilterWrapper implementation ;
+ *
+ * // Then render them together in a filter bar
+ * return (
+ *   <div style={{ display: 'flex', gap: '8px' }}>
+ *     {statusFilter}
+ *     {dateFilter}
+ *     {searchFilter}
+ *
+ *     <Button
+ *       onClick={resetAllFilters}
+ *       variant="ghost"
+ *       size="sm"
+ *     >
+ *       Clear All
+ *     </Button>
+ *   </div>
+ * );
+ * ```
+ */
+export declare const useFilterWrapper: ({ className, dropdownTitle, initialFilterText, isActive, label, onApply, onApplyFilterText, onClose, onRemove, setActive, style, }: FilterProps) => {
+    handleApplyFilter: () => void;
+    renderWrapper: (control: ReactNode) => import("react").JSX.Element;
+    setFilterText: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+export {};

package/components/filter/useFilterWrapper.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),r=require("react"),n=require("./FilterWrapper.js");require("clsx"),require("../button/Button.js"),require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../../style-inject.es-d4ddeae4.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("../text/Text.js"),require("../../icons/ChevronDownIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/MinusCircleDuotoneIcon.js"),require("../../icons/PlusCircleDuotoneIcon.js"),require("../../global.module-569e4fd5.js");exports.useFilterWrapper=function(t){var i=t.className,o=t.dropdownTitle,u=t.initialFilterText,l=void 0===u?"Filter":u,s=t.isActive,c=t.label,a=t.onApply,p=t.onApplyFilterText,d=t.onClose,v=t.onRemove,f=t.setActive,q=t.style,j=e.__read(r.useState(!1),2),m=j[0],y=j[1],b=e.__read(r.useState(l),2),E=b[0],w=b[1],F=r.useRef(null),T=function(){a(w),y(!1)},g=function(e){"Escape"===e.key&&(y(!1),d()),"Enter"===e.key&&T()},h=r.useCallback((function(e){var r,n=e.target;n instanceof Element&&!(null===(r=F.current)||void 0===r?void 0:r.contains(n))&&m&&(y(!1),d())}),[m,d]);r.useEffect((function(){var e,r,n;return null===(e=document.querySelector("body"))||void 0===e||e.addEventListener("mousedown",h),(null===(r=F.current)||void 0===r?void 0:r.contains(document.activeElement))||null===(n=F.current)||void 0===n||n.focus(),function(){var e;null===(e=document.querySelector("body"))||void 0===e||e.removeEventListener("mousedown",h)}}),[m,h]),r.useEffect((function(){var e;if(m){var r=null===(e=F.current)||void 0===e?void 0:e.querySelector("input");null==r||r.focus()}}),[m]);var x=function(e){e.stopPropagation(),y(!0)},A=function(){s?(null==f||f(!1),v()):y(!0)};r.useEffect((function(){s&&p(w)}),[s,p]);return{handleApplyFilter:T,renderWrapper:function(e){return React.createElement(n.FilterWrapper,{active:s,className:i,dropDownOpen:m,dropdownRef:F,dropdownTitle:o,filterText:E,handleApply:T,handleKeyDown:g,handleOpenDropdown:x,handleToggle:A,hasFilter:s,label:c,style:q},e)},setFilterText:w}};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),r=require("react"),n=require("./FilterWrapper.js"),t=require("react/jsx-runtime");require("clsx"),require("../button/Button.js"),require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../../style-inject.es-d4ddeae4.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("../text/Text.js"),require("../../icons/ChevronDownIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/MinusCircleDuotoneIcon.js"),require("../../icons/PlusCircleDuotoneIcon.js"),require("../../global.module-569e4fd5.js");exports.useFilterWrapper=function(i){var o=i.className,u=i.dropdownTitle,l=i.initialFilterText,s=void 0===l?"Filter":l,c=i.isActive,a=i.label,d=i.onApply,p=i.onApplyFilterText,v=i.onClose,q=i.onRemove,f=i.setActive,j=i.style,m=e.__read(r.useState(!1),2),y=m[0],b=m[1],x=e.__read(r.useState(s),2),h=x[0],w=x[1],E=r.useRef(null),F=function(){d(w),b(!1)},T=function(e){"Escape"===e.key&&(b(!1),v()),"Enter"===e.key&&F()},g=r.useCallback((function(e){var r,n=e.target;n instanceof Element&&!(null===(r=E.current)||void 0===r?void 0:r.contains(n))&&y&&(b(!1),v())}),[y,v]);r.useEffect((function(){var e,r,n;return null===(e=document.querySelector("body"))||void 0===e||e.addEventListener("mousedown",g),(null===(r=E.current)||void 0===r?void 0:r.contains(document.activeElement))||null===(n=E.current)||void 0===n||n.focus(),function(){var e;null===(e=document.querySelector("body"))||void 0===e||e.removeEventListener("mousedown",g)}}),[y,g]),r.useEffect((function(){var e;if(y){var r=null===(e=E.current)||void 0===e?void 0:e.querySelector("input");null==r||r.focus()}}),[y]);var A=function(e){e.stopPropagation(),b(!0)},_=function(){c?(null==f||f(!1),q()):b(!0)};r.useEffect((function(){c&&p(w)}),[c,p]);return{handleApplyFilter:F,renderWrapper:function(e){return t.jsx(n.FilterWrapper,{active:c,className:o,dropDownOpen:y,dropdownRef:E,dropdownTitle:u,filterText:h,handleApply:F,handleKeyDown:T,handleOpenDropdown:A,handleToggle:_,hasFilter:c,label:a,style:j,children:e})},setFilterText:w}};

package/components/flex/Flex.d.ts

@@ -0,0 +1,108 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type FlexProps = BaseProps & HTMLAttributes<HTMLDivElement> & {
+    /**
+     * @default 'stretch'
+     */
+    alignItems?: CSSProperties['alignItems'];
+    children: ReactNode;
+    /**
+     * @default 'initial'
+     * @description This is a shorthand for flex-grow, flex-shrink, and flex-basis.
+     */
+    childrenFlex?: 'auto' | '1 0' | '0 1' | 'initial' | 'inherit' | 'unset' | (string & {
+        _?: never;
+    });
+    /**
+     * @default 'row'
+     */
+    flexDirection?: CSSProperties['flexDirection'];
+    flexWrap?: CSSProperties['flexWrap'];
+    /**
+     * @default false
+     */
+    fullHeight?: boolean;
+    /**
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * @default 'flex-start'
+     */
+    justifyContent?: CSSProperties['justifyContent'];
+    /**
+     * @default 0
+     */
+    padding?: number;
+};
+/**
+ * Flex component is a layout utility that provides flexible box layouts with
+ * configurable alignment, direction, spacing, and other flexbox properties.
+ *
+ * @example Basic usage - row layout (default)
+ * <Flex>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ *
+ * @example Column layout
+ * <Flex flexDirection="column">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ *
+ * @example Custom gap between items
+ * <Flex gap={16}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ *
+ * @example Centered items (horizontally and vertically)
+ * <Flex justifyContent="center" alignItems="center">
+ *   <div>Centered Content</div>
+ * </Flex>
+ *
+ * @example Space between items
+ * <Flex justifyContent="space-between">
+ *   <div>Left</div>
+ *   <div>Middle</div>
+ *   <div>Right</div>
+ * </Flex>
+ *
+ * @example Full width container
+ * <Flex fullWidth>
+ *   <div>Takes full width of parent</div>
+ * </Flex>
+ *
+ * @example Full height container
+ * <Flex fullHeight>
+ *   <div>Takes full height of parent</div>
+ * </Flex>
+ *
+ * @example With wrap for responsive layouts
+ * <Flex flexWrap="wrap">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ *   <div>Item 4</div>
+ * </Flex>
+ *
+ * @example Setting flex properties for children
+ * <Flex childrenFlex="1 0">
+ *   <div>Equal width</div>
+ *   <div>Equal width</div>
+ * </Flex>
+ *
+ * @example With padding
+ * <Flex padding={16}>
+ *   <div>Content with padding</div>
+ * </Flex>
+ */
+export declare const Flex: ({ alignItems, children, childrenFlex, className, flexDirection, flexWrap, fullHeight, fullWidth, gap, justifyContent, padding, style, ...rest }: FlexProps) => import("react").JSX.Element;

package/components/flex/Flex.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),l=require("../../tslib.es6-8c21e256.js"),i=require("clsx"),r=require("../../style-inject.es-d4ddeae4.js");function a(e){return e&&e.__esModule?e:{default:e}}var n=a(i),t="Amino_Flex-module__flexWrapper--RLOkf",o="Amino_Flex-module__fullWidth--qdBi7",p="Amino_Flex-module__fullHeight--h1TZi";r.styleInject(".Amino_Flex-module__flexWrapper--RLOkf{align-items:var(--amino-flex-wrapper-align-items);display:flex;flex-direction:var(--amino-flex-wrapper-flex-direction);flex-wrap:var(--amino-flex-wrapper-flex-wrap);gap:var(--amino-flex-wrapper-gap);justify-content:var(--amino-flex-wrapper-justify-content);padding:var(--amino-flex-wrapper-padding)}.Amino_Flex-module__flexWrapper--RLOkf>*{flex:var(--amino-flex-wrapper-flex-children)}.Amino_Flex-module__flexWrapper--RLOkf.Amino_Flex-module__fullWidth--qdBi7{width:100%}.Amino_Flex-module__flexWrapper--RLOkf.Amino_Flex-module__fullHeight--h1TZi{height:100%}");exports.Flex=function(i){var r=i.alignItems,a=void 0===r?"stretch":r,f=i.children,x=i.childrenFlex,d=void 0===x?"initial":x,s=i.className,m=i.flexDirection,_=void 0===m?"row":m,u=i.flexWrap,c=void 0===u?"nowrap":u,g=i.fullHeight,h=void 0!==g&&g,v=i.fullWidth,w=void 0!==v&&v,F=i.gap,y=void 0===F?8:F,W=i.justifyContent,j=void 0===W?"flex-start":W,A=i.padding,q=void 0===A?0:A,R=i.style,k=l.__rest(i,["alignItems","children","childrenFlex","className","flexDirection","flexWrap","fullHeight","fullWidth","gap","justifyContent","padding","style"]);return React.createElement("div",e._extends({},k,{className:n.default(s,t,w&&o,h&&p),style:l.__assign(l.__assign({},R),{"--amino-flex-wrapper-align-items":a,"--amino-flex-wrapper-flex-children":d,"--amino-flex-wrapper-flex-direction":_,"--amino-flex-wrapper-flex-wrap":c,"--amino-flex-wrapper-gap":"".concat(y,"px"),"--amino-flex-wrapper-justify-content":j,"--amino-flex-wrapper-padding":"".concat(q,"px")})}),f)};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),l=require("../../tslib.es6-8c21e256.js"),i=require("clsx"),r=require("../../style-inject.es-d4ddeae4.js"),a=require("react/jsx-runtime");function n(e){return e&&e.__esModule?e:{default:e}}var t=n(i),o="Amino_Flex-module__flexWrapper--RLOkf",p="Amino_Flex-module__fullWidth--qdBi7",f="Amino_Flex-module__fullHeight--h1TZi";r.styleInject(".Amino_Flex-module__flexWrapper--RLOkf{align-items:var(--amino-flex-wrapper-align-items);display:flex;flex-direction:var(--amino-flex-wrapper-flex-direction);flex-wrap:var(--amino-flex-wrapper-flex-wrap);gap:var(--amino-flex-wrapper-gap);justify-content:var(--amino-flex-wrapper-justify-content);padding:var(--amino-flex-wrapper-padding)}.Amino_Flex-module__flexWrapper--RLOkf>*{flex:var(--amino-flex-wrapper-flex-children)}.Amino_Flex-module__flexWrapper--RLOkf.Amino_Flex-module__fullWidth--qdBi7{width:100%}.Amino_Flex-module__flexWrapper--RLOkf.Amino_Flex-module__fullHeight--h1TZi{height:100%}");exports.Flex=function(i){var r=i.alignItems,n=void 0===r?"stretch":r,d=i.children,x=i.childrenFlex,s=void 0===x?"initial":x,m=i.className,u=i.flexDirection,_=void 0===u?"row":u,c=i.flexWrap,g=void 0===c?"nowrap":c,h=i.fullHeight,v=void 0!==h&&h,w=i.fullWidth,j=void 0!==w&&w,F=i.gap,y=void 0===F?8:F,W=i.justifyContent,A=void 0===W?"flex-start":W,q=i.padding,k=void 0===q?0:q,H=i.style,L=l.__rest(i,["alignItems","children","childrenFlex","className","flexDirection","flexWrap","fullHeight","fullWidth","gap","justifyContent","padding","style"]);return a.jsx("div",e._objectSpread2(e._objectSpread2({},L),{},{className:t.default(m,o,j&&p,v&&f),style:l.__assign(l.__assign({},H),{"--amino-flex-wrapper-align-items":n,"--amino-flex-wrapper-flex-children":s,"--amino-flex-wrapper-flex-direction":_,"--amino-flex-wrapper-flex-wrap":g,"--amino-flex-wrapper-gap":"".concat(y,"px"),"--amino-flex-wrapper-justify-content":A,"--amino-flex-wrapper-padding":"".concat(k,"px")}),children:d}))};

package/components/glow/GlowWrapper.d.ts

@@ -0,0 +1,84 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+import { type Product } from "../../utils/getProductDetails";
+type Props = BaseProps & {
+    /**
+     * Content to be wrapped with the glowing effect
+     */
+    children?: ReactNode;
+    /**
+     * Custom color for the glow effect
+     * @default 'gray600'
+     */
+    glowColor?: Color;
+    /**
+     * Product name to use for product-specific colors
+     * When specified, overrides glowColor with the product's gradient
+     */
+    product?: Product;
+    /**
+     * Border radius of the glowing wrapper in pixels
+     * @default 6
+     */
+    radius?: number;
+    /**
+     * Size of glow border in pixels
+     * @default 1
+     */
+    size?: number;
+};
+/**
+ * GlowWrapper component adds an interactive glowing border effect to its children.
+ * The glow follows the user's mouse movement, creating a dynamic highlight effect.
+ * It can use either a custom color or product-specific gradients.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <GlowWrapper>
+ *   <Card label="Content">Card with glow effect</Card>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example With custom color
+ * ```tsx
+ * <GlowWrapper glowColor="blue500" size={2}>
+ *   <Card label="Blue Glow">Card with blue glow</Card>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example With product-specific colors
+ * ```tsx
+ * <GlowWrapper product="checkout">
+ *   <Card label="Checkout">Checkout product card</Card>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example Custom radius
+ * ```tsx
+ * <GlowWrapper radius={12} size={2}>
+ *   <div className="custom-content">
+ *     Content with larger radius glow
+ *   </div>
+ * </GlowWrapper>
+ * ```
+ *
+ * @example Multiple items with product-specific glows
+ * ```tsx
+ * <div className="products-grid">
+ *   <GlowWrapper product="classify">
+ *     <ProductCard product="classify" />
+ *   </GlowWrapper>
+ *
+ *   <GlowWrapper product="clear">
+ *     <ProductCard product="clear" />
+ *   </GlowWrapper>
+ *
+ *   <GlowWrapper product="dashboard">
+ *     <ProductCard product="dashboard" />
+ *   </GlowWrapper>
+ * </div>
+ * ```
+ */
+export declare const GlowWrapper: ({ children, className, glowColor, product, radius, size, style, }: Props) => import("react").JSX.Element;
+export {};

package/components/glow/GlowWrapper.js

@@ -1 +1 @@
-"use strict";var o=require("../../tslib.es6-8c21e256.js"),r=require("react"),e=require("clsx"),i=require("../../utils/getAminoColor.js"),t=require("../../utils/getProductDetails.js"),s=require("../../style-inject.es-d4ddeae4.js");function n(o){return o&&o.__esModule?o:{default:o}}require("../../styles/constants/theme.js"),require("../../icons/custom/products/CheckoutColorIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/custom/products/ClassifyColorIcon.js"),require("../../icons/custom/products/ClearColorIcon.js"),require("../../icons/custom/products/CollectColorIcon.js"),require("../../icons/custom/products/CounterCompanionColorIcon.js"),require("../../icons/custom/products/DashboardColorIcon.js"),require("../../icons/custom/products/HelloColorIcon.js"),require("../../icons/custom/products/InclusivePricingColorIcon.js"),require("../../icons/custom/products/LandedCostColorIcon.js"),require("../../icons/custom/products/PrepayColorIcon.js"),require("../../icons/custom/products/RateColorIcon.js"),require("../../icons/custom/products/RestrictColorIcon.js"),require("../../icons/custom/products/ScreenColorIcon.js"),require("../../icons/custom/products/TaxColorIcon.js");var c=n(e),a="Amino_GlowWrapper-module__wrapper--xvL8c";s.styleInject('.Amino_GlowWrapper-module__wrapper--xvL8c{border-radius:var(--amino-glow-wrapper-border-radius);box-shadow:inset 0 0 1px 1px var(--amino-gray-200);overflow:hidden;padding:var(--amino-glow-wrapper-padding);position:relative;z-index:1}.Amino_GlowWrapper-module__wrapper--xvL8c:after{background:var(--amino-glow-wrapper-background);content:"";filter:blur(20px);height:min(100%,400px);left:calc(var(--amino-glow-wrapper-x, 0)*1px - min(50%, 200px));opacity:0;position:absolute;top:calc(var(--amino-glow-wrapper-y, 0)*1px - min(50%, 200px));transition:opacity .5s;width:min(100%,400px);z-index:-1}.Amino_GlowWrapper-module__wrapper--xvL8c:hover:after{opacity:1}');exports.GlowWrapper=function(e){var s=e.children,n=e.className,u=e.glowColor,l=void 0===u?"gray600":u,p=e.product,d=e.radius,m=void 0===d?6:d,w=e.size,g=void 0===w?1:w,v=e.style,C=r.useRef(null),x=r.useMemo((function(){return p?t.getProductDetails({product:p}).gradient:null}),[p]);return r.useEffect((function(){var o=C.current,r=function(r){if(o){var e=o.getBoundingClientRect(),i=e.x,t=e.y;o.style.setProperty("--amino-glow-wrapper-x",(r.clientX-i).toString()),o.style.setProperty("--amino-glow-wrapper-y",(r.clientY-t).toString())}};return null==o||o.addEventListener("mousemove",r),function(){null==o||o.removeEventListener("mousemove",r)}}),[]),React.createElement("div",{ref:C,className:c.default(a,n),style:o.__assign(o.__assign({},v),{"--amino-glow-wrapper-background":x||"radial-gradient(circle, ".concat(i.getAminoColor(l)," 0%, white 70%)"),"--amino-glow-wrapper-border-radius":"".concat(m,"px"),"--amino-glow-wrapper-padding":"".concat(g,"px")})},s)};
+"use strict";var r=require("../../tslib.es6-8c21e256.js"),o=require("react"),e=require("clsx"),i=require("../../utils/getAminoColor.js"),s=require("../../utils/getProductDetails.js"),t=require("../../style-inject.es-d4ddeae4.js"),n=require("react/jsx-runtime");function c(r){return r&&r.__esModule?r:{default:r}}require("../../styles/constants/theme.js"),require("../../icons/custom/products/CheckoutColorIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/custom/products/ClassifyColorIcon.js"),require("../../icons/custom/products/ClearColorIcon.js"),require("../../icons/custom/products/CollectColorIcon.js"),require("../../icons/custom/products/CounterCompanionColorIcon.js"),require("../../icons/custom/products/DashboardColorIcon.js"),require("../../icons/custom/products/HelloColorIcon.js"),require("../../icons/custom/products/InclusivePricingColorIcon.js"),require("../../icons/custom/products/LandedCostColorIcon.js"),require("../../icons/custom/products/PrepayColorIcon.js"),require("../../icons/custom/products/RateColorIcon.js"),require("../../icons/custom/products/RestrictColorIcon.js"),require("../../icons/custom/products/ScreenColorIcon.js"),require("../../icons/custom/products/TaxColorIcon.js");var u=c(e),a="Amino_GlowWrapper-module__wrapper--xvL8c";t.styleInject('.Amino_GlowWrapper-module__wrapper--xvL8c{border-radius:var(--amino-glow-wrapper-border-radius);box-shadow:inset 0 0 1px 1px var(--amino-gray-200);overflow:hidden;padding:var(--amino-glow-wrapper-padding);position:relative;z-index:1}.Amino_GlowWrapper-module__wrapper--xvL8c:after{background:var(--amino-glow-wrapper-background);content:"";filter:blur(20px);height:min(100%,400px);left:calc(var(--amino-glow-wrapper-x, 0)*1px - min(50%, 200px));opacity:0;position:absolute;top:calc(var(--amino-glow-wrapper-y, 0)*1px - min(50%, 200px));transition:opacity .5s;width:min(100%,400px);z-index:-1}.Amino_GlowWrapper-module__wrapper--xvL8c:hover:after{opacity:1}');exports.GlowWrapper=function(e){var t=e.children,c=e.className,l=e.glowColor,p=void 0===l?"gray600":l,d=e.product,m=e.radius,w=void 0===m?6:m,g=e.size,v=void 0===g?1:g,x=e.style,C=o.useRef(null),j=o.useMemo((function(){return d?s.getProductDetails({product:d}).gradient:null}),[d]);return o.useEffect((function(){var r=C.current,o=function(o){if(r){var e=r.getBoundingClientRect(),i=e.x,s=e.y;r.style.setProperty("--amino-glow-wrapper-x",(o.clientX-i).toString()),r.style.setProperty("--amino-glow-wrapper-y",(o.clientY-s).toString())}};return null==r||r.addEventListener("mousemove",o),function(){null==r||r.removeEventListener("mousemove",o)}}),[]),n.jsx("div",{ref:C,className:u.default(a,c),style:r.__assign(r.__assign({},x),{"--amino-glow-wrapper-background":j||"radial-gradient(circle, ".concat(i.getAminoColor(p)," 0%, white 70%)"),"--amino-glow-wrapper-border-radius":"".concat(w,"px"),"--amino-glow-wrapper-padding":"".concat(v,"px")}),children:t})};

package/components/help-text/HelpText.d.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type HelpTextProps = BaseProps & {
+    /**
+     * Whether to display the help text in error state (red color)
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Content to display as help text
+     * Can be a string or ReactNode for custom formatting
+     */
+    helpText?: ReactNode;
+    /**
+     * Whether to remove the top margin from the component
+     * @default false
+     */
+    withoutMargin?: boolean;
+};
+/**
+ * HelpText component provides contextual assistance text, typically used
+ * below form inputs to show validation messages or helpful information.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   value={email}
+ *   onChange={handleEmailChange}
+ * />
+ * <HelpText helpText="We'll never share your email with anyone else." />
+ * ```
+ *
+ * @example Error state
+ * ```tsx
+ * <Input
+ *   label="Password"
+ *   type="password"
+ *   value={password}
+ *   onChange={handlePasswordChange}
+ *   error={!!passwordError}
+ * />
+ * <HelpText
+ *   error={!!passwordError}
+ *   helpText={passwordError || "Password must be at least 8 characters"}
+ * />
+ * ```
+ *
+ * @example Without margin
+ * ```tsx
+ * <Textarea
+ *   label="Description"
+ *   value={description}
+ *   onChange={handleDescriptionChange}
+ * />
+ * <HelpText
+ *   helpText="Maximum 200 characters"
+ *   withoutMargin
+ * />
+ * ```
+ *
+ * @example Custom ReactNode content
+ * ```tsx
+ * <Input
+ *   label="API Key"
+ *   value={apiKey}
+ *   onChange={handleApiKeyChange}
+ * />
+ * <HelpText
+ *   helpText={
+ *     <div className="custom-help-text">
+ *       <InfoIcon size={12} />
+ *       <span>Find your API key in your account settings</span>
+ *     </div>
+ *   }
+ * />
+ * ```
+ */
+export declare const HelpText: ({ className, error, helpText, style, withoutMargin, }: HelpTextProps) => import("react").JSX.Element | null;

package/components/help-text/HelpText.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),t=require("../text/Text.js"),l=require("../../style-inject.es-d4ddeae4.js");function r(e){return e&&e.__esModule?e:{default:e}}require("../../tslib.es6-8c21e256.js"),require("../../styles/constants/theme.js");var s=r(e),a="Amino_HelpText-module__styledHelpText--z3-rS";l.styleInject(".Amino_HelpText-module__styledHelpText--z3-rS{margin-top:var(--amino-space-8)}");exports.HelpText=function(e){var l=e.className,r=e.error,c=void 0!==r&&r,i=e.helpText,n=e.style,o=e.withoutMargin,u=void 0!==o&&o;return i?c&&"string"==typeof i?React.createElement("div",{className:s.default(l,!u&&a),style:n},React.createElement(t.Text,{color:"red600",type:"caption"},i)):"string"==typeof i?React.createElement("div",{className:s.default(l,!u&&a),style:n},React.createElement(t.Text,{type:"caption"},i)):React.createElement("div",{className:s.default(l,!u&&a),style:n},i):null};
+"use strict";var e=require("clsx"),t=require("../text/Text.js"),r=require("../../style-inject.es-d4ddeae4.js"),s=require("react/jsx-runtime");function l(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../../tslib.es6-8c21e256.js"),require("../../styles/constants/theme.js");var i=l(e),n="Amino_HelpText-module__styledHelpText--z3-rS";r.styleInject(".Amino_HelpText-module__styledHelpText--z3-rS{margin-top:var(--amino-space-8)}");exports.HelpText=function(e){var r=e.className,l=e.error,a=void 0!==l&&l,u=e.helpText,o=e.style,c=e.withoutMargin,d=void 0!==c&&c;return u?a&&"string"==typeof u?s.jsx("div",{className:i.default(r,!d&&n),style:o,children:s.jsx(t.Text,{color:"red600",type:"caption",children:u})}):"string"==typeof u?s.jsx("div",{className:i.default(r,!d&&n),style:o,children:s.jsx(t.Text,{type:"caption",children:u})}):s.jsx("div",{className:i.default(r,!d&&n),style:o,children:u}):null};

package/components/input/Input.d.ts

@@ -0,0 +1,112 @@
+import type { ChangeEventHandler, InputHTMLAttributes, MutableRefObject } from 'react';
+import { type HelpTextProps } from "../help-text/HelpText";
+import { type FloatLabelInputProps } from "./input-type/_FloatLabelInput";
+type InputType = {
+    /** Need to pass the ref here to preserve generics, as forwardRef doesn't allow it
+     * @link https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+     */
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+    /**
+     * @default false
+     */
+    noBorder?: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /** A value (in px) that will determine how wide the input is. If nothing is passed, it defaults to 100% */
+    width?: number;
+} & Omit<FloatLabelInputProps, 'onChange'> & HelpTextProps;
+export type InputProps = InputType & Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputType>;
+/**
+ * Input component that supports various input types with features like floating labels,
+ * prefixes, suffixes, and different states (error, disabled, etc.).
+ *
+ * @example Basic text input
+ * <Input
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Password input
+ * <Input
+ *   type="password"
+ *   label="Password"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Number input
+ * <Input
+ *   type="number"
+ *   label="Age"
+ *   onChange={e => setValue(e.target.valueAsNumber)}
+ *   value={value}
+ * />
+ *
+ * @example Date input
+ * <Input
+ *   type="date"
+ *   label="Birth Date"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With help text
+ * <Input
+ *   label="Email"
+ *   helpText="We'll never share your email"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With error state
+ * <Input
+ *   label="Username"
+ *   error={true}
+ *   helpText="Username is required"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With prefix icon
+ * <Input
+ *   label="Search"
+ *   prefix={<SearchIcon />}
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example With suffix
+ * <Input
+ *   label="Weight"
+ *   suffix="kg"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Value prefix (for partial content)
+ * <Input
+ *   label="Phone"
+ *   valuePrefix="+1"
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Disabled state
+ * <Input
+ *   label="Username"
+ *   disabled
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ *
+ * @example Required field
+ * <Input
+ *   label="Email"
+ *   required
+ *   onChange={e => setValue(e.target.value)}
+ *   value={value}
+ * />
+ */
+export declare const Input: ({ autoFocus, className, disabled, error, helpText, inputMode, inputRef, label, noBorder, onChange, onKeyDown, pattern, placeholder, prefix, readOnly, required, size, style, suffix, tabIndex, type, value, valuePrefix, width, ...props }: InputProps) => import("react").JSX.Element;
+export {};

package/components/input/Input.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),r=require("../../tslib.es6-8c21e256.js"),t=require("clsx"),n=require("../help-text/HelpText.js"),a=require("./input-type/_DateInput.js"),i=require("./input-type/_FloatLabelInput.js"),u=require("./input-type/_NumberInput.js"),o=require("./input-type/_PasswordInput.js"),s=require("./input-type/_TimeInput.js"),l=require("../../styles/constants/theme.js"),d=require("../../style-inject.es-d4ddeae4.js");function p(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("react"),require("@floating-ui/react"),require("../../icons/CalendarIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js"),require("../../icons/CaretDownIcon.js"),require("../../icons/CaretUpIcon.js"),require("../button/Button.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../icons/EyeIcon.js"),require("../../icons/EyeOffIcon.js"),require("../../icons/ClockIcon.js");var c=p(t),m="Amino_Input-module__fields--F18Vt",f="Amino_Input-module__aminoInputWrapper--KzFcE";d.styleInject(".Amino_Input-module__fields--F18Vt{border:var(--amino-border);border-radius:var(--amino-input-border-radius)}.Amino_Input-module__fields--F18Vt:hover{border:1px solid var(--amino-gray-300)}.Amino_Input-module__aminoInputWrapper--KzFcE{position:relative;width:var(--amino-input-width)}.Amino_Input-module__aminoInputWrapper--KzFcE>div{align-items:center;display:flex;flex-direction:row}.Amino_Input-module__aminoInputWrapper--KzFcE.disabled{opacity:var(--amino-opacity-disabled)}");exports.Input=function(t){var d=t.autoFocus,p=t.className,x=t.disabled,b=t.error,_=t.helpText,I=t.inputMode,q=t.inputRef,y=t.label,h=t.noBorder,v=void 0!==h&&h,j=t.onChange,w=t.onKeyDown,F=t.pattern,g=t.placeholder,E=t.prefix,R=t.readOnly,C=t.required,z=t.size,K=void 0===z?"xl":z,B=t.style,D=t.suffix,P=t.tabIndex,T=t.type,A=t.value,M=t.valuePrefix,O=t.width,N=r.__rest(t,["autoFocus","className","disabled","error","helpText","inputMode","inputRef","label","noBorder","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","size","style","suffix","tabIndex","type","value","valuePrefix","width"]);return React.createElement("div",{className:c.default(p,"amino-input-wrapper",x&&"disabled",f),style:r.__assign({"--amino-input-border-radius":function(){switch(K){case"sm":return"".concat(l.theme.radius6);case"lg":return"".concat(l.theme.radius10);case"xl":return"".concat(l.theme.radius12);default:return"".concat(l.theme.radius8)}}(),"--amino-input-width":O?"".concat(O,"px"):"100%"},B)},React.createElement("div",{className:c.default(!v&&m)},function(){switch(T){case"password":return React.createElement(o.PasswordInput,e._extends({ref:q,autoFocus:d,disabled:x,error:b,inputMode:I,label:y,noBorder:v,onChange:j,onKeyDown:w,pattern:F,placeholder:g,prefix:E,readOnly:R,required:C,size:K,suffix:D,tabIndex:P,value:A||"",valuePrefix:M},N));case"date":case"datetime-local":return React.createElement(a.DateInput,e._extends({ref:q,autoFocus:d,disabled:x,error:b,inputMode:I,label:y,noBorder:v,onChange:j,onKeyDown:w,pattern:F,placeholder:g,prefix:E,readOnly:R,required:C,size:K,suffix:D,tabIndex:P,type:T,value:A||"",valuePrefix:M},N));case"number":return React.createElement(u.NumberInput,e._extends({ref:q,autoFocus:d,disabled:x,error:b,inputMode:I,label:y,noBorder:v,onChange:j,onKeyDown:w,pattern:F,placeholder:g,prefix:E,readOnly:R,required:C,size:K,suffix:D,tabIndex:P,value:A||"",valuePrefix:M},N));case"time":return React.createElement(s.TimeInput,e._extends({ref:q,autoFocus:d,disabled:x,error:b,inputMode:I,label:y,noBorder:v,onChange:j,onKeyDown:w,pattern:F,placeholder:g,prefix:E,readOnly:R,required:C,size:K,suffix:D,tabIndex:P,value:A||"",valuePrefix:M},N));default:return React.createElement(i.FloatLabelInput,e._extends({ref:q,autoFocus:d,className:p,disabled:x,error:b,inputMode:I,label:y,noBorder:v,onChange:j,onKeyDown:w,pattern:F,placeholder:g,prefix:E,readOnly:R,required:C,size:K,suffix:D,tabIndex:P,type:T,value:A||"",valuePrefix:M},N))}}()),React.createElement(n.HelpText,{error:b,helpText:_}))};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),r=require("../../tslib.es6-8c21e256.js"),t=require("clsx"),i=require("../help-text/HelpText.js"),n=require("./input-type/_DateInput.js"),a=require("./input-type/_FloatLabelInput.js"),u=require("./input-type/_NumberInput.js"),o=require("./input-type/_PasswordInput.js"),s=require("./input-type/_TimeInput.js"),l=require("../../styles/constants/theme.js"),d=require("../../style-inject.es-d4ddeae4.js"),p=require("react/jsx-runtime");function c(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("react"),require("@floating-ui/react"),require("../../icons/CalendarIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js"),require("../../icons/CaretDownIcon.js"),require("../../icons/CaretUpIcon.js"),require("../button/Button.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../icons/EyeIcon.js"),require("../../icons/EyeOffIcon.js"),require("../../icons/ClockIcon.js");var f=c(t),x="Amino_Input-module__fields--F18Vt",m="Amino_Input-module__aminoInputWrapper--KzFcE";d.styleInject(".Amino_Input-module__fields--F18Vt{border:var(--amino-border);border-radius:var(--amino-input-border-radius)}.Amino_Input-module__fields--F18Vt:hover{border:1px solid var(--amino-gray-300)}.Amino_Input-module__aminoInputWrapper--KzFcE{position:relative;width:var(--amino-input-width)}.Amino_Input-module__aminoInputWrapper--KzFcE>div{align-items:center;display:flex;flex-direction:row}.Amino_Input-module__aminoInputWrapper--KzFcE.disabled{opacity:var(--amino-opacity-disabled)}");exports.Input=function(t){var d=t.autoFocus,c=t.className,b=t.disabled,j=t.error,_=t.helpText,q=t.inputMode,I=t.inputRef,y=t.label,h=t.noBorder,v=void 0!==h&&h,w=t.onChange,F=t.onKeyDown,g=t.pattern,C=t.placeholder,z=t.prefix,K=t.readOnly,B=t.required,D=t.size,P=void 0===D?"xl":D,T=t.style,A=t.suffix,M=t.tabIndex,O=t.type,N=t.value,E=t.valuePrefix,S=t.width,R=r.__rest(t,["autoFocus","className","disabled","error","helpText","inputMode","inputRef","label","noBorder","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","size","style","suffix","tabIndex","type","value","valuePrefix","width"]);return p.jsxs("div",{className:f.default(c,"amino-input-wrapper",b&&"disabled",m),style:r.__assign({"--amino-input-border-radius":function(){switch(P){case"sm":return"".concat(l.theme.radius6);case"lg":return"".concat(l.theme.radius10);case"xl":return"".concat(l.theme.radius12);default:return"".concat(l.theme.radius8)}}(),"--amino-input-width":S?"".concat(S,"px"):"100%"},T),children:[p.jsx("div",{className:f.default(!v&&x),children:function(){switch(O){case"password":return p.jsx(o.PasswordInput,e._objectSpread2({ref:I,autoFocus:d,disabled:b,error:j,inputMode:q,label:y,noBorder:v,onChange:w,onKeyDown:F,pattern:g,placeholder:C,prefix:z,readOnly:K,required:B,size:P,suffix:A,tabIndex:M,value:N||"",valuePrefix:E},R));case"date":case"datetime-local":return p.jsx(n.DateInput,e._objectSpread2({ref:I,autoFocus:d,disabled:b,error:j,inputMode:q,label:y,noBorder:v,onChange:w,onKeyDown:F,pattern:g,placeholder:C,prefix:z,readOnly:K,required:B,size:P,suffix:A,tabIndex:M,type:O,value:N||"",valuePrefix:E},R));case"number":return p.jsx(u.NumberInput,e._objectSpread2({ref:I,autoFocus:d,disabled:b,error:j,inputMode:q,label:y,noBorder:v,onChange:w,onKeyDown:F,pattern:g,placeholder:C,prefix:z,readOnly:K,required:B,size:P,suffix:A,tabIndex:M,value:N||"",valuePrefix:E},R));case"time":return p.jsx(s.TimeInput,e._objectSpread2({ref:I,autoFocus:d,disabled:b,error:j,inputMode:q,label:y,noBorder:v,onChange:w,onKeyDown:F,pattern:g,placeholder:C,prefix:z,readOnly:K,required:B,size:P,suffix:A,tabIndex:M,value:N||"",valuePrefix:E},R));default:return p.jsx(a.FloatLabelInput,e._objectSpread2({ref:I,autoFocus:d,className:c,disabled:b,error:j,inputMode:q,label:y,noBorder:v,onChange:w,onKeyDown:F,pattern:g,placeholder:C,prefix:z,readOnly:K,required:B,size:P,suffix:A,tabIndex:M,type:O,value:N||"",valuePrefix:E},R))}}()}),p.jsx(i.HelpText,{error:j,helpText:_})]})};