@hybr1d-tech/charizard 0.3.36

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+export * from './button';
+export * from './empty-state';
+export * from './table';
+export * from './search';
+export * from './combo-box';
+export * from './drawer';
+export * from './input';
+export * from './modal';
+export * from './popover';
+export * from './select';
+export * from './svg';
+export * from './checkbox';
+export * from './tooltip';
+export * from './progress';
+export * from './segmented-control';
+export * from './radio-group';
+export * from './layout-tabs';
+export * from './selectors';
+export * from './loader';
+export * from './switch';

package/dist/input/Input.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { HTMLInputTypeAttribute } from 'react';
+import { Inputs } from './types';
+type InputProps = {
+    /**
+     * Custom classes to be applied to the input
+     */
+    customClasses?: string[] | string;
+    /**
+     * Custom styles to be applied to the input
+     */
+    customStyles?: Record<string, string>;
+    /**
+     * Type of the input
+     */
+    type?: HTMLInputTypeAttribute | 'textarea';
+    /**
+     * Placeholder of the input
+     */
+    placeholder?: string;
+    /**
+     * Name of the input
+     */
+    name?: string;
+    /**
+     * Id of the input
+     */
+    id?: string;
+    /**
+     * Value of the input
+     */
+    value?: string | number;
+    /**
+     * On change handler of the input
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, arg?: any) => void;
+    /**
+     * whether the input is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * Rest props of the input
+     */
+    restprops?: any;
+    /**
+     * Number of rows of the textarea
+     */
+    rows?: number;
+    /**
+     * Number of cols of the textarea
+     */
+    cols?: number;
+    /**
+     * Error message of the input
+     */
+    errorMsg?: string | false;
+};
+export declare function Input({ customClasses, customStyles, name, id, value, onChange, restprops, cols, errorMsg, disabled, rows, type, placeholder, }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Input {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export {};

package/dist/input/InputAddon.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+import * as React from 'react';
+import { Inputs } from './types';
+interface InputDirectionAddonProps {
+    /**
+     * Children of the input addon
+     */
+    children: React.ReactNode;
+    /**
+     * to enable dropdown or not
+     */
+    isDropdown?: boolean;
+    /**
+     * dropdown options
+     */
+    dropdownOptions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    /**
+     * handle dropdown option click
+     */
+    handleOptionClick?: (selectedOption: {
+        label: string;
+        value: string;
+    }) => void;
+    /**
+     * show dropdown search
+     */
+    showDropdownSearch?: boolean;
+}
+export declare function InputLeftAddon({ children, isDropdown, dropdownOptions, handleOptionClick, showDropdownSearch, }: InputDirectionAddonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputLeftAddon {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export declare function InputRightAddon({ children, isDropdown, dropdownOptions, handleOptionClick, showDropdownSearch, }: InputDirectionAddonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputRightAddon {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export {};

package/dist/input/InputContainer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+import { Inputs } from './types';
+interface InputContainerProps {
+    /**
+     * Children of the input container
+     */
+    children: React.ReactNode;
+    /**
+     * Size of the input container
+     */
+    size?: 'sm' | 'md' | 'adapt';
+    /**
+     * Custom classes to be applied to the input container
+     */
+    customClassName?: string;
+    /**
+     * Custom styles to be applied to the input container
+     */
+    customStyles?: React.CSSProperties;
+}
+export declare function InputContainer({ children, customClassName, customStyles, size, }: InputContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputContainer {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export {};

package/dist/input/InputElement.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+import { Inputs } from './types';
+interface InputDirectionElementProps {
+    /**
+     * Children of the input element
+     */
+    children: React.ReactNode;
+}
+export declare function InputLeftElement({ children }: InputDirectionElementProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputLeftElement {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export declare function InputRightElement({ children }: InputDirectionElementProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputRightElement {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export {};

package/dist/input/InputGroup.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+import * as React from 'react';
+import { Inputs } from './types';
+interface InputGroupProps {
+    /**
+     * Children of the input group
+     */
+    children: React.ReactNode;
+}
+export declare function InputGroup({ children }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputGroup {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export {};

package/dist/input/InputLabel.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Inputs } from './types';
+type InputLabelProps = {
+    /**
+     * Children of the input label
+     */
+    children: React.ReactNode;
+    /**
+     * Custom classes to be applied to the input label
+     */
+    customClasses?: string[] | string;
+    /**
+     * Custom styles to be applied to the input label
+     */
+    customStyles?: Record<string, string>;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * htmlFor attribute of the input label
+     */
+    htmlFor?: string;
+    /**
+     * Rest props to be applied to the input label
+     */
+    restprops?: any;
+    /**
+     * info text
+     */
+    infoText?: string;
+    /**
+     * info text tooltip styles
+     */
+    infoTextTooltipStyles?: React.CSSProperties;
+};
+export declare function InputLabel({ children, customClasses, customStyles, required, htmlFor, restprops, infoText, infoTextTooltipStyles, }: InputLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputLabel {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+export {};

package/dist/input/index.d.ts

@@ -0,0 +1,6 @@
+export { Input } from './Input';
+export { InputLeftAddon, InputRightAddon } from './InputAddon';
+export { InputContainer } from './InputContainer';
+export { InputLeftElement, InputRightElement } from './InputElement';
+export { InputGroup } from './InputGroup';
+export { InputLabel } from './InputLabel';

package/dist/input/types.d.ts

@@ -0,0 +1,13 @@
+export declare enum Inputs {
+    INPUT_ADDON = "InputAddon",
+    INPUT_LEFT_ADDON = "InputLeftAddon",
+    INPUT_RIGHT_ADDON = "InputRightAddon",
+    INPUT_ELEMENT = "InputElement",
+    INPUT_LEFT_ELEMENT = "InputLeftElement",
+    INPUT_RIGHT_ELEMENT = "InputRightElement",
+    INPUT_CONTAINER = "InputContainer",
+    INPUT_LABEL = "InputLabel",
+    INPUT_GROUP = "InputGroup",
+    INPUT = "Input"
+}
+export type Placement = 'left' | 'right';

package/dist/layout-tabs/LayoutTabs.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface LayoutTabsProps {
+    tabClassName?: string;
+    /**
+     * tabs to render
+     */
+    tabs: Array<{
+        label: string;
+        value: string;
+        content: React.ReactNode | string;
+    }>;
+    /**
+     * default value (initial tab to render)
+     */
+    defaultValue: string;
+    /**
+     * callback function when tab is changed
+     */
+    onValueChange?: (value: string) => void;
+}
+export declare function LayoutTabs({ tabs, defaultValue, tabClassName, onValueChange }: LayoutTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/layout-tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './LayoutTabs';

package/dist/loader/Loader.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type LoaderProps = {
+    containerStyle?: React.CSSProperties;
+    loaderStyle?: React.CSSProperties;
+    variant?: LOADER_VARIANT;
+};
+export declare enum LOADER_VARIANT {
+    RING = "ring",
+    DUAL_RING = "dual_ring",
+    RIPPLE = "ripple",
+    ELLIPSES = "ellipses",
+    ROLLER = "roller",
+    SPINNER = "spinner",
+    HOURGLASS = "hourglass",
+    GRID = "grid"
+}
+export declare function Loader({ containerStyle, loaderStyle, variant }: LoaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/loader/index.d.ts

@@ -0,0 +1 @@
+export * from './Loader';

package/dist/loader/loader.stories.d.ts

@@ -0,0 +1,13 @@
+import { Loader } from './Loader';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof Loader>;
+export declare const Ring: Story;
+export declare const DualRing: Story;
+export declare const Ellipses: Story;
+export declare const Grid: Story;
+export declare const Hourglass: Story;
+export declare const Ripple: Story;
+export declare const Roller: Story;
+export declare const Spinner: Story;

package/dist/modal/Modal.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as dialog from '@zag-js/dialog';
+type ModalProps = {
+    /**
+     * Modal is open or not
+     */
+    isOpen: boolean;
+    /**
+     * Modal close handler
+     */
+    onClose: () => void;
+    /**
+     * Modal content
+     */
+    children: React.ReactNode;
+    /**
+     * size of modal
+     */
+    size?: 'sm' | 'md' | 'fullScreen';
+    /**
+     * show overlay
+     */
+    showOverlay?: boolean;
+    /**
+     * Machine Props
+     */
+    machineProps?: dialog.Context | {};
+};
+export declare function Modal({ isOpen, onClose, children, size, showOverlay, machineProps, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/ModalBody.d.ts

@@ -0,0 +1,17 @@
+interface ModalBodyProps {
+    /**
+     * Modal body children
+     */
+    children: React.ReactNode;
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * custom styles
+     */
+    customStyles?: React.CSSProperties;
+}
+export declare function ModalBody({ children, api, customStyles }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/ModalContent.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+interface ModalContentProps {
+    /**
+     * Modal content children
+     */
+    children: React.ReactNode;
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * size of the modal
+     */
+    size?: 'sm' | 'md' | 'fullScreen';
+}
+export declare function ModalContent({ children, api, size }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/ModalFooter.d.ts

@@ -0,0 +1,34 @@
+import { BUTTON_VARIANT } from '../button';
+export type FooterButtons = Array<{
+    variant: BUTTON_VARIANT;
+    onClick: () => void;
+    btnText: string;
+    btnType?: 'button' | 'submit' | 'reset';
+    btnSize?: 'xs' | 'sm' | 'md' | 'adapt';
+    disabled?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
+}>;
+interface ModalFooterProps {
+    /**
+     * Modal footer children
+     * if children is passed, default buttons will not be shown
+     * children acts like a custom footer
+     */
+    children?: React.ReactNode;
+    /**
+     * zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * set of buttons to display
+     */
+    buttons: FooterButtons;
+    /**
+     * show border or not
+     */
+    showBorder?: boolean;
+}
+export declare function ModalFooter({ children, api, buttons, showBorder }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/ModalHeader.d.ts

@@ -0,0 +1,21 @@
+interface ModalHeaderProps {
+    /**
+     * Modal header children
+     */
+    children: React.ReactNode;
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * Show cross button or not
+     */
+    showCrossBtn?: boolean;
+    /**
+     * Show border or not
+     */
+    showBorder?: boolean;
+}
+export declare function ModalHeader({ children, api, showCrossBtn, showBorder, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/ModalOverlay.d.ts

@@ -0,0 +1,9 @@
+interface ModalOverlayProps {
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+}
+export declare function ModalOverlay({ api }: ModalOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/index.d.ts

@@ -0,0 +1,6 @@
+export { Modal } from './Modal';
+export { ModalBody } from './ModalBody';
+export { ModalContent } from './ModalContent';
+export { ModalFooter } from './ModalFooter';
+export { ModalHeader } from './ModalHeader';
+export { ModalOverlay } from './ModalOverlay';

package/dist/modal/usage.d.ts

@@ -0,0 +1 @@
+export default function Example({ isOpen, onClose }: any): import("react/jsx-runtime").JSX.Element;

package/dist/popover/Popover.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Placement } from '@zag-js/popper';
+type PopoverProps = {
+    /**
+     * Content of the trigger
+     */
+    children: React.ReactNode;
+    /**
+     * Placement of the popover
+     */
+    placement?: Placement;
+    /**
+     * Props to pass to the popover machine
+     */
+    popoverProps?: any;
+    /**
+     * close popover on scroll
+     */
+    closeOnScroll?: boolean;
+    /**
+     * when using closeOnScroll, its necessary to pass containerRef to track scroll movement of the container you want to close the popover with respect to.
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+};
+export declare function Popover({ children, placement, popoverProps, closeOnScroll, containerRef, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/popover/PopoverCloseButton.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+interface PopoverCloseButtonProps {
+    /**
+     * The content of the close button.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The styles to apply to the PopoverCloseButton.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverCloseButton.
+     */
+    className?: string;
+}
+export declare function PopoverCloseButton({ children, api, styles, className }: PopoverCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/popover/PopoverContent.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+import * as React from 'react';
+interface PopoverContentProps {
+    /**
+     * The content of the PopoverContent.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The background color of the PopoverContent.
+     */
+    bg?: 'black' | 'gray' | string;
+    /**
+     * The styles to apply to the PopoverContent.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverContent.
+     */
+    className?: string;
+    /**
+     * The styles to apply to Popover positioner
+     */
+    positionerStyles?: React.CSSProperties;
+}
+export declare function PopoverContent({ children, api, bg, styles, className, positionerStyles, }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/popover/PopoverDescription.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+interface PopoverDescriptionProps {
+    /**
+     * The content of the PopoverDescription.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The styles to apply to the PopoverDescription.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverDescription.
+     */
+    className?: string;
+}
+export declare function PopoverDescription({ children, api, styles, className }: PopoverDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/popover/PopoverTitle.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+interface PopoverTitleProps {
+    /**
+     * The content of the PopoverTitle.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The styles to apply to the PopoverTitle.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverTitle.
+     */
+    className?: string;
+}
+export declare function PopoverTitle({ children, api, styles, className }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/popover/PopoverTrigger.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+interface PopoverTriggerProps {
+    /**
+     * The content of the PopoverTrigger.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * Whether the popover should open on hover.
+     * @default true
+     * If set to false, the popover will only open on click.
+     */
+    openOnHover?: boolean;
+    /**
+     * The styles to apply to the PopoverTrigger.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverTrigger.
+     */
+    className?: string;
+}
+export declare function PopoverTrigger({ children, api, openOnHover, styles, className, }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/popover/index.d.ts

@@ -0,0 +1,6 @@
+export { Popover } from './Popover';
+export { PopoverCloseButton } from './PopoverCloseButton';
+export { PopoverContent } from './PopoverContent';
+export { PopoverDescription } from './PopoverDescription';
+export { PopoverTitle } from './PopoverTitle';
+export { PopoverTrigger } from './PopoverTrigger';

package/dist/popover/usage.d.ts

@@ -0,0 +1 @@
+export default function Example(): import("react/jsx-runtime").JSX.Element;