@dimasbaguspm/versaur 0.0.2 → 0.0.4

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;
-}
+};

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

@@ -12,3 +12,6 @@ export declare const UnderlineCapitalize: Story;
 export declare const ClampEllipsis: Story;
 export declare const ColorVariants: Story;
 export declare const AsVariants: Story;
+export declare const FontSizeVariants: Story;
+export declare const FontWeightVariants: Story;
+export declare const CustomFontSizeWeight: Story;

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

@@ -25,6 +25,16 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     clamp?: 1 | 2 | 3 | 4 | 5 | 'none';
     /** Ellipsis (truncate) */
     ellipsis?: boolean;
+    /** Tailwind font size utility (e.g., 'xs', 'sm', 'base', 'lg', 'xl', etc.)
+     *  If set, overrides the default font size from the `as` prop and design system
+     *  See: https://tailwindcss.com/docs/font-size
+     */
+    fontSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | undefined;
+    /** Tailwind font weight utility (e.g., 'thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black')
+     *  If set, overrides the default font weight from the `as` prop and design system
+     *  See: https://tailwindcss.com/docs/font-weight
+     */
+    fontWeight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | undefined;
     /** Text content */
     children: ReactNode;
 }