@rebnd/ui 0.0.2 → 0.0.4

package/README.md

@@ -32,11 +32,13 @@ import '@rebnd/ui/dist/styles.css'
 
 ```vue
 <script setup lang="ts">
-  import { RButton } from "@rebnd/ui"
+import { RButton } from '@rebnd/ui'
 </script>
 
 <template>
-  <RButton variant="primary">Use Rebnd</RButton>
+  <RButton variant="primary">
+    Use Rebnd
+  </RButton>
 </template>
 ```
 
@@ -71,4 +73,4 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 ## 📄 License
 
-[MIT License](https://github.com/Rebnd/ui/blob/main/LICENSE) © 2024 [Rebnd](https://github.com/Rebnd)
+[MIT License](https://github.com/Rebnd/ui/blob/main/LICENSE) © 2024 [Rebnd](https://github.com/Rebnd)

package/dist/index.d.ts

@@ -4,14 +4,26 @@ export { default as RAvatarGroup } from './src/components/RAvatarGroup/RAvatarGr
 export { default as RBadge } from './src/components/RBadge/RBadge';
 export { default as RBreadcrumb } from './src/components/RBreadcrumb/RBreadcrumb';
 export { default as RButton } from './src/components/RButton/RButton';
+export { default as RButtonGroup } from './src/components/RButtonGroup/RButtonGroup';
 export { default as RCard } from './src/components/RCard/RCard';
+export { default as RCheckbox } from './src/components/RCheckbox/RCheckbox';
+export { default as RCheckboxGroup } from './src/components/RCheckboxGroup/RCheckboxGroup';
 export { default as RCombobox } from './src/components/RCombobox/RCombobox';
 export { default as RDropdown } from './src/components/RDropdown/RDropdown';
 export { default as RForm } from './src/components/RForm/RForm';
 export { default as RFormGroup } from './src/components/RFormGroup/RFormGroup';
 export { default as RIcon } from './src/components/RIcon/RIcon';
 export { default as RInput } from './src/components/RInput/RInput';
+export { default as RInputPassword } from './src/components/RInputPassword/RInputPassword';
 export { default as RLink } from './src/components/RLink/RLink';
+export { default as RModal } from './src/components/RModal/RModal';
+export { default as RRadio } from './src/components/RRadio/RRadio';
+export { default as RRadioGroup } from './src/components/RRadioGroup/RRadioGroup';
+export { default as RSwitch } from './src/components/RSwitch/RSwitch';
 export { default as RTab } from './src/components/RTab/RTab';
+export { default as RTable } from './src/components/RTable/RTable';
 export { default as RTabs } from './src/components/RTabs/RTabs';
 export { default as RTextArea } from './src/components/RTextArea/RTextArea';
+export { default as RToast } from './src/components/RToast/RToast';
+export { default as RToastRenderer } from './src/components/RToastRenderer/RToastRenderer';
+export { default as RToggle } from './src/components/RToggle/RToggle';

package/dist/src/assets/constants/components.d.ts

@@ -0,0 +1,3 @@
+import { ToastIconConfig } from '../../types';
+declare const toastIconMap: ToastIconConfig[];
+export { toastIconMap };

package/dist/src/components/RAvatar/RAvatar.d.ts

@@ -2,21 +2,21 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     color: {
         type: import('vue').PropType<import('../../types').Color>;
         default: import('../../types').Color;
-        validator: (color: import('../../types').Color) => boolean;
+        validator(color: import('../../types').Color): boolean;
     };
     name: {
         type: StringConstructor;
         default: string;
-        validator: (name: string) => boolean;
+        validator(name: string): boolean;
     };
     src: {
         type: StringConstructor;
-        validator: (src: string) => boolean;
+        validator(src: string): boolean;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+        default: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+        validator(size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"): boolean;
     };
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
@@ -24,25 +24,25 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     color: {
         type: import('vue').PropType<import('../../types').Color>;
         default: import('../../types').Color;
-        validator: (color: import('../../types').Color) => boolean;
+        validator(color: import('../../types').Color): boolean;
     };
     name: {
         type: StringConstructor;
         default: string;
-        validator: (name: string) => boolean;
+        validator(name: string): boolean;
     };
     src: {
         type: StringConstructor;
-        validator: (src: string) => boolean;
+        validator(src: string): boolean;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+        default: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+        validator(size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"): boolean;
     };
 }>> & Readonly<{}>, {
     color: import('../../types').Color;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     name: string;
-    size: import('../../types').Size;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/src/components/RAvatar/utils/avatar.props.d.ts

@@ -1,24 +1,25 @@
 import { PropType } from 'vue';
 import { Color, Size } from '../../../types';
+type AvatarSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
 declare const _default: {
     color: {
         type: PropType<Color>;
         default: Color;
-        validator: (color: Color) => boolean;
+        validator(color: Color): boolean;
     };
     name: {
         type: StringConstructor;
         default: string;
-        validator: (name: string) => boolean;
+        validator(name: string): boolean;
     };
     src: {
         type: StringConstructor;
-        validator: (src: string) => boolean;
+        validator(src: string): boolean;
     };
     size: {
-        type: PropType<Size>;
-        default: Size;
-        validator: (size: Size) => boolean;
+        type: PropType<AvatarSize>;
+        default: AvatarSize;
+        validator(size: AvatarSize): boolean;
     };
 };
 export default _default;

package/dist/src/components/RAvatar/utils/avatar.style.d.ts

@@ -21,24 +21,28 @@ declare const avatar: import('../../../../styled-system/types').RecipeRuntimeFn<
     };
     size: {
         xs: {
-            width: "24px";
-            height: "24px";
+            width: "xs";
+            height: "xs";
         };
         sm: {
-            width: "32px";
-            height: "32px";
+            width: "sm";
+            height: "sm";
         };
         md: {
-            width: "40px";
-            height: "40px";
+            width: "md";
+            height: "md";
         };
         lg: {
-            width: "48px";
-            height: "48px";
+            width: "lg";
+            height: "lg";
         };
         xl: {
-            width: "56px";
-            height: "56px";
+            width: "xl";
+            height: "xl";
+        };
+        '2xl': {
+            width: "2xl";
+            height: "2xl";
         };
     };
 }>;

package/dist/src/components/RAvatarGroup/RAvatarGroup.d.ts

@@ -4,9 +4,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: number;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+        default: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+        validator(size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"): boolean;
     };
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
@@ -16,12 +16,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: number;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+        default: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+        validator(size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"): boolean;
     };
 }>> & Readonly<{}>, {
     max: number;
-    size: import('../../types').Size;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/src/components/RAvatarGroup/utils/avatar-group.props.d.ts

@@ -1,14 +1,15 @@
 import { PropType } from 'vue';
 import { Size } from '../../../types';
+type AvatarSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
 declare const _default: {
     max: {
         type: NumberConstructor;
         default: number;
     };
     size: {
-        type: PropType<Size>;
-        default: Size;
-        validator: (size: Size) => boolean;
+        type: PropType<AvatarSize>;
+        default: AvatarSize;
+        validator(size: AvatarSize): boolean;
     };
 };
 export default _default;

package/dist/src/components/RAvatarGroup/utils/avatar-group.style.d.ts

@@ -1,5 +1,6 @@
 import { Size } from '../../../types';
+type AvatarSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
 declare const avatarGroup: string;
 declare const avatarItems: string;
-declare function getAvatarCounterStyles(size: Size): string;
+declare function getAvatarCounterStyles(size: AvatarSize): string;
 export { avatarGroup, avatarItems, getAvatarCounterStyles };

package/dist/src/components/RBadge/RBadge.d.ts

@@ -6,7 +6,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     color: {
         type: import('vue').PropType<import('../../types').Color>;
         default: import('../../types').Color;
-        validator: (color: import('../../types').Color) => boolean;
+        validator(color: import('../../types').Color): boolean;
     };
     cx: {
         type: StringConstructor;
@@ -15,17 +15,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     rounded: {
         type: import('vue').PropType<import('../../types').Rounded>;
         default: string;
-        validator: (radius: string) => boolean;
+        validator(radius: import('../../types').Rounded): boolean;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        default: "xs" | "sm" | "md" | "lg" | "xl";
+        validator(size: "xs" | "sm" | "md" | "lg" | "xl"): boolean;
     };
     variant: {
         type: import('vue').PropType<import('../../types').Variant>;
         default: import('../../types').Variant;
-        validator: (variant: import('../../types').Variant) => boolean;
+        validator(variant: import('../../types').Variant): boolean;
     };
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
@@ -37,7 +37,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     color: {
         type: import('vue').PropType<import('../../types').Color>;
         default: import('../../types').Color;
-        validator: (color: import('../../types').Color) => boolean;
+        validator(color: import('../../types').Color): boolean;
     };
     cx: {
         type: StringConstructor;
@@ -46,23 +46,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     rounded: {
         type: import('vue').PropType<import('../../types').Rounded>;
         default: string;
-        validator: (radius: string) => boolean;
+        validator(radius: import('../../types').Rounded): boolean;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        default: "xs" | "sm" | "md" | "lg" | "xl";
+        validator(size: "xs" | "sm" | "md" | "lg" | "xl"): boolean;
     };
     variant: {
         type: import('vue').PropType<import('../../types').Variant>;
         default: import('../../types').Variant;
-        validator: (variant: import('../../types').Variant) => boolean;
+        validator(variant: import('../../types').Variant): boolean;
     };
 }>> & Readonly<{}>, {
     color: import('../../types').Color;
     cx: string;
     rounded: import('../../types').Rounded;
-    size: import('../../types').Size;
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     variant: import('../../types').Variant;
     as: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/src/components/RBadge/utils/badge.props.d.ts

@@ -1,5 +1,6 @@
-import { Color, Rounded, Size, Variant } from '../../../types';
 import { PropType } from 'vue';
+import { Color, Rounded, Size, Variant } from '../../../types';
+type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
 declare const _default: {
     as: {
         type: StringConstructor;
@@ -8,7 +9,7 @@ declare const _default: {
     color: {
         type: PropType<Color>;
         default: Color;
-        validator: (color: Color) => boolean;
+        validator(color: Color): boolean;
     };
     cx: {
         type: StringConstructor;
@@ -17,17 +18,17 @@ declare const _default: {
     rounded: {
         type: PropType<Rounded>;
         default: string;
-        validator: (radius: string) => boolean;
+        validator(radius: Rounded): boolean;
     };
     size: {
-        type: PropType<Size>;
-        default: Size;
-        validator: (size: Size) => boolean;
+        type: PropType<BadgeSize>;
+        default: BadgeSize;
+        validator(size: BadgeSize): boolean;
     };
     variant: {
         type: PropType<Variant>;
         default: Variant;
-        validator: (variant: Variant) => boolean;
+        validator(variant: Variant): boolean;
     };
 };
 export default _default;

package/dist/src/components/RBadge/utils/badge.style.d.ts

@@ -1,69 +1,27 @@
 declare const _default: import('../../../../styled-system/types').RecipeRuntimeFn<{
     color: {
-        info: {
-            backgroundColor: {
-                base: "info.lighter";
-                _dark: "info.darker";
-            };
-            color: {
-                base: "info";
-                _dark: "info.lighter";
-            };
-        };
-        error: {
-            backgroundColor: {
-                base: "error.lighter";
-                _dark: "error.darker";
-            };
-            color: {
-                base: "error";
-                _dark: "error.lighter";
-            };
-        };
         primary: {
-            backgroundColor: {
-                base: "primary.lighter";
-                _dark: "primary.darker";
-            };
-            color: {
-                base: "primary";
-                _dark: "primary.lighter";
-            };
+            backgroundColor: "primary.850";
         };
         secondary: {
-            backgroundColor: {
-                base: "secondary.lighter";
-                _dark: "secondary.darker";
-            };
-            color: {
-                base: "secondary";
-                _dark: "secondary.lighter";
-            };
+            backgroundColor: "secondary.850";
         };
         success: {
-            backgroundColor: {
-                base: "success.lighter";
-                _dark: "success.darker";
-            };
-            color: {
-                base: "success";
-                _dark: "success.lighter";
-            };
+            backgroundColor: "success.850";
         };
         warning: {
-            backgroundColor: {
-                base: "warning.lighter";
-                _dark: "warning.darker";
-            };
-            color: {
-                base: "warning";
-                _dark: "warning.lighter";
-            };
+            backgroundColor: "warning.850";
+        };
+        error: {
+            backgroundColor: "error.850";
+        };
+        info: {
+            backgroundColor: "info.850";
         };
     };
     rounded: {
-        none: {
-            borderRadius: "none";
+        sharp: {
+            borderRadius: "sharp";
         };
         xs: {
             borderRadius: "xs";
@@ -77,28 +35,35 @@ declare const _default: import('../../../../styled-system/types').RecipeRuntimeF
         lg: {
             borderRadius: "lg";
         };
-        xl: {
-            borderRadius: "xl";
-        };
-        full: {
-            borderRadius: "full";
+        pill: {
+            borderRadius: "pill";
         };
     };
     size: {
         xs: {
-            fontSize: "0.5rem";
+            fontSize: "0.625rem";
+            paddingInline: "0.375rem";
+            paddingBlock: "0.125rem";
         };
         sm: {
-            fontSize: "0.75rem";
+            fontSize: "0.6875rem";
+            paddingInline: "0.5rem";
+            paddingBlock: "0.1875rem";
         };
         md: {
-            fontSize: "0.875rem";
+            fontSize: "0.75rem";
+            paddingInline: "0.625rem";
+            paddingBlock: "0.25rem";
         };
         lg: {
-            fontSize: "1rem";
+            fontSize: "0.875rem";
+            paddingInline: "0.75rem";
+            paddingBlock: "0.375rem";
         };
         xl: {
-            fontSize: "1.25rem";
+            fontSize: "1rem";
+            paddingInline: "0.875rem";
+            paddingBlock: "0.5rem";
         };
     };
     variant: {
@@ -107,10 +72,14 @@ declare const _default: import('../../../../styled-system/types').RecipeRuntimeF
         };
         ghost: {
             backgroundColor: "transparent";
+            outline: "none";
+        };
+        soft: {
+            outline: "none";
         };
-        outlined: {
+        surface: {};
+        outline: {
             backgroundColor: "transparent";
-            outline: "1px solid transparent";
         };
     };
 }>;

package/dist/src/components/RButton/RButton.d.ts

@@ -2,22 +2,31 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     color: {
         type: import('vue').PropType<import('../../types').Color>;
         default: import('../../types').Color;
-        validator: (color: import('../../types').Color) => boolean;
+        validator(color: import('../../types').Color): boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    radius: {
+        type: import('vue').PropType<import('../../types').Rounded>;
+        default: import('../../types').Rounded;
+        validator: (radii: import('../../types').Rounded) => boolean;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<import('../../types').ButtonSize>;
+        default: import('../../types').ButtonSize;
+        validator(size: import('../../types').ButtonSize): boolean;
     };
     type: {
         type: import('vue').PropType<import('../../types').ButtonType>;
         default: import('../../types').ButtonType;
-        validator: (type: import('../../types').ButtonType) => boolean;
+        validator(type: import('../../types').ButtonType): boolean;
     };
     variant: {
         type: import('vue').PropType<import('../../types').Variant>;
         default: import('../../types').Variant;
-        validator: (variant: import('../../types').Variant) => boolean;
+        validator(variant: import('../../types').Variant): boolean;
     };
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
@@ -25,27 +34,38 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     color: {
         type: import('vue').PropType<import('../../types').Color>;
         default: import('../../types').Color;
-        validator: (color: import('../../types').Color) => boolean;
+        validator(color: import('../../types').Color): boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    radius: {
+        type: import('vue').PropType<import('../../types').Rounded>;
+        default: import('../../types').Rounded;
+        validator: (radii: import('../../types').Rounded) => boolean;
     };
     size: {
-        type: import('vue').PropType<import('../../types').Size>;
-        default: import('../../types').Size;
-        validator: (size: import('../../types').Size) => boolean;
+        type: import('vue').PropType<import('../../types').ButtonSize>;
+        default: import('../../types').ButtonSize;
+        validator(size: import('../../types').ButtonSize): boolean;
     };
     type: {
         type: import('vue').PropType<import('../../types').ButtonType>;
         default: import('../../types').ButtonType;
-        validator: (type: import('../../types').ButtonType) => boolean;
+        validator(type: import('../../types').ButtonType): boolean;
     };
     variant: {
         type: import('vue').PropType<import('../../types').Variant>;
         default: import('../../types').Variant;
-        validator: (variant: import('../../types').Variant) => boolean;
+        validator(variant: import('../../types').Variant): boolean;
     };
 }>> & Readonly<{}>, {
     color: import('../../types').Color;
+    size: import('../../types').ButtonSize;
     type: import('../../types').ButtonType;
-    size: import('../../types').Size;
     variant: import('../../types').Variant;
+    radius: import('../../types').Rounded;
+    loading: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/src/components/RButton/utils/button.props.d.ts

@@ -1,25 +1,34 @@
 import { PropType } from 'vue';
-import { ButtonType, Color, Size, Variant } from '../../../types';
+import { ButtonSize, ButtonType, Color, Rounded, Variant } from '../../../types';
 declare const _default: {
     color: {
         type: PropType<Color>;
         default: Color;
-        validator: (color: Color) => boolean;
+        validator(color: Color): boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    radius: {
+        type: PropType<Rounded>;
+        default: Rounded;
+        validator: (radii: Rounded) => boolean;
     };
     size: {
-        type: PropType<Size>;
-        default: Size;
-        validator: (size: Size) => boolean;
+        type: PropType<ButtonSize>;
+        default: ButtonSize;
+        validator(size: ButtonSize): boolean;
     };
     type: {
         type: PropType<ButtonType>;
         default: ButtonType;
-        validator: (type: ButtonType) => boolean;
+        validator(type: ButtonType): boolean;
     };
     variant: {
         type: PropType<Variant>;
         default: Variant;
-        validator: (variant: Variant) => boolean;
+        validator(variant: Variant): boolean;
     };
 };
 export default _default;