@dimasbaguspm/versaur 0.0.12 → 0.0.14

package/dist/types/forms/date-range-picker-input/types.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+/**
+ * ISO 8601 date string (YYYY-MM-DD)
+ */
+export type ISODateString = string;
+/**
+ * Tuple for date range value: [start, end] (ISO 8601 or null)
+ */
+export type DateRangeValue = [ISODateString | null, ISODateString | null] | null;
+/**
+ * Props for DateRangePickerInput
+ */
+export interface DateRangePickerInputProps {
+    /**
+     * The selected date range value (tuple of ISO 8601 strings or nulls)
+     */
+    value: DateRangeValue;
+    /**
+     * Callback when the value changes
+     */
+    onChange: (value: DateRangeValue) => void;
+    /**
+     * Label text to display above the input
+     */
+    label?: ReactNode;
+    /**
+     * Optional content to display inside the input (left)
+     */
+    leftContent?: ReactNode;
+    /**
+     * Optional content to display inside the input (right)
+     */
+    rightContent?: ReactNode;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message for invalid state
+     */
+    error?: ReactNode;
+    /**
+     * Visual style variant supporting Versaur color system
+     */
+    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text when no date is selected
+     */
+    placeholder?: ReactNode;
+    /**
+     * Optional id for the input element
+     */
+    id?: string;
+    /**
+     * Optional custom date formatter. If not provided, uses default format.
+     * @param date Date to format
+     * @returns Formatted date string
+     */
+    formatDate?: (date?: Date) => string;
+}

package/dist/types/forms/date-range-picker-input/use-date-range-picker.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Hook for managing open/close state and focus for DateRangePickerInput
+ */
+export declare function useDateRangePicker({ id }: {
+    id?: string;
+}): {
+    open: boolean;
+    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    inputId: string;
+    buttonRef: import('react').RefObject<HTMLButtonElement | null>;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleMenuClose: () => void;
+};

package/dist/types/overlays/bottom-sheet/bottom-sheet.atoms.d.ts

@@ -0,0 +1,17 @@
+import { BottomSheetHeaderProps, BottomSheetBodyProps, BottomSheetFooterProps, BottomSheetTitleProps } from './types';
+/**
+ * BottomSheetTitle: Title text for the sheet header (for consistency)
+ */
+export declare const BottomSheetTitle: import('react').ForwardRefExoticComponent<BottomSheetTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+/**
+ * BottomSheetHeader: Top section for title or actions
+ */
+export declare const BottomSheetHeader: import('react').ForwardRefExoticComponent<BottomSheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * BottomSheetBody: Main content area
+ */
+export declare const BottomSheetBody: import('react').ForwardRefExoticComponent<BottomSheetBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * BottomSheetFooter: Bottom section for actions
+ */
+export declare const BottomSheetFooter: import('react').ForwardRefExoticComponent<BottomSheetFooterProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/overlays/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,7 @@
+import { BottomSheetProps } from './types';
+export declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: import('react').ForwardRefExoticComponent<import('./types').BottomSheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    Title: import('react').ForwardRefExoticComponent<import('./types').BottomSheetTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+    Body: import('react').ForwardRefExoticComponent<import('./types').BottomSheetBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<import('./types').BottomSheetFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/types/overlays/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bottom-sheet';
+export * from './types';

package/dist/types/overlays/bottom-sheet/types.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for BottomSheetRoot (main component)
+ */
+export interface BottomSheetProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls open state (controlled only)
+     */
+    isOpen: boolean;
+    /**
+     * Called when the backdrop is clicked (should close the sheet)
+     */
+    onClose: () => void;
+    /**
+     * Content of the bottom sheet
+     */
+    children: React.ReactNode;
+}
+export type BottomSheetHeaderProps = HTMLAttributes<HTMLDivElement>;
+export type BottomSheetBodyProps = HTMLAttributes<HTMLDivElement>;
+export type BottomSheetFooterProps = HTMLAttributes<HTMLDivElement>;
+export type BottomSheetTitleProps = HTMLAttributes<HTMLHeadingElement>;

package/dist/types/overlays/drawer/drawer.atoms.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerOverlayProps } from './types';
+import { DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerOverlayProps, DrawerHeaderTabProps } from './types';
 /**
  * DrawerOverlay - Background overlay that appears behind the drawer
  * Always provides a dark blurred background to help users focus on the drawer content
@@ -10,6 +10,7 @@ export declare const DrawerOverlay: React.ForwardRefExoticComponent<DrawerOverla
  * Typically contains the title and close button
  */
 export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerTab: React.ForwardRefExoticComponent<DrawerHeaderTabProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * DrawerBody - Main content area of the drawer
  * Scrollable container for the drawer content

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

@@ -11,6 +11,7 @@ export declare const DrawerRoot: React.FC<DrawerProps>;
  */
 export declare const Drawer: React.FC<DrawerProps> & {
     Header: React.ForwardRefExoticComponent<import('./types').DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Tab: React.ForwardRefExoticComponent<import('./types').DrawerHeaderTabProps & React.RefAttributes<HTMLDivElement>>;
     Body: React.ForwardRefExoticComponent<import('./types').DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<import('./types').DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
 import { VariantProps } from '../../utils/variants';
 import { drawerVariants } from './helpers';
 /**
@@ -65,8 +65,11 @@ export interface DrawerProps extends ComponentPropsWithoutRef<'div'> {
 export interface DrawerHeaderProps extends ComponentPropsWithoutRef<'div'> {
     /** Children components */
     children: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
+    hasTab?: boolean;
+}
+export interface DrawerHeaderTabProps extends HTMLAttributes<HTMLDivElement> {
+    /** Children components */
+    children: ReactNode;
 }
 /**
  * Props for the DrawerBody component

package/dist/types/overlays/index.d.ts

@@ -1,3 +1,4 @@
 export * from './drawer';
 export * from './menu';
 export * from './modal';
+export * from './bottom-sheet';

package/dist/types/primitive/calendar/calendar.atoms.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+/**
+ * CalendarHeader atom for Calendar component
+ */
+export declare const CalendarHeader: FC;
+/**
+ * CalendarWeekdays atom for Calendar component
+ */
+export declare const CalendarWeekdays: React.FC;
+/**
+ * CalendarDays atom: delegates to single or range atom based on context
+ */
+export declare const CalendarDays: FC;

package/dist/types/primitive/calendar/index.d.ts

@@ -1,2 +1,2 @@
 export { Calendar } from './calendar';
-export type { CalendarProps } from './types';
+export type * from './types';

package/dist/types/primitive/calendar/types.d.ts

@@ -4,17 +4,51 @@
  * @property onChange - Callback when a date is selected
  * @property className - Custom class for the calendar container
  */
+/**
+ * Calendar selection type
+ * - 'single': single date selection
+ * - 'range': date range selection (start and end)
+ */
+export type CalendarType = 'single' | 'range';
+/**
+ * Calendar value type
+ * - Date for single
+ * - [Date | null, Date | null] for range
+ */
+export type CalendarValue = Date | [Date | null, Date | null];
+/**
+ * CalendarProps defines the props for the Calendar component
+ * @property value - The selected date or range
+ * @property onChange - Callback when a date or range is selected
+ * @property className - Custom class for the calendar container
+ * @property type - Selection type: 'single' or 'range'
+ */
 export interface CalendarProps {
     /**
-     * The selected date
+     * The selected date or range
      */
-    value?: Date;
+    value?: CalendarValue;
     /**
-     * Callback when a date is selected
+     * Callback when a date or range is selected
      */
-    onChange?: (date: Date) => void;
+    onChange?: (value: CalendarValue) => void;
     /**
      * Custom class for the calendar container
      */
     className?: string;
+    /**
+     * Selection type: 'single' or 'range'
+     */
+    type?: CalendarType;
+}
+/**
+ * Props for CalendarHeader atom
+ */
+export interface CalendarHeaderProps {
+    value?: CalendarValue;
+    year: number;
+    month: number;
+    onPrevMonth: () => void;
+    onNextMonth: () => void;
+    className?: string;
 }

package/dist/types/primitive/calendar/use-calendar.d.ts

@@ -0,0 +1,18 @@
+import { CalendarType, CalendarValue } from './types';
+export interface UseCalendarProps {
+    value?: CalendarValue;
+    type: CalendarType;
+    onChange?: (value: CalendarValue) => void;
+    initialYear: number;
+    initialMonth: number;
+}
+export declare function useCalendar({ value: controlledValue, type, onChange, initialYear, initialMonth, }: UseCalendarProps): {
+    year: number;
+    month: number;
+    value: CalendarValue | undefined;
+    setMonth: import('react').Dispatch<import('react').SetStateAction<number>>;
+    setYear: import('react').Dispatch<import('react').SetStateAction<number>>;
+    onChange: (val: CalendarValue) => void;
+    handlePrevMonth: () => void;
+    handleNextMonth: () => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",

package/dist/js/drawer-Cn7sreJG.js

@@ -1,221 +0,0 @@
-import { c as i, j as n, a as l } from "./index-DOdDlCoL.js";
-import d, { createContext as p, useContext as h, useCallback as y, useEffect as j } from "react";
-const v = p(null);
-function c() {
-  const t = h(v);
-  if (!t)
-    throw new Error(
-      "Drawer components must be used within a DrawerRoot component"
-    );
-  return t;
-}
-const k = i(
-  "fixed inset-0 z-50 transition-opacity duration-300 bg-black/30 backdrop-blur-md",
-  {
-    variants: {
-      state: {
-        open: "opacity-100",
-        closed: "opacity-0 pointer-events-none"
-      }
-    },
-    defaultVariants: {
-      state: "closed"
-    }
-  }
-), D = i("fixed z-50 shadow-xl flex flex-col", {
-  variants: {
-    position: {
-      left: "left-0 top-0 bottom-0 border-r",
-      right: "right-0 top-0 bottom-0 border-l"
-    },
-    size: {
-      sm: "w-80",
-      md: "w-96",
-      lg: "w-[28rem]",
-      xl: "w-[32rem]",
-      "3/4": "w-[75vw]",
-      full: "w-full"
-    },
-    variant: {
-      default: "bg-white border-gray-200",
-      glass: "bg-white/10 backdrop-blur-lg border-white/20"
-    },
-    transitionType: {
-      slide: "transition-transform duration-300 ease-in-out",
-      fade: "transition-opacity duration-300 ease-in-out"
-    }
-  },
-  defaultVariants: {
-    position: "right",
-    size: "md",
-    variant: "default",
-    transitionType: "slide"
-  }
-}), V = i("flex-shrink-0 px-6 py-4 border-b", {
-  variants: {
-    variant: {
-      default: "bg-white border-gray-200",
-      glass: "bg-transparent border-white/10"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-}), C = i("flex-1 overflow-y-auto px-6 py-4", {
-  variants: {
-    variant: {
-      default: "bg-white",
-      glass: "bg-transparent"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-}), R = i("flex-shrink-0 px-6 py-4 border-t", {
-  variants: {
-    variant: {
-      default: "bg-white border-gray-200",
-      glass: "bg-transparent border-white/10"
-    },
-    responsiveFlex: {
-      true: "flex flex-row gap-3 sm:justify-end [&>*]:sm:flex-grow-0 [&>*]:flex-grow",
-      false: "flex gap-2"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    responsiveFlex: !0
-  }
-}), E = d.forwardRef(({ className: t, ...e }, a) => {
-  const { isOpen: r, onClose: o } = c(), s = () => {
-    o();
-  };
-  return /* @__PURE__ */ n.jsx(
-    "div",
-    {
-      ref: a,
-      onClick: s,
-      className: l(
-        k({
-          state: r ? "open" : "closed"
-        }),
-        t
-      ),
-      ...e
-    }
-  );
-}), N = d.forwardRef(
-  ({ children: t, className: e, ...a }, r) => {
-    const { variant: o } = c();
-    return /* @__PURE__ */ n.jsx(
-      "div",
-      {
-        ref: r,
-        className: l(V({ variant: o }), e),
-        ...a,
-        children: t
-      }
-    );
-  }
-), F = d.forwardRef(
-  ({ children: t, className: e, ...a }, r) => {
-    const { variant: o } = c();
-    return /* @__PURE__ */ n.jsx(
-      "div",
-      {
-        ref: r,
-        className: l(C({ variant: o }), e),
-        ...a,
-        children: t
-      }
-    );
-  }
-), z = d.forwardRef(
-  ({ children: t, className: e, responsiveFlex: a = !0, ...r }, o) => {
-    const { variant: s } = c();
-    return /* @__PURE__ */ n.jsx(
-      "div",
-      {
-        ref: o,
-        className: l(
-          R({ variant: s, responsiveFlex: a }),
-          e
-        ),
-        ...r,
-        children: t
-      }
-    );
-  }
-), B = ({
-  children: t,
-  isOpen: e,
-  onClose: a,
-  position: r = "right",
-  size: o = "md",
-  variant: s = "default",
-  transitionType: f = "slide",
-  className: x,
-  ...b
-}) => {
-  const u = y(() => {
-    a(!1);
-  }, [a]), m = {
-    isOpen: e,
-    onClose: u,
-    position: r,
-    size: o,
-    variant: s,
-    transitionType: f
-  };
-  return j(() => {
-    const w = (g) => {
-      g.key === "Escape" && e && u();
-    };
-    return e && (document.addEventListener("keydown", w), document.body.style.overflow = "hidden"), () => {
-      document.removeEventListener("keydown", w), document.body.style.overflow = "unset";
-    };
-  }, [e, u]), /* @__PURE__ */ n.jsx(v.Provider, { value: m, children: /* @__PURE__ */ n.jsxs(
-    "div",
-    {
-      className: l(
-        "fixed z-50 inset-0 pointer-events-none",
-        e && "pointer-events-auto"
-      ),
-      children: [
-        /* @__PURE__ */ n.jsx(E, {}),
-        /* @__PURE__ */ n.jsx(
-          "div",
-          {
-            role: e ? "dialog" : void 0,
-            "aria-modal": e ? "true" : void 0,
-            className: l(
-              D({
-                position: r,
-                size: o,
-                variant: s,
-                transitionType: f
-              }),
-              f === "slide" ? [
-                !e && r === "left" && "-translate-x-full",
-                !e && r === "right" && "translate-x-full"
-              ] : [
-                "left-0 right-0 top-0 bottom-0",
-                e ? "opacity-100" : "opacity-0 pointer-events-none"
-              ],
-              x
-            ),
-            ...b,
-            children: e && t
-          }
-        )
-      ]
-    }
-  ) });
-}, _ = Object.assign(B, {
-  Header: N,
-  Body: F,
-  Footer: z
-});
-export {
-  _ as D
-};