@dimasbaguspm/versaur 0.0.3 → 0.0.5

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

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Badge } from './badge';
+/**
+ * Size variants for the Badge component.
+ */
+export declare const Sizes: Story;
 /**
  * The Badge component is used to present or highlight values with various styles and configurations.
  * It supports different variants (default/outline), sizes, shapes, colors, and icon positioning.

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

@@ -6,5 +6,6 @@ export declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     color?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | null | undefined;
     shape?: "square" | "rounded" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -8,6 +8,13 @@ import { HTMLAttributes, ReactNode } from 'react';
  * @property iconRight - Icon to display on the right side
  */
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Size of the badge
+     * - sm: Small (compact)
+     * - md: Medium (default)
+     * - lg: Large
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Visual style variant
      * - default: Solid background with text

package/dist/components/button-icon/helpers.d.ts

@@ -0,0 +1,11 @@
+import { ButtonIconProps } from './types';
+import { IconProps } from '../icon';
+/**
+ * Maps ButtonIcon variant to Icon color prop
+ */
+export declare function getIconColorFromVariant(variant?: ButtonIconProps['variant']): IconProps['color'];
+export declare const buttonIconVariants: (props?: ({
+    variant?: "outline" | "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | "primary-outline" | "primary-ghost" | "secondary-outline" | "secondary-ghost" | "tertiary-outline" | "tertiary-ghost" | "ghost-outline" | "neutral-outline" | "neutral-ghost" | "success-outline" | "success-ghost" | "info-outline" | "info-ghost" | "warning-outline" | "warning-ghost" | "danger-outline" | "danger-ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    shape?: "circle" | "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/button-icon/types.d.ts

@@ -1,26 +1,29 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { IconProps } from '../icon/types';
 /**
  * ButtonIconProps defines the props for the ButtonIcon component
- * @property children - Icon content (ReactNode)
+ * @property as - Icon component to render inside the button (e.g., from lucide-react)
  * @property variant - Visual style variant based on Versaur color system
  * @property shape - Shape type of the button (rounded, square, circle)
  * @property size - Size of the button (sm, md, lg)
  * @property disabled - Whether the button is disabled
- * @property ariaLabel - Accessible label for screen readers (required for icon-only buttons)
+ * @property aria-label - Accessible label for screen readers (required for icon-only buttons)
+ *
+ * Inherits icon sizing and color props from IconProps for alignment
  */
-export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'color'>, Pick<IconProps, 'as'> {
     /**
-     * Icon content to display inside the button
-     * Accepts any ReactNode (SVG icons, components, etc.)
+     * Icon component to render inside the button (e.g., from lucide-react)
      */
-    children: ReactNode;
     /**
      * Visual style variant supporting Versaur color system
-     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
-     * Semantic variants: success, info, warning, danger
-     * Each variant supports outline and ghost forms for flexible design expression
      */
     variant?: 'primary' | 'primary-outline' | 'primary-ghost' | 'secondary' | 'secondary-outline' | 'secondary-ghost' | 'tertiary' | 'tertiary-outline' | 'tertiary-ghost' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'neutral-ghost' | 'success' | 'success-outline' | 'success-ghost' | 'info' | 'info-outline' | 'info-ghost' | 'warning' | 'warning-outline' | 'warning-ghost' | 'danger' | 'danger-outline' | 'danger-ghost' | 'outline' | 'destructive';
+    /**
+     * Size of the button and icon
+     * xs: 24px, sm: 32px, md: 40px, lg: 48px, xl: 56px
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /**
      * Shape type of the button
      * rounded: Standard rounded corners (default)
@@ -28,13 +31,6 @@ export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
      * circle: Circular shape
      */
     shape?: 'rounded' | 'square' | 'circle';
-    /**
-     * Size of the button
-     * sm: 32px, compact for space-constrained interfaces
-     * md: 40px, standard for most use cases
-     * lg: 48px, prominent for primary actions
-     */
-    size?: 'sm' | 'md' | 'lg';
     /**
      * Whether the button is disabled
      * When true, the button becomes non-interactive and visually dimmed

package/dist/components/icon/icon.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { IconProps } from './types';
 /**
  * Icon component for Versaur UI
- * Wraps Lucide icons and enforces consistent size and color
- * @example <Icon color="primary" size="md"><LucideIcon /></Icon>
+ * Renders a single icon component (e.g., from lucide-react) with enforced size and color
+ * @example <Icon as={Circle} color="primary" size="md" />
  */
-export declare const Icon: React.FC<IconProps>;
+export declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import('react').FC<import('./types').IconProps>;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./types').IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     tags: string[];
 };
 export default _default;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+/**
 /**
  * IconProps defines the props for the Icon component
  * @property color - Color variant based on Versaur color system
@@ -6,8 +6,26 @@ import { HTMLAttributes, ReactNode } from 'react';
  * @property children - The icon element (usually from lucide-react)
  * Extends HTMLAttributes<HTMLSpanElement> for native span props
  */
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+/**
+ * IconProps defines the props for the Icon component
+ * @property as - Icon component to render (e.g., from lucide-react)
+ * @property color - Color variant based on Versaur color system
+ * @property size - Size of the icon (xs, sm, md, lg, xl)
+ * Extends SVG props for native SVG attributes
+ */
+export type IconProps = Omit<React.SVGProps<SVGSVGElement>, 'children'> & {
+    /**
+     * Icon component to render (e.g., from lucide-react)
+     */
+    as: React.ComponentType<{
+        className?: string;
+    }>;
+    /**
+     * Color variant
+     */
     color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    /**
+     * Size of the icon
+     */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    children: ReactNode;
-}
+};