@app-studio/components 0.10.17

package/dist/native/components/OTPInput/OTPInput/OTPInput.view.js

@@ -0,0 +1,191 @@
+import React, { useEffect, createContext } from 'react';
+import { Input, useTheme } from 'app-studio';
+import { FieldContainer } from '../../Input/FieldContainer/FieldContainer';
+import { FieldContent } from '../../Input/FieldContent/FieldContent';
+import { FieldLabel } from '../../Input/FieldLabel/FieldLabel';
+import { Horizontal } from 'app-studio';
+import { View } from 'app-studio';
+// Defines the React Context for managing the OTP input's internal state, including individual slot data, focus, and hover states. This context allows child components to consume and react to changes in the OTP input's state without prop drilling.
+export const OTPInputContext = createContext({ slots: [], isFocused: false, isHovering: false });
+const NOSCRIPT_CSS_FALLBACK = `
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+[data-input-otp] {
+  --nojs-bg: white !important;
+  --nojs-fg: black !important;
+  background-color: var(--nojs-bg) !important;
+  color: var(--nojs-fg) !important;
+  caret-color: var(--nojs-fg) !important;
+  letter-spacing: .25em !important;
+  text-align: center !important;
+  border: 1px solid var(--nojs-fg) !important;
+  border-radius: 4px !important;
+  width: 100% !important;
+}
+`;
+// Utility function designed to safely insert CSS rules into a given stylesheet. It includes error handling to prevent the application from crashing if a rule insertion fails, logging an error instead.
+function safeInsertRule(sheet, rule) {
+    try {
+        sheet.insertRule(rule);
+    }
+    catch {
+        console.error('input-otp could not insert CSS rule:', rule);
+    }
+}
+// Declares the main functional component `OTPInputView`, responsible for rendering the visual representation of the OTP input. It accepts extended props, including handlers for various input events and references to the underlying native input and container elements.
+const OTPInputView = ({ id, name, label, value = '', length = 6, onChange, onChangeText, onComplete, helperText, placeholder = '', shadow, views = {}, size = 'md', shape = 'rounded', variant = 'outline', gap = 8, type = 'text', error = false, isFocused = false, isHovered = false, isDisabled = false, isReadOnly = false, isAutoFocus = false, setValue, setIsFocused, setIsHovered, inputRef, containerRef, mirrorSelectionStart, mirrorSelectionEnd, setMirrorSelectionStart, setMirrorSelectionEnd, handlePaste, handleChange, handleFocus, handleBlur, handleKeyDown, handleKeyPress, secureTextEntry, isFirstColumn, stepValues, setInputRef, onBlur = () => { }, onClick = () => { }, onFocus = () => { }, onKeyPress, pattern, pasteTransformer, ...props }) => {
+    // Initializes the `useTheme` hook, providing access to the application's theme context for styling purposes.
+    useTheme();
+    // A computed variable that determines whether the input field's label should be displayed, based on the presence of the `label` prop.
+    const showLabel = !!label;
+    // Memoizes the context value for the `OTPInputContext` to optimize performance. It calculates the state of each individual OTP slot, including character, placeholder, active status, and fake caret visibility.
+    const contextValue = React.useMemo(() => {
+        return {
+            // Generates an array of slot objects, each representing a single digit position in the OTP input. This mapping iterates over the `length` prop and calculates specific properties for each slot.
+            slots: Array.from({ length }).map((_, slotIdx) => {
+                const isActive = isFocused &&
+                    mirrorSelectionStart !== null &&
+                    mirrorSelectionEnd !== null &&
+                    ((mirrorSelectionStart === mirrorSelectionEnd &&
+                        slotIdx === mirrorSelectionStart) ||
+                        (slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd));
+                // Extracts the character for the current slot from the input's `value` prop. If no character exists at the slot's index, it defaults to `null`.
+                const char = value[slotIdx] !== undefined ? value[slotIdx] : null;
+                const placeholderChar = value[0] !== undefined ? null : placeholder?.[slotIdx] ?? null;
+                return {
+                    char,
+                    placeholderChar,
+                    isActive,
+                    // Calculates if a fake blinking caret should be displayed for the current slot, which occurs when the slot is active (focused) and currently empty.
+                    hasFakeCaret: isActive && char === null,
+                };
+            }),
+            isFocused,
+            isHovering: !isDisabled && isHovered,
+        };
+    }, [
+        isFocused,
+        isHovered,
+        isDisabled,
+        length,
+        mirrorSelectionEnd,
+        mirrorSelectionStart,
+        placeholder,
+        value,
+    ]);
+    // An effect hook that manages the autofocus behavior. If `isAutoFocus` is true and `inputRef` is available, it programmatically focuses the native input element.
+    useEffect(() => {
+        if (isAutoFocus && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isAutoFocus, inputRef]);
+    // An effect hook responsible for dynamically injecting crucial CSS rules into the document's head on component mount. These rules handle visual aspects like blink animations for the caret, transparent autofill styles, and specific adjustments for iOS devices to ensure consistent appearance.
+    useEffect(() => {
+        if (!document.getElementById('input-otp-style')) {
+            const styleEl = document.createElement('style');
+            styleEl.id = 'input-otp-style';
+            document.head.appendChild(styleEl);
+            if (styleEl.sheet) {
+                const autofillStyles = 'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';
+                safeInsertRule(styleEl.sheet, `@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }`);
+                safeInsertRule(styleEl.sheet, '[data-input-otp]::selection { background: transparent !important; color: transparent !important; }');
+                safeInsertRule(styleEl.sheet, `[data-input-otp]:autofill { ${autofillStyles} }`);
+                safeInsertRule(styleEl.sheet, `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`);
+                safeInsertRule(styleEl.sheet, `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`);
+                safeInsertRule(styleEl.sheet, `[data-input-otp] + * { pointer-events: all !important; }`);
+            }
+        }
+    }, []);
+    // A helper function that renders the visual grid of OTP input slots. It maps over the `contextValue.slots` to create a `FieldContent` component for each slot, displaying the character or placeholder and handling interactive states.
+    const renderSlots = () => {
+        return (<Horizontal gap={gap} width="100%" justifyContent="center" minHeight={size === 'xs'
+                ? '32px'
+                : size === 'sm'
+                    ? '36px'
+                    : size === 'md'
+                        ? '40px'
+                        : size === 'lg'
+                            ? '48px'
+                            : '56px'} {...views.container}>
+        {contextValue.slots.map((slot, index) => (<FieldContent key={`${id || name}-${index}`} size={size} error={error} shape={shape} views={views} variant={variant} value={slot.char || ''} color={'theme-primary'} isHovered={isHovered} isDisabled={isDisabled} isReadOnly={isReadOnly} isFocused={slot.isActive} showLabel={false} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} justifyContent="center" alignItems="center" width="100%" position="relative" height={size === 'xs'
+                    ? '32px'
+                    : size === 'sm'
+                        ? '36px'
+                        : size === 'md'
+                            ? '40px'
+                            : size === 'lg'
+                                ? '48px'
+                                : '56px'} {...views.container}>
+            {slot.char ? (<View textAlign="center" fontSize={size === 'xs'
+                        ? '14px'
+                        : size === 'sm'
+                            ? '16px'
+                            : size === 'md'
+                                ? '18px'
+                                : size === 'lg'
+                                    ? '20px'
+                                    : '24px'} fontWeight="medium" {...views.text}>
+                {type === 'password' ? '•' : slot.char}
+              </View>) : slot.placeholderChar ? (<View textAlign="center" fontSize={size === 'xs'
+                        ? '14px'
+                        : size === 'sm'
+                            ? '16px'
+                            : size === 'md'
+                                ? '18px'
+                                : size === 'lg'
+                                    ? '20px'
+                                    : '24px'} color="color-gray-400" opacity={0.5} {...views.text}>
+                {slot.placeholderChar}
+              </View>) : null}
+            {slot.hasFakeCaret && (<View position="absolute" width="2px" height="60%" backgroundColor="theme-primary" animation="blink 1s step-start infinite" style={{
+                        animationName: 'blink',
+                        animationDuration: '1s',
+                        animationIterationCount: 'infinite',
+                        animationTimingFunction: 'step-start',
+                    }}/>)}
+          </FieldContent>))}
+      </Horizontal>);
+    };
+    const inputStyle = {
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        textAlign: 'center',
+        opacity: '1',
+        color: 'transparent',
+        pointerEvents: 'all',
+        background: 'transparent',
+        caretColor: 'transparent',
+        border: '0 solid transparent',
+        outline: '0 solid transparent',
+        boxShadow: 'none',
+        letterSpacing: '-.5em',
+        fontSize: 'var(--root-height)',
+        fontFamily: 'monospace',
+        fontVariantNumeric: 'tabular-nums',
+    };
+    return (<>
+      <noscript>
+        <style>{NOSCRIPT_CSS_FALLBACK}</style>
+      </noscript>
+      <FieldContainer helperText={helperText} error={error} views={views} {...props}>
+        {showLabel && (<FieldLabel htmlFor={id} color={'theme-primary'} error={error} {...views.label}>
+            {label}
+          </FieldLabel>)}
+        <View ref={containerRef} data-input-otp-container position="relative" cursor={isDisabled ? 'default' : 'text'} userSelect="none" pointerEvents="none">
+          <OTPInputContext.Provider value={contextValue}>
+            {renderSlots()}
+          </OTPInputContext.Provider>
+          <View position="absolute" inset={0} pointerEvents="none">
+            <Input ref={(ref) => setInputRef(ref)} data-input-otp data-input-otp-placeholder-shown={value.length === 0 || undefined} data-input-otp-mss={mirrorSelectionStart} data-input-otp-mse={mirrorSelectionEnd} id={id || name} name={name} type={type === 'password' ? 'password' : 'text'} inputMode={type !== 'password' ? 'numeric' : undefined} pattern="[0-9]*" maxLength={length} readOnly={isReadOnly} disabled={isDisabled} placeholder={placeholder} value={value} onChange={handleChange} onKeyDown={handleKeyDown} onPaste={handlePaste} onFocus={handleFocus} onBlur={handleBlur} onClick={onClick} onMouseOver={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} autoComplete="one-time-code" aria-label={`OTP input with ${length} digits`} style={inputStyle} {...views.input}/>
+          </View>
+        </View>
+      </FieldContainer>
+    </>);
+};
+export default OTPInputView;
+//# sourceMappingURL=OTPInput.view.js.map

package/dist/native/components/OTPInput/OTPInput/OTPInput.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.view.js","sourceRoot":"","sources":["../../../../../src/components/OTPInput/OTPInput/OTPInput.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,uPAAuP;AACvP,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CASzC,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;AACvD,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;CAiB7B,CAAC;AACF,yMAAyM;AACzM,SAAS,cAAc,CAAC,KAAoB,EAAE,IAAY;IACxD,IAAI,CAAC;QACH,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,IAAI,CAAC,CAAC;IAC9D,CAAC;AACH,CAAC;AACD,4QAA4Q;AAC5Q,MAAM,YAAY,GAiBd,CAAC,EACH,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,CAAC,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,MAAM,EACN,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,SAAS,EACnB,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,MAAM,EACb,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,WAAW,EACX,MAAM,GAAG,GAAG,EAAE,GAAE,CAAC,EACjB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,6GAA6G;IAC7G,QAAQ,EAAE,CAAC;IACX,sIAAsI;IACtI,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC;IAC1B,iNAAiN;IACjN,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,iMAAiM;YACjM,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE;gBAC/C,MAAM,QAAQ,GACZ,SAAS;oBACT,oBAAoB,KAAK,IAAI;oBAC7B,kBAAkB,KAAK,IAAI;oBAC3B,CAAC,CAAC,oBAAoB,KAAK,kBAAkB;wBAC3C,OAAO,KAAK,oBAAoB,CAAC;wBACjC,CAAC,OAAO,IAAI,oBAAoB,IAAI,OAAO,GAAG,kBAAkB,CAAC,CAAC,CAAC;gBACvE,gJAAgJ;gBAChJ,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;gBAClE,MAAM,eAAe,GACnB,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;gBACjE,OAAO;oBACL,IAAI;oBACJ,eAAe;oBACf,QAAQ;oBACR,oJAAoJ;oBACpJ,YAAY,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI;iBACxC,CAAC;YACJ,CAAC,CAAC;YACF,SAAS;YACT,UAAU,EAAE,CAAC,UAAU,IAAI,SAAS;SACrC,CAAC;IACJ,CAAC,EAAE;QACD,SAAS;QACT,SAAS;QACT,UAAU;QACV,MAAM;QACN,kBAAkB;QAClB,oBAAoB;QACpB,WAAW;QACX,KAAK;KACN,CAAC,CAAC;IACH,kKAAkK;IAClK,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACpC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC5B,oSAAoS;IACpS,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAChD,OAAO,CAAC,EAAE,GAAG,iBAAiB,CAAC;YAC/B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YACnC,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;gBAClB,MAAM,cAAc,GAClB,oPAAoP,CAAC;gBACvP,cAAc,CACZ,OAAO,CAAC,KAAK,EACb,mEAAmE,CACpE,CAAC;gBACF,cAAc,CACZ,OAAO,CAAC,KAAK,EACb,oGAAoG,CACrG,CAAC;gBACF,cAAc,CACZ,OAAO,CAAC,KAAK,EACb,+BAA+B,cAAc,IAAI,CAClD,CAAC;gBACF,cAAc,CACZ,OAAO,CAAC,KAAK,EACb,uCAAuC,cAAc,IAAI,CAC1D,CAAC;gBACF,cAAc,CACZ,OAAO,CAAC,KAAK,EACb,oPAAoP,CACrP,CAAC;gBACF,cAAc,CACZ,OAAO,CAAC,KAAK,EACb,0DAA0D,CAC3D,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,wOAAwO;IACxO,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,CACL,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,MAAM,CACZ,cAAc,CAAC,QAAQ,CACvB,SAAS,CAAC,CACR,IAAI,KAAK,IAAI;gBACX,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,IAAI,KAAK,IAAI;oBACf,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,IAAI,KAAK,IAAI;wBACf,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,IAAI,KAAK,IAAI;4BACf,CAAC,CAAC,MAAM;4BACR,CAAC,CAAC,MACN,CAAC,CACD,IAAI,KAAK,CAAC,SAAS,CAAC,CAEpB;QAAA,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CACvB,KAAK,CAAC,CAAC,eAAe,CAAC,CACvB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CACvC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CACxC,cAAc,CAAC,QAAQ,CACvB,UAAU,CAAC,QAAQ,CACnB,KAAK,CAAC,MAAM,CACZ,QAAQ,CAAC,UAAU,CACnB,MAAM,CAAC,CACL,IAAI,KAAK,IAAI;oBACX,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,IAAI,KAAK,IAAI;wBACf,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,IAAI,KAAK,IAAI;4BACf,CAAC,CAAC,MAAM;4BACR,CAAC,CAAC,IAAI,KAAK,IAAI;gCACf,CAAC,CAAC,MAAM;gCACR,CAAC,CAAC,MACN,CAAC,CACD,IAAI,KAAK,CAAC,SAAS,CAAC,CAEpB;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,CAAC,IAAI,CACH,SAAS,CAAC,QAAQ,CAClB,QAAQ,CAAC,CACP,IAAI,KAAK,IAAI;wBACX,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,IAAI,KAAK,IAAI;4BACf,CAAC,CAAC,MAAM;4BACR,CAAC,CAAC,IAAI,KAAK,IAAI;gCACf,CAAC,CAAC,MAAM;gCACR,CAAC,CAAC,IAAI,KAAK,IAAI;oCACf,CAAC,CAAC,MAAM;oCACR,CAAC,CAAC,MACN,CAAC,CACD,UAAU,CAAC,QAAQ,CACnB,IAAI,KAAK,CAAC,IAAI,CAAC,CAEf;gBAAA,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CACxC;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACzB,CAAC,IAAI,CACH,SAAS,CAAC,QAAQ,CAClB,QAAQ,CAAC,CACP,IAAI,KAAK,IAAI;wBACX,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,IAAI,KAAK,IAAI;4BACf,CAAC,CAAC,MAAM;4BACR,CAAC,CAAC,IAAI,KAAK,IAAI;gCACf,CAAC,CAAC,MAAM;gCACR,CAAC,CAAC,IAAI,KAAK,IAAI;oCACf,CAAC,CAAC,MAAM;oCACR,CAAC,CAAC,MACN,CAAC,CACD,KAAK,CAAC,gBAAgB,CACtB,OAAO,CAAC,CAAC,GAAG,CAAC,CACb,IAAI,KAAK,CAAC,IAAI,CAAC,CAEf;gBAAA,CAAC,IAAI,CAAC,eAAe,CACvB;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;YAAA,CAAC,IAAI,CAAC,YAAY,IAAI,CACpB,CAAC,IAAI,CACH,QAAQ,CAAC,UAAU,CACnB,KAAK,CAAC,KAAK,CACX,MAAM,CAAC,KAAK,CACZ,eAAe,CAAC,eAAe,CAC/B,SAAS,CAAC,8BAA8B,CACxC,KAAK,CAAC,CAAC;wBACL,aAAa,EAAE,OAAO;wBACtB,iBAAiB,EAAE,IAAI;wBACvB,uBAAuB,EAAE,UAAU;wBACnC,uBAAuB,EAAE,YAAY;qBACtC,CAAC,EACF,CACH,CACH;UAAA,EAAE,YAAY,CAAC,CAChB,CAAC,CACJ;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;IACJ,CAAC,CAAC;IACF,MAAM,UAAU,GAAwB;QACtC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,GAAG;QACZ,KAAK,EAAE,aAAa;QACpB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,aAAa;QACzB,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,qBAAqB;QAC9B,SAAS,EAAE,MAAM;QACjB,aAAa,EAAE,OAAO;QACtB,QAAQ,EAAE,oBAAoB;QAC9B,UAAU,EAAE,WAAW;QACvB,kBAAkB,EAAE,cAAc;KACnC,CAAC;IACF,OAAO,CACL,EACE;MAAA,CAAC,QAAQ,CACP;QAAA,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,EAAE,KAAK,CACvC;MAAA,EAAE,QAAQ,CACV;MAAA,CAAC,cAAc,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,SAAS,IAAI,CACZ,CAAC,UAAU,CACT,OAAO,CAAC,CAAC,EAAE,CAAC,CACZ,KAAK,CAAC,CAAC,eAAe,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,KAAK,CAAC,CAEhB;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,UAAU,CAAC,CACd,CACD;QAAA,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,wBAAwB,CACxB,QAAQ,CAAC,UAAU,CACnB,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CACxC,UAAU,CAAC,MAAM,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAC5C;YAAA,CAAC,WAAW,EAAE,CAChB;UAAA,EAAE,eAAe,CAAC,QAAQ,CAC1B;UAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CACtD;YAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,WAAW,CAAC,GAAU,CAAC,CAAC,CACtC,cAAc,CACd,gCAAgC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,CAClE,kBAAkB,CAAC,CAAC,oBAAoB,CAAC,CACzC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,EAAE,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CACf,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAChD,SAAS,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACvD,OAAO,CAAC,QAAQ,CAChB,SAAS,CAAC,CAAC,MAAM,CAAC,CAClB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CACtC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CACxC,YAAY,CAAC,eAAe,CAC5B,UAAU,CAAC,CAAC,kBAAkB,MAAM,SAAS,CAAC,CAC9C,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,IAAI,KAAK,CAAC,KAAK,CAAC,EAEpB;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,cAAc,CAClB;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC"}

package/dist/native/components/OTPInput/OTPInput/OTPInput.view.native.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { OTPInputViewProps } from './OTPInput.props';
+export declare const OTPInputContext: React.Context<{
+    slots: Array<{
+        char: string | null;
+        placeholderChar: string | null;
+        isActive: boolean;
+        hasFakeCaret: boolean;
+    }>;
+    isFocused: boolean;
+    isHovering: boolean;
+}>;
+declare const OTPInputView: React.FC<OTPInputViewProps & {
+    setInputRef: (ref: any) => void;
+    inputRef: React.RefObject<any>;
+    containerRef: React.RefObject<any>;
+    mirrorSelectionStart: number | null;
+    mirrorSelectionEnd: number | null;
+    setMirrorSelectionStart: (value: number | null) => void;
+    setMirrorSelectionEnd: (value: number | null) => void;
+    handlePaste: (e: any) => void;
+    handleChange: (e: any) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleKeyDown: (e: any) => void;
+    stepValues?: number[];
+    handleKeyPress: (e: any) => void;
+}>;
+export default OTPInputView;

package/dist/native/components/OTPInput/OTPInput/OTPInput.view.native.js

@@ -0,0 +1,49 @@
+import React, { createContext, useEffect } from 'react';
+import { Input, Horizontal, View, Text } from 'app-studio';
+import { FieldContainer } from '../../Input/FieldContainer/FieldContainer';
+import { FieldLabel } from '../../Input/FieldLabel/FieldLabel';
+export const OTPInputContext = createContext({ slots: [], isFocused: false, isHovering: false });
+const OTPInputView = ({ id, name, label, value = '', length = 6, placeholder = '', views = {}, size = 'md', gap = 8, type = 'text', error = false, isFocused = false, isHovered = false, isDisabled = false, isReadOnly = false, isAutoFocus = false, helperText, inputRef, containerRef, handleChange, handleFocus, handleBlur, handleKeyDown, secureTextEntry, setInputRef, ...props }) => {
+    const showLabel = !!label;
+    useEffect(() => {
+        if (isAutoFocus && inputRef.current && inputRef.current.focus) {
+            inputRef.current.focus();
+        }
+    }, [isAutoFocus, inputRef]);
+    const slotHeight = size === 'xs' ? 32 : size === 'sm' ? 36 : size === 'md' ? 40 : size === 'lg' ? 48 : 56;
+    const slots = Array.from({ length }).map((_, idx) => ({
+        char: value[idx] ?? null,
+        placeholderChar: value[0] !== undefined ? null : placeholder?.[idx] ?? null,
+        isActive: isFocused && idx === value.length,
+    }));
+    return (<FieldContainer helperText={helperText} error={error} views={views} {...props}>
+      {showLabel && (<FieldLabel htmlFor={id} color={'theme-primary'} error={error} {...views.label}>
+          {label}
+        </FieldLabel>)}
+      <View ref={containerRef} position="relative">
+        <Horizontal gap={gap} width="100%" justifyContent="center" minHeight={slotHeight} {...views.container}>
+          {slots.map((slot, index) => (<View key={`${id || name}-${index}`} width={slotHeight} height={slotHeight} borderWidth={1} borderStyle="solid" borderColor={slot.isActive ? 'theme-primary' : 'color-gray-300'} borderRadius={6} alignItems="center" justifyContent="center" backgroundColor="color-white">
+              {slot.char ? (<Text fontSize={size === 'xs' ? 14 : size === 'sm' ? 16 : size === 'md' ? 18 : size === 'lg' ? 20 : 24} fontWeight="500" {...views.text}>
+                  {type === 'password' || secureTextEntry ? '•' : slot.char}
+                </Text>) : slot.placeholderChar ? (<Text color="color-gray-400" {...views.text}>
+                  {slot.placeholderChar}
+                </Text>) : null}
+            </View>))}
+        </Horizontal>
+        <View position="absolute" top={0} left={0} right={0} bottom={0} opacity={0}>
+          <Input ref={(ref) => setInputRef(ref)} id={id || name} name={name} 
+    // RN-only typed props (keyboardType, maxLength, editable,
+    // secureTextEntry) aren't on app-studio's web Input type — pass
+    // them via a single any-cast.
+    {...{
+        keyboardType: type !== 'password' ? 'number-pad' : undefined,
+        maxLength: length,
+        editable: !isReadOnly && !isDisabled,
+        secureTextEntry: type === 'password' || secureTextEntry,
+    }} value={value} onChange={handleChange} onChangeText={(text) => handleChange({ target: { value: text } })} onFocus={handleFocus} onBlur={handleBlur} {...views.input}/>
+        </View>
+      </View>
+    </FieldContainer>);
+};
+export default OTPInputView;
+//# sourceMappingURL=OTPInput.view.native.js.map

package/dist/native/components/OTPInput/OTPInput/OTPInput.view.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.view.native.js","sourceRoot":"","sources":["../../../../../src/components/OTPInput/OTPInput/OTPInput.view.native.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/OTPInput/OTPInput/sync-timeouts.d.ts

@@ -0,0 +1 @@
+export declare function syncTimeouts(cb: (...args: any[]) => unknown): any[];

package/dist/native/components/OTPInput/OTPInput/sync-timeouts.js

@@ -0,0 +1,12 @@
+// Defines and exports a utility function `syncTimeouts` that schedules a given callback `cb` multiple times with different, staggered delays. It takes a callback function `cb` as an argument and returns an array of timeout IDs.
+export function syncTimeouts(cb) {
+    // Schedules the provided callback `cb` for immediate asynchronous execution, essentially placing it at the front of the event queue.
+    const t1 = setTimeout(cb, 0);
+    // Schedules the provided callback `cb` to execute after a 10-millisecond delay.
+    const t2 = setTimeout(cb, 10);
+    // Schedules the provided callback `cb` to execute after a 50-millisecond delay.
+    const t3 = setTimeout(cb, 50);
+    // Returns an array containing the unique IDs of the three scheduled timeouts, allowing them to be referenced or cleared later if needed.
+    return [t1, t2, t3];
+}
+//# sourceMappingURL=sync-timeouts.js.map

package/dist/native/components/OTPInput/OTPInput/sync-timeouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync-timeouts.js","sourceRoot":"","sources":["../../../../../src/components/OTPInput/OTPInput/sync-timeouts.ts"],"names":[],"mappings":"AAAA,oOAAoO;AACpO,MAAM,UAAU,YAAY,CAAC,EAA+B;IAC1D,qIAAqI;IACrI,MAAM,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7B,gFAAgF;IAChF,MAAM,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9B,gFAAgF;IAChF,MAAM,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9B,yIAAyI;IACzI,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AACtB,CAAC"}

package/dist/native/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OTPInputProps } from './OTPInput/OTPInput.props';
+export declare const OTPInput: React.FC<OTPInputProps>;

package/dist/native/components/OTPInput/OTPInput.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useOTPInputState } from './OTPInput/OTPInput.state';
+import OTPInputView from './OTPInput/OTPInput.view';
+// This file defines the main OTPInput component, responsible for orchestrating the state management (using `useOTPInputState`) and rendering the visual representation of the OTP input field (via `OTPInputView`). It acts as a container, passing all necessary props and state variables to its view component.
+const OTPInputComponent = (props) => {
+    const { value: controlledValue } = props;
+    const { value, setValue, isFocused, setIsFocused, isHovered, setIsHovered, inputRef, containerRef, mirrorSelectionStart, mirrorSelectionEnd, setMirrorSelectionStart, setMirrorSelectionEnd, setInputRef, handleChange, handleFocus, handleBlur, handleKeyDown, handlePaste, handleKeyPress, } = useOTPInputState(props);
+    const displayValue = controlledValue !== undefined ? controlledValue : value;
+    return (<OTPInputView {...props} value={String(displayValue ?? '')} setValue={setValue} isFocused={isFocused} setIsFocused={setIsFocused} isHovered={isHovered} setIsHovered={setIsHovered} inputRef={inputRef} containerRef={containerRef} mirrorSelectionStart={mirrorSelectionStart} mirrorSelectionEnd={mirrorSelectionEnd} setMirrorSelectionStart={setMirrorSelectionStart} setMirrorSelectionEnd={setMirrorSelectionEnd} setInputRef={setInputRef} handleChange={handleChange} handleFocus={handleFocus} handleBlur={handleBlur} handleKeyDown={handleKeyDown} handleKeyPress={handleKeyPress} handlePaste={handlePaste} stepValues={props.stepValues}/>);
+};
+export const OTPInput = OTPInputComponent;
+//# sourceMappingURL=OTPInput.js.map

package/dist/native/components/OTPInput/OTPInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,mTAAmT;AACnT,MAAM,iBAAiB,GAA4B,CAAC,KAAoB,EAAE,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,aAAa,EACb,WAAW,EACX,cAAc,GACf,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC5B,MAAM,YAAY,GAAG,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7E,OAAO,CACL,CAAC,YAAY,CACX,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAClC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,uBAAuB,CAAC,CAAC,uBAAuB,CAAC,CACjD,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,UAAU,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,EAC7B,CACH,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,QAAQ,GAAG,iBAAiB,CAAC"}

package/dist/native/components/Pagination/Pagination/Pagination.props.d.ts

@@ -0,0 +1,19 @@
+import { ViewProps } from 'app-studio';
+import { PaginationStyles, PageSizeOption, Size, Variant, Shape } from './Pagination.type';
+export interface PaginationProps extends ViewProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: PageSizeOption[];
+    onPageSizeChange?: (pageSize: number) => void;
+    showPageSizeSelector?: boolean;
+    showPageInfo?: boolean;
+    maxPageButtons?: number;
+    showFirstLastButtons?: boolean;
+    size?: Size;
+    variant?: Variant;
+    shape?: Shape;
+    views?: PaginationStyles;
+    visiblePageNumbers?: (number | string)[];
+}

package/dist/native/components/Pagination/Pagination/Pagination.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Pagination.props.js.map

package/dist/native/components/Pagination/Pagination/Pagination.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.props.js","sourceRoot":"","sources":["../../../../../src/components/Pagination/Pagination/Pagination.props.ts"],"names":[],"mappings":""}

package/dist/native/components/Pagination/Pagination/Pagination.state.d.ts

@@ -0,0 +1,3 @@
+export declare const usePaginationState: (currentPage: number, totalPages: number, maxPageButtons: number) => {
+    visiblePageNumbers: (string | number)[];
+};

package/dist/native/components/Pagination/Pagination/Pagination.state.js

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+// This custom React hook, `usePaginationState`, manages and calculates the array of visible page numbers for a pagination component, dynamically handling ellipses based on the current page, total pages, and the maximum number of buttons to display.
+export const usePaginationState = (currentPage, totalPages, maxPageButtons) => {
+    const [visiblePageNumbers, setVisiblePageNumbers] = useState([]);
+    useEffect(() => {
+        const calculateVisiblePageNumbers = () => {
+            const pageNumbers = [];
+            if (totalPages <= maxPageButtons) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pageNumbers.push(i);
+                }
+            }
+            else {
+                pageNumbers.push(1);
+                let startPage = Math.max(2, currentPage - Math.floor((maxPageButtons - 2) / 2));
+                let endPage = Math.min(totalPages - 1, startPage + maxPageButtons - 3);
+                if (endPage >= totalPages - 1) {
+                    endPage = totalPages - 1;
+                    startPage = Math.max(2, endPage - (maxPageButtons - 3));
+                }
+                if (startPage > 2) {
+                    pageNumbers.push('...');
+                }
+                for (let i = startPage; i <= endPage; i++) {
+                    pageNumbers.push(i);
+                }
+                if (endPage < totalPages - 1) {
+                    pageNumbers.push('...');
+                }
+                pageNumbers.push(totalPages);
+            }
+            return pageNumbers;
+        };
+        setVisiblePageNumbers(calculateVisiblePageNumbers());
+    }, [currentPage, totalPages, maxPageButtons]);
+    return {
+        visiblePageNumbers,
+    };
+};
+//# sourceMappingURL=Pagination.state.js.map

package/dist/native/components/Pagination/Pagination/Pagination.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.state.js","sourceRoot":"","sources":["../../../../../src/components/Pagination/Pagination/Pagination.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,yPAAyP;AACzP,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,WAAmB,EACnB,UAAkB,EAClB,cAAsB,EACtB,EAAE;IACF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAE1D,EAAE,CAAC,CAAC;IACN,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,2BAA2B,GAAG,GAAG,EAAE;YACvC,MAAM,WAAW,GAAwB,EAAE,CAAC;YAC5C,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;gBACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC;oBACrC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACpB,IAAI,SAAS,GAAG,IAAI,CAAC,GAAG,CACtB,CAAC,EACD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CACnD,CAAC;gBACF,IAAI,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC,CAAC;gBACvE,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;oBAC9B,OAAO,GAAG,UAAU,GAAG,CAAC,CAAC;oBACzB,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC1D,CAAC;gBACD,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;oBAClB,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC;gBACD,KAAK,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;oBAC1C,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACtB,CAAC;gBACD,IAAI,OAAO,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC;oBAC7B,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC;gBACD,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC/B,CAAC;YACD,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC;QACF,qBAAqB,CAAC,2BAA2B,EAAE,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9C,OAAO;QACL,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/Pagination/Pagination/Pagination.style.d.ts

@@ -0,0 +1,7 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Shape } from './Pagination.type';
+export declare const PaginationSizes: Record<Size, ViewProps>;
+export declare const PaginationVariants: Record<Variant, ViewProps>;
+export declare const PaginationShapes: Record<Shape, ViewProps>;
+export declare const ActivePageButtonStyles: ViewProps;
+export declare const DisabledButtonStyles: ViewProps;

package/dist/native/components/Pagination/Pagination/Pagination.style.js

@@ -0,0 +1,111 @@
+// Defines a set of predefined sizes (small, medium, large) for the Pagination component, mapping each size to a specific set of styling properties including font size, padding, minimum width, and height, with responsive adjustments for mobile devices.
+export const PaginationSizes = {
+    sm: {
+        fontSize: '12px',
+        padding: '4px 8px',
+        minWidth: '28px',
+        height: '28px',
+        media: {
+            mobile: {
+                fontSize: '11px',
+                padding: '3px 6px',
+                minWidth: '24px',
+                height: '24px',
+            },
+        },
+    },
+    md: {
+        fontSize: '14px',
+        padding: '6px 10px',
+        minWidth: '32px',
+        height: '32px',
+        media: {
+            mobile: {
+                fontSize: '12px',
+                padding: '4px 8px',
+                minWidth: '28px',
+                height: '28px',
+            },
+        },
+    },
+    lg: {
+        fontSize: '14px',
+        padding: '8px 12px',
+        minWidth: '36px',
+        height: '36px',
+        media: {
+            mobile: {
+                fontSize: '12px',
+                padding: '4px 8px',
+                minWidth: '28px',
+                height: '28px',
+            },
+        },
+    },
+};
+// Defines different visual variants (default, filled, outline) for the Pagination component, each specifying distinct background colors, text colors, border styles, and hover effects.
+export const PaginationVariants = {
+    default: {
+        backgroundColor: 'transparent',
+        color: 'color-gray-800',
+        borderWidth: '0px',
+        borderStyle: 'none',
+        transition: 'all 0.2s ease-in-out',
+        _hover: {
+            backgroundColor: 'color-gray-100',
+        },
+    },
+    filled: {
+        backgroundColor: 'color-gray-100',
+        color: 'color-gray-800',
+        borderWidth: '0px',
+        borderStyle: 'none',
+        transition: 'all 0.2s ease-in-out',
+        _hover: {
+            backgroundColor: 'color-gray-200',
+        },
+    },
+    outline: {
+        backgroundColor: 'transparent',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'color-gray-200',
+        color: 'color-gray-800',
+        transition: 'all 0.2s ease-in-out',
+        _hover: {
+            backgroundColor: 'color-gray-100',
+        },
+    },
+};
+// Defines various border radius shapes (rounded, square, circular) that can be applied to the Pagination component buttons.
+export const PaginationShapes = {
+    rounded: {
+        borderRadius: 8,
+    },
+    square: {
+        borderRadius: '0px',
+    },
+    circular: {
+        borderRadius: '50%',
+    },
+};
+// Specifies the styling properties for the active page button within the Pagination component, including background color, text color, and hover effects to indicate the currently selected page.
+export const ActivePageButtonStyles = {
+    backgroundColor: 'theme-primary',
+    color: 'color-white',
+    transition: 'all 0.2s ease-in-out',
+    _hover: {
+        backgroundColor: 'theme-primary',
+        opacity: 0.9,
+    },
+};
+// Defines the styling for disabled pagination buttons, reducing their opacity and changing the cursor to indicate they are not interactive.
+export const DisabledButtonStyles = {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    transition: 'all 0.2s ease-in-out',
+    _hover: {
+        backgroundColor: 'transparent',
+    },
+};
+//# sourceMappingURL=Pagination.style.js.map

package/dist/native/components/Pagination/Pagination/Pagination.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.style.js","sourceRoot":"","sources":["../../../../../src/components/Pagination/Pagination/Pagination.style.ts"],"names":[],"mappings":"AAEA,4PAA4P;AAC5P,MAAM,CAAC,MAAM,eAAe,GAA4B;IACtD,EAAE,EAAE;QACF,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,QAAQ,EAAE,MAAM;gBAChB,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,MAAM;gBAChB,MAAM,EAAE,MAAM;aACf;SACF;KACF;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,QAAQ,EAAE,MAAM;gBAChB,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,MAAM;gBAChB,MAAM,EAAE,MAAM;aACf;SACF;KACF;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,QAAQ,EAAE,MAAM;gBAChB,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,MAAM;gBAChB,MAAM,EAAE,MAAM;aACf;SACF;KACF;CACF,CAAC;AACF,wLAAwL;AACxL,MAAM,CAAC,MAAM,kBAAkB,GAA+B;IAC5D,OAAO,EAAE;QACP,eAAe,EAAE,aAAa;QAC9B,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,sBAAsB;QAClC,MAAM,EAAE;YACN,eAAe,EAAE,gBAAgB;SAClC;KACF;IACD,MAAM,EAAE;QACN,eAAe,EAAE,gBAAgB;QACjC,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,sBAAsB;QAClC,MAAM,EAAE;YACN,eAAe,EAAE,gBAAgB;SAClC;KACF;IACD,OAAO,EAAE;QACP,eAAe,EAAE,aAAa;QAC9B,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,gBAAgB;QAC7B,KAAK,EAAE,gBAAgB;QACvB,UAAU,EAAE,sBAAsB;QAClC,MAAM,EAAE;YACN,eAAe,EAAE,gBAAgB;SAClC;KACF;CACF,CAAC;AACF,4HAA4H;AAC5H,MAAM,CAAC,MAAM,gBAAgB,GAA6B;IACxD,OAAO,EAAE;QACP,YAAY,EAAE,CAAC;KAChB;IACD,MAAM,EAAE;QACN,YAAY,EAAE,KAAK;KACpB;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,KAAK;KACpB;CACF,CAAC;AACF,kMAAkM;AAClM,MAAM,CAAC,MAAM,sBAAsB,GAAc;IAC/C,eAAe,EAAE,eAAe;IAChC,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,sBAAsB;IAClC,MAAM,EAAE;QACN,eAAe,EAAE,eAAe;QAChC,OAAO,EAAE,GAAG;KACb;CACF,CAAC;AACF,4IAA4I;AAC5I,MAAM,CAAC,MAAM,oBAAoB,GAAc;IAC7C,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,aAAa;IACrB,UAAU,EAAE,sBAAsB;IAClC,MAAM,EAAE;QACN,eAAe,EAAE,aAAa;KAC/B;CACF,CAAC"}

package/dist/native/components/Pagination/Pagination/Pagination.type.d.ts

@@ -0,0 +1,17 @@
+import { ViewProps } from 'app-studio';
+export type Size = 'sm' | 'md' | 'lg';
+export type Variant = 'default' | 'filled' | 'outline';
+export type Shape = 'rounded' | 'square' | 'circular';
+export interface PaginationStyles {
+    container?: ViewProps;
+    pageButton?: ViewProps;
+    activePageButton?: ViewProps;
+    navigationButton?: ViewProps;
+    pageInfo?: ViewProps;
+    pageSizeSelector?: ViewProps;
+    ellipsis?: ViewProps;
+}
+export interface PageSizeOption {
+    label: string;
+    value: number;
+}

package/dist/native/components/Pagination/Pagination/Pagination.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Pagination.type.js.map

package/dist/native/components/Pagination/Pagination/Pagination.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.type.js","sourceRoot":"","sources":["../../../../../src/components/Pagination/Pagination/Pagination.type.ts"],"names":[],"mappings":""}

package/dist/native/components/Pagination/Pagination/Pagination.view.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationProps } from './Pagination.props';
+export declare const PaginationView: React.FC<PaginationProps>;