@creativecodeco/ui 0.5.0 → 0.6.1

package/lib/types/helpers/controller.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { FieldPath, FieldValues, ControllerProps as RHFControllerProps } from 'react-hook-form';
 import { Dropdown, TextBox } from '../../ui/forms';
 type TextBoxType = {

package/lib/types/ui/base/dom.types.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export type ButtonEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
 export type ButtonEventHandler = React.MouseEventHandler<HTMLButtonElement>;

package/lib/types/ui/components/accordion.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface AccordionType {
     name: string;
     iconType?: 'arrow' | 'plus';

package/lib/types/ui/components/badge.types.d.ts

@@ -0,0 +1,11 @@
+import type { ColorType, SizeType } from '../../../types';
+import type { IconType } from 'react-icons';
+import type { PositionType } from '../../../types';
+export interface BadgeType {
+    children: React.ReactNode;
+    color?: ColorType;
+    outline?: boolean;
+    size?: SizeType;
+    icon?: IconType;
+    iconPosition?: PositionType;
+}

package/lib/types/ui/components/badge.types.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/components/button.types.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { ColorButtonType, SizeType } from '../../../types';
+import type { BadgeType, ColorButtonType, SizeType } from '../../../types';
 import type { IconType } from 'react-icons';
 import type { PositionType } from '../../../types';
 export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,5 +10,8 @@ export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement
     iconPosition?: PositionType;
     loading?: boolean;
     loadingLabel?: string;
+    withBadge?: boolean;
+    badge?: React.ReactNode;
+    badgeProps?: Omit<BadgeType, 'children' | 'size'>;
 }
 export type ButtonRef = HTMLButtonElement;

package/lib/types/ui/components/index.d.ts

@@ -1,3 +1,4 @@
 export type * from './accordion.types';
 export type * from './avatar.types';
+export type * from './badge.types';
 export type * from './button.types';

package/lib/types/ui/forms/dropdown.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextBoxType } from './text-box.types';
 export interface DropdownOption {
     value: string | number;

package/lib/types/ui/forms/text-box.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IconType } from 'react-icons';
 import type { ColorType, ErrorType, SizeType } from '../../../types';
 export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, ErrorType {

package/lib/ui/components/badge/badge.component.d.ts

@@ -0,0 +1,3 @@
+import type { BadgeType } from '../../../types';
+declare const Badge: ({ children, color, icon: Icon, iconPosition, outline, size }: BadgeType) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/lib/ui/components/badge/badge.component.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cls from 'classnames';
+const Badge = ({ children, color, icon: Icon, iconPosition = 'left', outline, size = 'md' }) => {
+    const newIcon = useMemo(() => {
+        if (!Icon) {
+            return;
+        }
+        return _jsx(Icon, {});
+    }, [Icon]);
+    return (_jsxs("div", { className: cls('badge', {
+            [`badge-color-${color}`]: !outline && color,
+            [`badge-${color}`]: outline && color,
+            'badge-outline': outline,
+            [`badge-size-${size}`]: size !== 'md',
+            'gap-2': Icon
+        }), children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
+};
+export default Badge;

package/lib/ui/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+import Badge from './badge.component';
+export { Badge };

package/lib/ui/components/badge/index.js

@@ -0,0 +1,2 @@
+import Badge from './badge.component';
+export { Badge };

package/lib/ui/components/button/button.component.js

@@ -16,10 +16,11 @@ const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon
         }
         return (_jsxs(_Fragment, { children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
     }, [loading, loadingLabel, iconPosition, children, newIcon]);
-    return (_jsx("button", { ref: ref, className: cls('button', {
+    return (_jsx("button", { ref: ref, className: cls('btn', {
             'button-link': isLink,
-            'button-outline': !isLink && outline,
-            [`button-color-${color}`]: !isLink && color,
+            'btn-outline': !isLink && outline,
+            [`btn-${color}`]: outline && color,
+            [`button-color-${color}`]: !outline && color,
             [`button-size-${size}`]: size !== 'md',
             'button-loading': loading
         }), ...safeProps, children: content }));

package/lib/ui/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './accordion';
 export * from './avatar';
+export * from './badge';
 export * from './button';

package/lib/ui/components/index.js

@@ -1,3 +1,4 @@
 export * from './accordion';
 export * from './avatar';
+export * from './badge';
 export * from './button';

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.5.0",
+  "version": "0.6.1",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -31,7 +31,7 @@
     "lint:eslint": "eslint .",
     "lint:fix": "npm run lint:eslint --fix --quiet",
     "prepack": "npm run build",
-    "prepare": "husky install",
+    "prepare": "husky",
     "release": "npm publish --access public",
     "storybook": "storybook dev -p 6006",
     "test": "jest .",
@@ -48,41 +48,41 @@
     "usehooks-ts": "2.9.1"
   },
   "dependencies": {
-    "postcss": "8.4.35",
-    "postcss-import": "16.0.1",
-    "react": "18.2.0",
-    "react-hook-form": "7.50.1",
-    "tailwindcss": "3.4.1",
-    "usehooks-ts": "2.15.1"
+    "postcss": "8.4.41",
+    "postcss-import": "16.1.0",
+    "react": "18.3.1",
+    "react-hook-form": "7.52.2",
+    "tailwindcss": "3.4.8",
+    "usehooks-ts": "2.16.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.0",
-    "@babel/preset-env": "7.24.0",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "7.25.3",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
     "@jest/globals": "29.7.0",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-interactions": "7.6.17",
-    "@storybook/addon-links": "7.6.17",
-    "@storybook/addon-mdx-gfm": "7.6.17",
-    "@storybook/blocks": "7.6.17",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
-    "@storybook/test": "7.6.17",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-interactions": "7.6.20",
+    "@storybook/addon-links": "7.6.20",
+    "@storybook/addon-mdx-gfm": "7.6.20",
+    "@storybook/blocks": "7.6.20",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/test": "7.6.20",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.1",
+    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
-    "@types/node": "20.11.21",
-    "@types/react": "18.2.60",
-    "@types/react-dom": "18.2.19",
+    "@types/node": "20.14.14",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "6.21.0",
-    "autoprefixer": "10.4.17",
-    "chromatic": "11.0.0",
+    "autoprefixer": "10.4.20",
+    "chromatic": "11.7.0",
     "classnames": "2.5.1",
     "cpx2": "7.0.1",
-    "daisyui": "4.7.2",
+    "daisyui": "4.12.10",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
@@ -92,32 +92,33 @@
     "eslint-plugin-import-order": "2.1.4",
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-promise": "6.6.0",
+    "eslint-plugin-react": "7.35.0",
     "eslint-plugin-standard": "5.0.0",
     "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-unused-imports": "3.1.0",
-    "husky": "9.0.11",
+    "eslint-plugin-unused-imports": "3.2.0",
+    "husky": "9.1.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-css": "6.0.1",
     "postcss-cli": "11.0.0",
-    "prettier": "3.2.5",
+    "prettier": "3.3.3",
     "prop-types": "15.8.1",
-    "react-dom": "18.2.0",
-    "react-icons": "5.0.1",
-    "storybook": "7.6.17",
+    "react-dom": "18.3.1",
+    "react-icons": "5.2.1",
+    "storybook": "7.6.20",
     "storybook-addon-themes": "6.1.0",
-    "string-width": "7.1.0",
-    "ts-jest": "29.1.2",
+    "string-width": "7.2.0",
+    "ts-jest": "29.2.4",
     "ts-node": "10.9.2",
-    "tsc-alias": "1.8.8",
+    "tsc-alias": "1.8.10",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.3.3"
+    "typescript": "5.5.4"
   },
   "files": [
     "lib"
-  ]
+  ],
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }