@app-studio/components 0.10.17

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.props.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Elevation } from '../../../../utils/elevation';
+import { Shadow, ViewProps } from 'app-studio';
+import { DatePickerStyles, Shape, Size, Variant } from './DatePicker.type';
+export interface DatePickerProps extends Omit<ViewProps, 'size' | 'shadow'> {
+    id?: string;
+    /**
+     * Custom icon to display when the DatePicker is checked.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Indicates whether the DatePicker has an error.
+     */
+    error?: boolean;
+    /**
+     * Additional helper text that provides information about the field.
+     */
+    helperText?: string;
+    /**
+     * The name of the toggle.
+     */
+    name?: string;
+    /**
+     * The color scheme that changes the background color of the DatePicker.
+     */
+    /**
+     * If true, the DatePicker cannot be selected.
+     */
+    isReadOnly?: boolean;
+    /**
+     * If true, the DatePicker will be unusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * The label text for the  field.
+     */
+    label?: string;
+    /**
+     * Callback function triggered when the DatePicker value changes.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Callback function triggered when the DatePicker value changes for IOS and Android.
+     */
+    onChangeText?: (text: string) => void;
+    /**
+     * CSS styles for the DatePicker container and label.
+     */
+    views?: DatePickerStyles;
+    /**
+     * The shape that changes the outlines of the field.
+     */
+    shape?: Shape;
+    /**
+     * Changes the style of the  field.
+     */
+    variant?: Variant;
+    /**
+     * The size that sets the height and width of the DatePicker.
+     */
+    size?: Size;
+    /**
+     * Adds a shadow effect to the DatePicker.
+     */
+    shadow?: Shadow | Elevation | ViewProps;
+}
+export interface DatePickerViewProps extends DatePickerProps {
+    /**
+     * The selected date value as a string.
+     */
+    date: string;
+    /**
+     * A function to set the selected date value.
+     * @param {string} newDate - The new date value to set.
+     */
+    setDate: (newDate: string) => void;
+    /**
+     * Flag indicating if the date picker is currently being hovered.
+     */
+    isHovered: boolean;
+    /**
+     * A function to set the hovered state of the date picker.
+     * @param {boolean} hovered - The hovered state to set.
+     */
+    setIsHovered: (hovered: boolean) => void;
+    /**
+     * Flag indicating if the date picker is currently focused.
+     */
+    isFocused: boolean;
+    /**
+     * A function to set the focus state of the date picker.
+     * @param {boolean} focused - The focus state to set.
+     */
+    setIsFocused: (focused: boolean) => void;
+}

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.props.js

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

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.props.js.map

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

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.state.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const useDatePickerState: () => {
+    date: string;
+    setDate: React.Dispatch<React.SetStateAction<string>>;
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isFocused: boolean;
+    setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.state.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import format from 'date-fns/format';
+export const useDatePickerState = () => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [date, setDate] = React.useState(format(new Date(), 'yyyy-MM-dd'));
+    return {
+        date,
+        setDate,
+        isHovered,
+        setIsHovered,
+        isFocused,
+        setIsFocused,
+    };
+};
+//# sourceMappingURL=DatePicker.state.js.map

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.state.js","sourceRoot":"","sources":["../../../../../../src/components/Form/DatePicker/DatePicker/DatePicker.state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO;QACL,IAAI;QACJ,OAAO;QACP,SAAS;QACT,YAAY;QACZ,SAAS;QACT,YAAY;KACb,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.style.d.ts

@@ -0,0 +1,3 @@
+import { Size } from './DatePicker.type';
+export declare const IconSizes: Record<Size, string>;
+export declare const LabelSizes: Record<Size, number>;

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.style.js

@@ -0,0 +1,15 @@
+export const IconSizes = {
+    xs: '8px',
+    sm: '10px',
+    md: '12px',
+    lg: '14px',
+    xl: '16px',
+};
+export const LabelSizes = {
+    xs: 8,
+    sm: 10,
+    md: 12,
+    lg: 14,
+    xl: 16,
+};
+//# sourceMappingURL=DatePicker.style.js.map

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.style.js","sourceRoot":"","sources":["../../../../../../src/components/Form/DatePicker/DatePicker/DatePicker.style.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAyB;IAC7C,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAyB;IAC9C,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC"}

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DatePickerViewProps } from './DatePicker.props';
+declare const DatePickerView: React.FC<DatePickerViewProps>;
+export default DatePickerView;

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.view.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Input, Typography, useTheme } from 'app-studio';
+import { FieldContainer } from '../../../Input/FieldContainer/FieldContainer';
+import { FieldContent } from '../../../Input/FieldContent/FieldContent';
+import { FieldLabel } from '../../../Input/FieldLabel/FieldLabel';
+import { FieldWrapper } from '../../../Input/FieldWrapper/FieldWrapper';
+const DatePickerContent = (props) => <Input type="date" {...props}/>;
+const DatePickerView = ({ id, icon, name, label, date, children, helperText, shadow = {}, size = 'md', variant = 'default', shape = 'default', views = { container: {}, label: {}, helperText: {}, text: {}, field: {} }, error = false, isHovered = false, isFocused = false, isDisabled = false, isReadOnly = false, setDate = () => { }, setIsFocused = () => { }, setIsHovered = () => { }, onChange, onChangeText, ...props }) => {
+    const { themeMode } = useTheme();
+    const isDark = themeMode === 'dark';
+    const showLabel = !!(isFocused && label);
+    const handleHover = () => setIsHovered(!isHovered);
+    const handleFocus = () => setIsFocused(true);
+    const handleDateChange = (event) => {
+        if (typeof event === 'string') {
+            setDate(event);
+            if (onChangeText)
+                onChangeText(event);
+        }
+        else {
+            setDate(event.target.value);
+            if (onChange)
+                onChange(event.target.value);
+        }
+    };
+    const fieldStyles = {
+        margin: 0,
+        paddingVertical: 8,
+        paddingHorizontal: 0,
+        width: '100%',
+        heigth: '100%',
+        border: 'none',
+        on: {
+            focus: {
+                outline: 'none',
+                backgroundColor: 'transparent',
+            },
+        },
+        transition: 'all 0.2s ease-in-out',
+        fontSize: Typography.fontSizes[size],
+        backgroundColor: 'transparent',
+        color: isDisabled
+            ? isDark
+                ? 'color-gray-500'
+                : 'color-gray-400'
+            : isDark
+                ? 'color-gray-100'
+                : 'color-gray-900',
+        cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer',
+        ...views['field'],
+    };
+    return (<FieldContainer helperText={helperText} error={error} views={views}>
+      <FieldContent label={label} size={size} error={error} shape={shape} views={views} shadow={shadow} color={'theme-primary'} variant={variant} value={date} isHovered={isHovered} isDisabled={isDisabled} isReadOnly={isReadOnly} isFocused={isFocused} showLabel={showLabel} onMouseEnter={handleHover} onMouseLeave={handleHover}>
+        <FieldWrapper>
+          {showLabel && (<FieldLabel htmlFor={id} color={'theme-primary'} error={error} views={views}>
+              {label}
+            </FieldLabel>)}
+          <DatePickerContent id={id} name={name} onFocus={handleFocus} disabled={isDisabled} readOnly={isReadOnly} {...fieldStyles} {...props} {...(onChangeText && { onChangeText: handleDateChange })} onChange={handleDateChange}/>
+        </FieldWrapper>
+      </FieldContent>
+    </FieldContainer>);
+};
+export default DatePickerView;
+//# sourceMappingURL=DatePicker.view.js.map

package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.view.js","sourceRoot":"","sources":["../../../../../../src/components/Form/DatePicker/DatePicker/DatePicker.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAIxE,MAAM,iBAAiB,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAE3E,MAAM,cAAc,GAAkC,CAAC,EACrD,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,GAAG,EAAE,EACX,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,GAAG,SAAS,EACjB,KAAK,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EACzE,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;IACpC,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;IAEzC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,gBAAgB,GAAG,CAAC,KAAU,EAAE,EAAE;QACtC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,IAAI,YAAY;gBAAE,YAAY,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,QAAQ;gBAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,CAAC;QAClB,iBAAiB,EAAE,CAAC;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,EAAE,EAAE;YACF,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,eAAe,EAAE,aAAa;aAC/B;SACF;QACD,UAAU,EAAE,sBAAsB;QAClC,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC;QACpC,eAAe,EAAE,aAAa;QAC9B,KAAK,EAAE,UAAU;YACf,CAAC,CAAC,MAAM;gBACN,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,gBAAgB;YACpB,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,gBAAgB;QACpB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACpE,GAAG,KAAK,CAAC,OAAO,CAAC;KAClB,CAAC;IAEF,OAAO,CACL,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACjE;MAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,eAAe,CAAC,CACvB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,WAAW,CAAC,CAC1B,YAAY,CAAC,CAAC,WAAW,CAAC,CAE1B;QAAA,CAAC,YAAY,CACX;UAAA,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,KAAK,CAAC,CAAC,KAAK,CAAC,CAEb;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,UAAU,CAAC,CACd,CACD;UAAA,CAAC,iBAAiB,CAChB,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,IAAI,WAAW,CAAC,CAChB,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,YAAY,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAC,CAAC,CACzD,QAAQ,CAAC,CAAC,gBAAgB,CAAC,EAE/B;QAAA,EAAE,YAAY,CAChB;MAAA,EAAE,YAAY,CAChB;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/native/components/Form/DatePicker/DatePicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DatePickerProps } from './DatePicker/DatePicker.props';
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/native/components/Form/DatePicker/DatePicker.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useDatePickerState } from './DatePicker/DatePicker.state';
+import DatePickerView from './DatePicker/DatePicker.view';
+const DatePickerComponent = (props) => {
+    const datePickerStates = useDatePickerState();
+    return <DatePickerView {...datePickerStates} {...props}/>;
+};
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+export const DatePicker = DatePickerComponent;
+//# sourceMappingURL=DatePicker.js.map

package/dist/native/components/Form/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/components/Form/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAE1D,MAAM,mBAAmB,GAA8B,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,kBAAkB,EAAE,CAAC;IAC9C,OAAO,CAAC,cAAc,CAAC,IAAI,gBAAgB,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC7D,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,mBAAmB,CAAC"}

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

@@ -0,0 +1,12 @@
+export * from './Checkbox/Checkbox';
+export * from './ColorInput/ColorInput';
+export * from './DatePicker/DatePicker';
+export * from './Label/Label';
+export * from './CountryPicker/CountryPicker';
+export * from './Select/Select';
+export * from './Switch/Switch';
+export * from './TextArea/TextArea';
+export * from './TextField/TextField';
+export * from './Password/Password';
+export * from './ComboBox/ComboBox';
+export * from './Selector/Selector';

package/dist/native/components/Form/Form.js

@@ -0,0 +1,13 @@
+export * from './Checkbox/Checkbox';
+export * from './ColorInput/ColorInput';
+export * from './DatePicker/DatePicker';
+export * from './Label/Label';
+export * from './CountryPicker/CountryPicker';
+export * from './Select/Select';
+export * from './Switch/Switch';
+export * from './TextArea/TextArea';
+export * from './TextField/TextField';
+export * from './Password/Password';
+export * from './ComboBox/ComboBox';
+export * from './Selector/Selector';
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/native/components/Form/Label/Label/Label.props.d.ts

@@ -0,0 +1,17 @@
+import { ViewProps } from 'app-studio';
+import { Headings, Sizes, TextWeights } from './Label.type';
+export interface LabelProps extends Omit<ViewProps, 'size'> {
+    children: React.ReactNode;
+    heading?: Headings;
+    isItalic?: boolean;
+    isStriked?: boolean;
+    isUnderlined?: boolean;
+    size?: Sizes | number;
+    weight?: TextWeights;
+    htmlFor?: string;
+    dropDown?: ViewProps;
+    error?: boolean;
+    isDisabled?: boolean;
+    helperText?: React.ReactNode;
+    views?: ViewProps;
+}

package/dist/native/components/Form/Label/Label/Label.props.js

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

package/dist/native/components/Form/Label/Label/Label.props.js.map

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

package/dist/native/components/Form/Label/Label/Label.style.d.ts

@@ -0,0 +1,2 @@
+import { Headings } from './Label.type';
+export declare const HeadingSizes: Record<Headings, Record<string, number | string>>;

package/dist/native/components/Form/Label/Label/Label.style.js

@@ -0,0 +1,36 @@
+// Import Headings type definition from Label.type module for type safety and consistency.
+export const HeadingSizes = {
+    // Initialize a constant 'HeadingSizes' to define styles for different heading levels.
+    h1: {
+        // Use TypeScript's 'Record' utility type to ensure the object matches the shape of 'Headings'.
+        fontSize: 96,
+        // Define style properties for 'h1' heading tag, including font size, line height, and letter spacing.
+        letterSpacing: -1.5,
+    },
+    h2: {
+        fontSize: 60,
+        // Define style properties for 'h2' heading tag similar to 'h1', but with adjusted values for size and spacing.
+        letterSpacing: -0.5,
+    },
+    h3: {
+        fontSize: 48,
+        // Define style properties for 'h3' heading tag with a standard letter spacing of 0.
+        letterSpacing: 0,
+    },
+    h4: {
+        fontSize: 34,
+        // Provide style properties for 'h4' heading tag, with a slight increase in letter spacing.
+        letterSpacing: 0.25,
+    },
+    h5: {
+        fontSize: 24,
+        // Set the 'h5' heading tag views, opting for no additional letter spacing.
+        letterSpacing: 0,
+    },
+    h6: {
+        fontSize: 20,
+        // Set the 'h6' heading tag views, with the smallest font size and a subtle letter spacing.
+        letterSpacing: 0.15,
+    },
+};
+//# sourceMappingURL=Label.style.js.map

package/dist/native/components/Form/Label/Label/Label.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.style.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Label/Label/Label.style.ts"],"names":[],"mappings":"AACA,0FAA0F;AAC1F,MAAM,CAAC,MAAM,YAAY,GAAsD;IAC7E,sFAAsF;IACtF,EAAE,EAAE;QACF,+FAA+F;QAC/F,QAAQ,EAAE,EAAE;QACZ,sGAAsG;QACtG,aAAa,EAAE,CAAC,GAAG;KACpB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,+GAA+G;QAC/G,aAAa,EAAE,CAAC,GAAG;KACpB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,oFAAoF;QACpF,aAAa,EAAE,CAAC;KACjB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,2FAA2F;QAC3F,aAAa,EAAE,IAAI;KACpB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,2EAA2E;QAC3E,aAAa,EAAE,CAAC;KACjB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,2FAA2F;QAC3F,aAAa,EAAE,IAAI;KACpB;CACF,CAAC"}

package/dist/native/components/Form/Label/Label/Label.type.d.ts

@@ -0,0 +1,3 @@
+export type TextWeights = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'black';
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/native/components/Form/Label/Label/Label.type.js

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

package/dist/native/components/Form/Label/Label/Label.type.js.map

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

package/dist/native/components/Form/Label/Label/Label.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LabelProps } from './Label.props';
+declare const LabelView: React.FC<LabelProps>;
+export default LabelView;

package/dist/native/components/Form/Label/Label/Label.view.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Element, Typography } from 'app-studio';
+import { HeadingSizes } from './Label.style';
+const LabelView = ({ children, 
+// LabelView is a functional component that utilizes the LabelProps interface for its props.
+heading, 
+// The component is deconstructing its properties to apply conditional styles and pass them to the underlying Element.
+isItalic = false, isUnderlined = false, isStriked = false, 
+// Creates a dynamic style object based on the 'heading' prop, if provided, selecting the appropriate size from HeadingSizes.
+weight = 'normal', 
+// Returns an Element component with the role of a label, styled dynamically based on incoming props.
+size = 'sm', dropDown: _dropDown, error: _error, isDisabled: _isDisabled, helperText: _helperText, views: _views, ...props
+// The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
+ }) => {
+    // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
+    const headingStyles = heading ? HeadingSizes[heading] : {};
+    // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
+    return (
+    // textDecoration conditionally applies 'line-through' or 'underline' based on respective boolean props; defaults to 'none' if both are false.
+    <Element as="label" 
+    // Spreads any additional style properties from headingStyles into the Element if a heading size is specified.
+    width="100%" 
+    // Spreads the rest of the props to support extensibility of the LabelView component for future use cases.
+    fontSize={size} 
+    // Includes children elements inside the Element, allowing for nested content within the label.
+    fontStyle={isItalic ? 'italic' : 'normal'} fontWeight={Typography.fontWeights[weight]} textDecoration={isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'} {...headingStyles} {...props}>
+      {children}
+    </Element>);
+};
+export default LabelView;
+//# sourceMappingURL=Label.view.js.map

package/dist/native/components/Form/Label/Label/Label.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.view.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Label/Label/Label.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,MAAM,SAAS,GAAyB,CAAC,EACvC,QAAQ;AACR,4FAA4F;AAC5F,OAAO;AACP,sHAAsH;AACtH,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,KAAK;AACjB,6HAA6H;AAC7H,MAAM,GAAG,QAAQ;AACjB,qGAAqG;AACrG,IAAI,GAAG,IAAI,EACX,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,WAAW,EACvB,UAAU,EAAE,WAAW,EACvB,KAAK,EAAE,MAAM,EACb,GAAG,KAAK;AACR,0FAA0F;EAC3F,EAAE,EAAE;IACH,iGAAiG;IACjG,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,uGAAuG;IACvG,OAAO;IACL,8IAA8I;IAC9I,CAAC,OAAO,CACN,EAAE,CAAC,OAAO;IACV,8GAA8G;IAC9G,KAAK,CAAC,MAAM;IACZ,0GAA0G;IAC1G,QAAQ,CAAC,CAAC,IAAI,CAAC;IACf,+FAA+F;IAC/F,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC1C,UAAU,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAC3C,cAAc,CAAC,CACb,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAC5D,CAAC,CACD,IAAI,aAAa,CAAC,CAClB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,SAAS,CAAC"}

package/dist/native/components/Form/Label/Label/Label.view.native.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Label View Component (React Native)
+ *
+ * RN counterpart of Label.view.tsx. Drops the HTML <label> semantic (RN
+ * has no label element / `htmlFor`) and renders the label text directly
+ * inside a <Text/>. textDecoration is preserved (RN supports
+ * textDecorationLine).
+ */
+import React from 'react';
+import { LabelProps } from './Label.props';
+declare const LabelView: React.FC<LabelProps>;
+export default LabelView;

package/dist/native/components/Form/Label/Label/Label.view.native.js

@@ -0,0 +1,24 @@
+/**
+ * Label View Component (React Native)
+ *
+ * RN counterpart of Label.view.tsx. Drops the HTML <label> semantic (RN
+ * has no label element / `htmlFor`) and renders the label text directly
+ * inside a <Text/>. textDecoration is preserved (RN supports
+ * textDecorationLine).
+ */
+import React from 'react';
+import { Text, Typography } from 'app-studio';
+import { HeadingSizes } from './Label.style';
+const LabelView = ({ children, heading, isItalic = false, isUnderlined = false, isStriked = false, weight = 'normal', size = 'sm', dropDown: _dropDown, error: _error, isDisabled: _isDisabled, helperText: _helperText, views: _views, htmlFor: _htmlFor, ...props }) => {
+    const headingStyles = heading ? HeadingSizes[heading] : {};
+    const textDecorationLine = isStriked
+        ? 'line-through'
+        : isUnderlined
+            ? 'underline'
+            : 'none';
+    return (<Text width="100%" fontSize={size} fontStyle={isItalic ? 'italic' : 'normal'} fontWeight={Typography.fontWeights[weight]} textDecorationLine={textDecorationLine} {...headingStyles} {...props}>
+      {children}
+    </Text>);
+};
+export default LabelView;
+//# sourceMappingURL=Label.view.native.js.map

package/dist/native/components/Form/Label/Label/Label.view.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.view.native.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Label/Label/Label.view.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,SAAS,GAAyB,CAAC,EACvC,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,QAAQ,EACjB,IAAI,GAAG,IAAI,EACX,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,WAAW,EACvB,UAAU,EAAE,WAAW,EACvB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,QAAQ,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,kBAAkB,GAAG,SAAS;QAClC,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,MAAM,CAAC;IAEX,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,MAAM,CACZ,QAAQ,CAAC,CAAC,IAAI,CAAC,CACf,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC1C,UAAU,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAC3C,kBAAkB,CAAC,CAAC,kBAAyB,CAAC,CAC9C,IAAI,aAAa,CAAC,CAClB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/native/components/Form/Label/Label.d.ts

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

package/dist/native/components/Form/Label/Label.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import LabelView from './Label/Label.view';
+// Import custom type 'LabelProps' to type check the properties passed into the Label component.
+const LabelComponent = (props) => (
+// Import 'LabelView' as a visual component for the label, separating the view from business logic.
+<LabelView {...props}/>
+// Define 'LabelComponent' as a functional component that uses React's FC type for type checking and utilizing React features.
+);
+// Pass all properties received by 'LabelComponent' to 'LabelView' using the spread syntax, ensuring it has all props needed for rendering.
+export const Label = LabelComponent;
+// Export the 'LabelComponent' as 'Label' to be reused throughout the project.
+//# sourceMappingURL=Label.js.map

package/dist/native/components/Form/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../src/components/Form/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,gGAAgG;AAChG,MAAM,cAAc,GAAyB,CAAC,KAAK,EAAE,EAAE,CAAC;AACtD,mGAAmG;AACnG,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,EAAG;AACxB,8HAA8H;CAC/H,CAAC;AACF,2IAA2I;AAC3I,MAAM,CAAC,MAAM,KAAK,GAAG,cAAc,CAAC;AACpC,8EAA8E"}

package/dist/native/components/Form/Password/Password/Password.props.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TextFieldProps } from '../../../Form/TextField/TextField/TextField.props';
+/**
+ * TextFieldProps already extends Omit<InputProps, ...>, so a second extend of
+ * Omit<InputProps, ...> would conflict on every property TextField narrowed
+ * (error, helperText, label, left, right, onBlur, onChange, onClick, onFocus,
+ * shadow, value). The Password component is a TextField with a visibility
+ * toggle — extend TextFieldProps alone.
+ */
+export interface PasswordProps extends TextFieldProps {
+    /**
+     * The name of the input field
+     */
+    name?: string;
+    /**
+     * If true, the Input will be unusable
+     */
+    isDisabled?: boolean;
+    /**
+     * Icon to Indicate that the password is visible
+     */
+    visibleIcon?: React.ReactNode;
+    /**
+     * Icon to Indicate that the password is hidden
+     */
+    hiddenIcon?: React.ReactNode;
+}
+export interface PasswordViewProps extends PasswordProps {
+    /**
+     * Optional prop to determine if the password is visible
+     */
+    isVisible?: boolean;
+    /**
+     * Optional callback to update the visibility state.
+     */
+    setIsVisible?: (value: boolean) => void;
+}

package/dist/native/components/Form/Password/Password/Password.props.js

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

package/dist/native/components/Form/Password/Password/Password.props.js.map

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