asterui 0.10.2 → 0.11.0

package/README.md

@@ -1,10 +1,10 @@
-# BloomUI
+# AsterUI
 
 A comprehensive React component library built with [DaisyUI](https://daisyui.com) and [Tailwind CSS](https://tailwindcss.com).
 
 ## Prerequisites
 
-BloomUI requires Tailwind CSS v4 and DaisyUI v5 to be configured in your project.
+AsterUI requires Tailwind CSS v4 and DaisyUI v5 to be configured in your project.
 
 Install Tailwind and DaisyUI:
 
@@ -29,25 +29,25 @@ Configure your CSS file (e.g., `src/index.css`):
 ```css
 @import "tailwindcss";
 @plugin "daisyui";
-@source "../node_modules/@edadma/bloomui";
+@source "../node_modules/asterui";
 ```
 
-The `@source` directive tells Tailwind to scan the BloomUI package for classes to include in your build.
+The `@source` directive tells Tailwind to scan the AsterUI package for classes to include in your build.
 
 ## Installation
 
 ```bash
-npm install bloomui
+npm install asterui
 # or
-pnpm add bloomui
+pnpm add asterui
 # or
-yarn add bloomui
+yarn add asterui
 ```
 
 ## Usage
 
 ```tsx
-import { Form, Input, Checkbox, Button, Modal, Card, Space, Flex, Typography } from '@edadma/bloomui'
+import { Form, Input, Checkbox, Button, Modal, Card, Space, Flex, Typography } from 'asterui'
 
 const { Link, Paragraph } = Typography
 
@@ -124,9 +124,11 @@ export default function App() {
 - **InputNumber** - Numeric input with increment/decrement controls
 - **Label** - Form labels with required indicator and floating labels
 - **Mention** - Input with @mention support for tagging users
+- **OTPInput** - One-time password input with auto-focus
 - **Radio** - Radio buttons with group support
 - **Range** - Range slider with min, max, and step support
 - **Rating** - Star rating component
+- **Segmented** - Inline toggle for switching between mutually exclusive options
 - **Select** - Select dropdown with sizes and colors
 - **Textarea** - Multiline text input
 - **TimePicker** - Time input with hour and minute selection
@@ -192,6 +194,7 @@ export default function App() {
 - **Result** - Result pages for operation outcomes
 - **Skeleton** - Loading placeholder with animated shimmer effect
 - **Tooltip** - Tooltips with multiple placements
+- **Tour** - Guided tour with spotlight and step navigation
 
 ### Mockup
 - **Browser** - Browser window mockup with URL bar
@@ -201,7 +204,7 @@ export default function App() {
 
 ## Demo
 
-View live examples and documentation at [https://bloomui.io](https://bloomui.io)
+View live examples and documentation at [https://asterui.com](https://asterui.com)
 
 ## Requirements
 

package/dist/components/Segmented.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+export type SegmentedValue = string | number;
+export interface SegmentedItemProps {
+    /** Option value */
+    value: SegmentedValue;
+    /** Disable this option */
+    disabled?: boolean;
+    /** Icon to display before label */
+    icon?: React.ReactNode;
+    /** Label content */
+    children: React.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+declare const SegmentedItem: React.FC<SegmentedItemProps>;
+export interface SegmentedProps {
+    /** Currently selected value (controlled) */
+    value?: SegmentedValue;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: SegmentedValue;
+    /** Callback when selection changes */
+    onChange?: (value: SegmentedValue) => void;
+    /** Size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Take full width of container */
+    block?: boolean;
+    /** Disable all options */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Segmented.Item children */
+    children: React.ReactNode;
+}
+export declare const Segmented: React.FC<SegmentedProps> & {
+    Item: typeof SegmentedItem;
+};
+export {};

package/dist/components/Tour.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+export type TourPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'center';
+export interface TourStepProps {
+    /** Target element ref or function returning element */
+    target?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null) | null;
+    /** Step title */
+    title: React.ReactNode;
+    /** Step description */
+    description?: React.ReactNode;
+    /** Cover image or content above title */
+    cover?: React.ReactNode;
+    /** Placement of popover relative to target */
+    placement?: TourPlacement;
+    /** Custom class for this step's popover */
+    className?: string;
+    /** Called when this step becomes active */
+    onOpen?: () => void;
+    /** Called when leaving this step */
+    onClose?: () => void;
+}
+export interface TourProps {
+    /** Whether tour is visible */
+    open?: boolean;
+    /** Callback when tour closes */
+    onClose?: () => void;
+    /** Callback when tour finishes (last step completed) */
+    onFinish?: () => void;
+    /** Tour steps */
+    steps: TourStepProps[];
+    /** Current step (controlled) */
+    current?: number;
+    /** Callback when step changes */
+    onChange?: (current: number) => void;
+    /** Show mask overlay */
+    mask?: boolean;
+    /** Type affects styling */
+    type?: 'default' | 'primary';
+    /** Gap between highlight and target [radius, offset] or single number */
+    gap?: number | [number, number];
+    /** Text for prev button */
+    prevButtonText?: React.ReactNode;
+    /** Text for next button */
+    nextButtonText?: React.ReactNode;
+    /** Text for finish button */
+    finishButtonText?: React.ReactNode;
+    /** Text for skip button */
+    skipButtonText?: React.ReactNode;
+    /** Show skip button */
+    showSkip?: boolean;
+    /** Show step indicators */
+    showIndicators?: boolean;
+    /** Close on mask click */
+    closeOnMaskClick?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** Scroll target into view */
+    scrollIntoView?: boolean;
+    /** Z-index for tour overlay */
+    zIndex?: number;
+}
+export declare const Tour: React.FC<TourProps>;

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+/**
+ * Hook that detects clicks outside of a referenced element.
+ * Useful for closing dropdowns, modals, or menus.
+ *
+ * @param handler - Callback when click outside is detected
+ * @param enabled - Whether the listener is active (default: true)
+ * @returns Ref to attach to the element
+ *
+ * @example
+ * const ref = useClickOutside(() => setIsOpen(false))
+ *
+ * <div ref={ref}>
+ *   <Dropdown>...</Dropdown>
+ * </div>
+ */
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): RefObject<T | null>;

package/dist/hooks/useClipboard.d.ts

@@ -0,0 +1,20 @@
+export interface UseClipboardReturn {
+    copy: (text: string) => Promise<boolean>;
+    copied: boolean;
+    error: Error | null;
+    reset: () => void;
+}
+/**
+ * Hook for copying text to clipboard with success/error state.
+ *
+ * @param timeout - Duration in ms to show copied state (default: 2000)
+ * @returns Object with copy function and state
+ *
+ * @example
+ * const { copy, copied } = useClipboard()
+ *
+ * <Button onClick={() => copy('Hello!')}>
+ *   {copied ? 'Copied!' : 'Copy'}
+ * </Button>
+ */
+export declare function useClipboard(timeout?: number): UseClipboardReturn;

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Hook that delays updating a value until after a specified delay.
+ * Useful for search inputs to avoid excessive API calls.
+ *
+ * @param value - Value to debounce
+ * @param delay - Delay in milliseconds (default: 300)
+ * @returns Debounced value
+ *
+ * @example
+ * const [search, setSearch] = useState('')
+ * const debouncedSearch = useDebounce(search, 500)
+ *
+ * useEffect(() => {
+ *   // This runs 500ms after user stops typing
+ *   fetchResults(debouncedSearch)
+ * }, [debouncedSearch])
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/dist/hooks/useDisclosure.d.ts

@@ -0,0 +1,20 @@
+export interface UseDisclosureReturn {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onToggle: () => void;
+    setIsOpen: (value: boolean) => void;
+}
+/**
+ * Hook for managing open/close state of modals, drawers, dropdowns, etc.
+ *
+ * @param defaultIsOpen - Initial open state (default: false)
+ * @returns Object with isOpen state and control functions
+ *
+ * @example
+ * const { isOpen, onOpen, onClose } = useDisclosure()
+ *
+ * <Button onClick={onOpen}>Open Modal</Button>
+ * <Modal open={isOpen} onClose={onClose}>Content</Modal>
+ */
+export declare function useDisclosure(defaultIsOpen?: boolean): UseDisclosureReturn;

package/dist/hooks/useHover.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+export interface UseHoverReturn<T extends HTMLElement> {
+    ref: RefObject<T | null>;
+    isHovered: boolean;
+}
+/**
+ * Hook that tracks hover state of an element.
+ *
+ * @returns Object with ref and isHovered state
+ *
+ * @example
+ * const { ref, isHovered } = useHover<HTMLDivElement>()
+ *
+ * <div ref={ref} className={isHovered ? 'bg-blue-500' : 'bg-gray-500'}>
+ *   Hover me!
+ * </div>
+ */
+export declare function useHover<T extends HTMLElement = HTMLElement>(): UseHoverReturn<T>;

package/dist/hooks/useKeyPress.d.ts

@@ -0,0 +1,40 @@
+export interface UseKeyPressOptions {
+    /** Target element (default: window) */
+    target?: HTMLElement | Window | null;
+    /** Event type: 'keydown' | 'keyup' (default: 'keydown') */
+    event?: 'keydown' | 'keyup';
+    /** Prevent default browser behavior */
+    preventDefault?: boolean;
+}
+/**
+ * Hook that detects when a specific key is pressed.
+ *
+ * @param targetKey - Key to detect (e.g., 'Enter', 'Escape', 'a')
+ * @param options - Configuration options
+ * @returns Whether the key is currently pressed
+ *
+ * @example
+ * const enterPressed = useKeyPress('Enter')
+ * const escapePressed = useKeyPress('Escape')
+ *
+ * useEffect(() => {
+ *   if (escapePressed) closeModal()
+ * }, [escapePressed])
+ *
+ * @example
+ * // With callback for immediate action
+ * useKeyPress('Escape', { preventDefault: true })
+ */
+export declare function useKeyPress(targetKey: string, options?: UseKeyPressOptions): boolean;
+/**
+ * Hook that calls a callback when a specific key is pressed.
+ *
+ * @param targetKey - Key to detect
+ * @param callback - Function to call when key is pressed
+ * @param options - Configuration options
+ *
+ * @example
+ * useKeyPressCallback('Escape', () => closeModal())
+ * useKeyPressCallback('Enter', () => submitForm(), { preventDefault: true })
+ */
+export declare function useKeyPressCallback(targetKey: string, callback: (event: KeyboardEvent) => void, options?: UseKeyPressOptions): void;

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Hook for persisting state to localStorage.
+ *
+ * @param key - localStorage key
+ * @param initialValue - Initial value if key doesn't exist
+ * @returns [value, setValue, removeValue] tuple
+ *
+ * @example
+ * const [theme, setTheme] = useLocalStorage('theme', 'light')
+ * const [user, setUser, removeUser] = useLocalStorage('user', null)
+ */
+export declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void, () => void];

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hook that returns the previous value of a variable.
+ * Useful for comparing current and previous values in effects.
+ *
+ * @param value - Current value
+ * @returns Previous value (undefined on first render)
+ *
+ * @example
+ * const [count, setCount] = useState(0)
+ * const prevCount = usePrevious(count)
+ *
+ * // prevCount is the value from previous render
+ * console.log(`Changed from ${prevCount} to ${count}`)
+ */
+export declare function usePrevious<T>(value: T): T | undefined;

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,21 @@
+export interface WindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * Hook that tracks window dimensions.
+ * Updates on window resize.
+ *
+ * @returns Object with current width and height
+ *
+ * @example
+ * const { width, height } = useWindowSize()
+ *
+ * return (
+ *   <div>
+ *     Window: {width} x {height}
+ *     {width < 768 && <MobileNav />}
+ *   </div>
+ * )
+ */
+export declare function useWindowSize(): WindowSize;

package/dist/index.d.ts

@@ -126,6 +126,8 @@ export { Result } from './components/Result';
 export type { ResultProps, ResultStatus } from './components/Result';
 export { Select } from './components/Select';
 export type { SelectProps } from './components/Select';
+export { Segmented } from './components/Segmented';
+export type { SegmentedProps, SegmentedItemProps, SegmentedValue } from './components/Segmented';
 export { Skeleton } from './components/Skeleton';
 export type { SkeletonProps } from './components/Skeleton';
 export { Space } from './components/Space';
@@ -154,6 +156,8 @@ export { Timeline } from './components/Timeline';
 export type { TimelineProps, TimelineItemProps } from './components/Timeline';
 export { Toggle } from './components/Toggle';
 export type { ToggleProps } from './components/Toggle';
+export { Tour } from './components/Tour';
+export type { TourProps, TourStepProps, TourPlacement } from './components/Tour';
 export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
 export { Transfer } from './components/Transfer';
@@ -170,3 +174,17 @@ export { Show, Hide } from './components/Responsive';
 export type { ShowProps, HideProps } from './components/Responsive';
 export { useBreakpoint } from './hooks/useBreakpoint';
 export type { Breakpoint, UseBreakpointReturn } from './hooks/useBreakpoint';
+export { useDisclosure } from './hooks/useDisclosure';
+export type { UseDisclosureReturn } from './hooks/useDisclosure';
+export { useClipboard } from './hooks/useClipboard';
+export type { UseClipboardReturn } from './hooks/useClipboard';
+export { useLocalStorage } from './hooks/useLocalStorage';
+export { useDebounce } from './hooks/useDebounce';
+export { useClickOutside } from './hooks/useClickOutside';
+export { usePrevious } from './hooks/usePrevious';
+export { useHover } from './hooks/useHover';
+export type { UseHoverReturn } from './hooks/useHover';
+export { useKeyPress, useKeyPressCallback } from './hooks/useKeyPress';
+export type { UseKeyPressOptions } from './hooks/useKeyPress';
+export { useWindowSize } from './hooks/useWindowSize';
+export type { WindowSize } from './hooks/useWindowSize';