@dimasbaguspm/versaur 0.0.6 → 0.0.8

package/dist/components/app-bar/app-bar.atoms.d.ts

@@ -1,4 +1,8 @@
-import { AppBarLeadingProps, AppBarHeadlineProps, AppBarSubtitleProps, AppBarTrailingProps, AppBarCenterProps } from './types';
+import { AppBarLeadingProps, AppBarHeadlineProps, AppBarSubtitleProps, AppBarTrailingProps, AppBarCenterProps, AppBarBottomProps } from './types';
+/**
+ * Bottom section (flexible area for additional content, e.g. tabs)
+ */
+export declare const AppBarBottom: import('react').ForwardRefExoticComponent<AppBarBottomProps & import('react').RefAttributes<HTMLDivElement>>;
 /**
  * Leading section (logo, nav icon)
  */

package/dist/components/app-bar/app-bar.d.ts

@@ -5,4 +5,5 @@ export declare const AppBar: (({ children, className, variant, }: AppBarProps) =
     Subtitle: import('react').ForwardRefExoticComponent<import('./types').AppBarSubtitleProps & import('react').RefAttributes<HTMLDivElement>>;
     Trailing: import('react').ForwardRefExoticComponent<import('./types').AppBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
     Center: import('react').ForwardRefExoticComponent<import('./types').AppBarCenterProps & import('react').RefAttributes<HTMLDivElement>>;
+    Bottom: import('react').ForwardRefExoticComponent<import('./types').AppBarBottomProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/app-bar/app-bar.stories.d.ts

@@ -8,6 +8,7 @@ declare const meta: {
         Subtitle: import('react').ForwardRefExoticComponent<import('./types').AppBarSubtitleProps & import('react').RefAttributes<HTMLDivElement>>;
         Trailing: import('react').ForwardRefExoticComponent<import('./types').AppBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
         Center: import('react').ForwardRefExoticComponent<import('./types').AppBarCenterProps & import('react').RefAttributes<HTMLDivElement>>;
+        Bottom: import('react').ForwardRefExoticComponent<import('./types').AppBarBottomProps & import('react').RefAttributes<HTMLDivElement>>;
     };
     parameters: {
         layout: string;
@@ -17,3 +18,4 @@ export default meta;
 type Story = StoryObj<typeof AppBar>;
 export declare const Home: Story;
 export declare const Detail: Story;
+export declare const WithBottom: Story;

package/dist/components/app-bar/types.d.ts

@@ -37,3 +37,9 @@ export interface AppBarProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
 }
+/**
+ * Props for AppBarBottom (bottom area for additional content)
+ */
+export interface AppBarBottomProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}

package/dist/components/calculator/calculator.atoms.d.ts

@@ -0,0 +1,2 @@
+import { CalculatorButtonProps } from './types';
+export declare const CalculatorButton: import('react').ForwardRefExoticComponent<CalculatorButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/calculator/calculator.d.ts

@@ -0,0 +1,2 @@
+import { CalculatorProps } from './types';
+export declare const Calculator: import('react').ForwardRefExoticComponent<CalculatorProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/calculator/calculator.stories.d.ts

@@ -0,0 +1,8 @@
+import { Calculator } from './calculator';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Calculator>;
+export default meta;
+type Story = StoryObj<typeof Calculator>;
+export declare const Default: Story;
+export declare const WithInitialValue: Story;
+export declare const Disabled: Story;

package/dist/components/calculator/helpers.d.ts

@@ -0,0 +1,7 @@
+export declare const calculatorRootVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const calculatorButtonVariants: (props?: ({
+    variant?: "default" | "danger" | "operator" | "action" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,2 @@
+export { Calculator } from './calculator';
+export type * from './types';

package/dist/components/calculator/types.d.ts

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes } from 'react';
+/**
+ * Props for Calculator component
+ */
+export interface CalculatorProps {
+    /**
+     * Initial value to display in the calculator input
+     */
+    initialValue?: string | number;
+    /**
+     * Callback when the value changes (on equals or input)
+     */
+    onChange?: (value: string) => void;
+    /**
+     * If true, disables all calculator input
+     */
+    disabled?: boolean;
+    /**
+     * Optional className for the calculator root
+     */
+    className?: string;
+    /**
+     * Optional aria-label for accessibility
+     */
+    'aria-label'?: string;
+}
+export interface CalculatorButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'action' | 'operator' | 'danger';
+}

package/dist/components/calculator/use-calculator.d.ts

@@ -0,0 +1,11 @@
+export interface UseCalculatorOptions {
+    initialValue?: string | number;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+}
+export declare function useCalculator({ initialValue, disabled, onChange, }: UseCalculatorOptions): {
+    input: string;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    handleButton: (val: string) => void;
+    handleInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/components/calculator-input/calculator-input.atoms.d.ts

@@ -0,0 +1,11 @@
+import { CalculatorInputProps } from './types';
+/**
+ * CalculatorInputField is the input field for CalculatorInput
+ */
+export interface CalculatorInputFieldProps extends Omit<CalculatorInputProps, 'onChange'> {
+    onChange: (value: number | '') => void;
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    readOnly?: boolean;
+}
+export declare const CalculatorInputField: import('react').ForwardRefExoticComponent<CalculatorInputFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/calculator-input/calculator-input.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CalculatorInputProps } from './types';
+/**
+ * CalculatorInput is an input field with a modal calculator picker
+ */
+export declare const CalculatorInput: FC<CalculatorInputProps & {
+    headerLabel?: string;
+}>;

package/dist/components/calculator-input/calculator-input.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CalculatorInput } from './calculator-input';
+declare const meta: Meta<typeof CalculatorInput>;
+export default meta;
+type Story = StoryObj<typeof CalculatorInput>;
+export declare const Basic: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;

package/dist/components/calculator-input/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const calculatorInputVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/calculator-input/index.d.ts

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

package/dist/components/calculator-input/types.d.ts

@@ -0,0 +1,51 @@
+import { CalculatorProps } from '../calculator/types';
+import { ModalRootProps } from '../modal/types';
+/**
+ * Props for CalculatorInput component
+ */
+export interface CalculatorInputProps extends Omit<CalculatorProps, 'value' | 'onChange'> {
+    /**
+     * The value of the input (number or empty string)
+     */
+    value: number | '';
+    /**
+     * Called when the value changes
+     */
+    onChange: (value: number | '') => void;
+    /**
+     * Label text to display above the input
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Error message for invalid state
+     */
+    error?: React.ReactNode;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * If true, disables the input
+     */
+    disabled?: boolean;
+    /**
+     * Modal props for customizing the modal behavior
+     */
+    modalProps?: Partial<ModalRootProps>;
+    /**
+     * Optional: ARIA label for dialog
+     */
+    'aria-label'?: string;
+    /**
+     * Optional: ARIA labelledby for dialog
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Optional: ARIA describedby for dialog
+     */
+    'aria-describedby'?: string;
+}

package/dist/components/drawer/drawer.stories.d.ts

@@ -39,3 +39,4 @@ export declare const FullWidth: Story;
  * Shows how to disable the responsive behavior for custom button arrangements
  */
 export declare const CustomFooterLayout: Story;
+export declare const Fade: Story;

package/dist/components/drawer/helpers.d.ts

@@ -14,6 +14,7 @@ export declare const drawerVariants: (props?: ({
     position?: "right" | "left" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "3/4" | "full" | null | undefined;
     variant?: "default" | "glass" | null | undefined;
+    transitionType?: "slide" | "fade" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Drawer header variants

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

@@ -1,10 +1,2 @@
-/**
- * Drawer component exports
- *
- * Provides a sliding drawer overlay component with compound pattern
- * Supports left/right positioning, multiple sizes, and glass variant
- */
 export { Drawer } from './drawer';
-export { DrawerOverlay, DrawerHeader, DrawerBody, DrawerFooter, } from './drawer.atoms';
-export { useDrawerContext } from './context';
-export type { DrawerProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerOverlayProps, DrawerContextValue, DrawerPosition, DrawerSize, DrawerVariant, DrawerVariantProps, } from './types';
+export type * from './types';

package/dist/components/drawer/types.d.ts

@@ -1,6 +1,10 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { VariantProps } from '../../utils/variants';
 import { drawerVariants } from './helpers';
+/**
+ * Drawer transition type options
+ */
+export type DrawerTransitionType = 'slide' | 'fade';
 /**
  * Base drawer variant props derived from the drawer variants
  */
@@ -31,6 +35,8 @@ export interface DrawerContextValue {
     size: DrawerSize;
     /** Drawer variant */
     variant: DrawerVariant;
+    /** Drawer transition type */
+    transitionType: DrawerTransitionType;
 }
 /**
  * Props for the Drawer component (controlled component)
@@ -46,6 +52,8 @@ export interface DrawerProps extends ComponentPropsWithoutRef<'div'> {
     size?: DrawerSize;
     /** Drawer variant */
     variant?: DrawerVariant;
+    /** Drawer transition type */
+    transitionType?: DrawerTransitionType;
     /** Children components */
     children: ReactNode;
     /** Additional CSS classes */

package/dist/components/index.d.ts

@@ -7,6 +7,8 @@ export * from './breadcrumbs';
 export * from './button';
 export * from './button-icon';
 export * from './button-float';
+export * from './calculator';
+export * from './calculator-input';
 export * from './calendar';
 export * from './checkbox-input';
 export * from './chip-input';
@@ -19,12 +21,15 @@ export * from './segment-single-input';
 export * from './segment-multiple-input';
 export * from './select-input';
 export * from './snackbar';
+export * from './table';
 export * from './tabs';
 export * from './text';
 export * from './text-input';
 export * from './textarea-input';
 export * from './tile';
+export * from './time-picker-input';
 export * from './top-bar';
 export * from './loading-indicator';
+export * from './page-layout';
 export * from './switch-input';
 export * from './skeleton';

package/dist/components/page-layout/helpers.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tailwind variants for PageLayout
+ */
+export declare const pageLayoutVariants: (props?: ({
+    type?: "mobile" | "desktop" | "tablet" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/page-layout/index.d.ts

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

package/dist/components/page-layout/page-layout.d.ts

@@ -0,0 +1,8 @@
+import { PageLayoutProps } from './types';
+import * as React from 'react';
+/**
+ * PageLayout component for consistent responsive layout breakpoints
+ *
+ * @group Layout
+ */
+export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/page-layout/page-layout.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PageLayout } from './page-layout';
+declare const meta: Meta<typeof PageLayout>;
+export default meta;
+type Story = StoryObj<typeof PageLayout>;
+export declare const Desktop: Story;
+export declare const Tablet: Story;
+export declare const Mobile: Story;

package/dist/components/page-layout/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Props for the PageLayout component
+ */
+export interface PageLayoutProps {
+    /**
+     * The layout type to use for breakpoint consistency
+     * - 'desktop': For large screens (default)
+     * - 'tablet': For medium screens
+     * - 'mobile': For small screens
+     */
+    type?: 'desktop' | 'tablet' | 'mobile';
+    /**
+     * Content to render inside the layout
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class names to apply to the root element
+     */
+    className?: string;
+}

package/dist/components/table/context.d.ts

@@ -0,0 +1,3 @@
+import { TableContextValue } from './types';
+export declare const TableProvider: import('react').Provider<TableContextValue | null>;
+export declare function useTableContext(): TableContextValue;

package/dist/components/table/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getTableColumnClass: (columns: number) => string;
+export declare const getRowSpanClass: (span: number) => string;

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

@@ -0,0 +1,2 @@
+export { Table } from './table';
+export type * from './types';

package/dist/components/table/table.atoms.d.ts

@@ -0,0 +1,22 @@
+import { TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableColumnProps } from './types';
+/**
+ * Table.Header renders the table header row (grid-based, ARIA role)
+ */
+declare const TableHeader: import('react').ForwardRefExoticComponent<TableHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Table.Body renders the table body (grid-based, ARIA role)
+ */
+declare const TableBody: import('react').ForwardRefExoticComponent<TableBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Table.Footer renders the table footer row (grid-based, ARIA role)
+ */
+declare const TableFooter: import('react').ForwardRefExoticComponent<TableFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Table.Row renders a table row (grid-based, ARIA role)
+ */
+declare const TableRow: import('react').ForwardRefExoticComponent<TableRowProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Table.Column renders a table cell (grid-based, ARIA role)
+ */
+declare const TableColumn: import('react').ForwardRefExoticComponent<TableColumnProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TableHeader, TableBody, TableFooter, TableRow, TableColumn };

package/dist/components/table/table.d.ts

@@ -0,0 +1,8 @@
+import { TableProps } from './types';
+export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: import('react').ForwardRefExoticComponent<import('./types').TableHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    Body: import('react').ForwardRefExoticComponent<import('./types').TableBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<import('./types').TableFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+    Row: import('react').ForwardRefExoticComponent<import('./types').TableRowProps & import('react').RefAttributes<HTMLDivElement>>;
+    Column: import('react').ForwardRefExoticComponent<import('./types').TableColumnProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/components/table/table.stories.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./types').TableProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Header: import('react').ForwardRefExoticComponent<import('./types').TableHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+        Body: import('react').ForwardRefExoticComponent<import('./types').TableBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+        Footer: import('react').ForwardRefExoticComponent<import('./types').TableFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+        Row: import('react').ForwardRefExoticComponent<import('./types').TableRowProps & import('react').RefAttributes<HTMLDivElement>>;
+        Column: import('react').ForwardRefExoticComponent<import('./types').TableColumnProps & import('react').RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * ColumnSpan story demonstrates various column span (1-12) and mixed widths
+ */
+export declare const ColumnSpan: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Alignment story demonstrates left, center, and right alignment in TableColumn
+ */
+export declare const Alignment: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/table/types.d.ts

@@ -0,0 +1,51 @@
+import { HTMLAttributes, ReactNode, TableHTMLAttributes } from 'react';
+/**
+ * TableProps for the root Table component
+ */
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Table children (Header, Body, Footer, etc) */
+    children: ReactNode;
+    maxColumns?: number;
+}
+/**
+ * Context value for Table
+ */
+export interface TableContextValue {
+    maxColumns: number;
+}
+/**
+ * TableHeaderProps for <Table.Header>
+ */
+export interface TableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+/**
+ * TableBodyProps for <Table.Body>
+ */
+export interface TableBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * TableFooterProps for <Table.Footer>
+ */
+export interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * TableRowProps for <Table.Row>
+ */
+export interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * TableColumnProps for <Table.Column>
+ * @property as - 'th' for header, 'td' for body/footer (default: 'td')
+ * @property span - number of grid columns to span (1-12)
+ */
+export interface TableColumnProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    as: 'th' | 'td';
+    span: number;
+    /** Horizontal alignment of cell content (left, center, right). Default: left */
+    align?: 'left' | 'center' | 'right';
+}

package/dist/components/time-picker-input/helpers.d.ts

@@ -0,0 +1,4 @@
+export declare const timeSegmentButtonVariants: (props?: ({
+    active?: boolean | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/time-picker-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePickerInput } from './time-picker-input';
+export type * from './types';

package/dist/components/time-picker-input/time-picker-input.atoms.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface TimeFieldProps {
+    value: string;
+    onChange: (val: string) => void;
+    label: string;
+    'aria-label'?: string;
+    disabled?: boolean;
+}
+export declare const TimeField: React.FC<TimeFieldProps>;
+export interface AmPmSegmentProps {
+    value: 'AM' | 'PM';
+    onChange: (val: 'AM' | 'PM') => void;
+    disabled?: boolean;
+}
+export declare const AmPmSegment: React.FC<AmPmSegmentProps>;

package/dist/components/time-picker-input/time-picker-input.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { TimePickerInputProps } from './types';
+/**
+ * TimePickerInput component for Versaur UI
+ *
+ * Provides a modal-based time picker with hour, minute, and AM/PM selection
+ * Follows Material 3 guidelines (no clock UI)
+ */
+export declare const TimePickerInput: React.FC<TimePickerInputProps>;

package/dist/components/time-picker-input/time-picker-input.stories.d.ts

@@ -0,0 +1,7 @@
+import { TimePickerInput } from './time-picker-input';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof TimePickerInput>;
+export default meta;
+type Story = StoryObj<typeof TimePickerInput>;
+export declare const Basic: Story;
+export declare const WithError: Story;

package/dist/components/time-picker-input/types.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { ModalRootProps } from '../modal';
+/**
+ * Props for the TimePickerInput component
+ */
+export interface TimePickerInputProps {
+    /**
+     * The selected time value in 12-hour format (e.g., '02:30 PM')
+     */
+    value: string;
+    /**
+     * Called when the time value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Optional label for the input
+     */
+    label?: ReactNode;
+    /**
+     * Optional helper text below the input
+     */
+    helperText?: ReactNode;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional error message
+     */
+    error?: ReactNode;
+    /**
+     * Whether to decide the modal placement'
+     */
+    placement?: ModalRootProps['placement'];
+    /**
+     * Optional: ARIA label for dialog
+     */
+    'aria-label'?: string;
+    /**
+     * Optional: ARIA labelledby for dialog
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Optional: ARIA describedby for dialog
+     */
+    'aria-describedby'?: string;
+}

package/dist/hooks/use-floating-position/index.d.ts

@@ -0,0 +1 @@
+export { useFloatingPosition } from './use-floating-position';

package/dist/hooks/use-floating-position/use-floating-position.d.ts

@@ -0,0 +1,12 @@
+import { RefCallback, CSSProperties } from 'react';
+/**
+ * useFloatingPositionSticky
+ * Determines the correct positioning and style for a floating element that should always be visible
+ * at the bottom right of a scrollable container, even if the container is taller than the viewport.
+ *
+ * Returns:
+ *   - containerRef: attach to the container div
+ *   - style: CSSProperties for the button (position, bottom, right, transform)
+ *   - positionClass: string for Tailwind/utility classes
+ */
+export declare function useFloatingPosition(side: 'right' | 'left', offset?: string): [RefCallback<HTMLDivElement>, CSSProperties, string];