@app-studio/web 0.9.50 → 0.9.51

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

@@ -9,3 +9,4 @@ export * from './TextArea/TextArea';
 export * from './TextField/TextField';
 export * from './Password/Password';
 export * from './ComboBox/ComboBox';
+export * from './Selector/Selector';

package/dist/components/Form/Selector/Selector/Selector.props.d.ts

@@ -0,0 +1,68 @@
+import { Elevation } from '../../../../utils/elevation';
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { SelectorStyles, Shape, Size, Variant, Option } from './Selector.type';
+export interface SelectorProps extends Omit<InputProps, 'size'> {
+    id?: string;
+    error?: boolean;
+    name?: string;
+    label?: string;
+    helperText?: string;
+    placeholder?: string;
+    options: Option[];
+    isMulti?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    onChange?: (value: any) => void;
+    shape?: Shape;
+    variant?: Variant;
+    views?: SelectorStyles;
+    size?: Size;
+    shadow?: Shadow | Elevation | ViewProps;
+    isScrollable?: boolean;
+}
+export interface SelectorViewProps extends SelectorProps {
+    value: string | Array<string>;
+    setValue: Function;
+    hide: boolean;
+    setHide: Function;
+    isHovered: boolean;
+    setIsHovered: Function;
+    isFocused: boolean;
+    setIsFocused: Function;
+}
+export interface SelectorBoxProps {
+    options: Option[];
+    value?: string | Array<string>;
+    isDisabled?: boolean;
+    placeholder?: string;
+    removeOption?: Function;
+    views?: SelectorStyles;
+    size?: Size;
+}
+export interface MultiSelectorProps extends Omit<InputProps, 'size'> {
+    option: string;
+    removeOption: Function;
+    size?: Size;
+}
+export interface ItemProps extends Omit<InputProps, 'size'> {
+    callback?: Function;
+    option: Option;
+    size?: Size;
+    style?: SelectorStyles;
+}
+export interface HiddenSelectorProps extends Omit<InputProps, 'size'> {
+    id?: string;
+    name?: string;
+    value: string | Array<string>;
+    isMulti?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    onChange?: (value: any) => void;
+    options: Option[];
+}
+export interface DropDownProps extends Omit<InputProps, 'size'> {
+    size?: Size;
+    callback?: Function;
+    options: Option[];
+    views?: SelectorStyles;
+}

package/dist/components/Form/Selector/Selector/Selector.state.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SelectorProps } from './Selector.props';
+export declare const useSelectorState: ({ placeholder, isMulti, options, id, }: SelectorProps) => {
+    id: string;
+    value: string | string[];
+    setValue: React.Dispatch<React.SetStateAction<string | string[]>>;
+    hide: boolean;
+    setHide: React.Dispatch<React.SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isFocused: boolean;
+    setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    highlightedIndex: number;
+    setHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
+};
+export declare const useItemState: () => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/components/Form/Selector/Selector/Selector.style.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Selector Styles
+ *
+ * Defines the styles for the Selector component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { Size } from './Selector.type';
+/**
+ * Size configurations for the Selector component
+ * Following the 4px grid system
+ */
+export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Icon sizes for the Selector component
+ * Proportional to the component size
+ */
+export declare const IconSizes: Record<Size, number>;
+/**
+ * Dropdown styles for the Selector component
+ */
+export declare const dropdownStyles: ViewProps;
+/**
+ * Option item styles for the Selector component
+ */
+export declare const optionStyles: ViewProps;

package/dist/components/Form/Selector/Selector/Selector.view.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectorViewProps } from './Selector.props';
+/**
+ * SelectorView Component
+ *
+ * Renders a segmented control style selector.
+ */
+declare const SelectorView: React.FC<SelectorViewProps>;
+export default SelectorView;

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

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

package/dist/components/Formik/Formik.Selector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SelectorProps } from '../Form/Selector/Selector/Selector.props';
+/**
+ * Selector provides a dropdown list of options for the user to choose from.
+ */
+export declare const FormikSelector: React.FC<SelectorProps>;

package/dist/components/Formik/index.d.ts

@@ -14,4 +14,5 @@ export { FormikComboBox } from './Formik.ComboBox';
 export { FormikSlider } from './Formik.Slider';
 export { FormikOTPInput } from './Formik.OTPInput';
 export { FormikUploader } from './Formik.Uploader';
+export { FormikSelector } from './Formik.Selector';
 export { AttachmentPreview } from './AttachmentPreview';

package/dist/utils/typography.d.ts

@@ -4,15 +4,16 @@
  * This utility provides consistent typography settings across the application.
  * It defines font sizes, line heights, and font weights according to the design guidelines.
  */
-import { TextSize, TextWeights } from 'app-studio';
+import { TextWeights } from '../components/Form/Label/Label/Label.type';
+import { Size } from '../components/Input/Input.type';
 /**
  * Font sizes following the harmonized typography guidelines
  */
-export declare const FontSizes: Record<TextSize, string | number>;
+export declare const FontSizes: Record<Size, string | number>;
 /**
  * Line heights following the harmonized typography guidelines
  */
-export declare const LineHeights: Record<TextSize, string | number>;
+export declare const LineHeights: Record<Size, string | number>;
 /**
  * Font weights following typography guidelines
  */
@@ -23,6 +24,6 @@ export declare const FontWeights: Record<TextWeights, string>;
 export declare const Typography: {
     fontSizes: Record<import("../components/Form/DatePicker/DatePicker/DatePicker.type").Size, string | number>;
     lineHeights: Record<import("../components/Form/DatePicker/DatePicker/DatePicker.type").Size, string | number>;
-    fontWeights: Record<import("../components/Form/Label/Label/Label.type").TextWeights, string>;
+    fontWeights: Record<TextWeights, string>;
 };
 export default Typography;