@causw/core 0.0.9 → 0.0.10

package/dist/index.d.mts

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { ComponentProps, ReactNode, ElementType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { borderRadius } from '@causw/tokens';
 import { ClassValue } from 'clsx';
 
 type Typography = 'caption-sm' | 'caption-sm-point' | 'caption-md' | 'caption-md-point' | 'body2-sm' | 'body2-sm-point' | 'body2-md' | 'body2-md-point' | 'body-sm' | 'body-sm-point' | 'body-md' | 'body-md-point' | 'subtitle-sm' | 'subtitle-sm-point' | 'subtitle-md' | 'subtitle-md-point' | 'title-sm' | 'title-md' | 'head-sm' | 'head-md' | 'fixed-12' | 'fixed-14' | 'fixed-15' | 'fixed-16' | 'fixed-18' | 'fixed-20' | 'fixed-24';
-type TextColor = 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'blue-50' | 'blue-500' | 'blue-700' | 'red-100' | 'red-400' | 'white' | 'black';
+type TextColor = 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'blue-100' | 'blue-500' | 'blue-700' | 'red-100' | 'red-400' | 'white' | 'black';
 type TextAlign = 'left' | 'center' | 'right' | 'justify';
 
 /**
@@ -204,4 +205,145 @@ declare const Checkbox: {
     };
 };
 
-export { Checkbox, type CheckboxLabelProps, type CheckboxRootProps, Field, type FieldDescriptionProps, type FieldErrorDescriptionProps, type FieldLabelProps, type FieldProps, type PolymorphicProps, type PolymorphicPropsWithoutRef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Text, TextArea, type TextAreaFooterProps, type TextAreaInputProps, type TextAreaProps, type TextColor, TextInput, type TextInputProps, type TextInputVariant, type TextProps, type TextStyleProps, Toggle, type ToggleLabelProps, type ToggleRootProps, type Typography, mergeStyles, useRadioGroupContext };
+type ButtonSize = 'sm' | 'md';
+type ButtonColor = 'white' | 'gray' | 'red';
+
+interface ButtonProps extends ComponentProps<'button'> {
+    size?: ButtonSize;
+    color?: ButtonColor;
+    active?: boolean;
+    fullWidth?: boolean;
+}
+declare function Button({ size, color, active, fullWidth, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type CTAButtonColor = 'blue' | 'red' | 'dark' | 'light' | 'white';
+
+interface CTAButtonProps extends ComponentProps<'button'> {
+    color?: CTAButtonColor;
+    fullWidth?: boolean;
+    asChild?: boolean;
+}
+declare function CTAButton({ color, fullWidth, disabled, asChild, className, children, ...props }: CTAButtonProps): react_jsx_runtime.JSX.Element;
+
+interface FloatingActionButtonProps extends ComponentProps<'button'> {
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    asChild?: boolean;
+}
+declare function FloatingActionButton({ leftIcon, rightIcon, disabled, asChild, children, className, ...props }: FloatingActionButtonProps): react_jsx_runtime.JSX.Element;
+
+type BoxRadius = 'none' | keyof typeof borderRadius;
+type BoxPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg';
+type BoxDisplay = 'block' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'none';
+type BoxBackground = 'default' | 'subtle' | 'inverse' | 'transparent';
+interface BoxStylesOptions {
+    padding?: BoxPadding;
+    radius?: BoxRadius;
+    display?: BoxDisplay;
+    background?: BoxBackground;
+}
+
+type BoxBaseProps = BoxStylesOptions;
+type BoxProps<E extends ElementType = 'div'> = PolymorphicProps<E, BoxBaseProps>;
+declare const Box: {
+    <E extends ElementType = "div">({ as, padding, radius, display, background, className, children, ...props }: BoxProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type StackDirection = 'horizontal' | 'vertical';
+type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+type StackJustify = 'start' | 'center' | 'end' | 'between';
+interface StackStylesOptions {
+    direction?: StackDirection;
+    gap?: StackGap;
+    align?: StackAlign;
+    justify?: StackJustify;
+}
+
+type StackBaseProps = StackStylesOptions;
+type StackProps<E extends ElementType = 'div'> = PolymorphicProps<E, StackBaseProps>;
+/**
+ * Stack is a layout component that arranges its children in a horizontal or vertical line.
+ * It abstracts Flexbox behaviors to easily manage spacing, alignment, and direction.
+ */
+declare const Stack: {
+    <E extends ElementType = "div">({ as, direction, gap, align, justify, className, children, ...props }: StackProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type VStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
+declare const VStack: {
+    <E extends ElementType = "div">({ ...props }: VStackProps<E>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type HStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
+declare const HStack: {
+    <E extends ElementType = "div">({ ...props }: HStackProps<E>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+interface FlexStylesOptions {
+    direction?: FlexDirection;
+    gap?: FlexGap;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: FlexWrap;
+}
+
+type FlexBaseProps = FlexStylesOptions;
+type FlexProps<E extends ElementType = 'div'> = PolymorphicProps<E, FlexBaseProps>;
+declare const Flex: {
+    <E extends ElementType = "div">({ as, direction, gap, align, justify, wrap, className, children, ...props }: FlexProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
+type GridRows = 1 | 2 | 3 | 4 | 5 | 6 | 'none';
+type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type GridFlow = 'row' | 'col' | 'row-dense' | 'col-dense';
+interface GridStylesOptions {
+    columns?: GridColumns;
+    rows?: GridRows;
+    gap?: GridGap;
+    flow?: GridFlow;
+}
+
+type GridBaseProps = GridStylesOptions;
+type GridProps<E extends ElementType = 'div'> = PolymorphicProps<E, GridBaseProps>;
+declare const Grid: {
+    <E extends ElementType = "div">({ as, columns, rows, gap, flow, className, children, ...props }: GridProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorStylesOptions {
+    orientation?: SeparatorOrientation;
+}
+
+type SeparatorBaseProps = SeparatorStylesOptions;
+type SeparatorProps<E extends ElementType = 'div'> = PolymorphicProps<E, SeparatorBaseProps>;
+declare const Separator: {
+    <E extends ElementType = "div">({ as, orientation, className, ...props }: SeparatorProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type SpacerSize = 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 'auto';
+interface SpacerStylesOptions {
+    size?: SpacerSize;
+}
+
+type SpacerBaseProps = SpacerStylesOptions;
+type SpacerProps<E extends ElementType = 'div'> = PolymorphicProps<E, SpacerBaseProps>;
+declare const Spacer: {
+    <E extends ElementType = "div">({ as, size, className, ...props }: SpacerProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+export { Box, type BoxBackground, type BoxDisplay, type BoxPadding, type BoxProps, type BoxRadius, Button, type ButtonProps, CTAButton, type CTAButtonProps, Checkbox, type CheckboxLabelProps, type CheckboxRootProps, Field, type FieldDescriptionProps, type FieldErrorDescriptionProps, type FieldLabelProps, type FieldProps, Flex, type FlexAlign, type FlexDirection, type FlexGap, type FlexJustify, type FlexProps, FloatingActionButton, type FloatingActionButtonProps, Grid, type GridColumns, type GridFlow, type GridGap, type GridProps, type GridRows, HStack, type HStackProps, type PolymorphicProps, type PolymorphicPropsWithoutRef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Separator, type SeparatorOrientation, type SeparatorProps, Spacer, type SpacerProps, type SpacerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Text, TextArea, type TextAreaFooterProps, type TextAreaInputProps, type TextAreaProps, type TextColor, TextInput, type TextInputProps, type TextInputVariant, type TextProps, type TextStyleProps, Toggle, type ToggleLabelProps, type ToggleRootProps, type Typography, VStack, type VStackProps, mergeStyles, useRadioGroupContext };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { ComponentProps, ReactNode, ElementType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { borderRadius } from '@causw/tokens';
 import { ClassValue } from 'clsx';
 
 type Typography = 'caption-sm' | 'caption-sm-point' | 'caption-md' | 'caption-md-point' | 'body2-sm' | 'body2-sm-point' | 'body2-md' | 'body2-md-point' | 'body-sm' | 'body-sm-point' | 'body-md' | 'body-md-point' | 'subtitle-sm' | 'subtitle-sm-point' | 'subtitle-md' | 'subtitle-md-point' | 'title-sm' | 'title-md' | 'head-sm' | 'head-md' | 'fixed-12' | 'fixed-14' | 'fixed-15' | 'fixed-16' | 'fixed-18' | 'fixed-20' | 'fixed-24';
-type TextColor = 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'blue-50' | 'blue-500' | 'blue-700' | 'red-100' | 'red-400' | 'white' | 'black';
+type TextColor = 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'blue-100' | 'blue-500' | 'blue-700' | 'red-100' | 'red-400' | 'white' | 'black';
 type TextAlign = 'left' | 'center' | 'right' | 'justify';
 
 /**
@@ -204,4 +205,145 @@ declare const Checkbox: {
     };
 };
 
-export { Checkbox, type CheckboxLabelProps, type CheckboxRootProps, Field, type FieldDescriptionProps, type FieldErrorDescriptionProps, type FieldLabelProps, type FieldProps, type PolymorphicProps, type PolymorphicPropsWithoutRef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Text, TextArea, type TextAreaFooterProps, type TextAreaInputProps, type TextAreaProps, type TextColor, TextInput, type TextInputProps, type TextInputVariant, type TextProps, type TextStyleProps, Toggle, type ToggleLabelProps, type ToggleRootProps, type Typography, mergeStyles, useRadioGroupContext };
+type ButtonSize = 'sm' | 'md';
+type ButtonColor = 'white' | 'gray' | 'red';
+
+interface ButtonProps extends ComponentProps<'button'> {
+    size?: ButtonSize;
+    color?: ButtonColor;
+    active?: boolean;
+    fullWidth?: boolean;
+}
+declare function Button({ size, color, active, fullWidth, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type CTAButtonColor = 'blue' | 'red' | 'dark' | 'light' | 'white';
+
+interface CTAButtonProps extends ComponentProps<'button'> {
+    color?: CTAButtonColor;
+    fullWidth?: boolean;
+    asChild?: boolean;
+}
+declare function CTAButton({ color, fullWidth, disabled, asChild, className, children, ...props }: CTAButtonProps): react_jsx_runtime.JSX.Element;
+
+interface FloatingActionButtonProps extends ComponentProps<'button'> {
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    asChild?: boolean;
+}
+declare function FloatingActionButton({ leftIcon, rightIcon, disabled, asChild, children, className, ...props }: FloatingActionButtonProps): react_jsx_runtime.JSX.Element;
+
+type BoxRadius = 'none' | keyof typeof borderRadius;
+type BoxPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg';
+type BoxDisplay = 'block' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'none';
+type BoxBackground = 'default' | 'subtle' | 'inverse' | 'transparent';
+interface BoxStylesOptions {
+    padding?: BoxPadding;
+    radius?: BoxRadius;
+    display?: BoxDisplay;
+    background?: BoxBackground;
+}
+
+type BoxBaseProps = BoxStylesOptions;
+type BoxProps<E extends ElementType = 'div'> = PolymorphicProps<E, BoxBaseProps>;
+declare const Box: {
+    <E extends ElementType = "div">({ as, padding, radius, display, background, className, children, ...props }: BoxProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type StackDirection = 'horizontal' | 'vertical';
+type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+type StackJustify = 'start' | 'center' | 'end' | 'between';
+interface StackStylesOptions {
+    direction?: StackDirection;
+    gap?: StackGap;
+    align?: StackAlign;
+    justify?: StackJustify;
+}
+
+type StackBaseProps = StackStylesOptions;
+type StackProps<E extends ElementType = 'div'> = PolymorphicProps<E, StackBaseProps>;
+/**
+ * Stack is a layout component that arranges its children in a horizontal or vertical line.
+ * It abstracts Flexbox behaviors to easily manage spacing, alignment, and direction.
+ */
+declare const Stack: {
+    <E extends ElementType = "div">({ as, direction, gap, align, justify, className, children, ...props }: StackProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type VStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
+declare const VStack: {
+    <E extends ElementType = "div">({ ...props }: VStackProps<E>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type HStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
+declare const HStack: {
+    <E extends ElementType = "div">({ ...props }: HStackProps<E>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+interface FlexStylesOptions {
+    direction?: FlexDirection;
+    gap?: FlexGap;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: FlexWrap;
+}
+
+type FlexBaseProps = FlexStylesOptions;
+type FlexProps<E extends ElementType = 'div'> = PolymorphicProps<E, FlexBaseProps>;
+declare const Flex: {
+    <E extends ElementType = "div">({ as, direction, gap, align, justify, wrap, className, children, ...props }: FlexProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
+type GridRows = 1 | 2 | 3 | 4 | 5 | 6 | 'none';
+type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type GridFlow = 'row' | 'col' | 'row-dense' | 'col-dense';
+interface GridStylesOptions {
+    columns?: GridColumns;
+    rows?: GridRows;
+    gap?: GridGap;
+    flow?: GridFlow;
+}
+
+type GridBaseProps = GridStylesOptions;
+type GridProps<E extends ElementType = 'div'> = PolymorphicProps<E, GridBaseProps>;
+declare const Grid: {
+    <E extends ElementType = "div">({ as, columns, rows, gap, flow, className, children, ...props }: GridProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorStylesOptions {
+    orientation?: SeparatorOrientation;
+}
+
+type SeparatorBaseProps = SeparatorStylesOptions;
+type SeparatorProps<E extends ElementType = 'div'> = PolymorphicProps<E, SeparatorBaseProps>;
+declare const Separator: {
+    <E extends ElementType = "div">({ as, orientation, className, ...props }: SeparatorProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+type SpacerSize = 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 'auto';
+interface SpacerStylesOptions {
+    size?: SpacerSize;
+}
+
+type SpacerBaseProps = SpacerStylesOptions;
+type SpacerProps<E extends ElementType = 'div'> = PolymorphicProps<E, SpacerBaseProps>;
+declare const Spacer: {
+    <E extends ElementType = "div">({ as, size, className, ...props }: SpacerProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+
+export { Box, type BoxBackground, type BoxDisplay, type BoxPadding, type BoxProps, type BoxRadius, Button, type ButtonProps, CTAButton, type CTAButtonProps, Checkbox, type CheckboxLabelProps, type CheckboxRootProps, Field, type FieldDescriptionProps, type FieldErrorDescriptionProps, type FieldLabelProps, type FieldProps, Flex, type FlexAlign, type FlexDirection, type FlexGap, type FlexJustify, type FlexProps, FloatingActionButton, type FloatingActionButtonProps, Grid, type GridColumns, type GridFlow, type GridGap, type GridProps, type GridRows, HStack, type HStackProps, type PolymorphicProps, type PolymorphicPropsWithoutRef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Separator, type SeparatorOrientation, type SeparatorProps, Spacer, type SpacerProps, type SpacerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Text, TextArea, type TextAreaFooterProps, type TextAreaInputProps, type TextAreaProps, type TextColor, TextInput, type TextInputProps, type TextInputVariant, type TextProps, type TextStyleProps, Toggle, type ToggleLabelProps, type ToggleRootProps, type Typography, VStack, type VStackProps, mergeStyles, useRadioGroupContext };