@mbao01/ui 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/types/index.d.ts +1 -6
- package/package.json +8 -17
- package/src/index.ts +2 -6
- package/dist/types/components/Badge/Badge.d.ts +0 -2
- package/dist/types/components/Badge/constants.d.ts +0 -5
- package/dist/types/components/Badge/index.d.ts +0 -1
- package/dist/types/components/Badge/types.d.ts +0 -7
- package/dist/types/components/Button/Button.d.ts +0 -2
- package/dist/types/components/Button/constants.d.ts +0 -8
- package/dist/types/components/Button/index.d.ts +0 -1
- package/dist/types/components/Button/types.d.ts +0 -12
- package/dist/types/components/Card/Card.d.ts +0 -8
- package/dist/types/components/Card/index.d.ts +0 -1
- package/dist/types/components/Card/types.d.ts +0 -24
- package/dist/types/components/Detail/Detail.d.ts +0 -2
- package/dist/types/components/Detail/index.d.ts +0 -1
- package/dist/types/components/Detail/types.d.ts +0 -5
- package/dist/types/components/Text/Text.d.ts +0 -4
- package/dist/types/components/Text/constants.d.ts +0 -5
- package/dist/types/components/Text/index.d.ts +0 -1
- package/dist/types/components/Text/types.d.ts +0 -10
- package/dist/types/components/Tooltip/Tooltip.d.ts +0 -2
- package/dist/types/components/Tooltip/constants.d.ts +0 -5
- package/dist/types/components/Tooltip/index.d.ts +0 -1
- package/dist/types/components/Tooltip/types.d.ts +0 -10
- package/plugin.d.ts +0 -4
- package/plugin.js +0 -3
- package/src/components/Badge/Badge.tsx +0 -28
- package/src/components/Badge/constants.ts +0 -31
- package/src/components/Badge/index.ts +0 -1
- package/src/components/Badge/types.ts +0 -18
- package/src/components/Button/Button.tsx +0 -40
- package/src/components/Button/constants.ts +0 -44
- package/src/components/Button/index.ts +0 -1
- package/src/components/Button/types.ts +0 -26
- package/src/components/Card/Card.tsx +0 -64
- package/src/components/Card/index.ts +0 -1
- package/src/components/Card/types.ts +0 -26
- package/src/components/Detail/Detail.tsx +0 -10
- package/src/components/Detail/index.ts +0 -1
- package/src/components/Detail/types.ts +0 -6
- package/src/components/Text/Text.tsx +0 -12
- package/src/components/Text/constants.ts +0 -29
- package/src/components/Text/index.ts +0 -1
- package/src/components/Text/types.ts +0 -21
- package/src/components/Tooltip/Tooltip.tsx +0 -11
- package/src/components/Tooltip/constants.ts +0 -33
- package/src/components/Tooltip/index.ts +0 -1
- package/src/components/Tooltip/types.ts +0 -24
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@ So here it is, I have gotten really bored creating UI component from scratch for
|
|
|
3
3
|
It is high time I have a unified component library - so here it is.
|
|
4
4
|
I have built this to be highly opinionated on certain libraries I love to use like typescript, tailwind, date-fns, and react.
|
|
5
5
|
|
|
6
|
-
I believe in future this UI component library may extend to meta frameworks like [
|
|
6
|
+
I believe in future this UI component library may extend to meta frameworks like [Remix](https://remix.run/) and even [Nuxt](https://nuxt.com/) (and naturally [Vue.js](https://vuejs.org/) as well).
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
# Description
|
|
@@ -32,11 +32,11 @@ npm install @mbao01/ui
|
|
|
32
32
|
```typescript
|
|
33
33
|
export default {
|
|
34
34
|
content: [
|
|
35
|
-
"node_modules/@mbao01/ui/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
|
|
35
|
+
"node_modules/@mbao01/(common|ui)/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
|
|
36
36
|
...
|
|
37
37
|
],
|
|
38
38
|
"plugins": [
|
|
39
|
-
require("@mbao01/
|
|
39
|
+
require("@mbao01/common/plugin"), // -> import the tailwind library plugin
|
|
40
40
|
...
|
|
41
41
|
]
|
|
42
42
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
export * from "
|
|
1
|
+
export * from "@mbao01/common";
|
|
2
2
|
export * from "./components/Breadcrumbs";
|
|
3
|
-
export * from "./components/Button";
|
|
4
|
-
export * from "./components/Card";
|
|
5
|
-
export * from "./components/Detail";
|
|
6
3
|
export * from "./components/Link";
|
|
7
|
-
export * from "./components/Text";
|
|
8
|
-
export * from "./components/Tooltip";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mbao01/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Ayomide Bakare",
|
|
7
7
|
"license": "MIT",
|
|
@@ -16,8 +16,6 @@
|
|
|
16
16
|
"types": "dist/types/index.d.ts",
|
|
17
17
|
"files": [
|
|
18
18
|
"src",
|
|
19
|
-
"plugin.js",
|
|
20
|
-
"plugin.d.ts",
|
|
21
19
|
"dist/types"
|
|
22
20
|
],
|
|
23
21
|
"bugs": "https://github.com/mbao01/mbao01/issues",
|
|
@@ -32,7 +30,8 @@
|
|
|
32
30
|
"scripts": {
|
|
33
31
|
"dev": "storybook dev -p 6006",
|
|
34
32
|
"build": "tsc && vite build",
|
|
35
|
-
"build-storybook": "storybook build",
|
|
33
|
+
"build-storybook": "storybook build -o ../../docs/storybook/ui",
|
|
34
|
+
"postbuild-storybook": "cp -R ../../docs/storybook/ui/* ../../docs/storybook/ && rm -rf ../../docs/storybook/ui",
|
|
36
35
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
37
36
|
"preview": "vite preview",
|
|
38
37
|
"test": "vitest run",
|
|
@@ -41,13 +40,11 @@
|
|
|
41
40
|
"test:coverage": "vitest run --coverage"
|
|
42
41
|
},
|
|
43
42
|
"dependencies": {
|
|
44
|
-
"@
|
|
45
|
-
"
|
|
46
|
-
"clsx": "^2.1.0"
|
|
47
|
-
"daisyui": "^4.6.2"
|
|
43
|
+
"@heroicons/react": "^2.1.1",
|
|
44
|
+
"@mbao01/common": "^0.0.3",
|
|
45
|
+
"clsx": "^2.1.0"
|
|
48
46
|
},
|
|
49
47
|
"devDependencies": {
|
|
50
|
-
"@heroicons/react": "^2.1.1",
|
|
51
48
|
"@storybook/addon-essentials": "^7.6.14",
|
|
52
49
|
"@storybook/addon-interactions": "^7.6.14",
|
|
53
50
|
"@storybook/addon-links": "^7.6.14",
|
|
@@ -88,13 +85,7 @@
|
|
|
88
85
|
"vitest": "^1.2.2"
|
|
89
86
|
},
|
|
90
87
|
"peerDependencies": {
|
|
91
|
-
"
|
|
92
|
-
"postcss": "^8.4.32",
|
|
93
|
-
"react": "^18.2.0",
|
|
94
|
-
"react-dom": "^18.2.0",
|
|
95
|
-
"react-router-dom": "^6.21.3",
|
|
96
|
-
"tailwindcss": "^3.4.0",
|
|
97
|
-
"typescript": "^5.2.2"
|
|
88
|
+
"react-router-dom": "^6.22.0"
|
|
98
89
|
},
|
|
99
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "fb1542aac0eb979dd16d8d4448e4380726e4e330"
|
|
100
91
|
}
|
package/src/index.ts
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
export * from "
|
|
1
|
+
export * from "@mbao01/common";
|
|
2
|
+
|
|
2
3
|
export * from "./components/Breadcrumbs";
|
|
3
|
-
export * from "./components/Button";
|
|
4
|
-
export * from "./components/Card";
|
|
5
|
-
export * from "./components/Detail";
|
|
6
4
|
export * from "./components/Link";
|
|
7
|
-
export * from "./components/Text";
|
|
8
|
-
export * from "./components/Tooltip";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Badge } from './Badge';
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export type BadgeSize = "xs" | "sm" | "md" | "lg";
|
|
2
|
-
export type BadgeVariant = "neutral" | "primary" | "secondary" | "accent" | "ghost" | "info" | "success" | "warning" | "error";
|
|
3
|
-
export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
4
|
-
size?: BadgeSize;
|
|
5
|
-
outline?: boolean;
|
|
6
|
-
variant?: BadgeVariant;
|
|
7
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { ButtonSize, ButtonVariant } from './types';
|
|
2
|
-
export declare const getButtonClasses: ({ size, wide, loading, outline, variant, }: {
|
|
3
|
-
size?: ButtonSize | undefined;
|
|
4
|
-
wide?: boolean | undefined;
|
|
5
|
-
loading?: boolean | undefined;
|
|
6
|
-
outline?: boolean | undefined;
|
|
7
|
-
variant?: ButtonVariant | undefined;
|
|
8
|
-
}) => string;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Button } from "./Button";
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
3
|
-
export type ButtonVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
|
|
4
|
-
export type ButtonProps = {
|
|
5
|
-
size?: ButtonSize;
|
|
6
|
-
wide?: boolean;
|
|
7
|
-
label: ReactNode;
|
|
8
|
-
loading?: boolean;
|
|
9
|
-
outline?: boolean;
|
|
10
|
-
variant?: ButtonVariant;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps } from "./types";
|
|
2
|
-
declare const Card: ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
declare const CardHeader: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
declare const CardDescription: ({ className, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
declare const CardContent: ({ className, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
declare const CardImage: ({ className, src, alt, ...props }: CardImageProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
declare const CardFooter: ({ className, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export { Card, CardHeader, CardFooter, CardDescription, CardContent, CardImage, };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Card";
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export type CardProps = {
|
|
3
|
-
/**
|
|
4
|
-
* applies smaller padding to the card.
|
|
5
|
-
*/
|
|
6
|
-
compact?: boolean;
|
|
7
|
-
/**
|
|
8
|
-
* applies border to the card.
|
|
9
|
-
*/
|
|
10
|
-
bordered?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* shows the card horizontally with image to the right or left of it.
|
|
13
|
-
*/
|
|
14
|
-
horizontal?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* overlay is used to make the image full width with the content on top.
|
|
17
|
-
*/
|
|
18
|
-
overlay?: boolean;
|
|
19
|
-
} & React.HTMLAttributes<HTMLDivElement>;
|
|
20
|
-
export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
|
|
21
|
-
export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
|
|
22
|
-
export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
|
|
23
|
-
export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
|
|
24
|
-
export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Detail } from './Detail';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Text } from './Text';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
|
|
2
|
-
export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
|
|
3
|
-
export type TextVariant = 'info' | 'error' | 'success' | 'warning' | 'primary' | 'secondary' | 'accent' | 'neutral';
|
|
4
|
-
export type TextProps = {
|
|
5
|
-
as?: TextTag;
|
|
6
|
-
size?: TextSize;
|
|
7
|
-
variant?: TextVariant;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
className?: string;
|
|
10
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Tooltip } from './Tooltip';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
-
export type TooltipVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
|
|
4
|
-
export type TooltipProps = {
|
|
5
|
-
tip: string;
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
variant?: TooltipVariant;
|
|
8
|
-
position?: TooltipPosition;
|
|
9
|
-
className?: string;
|
|
10
|
-
};
|
package/plugin.d.ts
DELETED
package/plugin.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import c from "clsx";
|
|
2
|
-
import { getBadgeClasses } from "./constants";
|
|
3
|
-
import { type BadgeProps } from "./types";
|
|
4
|
-
|
|
5
|
-
export const Badge = ({
|
|
6
|
-
size,
|
|
7
|
-
outline,
|
|
8
|
-
variant = "ghost",
|
|
9
|
-
children,
|
|
10
|
-
className,
|
|
11
|
-
...props
|
|
12
|
-
}: BadgeProps) => {
|
|
13
|
-
return (
|
|
14
|
-
<span
|
|
15
|
-
{...props}
|
|
16
|
-
className={c(
|
|
17
|
-
getBadgeClasses({ size, variant }),
|
|
18
|
-
{
|
|
19
|
-
"badge-outline": outline,
|
|
20
|
-
"text-base-200": !["ghost", "neutral"].includes(variant),
|
|
21
|
-
},
|
|
22
|
-
className
|
|
23
|
-
)}
|
|
24
|
-
>
|
|
25
|
-
{children}
|
|
26
|
-
</span>
|
|
27
|
-
);
|
|
28
|
-
};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import c from "clsx";
|
|
2
|
-
import type { BadgeSize, BadgeVariant } from "./types";
|
|
3
|
-
|
|
4
|
-
const BADGE_SIZE = {
|
|
5
|
-
xs: c("badge-xs"),
|
|
6
|
-
sm: c("badge-sm"),
|
|
7
|
-
md: c("badge-md"),
|
|
8
|
-
lg: c("badge-lg"),
|
|
9
|
-
} satisfies Record<BadgeSize, string>;
|
|
10
|
-
|
|
11
|
-
const BADGE_VARIANTS = {
|
|
12
|
-
accent: c("badge-accent"),
|
|
13
|
-
error: c("badge-error"),
|
|
14
|
-
ghost: c("badge-ghost"),
|
|
15
|
-
info: c("badge-info"),
|
|
16
|
-
neutral: c("badge-neutral"),
|
|
17
|
-
primary: c("badge-primary"),
|
|
18
|
-
secondary: c("badge-secondary"),
|
|
19
|
-
success: c("badge-success"),
|
|
20
|
-
warning: c("badge-warning"),
|
|
21
|
-
} satisfies Record<BadgeVariant, string>;
|
|
22
|
-
|
|
23
|
-
export const getBadgeClasses = ({
|
|
24
|
-
size,
|
|
25
|
-
variant,
|
|
26
|
-
}: {
|
|
27
|
-
size?: BadgeSize;
|
|
28
|
-
variant?: BadgeVariant;
|
|
29
|
-
}) => {
|
|
30
|
-
return c("badge", BADGE_VARIANTS[variant!], BADGE_SIZE[size!]);
|
|
31
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Badge } from './Badge';
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export type BadgeSize = "xs" | "sm" | "md" | "lg";
|
|
2
|
-
|
|
3
|
-
export type BadgeVariant =
|
|
4
|
-
| "neutral"
|
|
5
|
-
| "primary"
|
|
6
|
-
| "secondary"
|
|
7
|
-
| "accent"
|
|
8
|
-
| "ghost"
|
|
9
|
-
| "info"
|
|
10
|
-
| "success"
|
|
11
|
-
| "warning"
|
|
12
|
-
| "error";
|
|
13
|
-
|
|
14
|
-
export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
15
|
-
size?: BadgeSize;
|
|
16
|
-
outline?: boolean;
|
|
17
|
-
variant?: BadgeVariant;
|
|
18
|
-
};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import c from "clsx";
|
|
2
|
-
import { getButtonClasses } from "./constants";
|
|
3
|
-
import { type ButtonProps } from "./types";
|
|
4
|
-
|
|
5
|
-
export const Button = (props: ButtonProps) => {
|
|
6
|
-
const {
|
|
7
|
-
className,
|
|
8
|
-
outline,
|
|
9
|
-
label,
|
|
10
|
-
disabled,
|
|
11
|
-
onClick,
|
|
12
|
-
loading,
|
|
13
|
-
variant,
|
|
14
|
-
size,
|
|
15
|
-
wide,
|
|
16
|
-
...rest
|
|
17
|
-
} = props;
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<button
|
|
21
|
-
{...rest}
|
|
22
|
-
onClick={onClick}
|
|
23
|
-
disabled={disabled}
|
|
24
|
-
className={c(
|
|
25
|
-
getButtonClasses({ size, wide, outline, variant, loading }),
|
|
26
|
-
className
|
|
27
|
-
)}
|
|
28
|
-
>
|
|
29
|
-
{label}
|
|
30
|
-
{loading ? (
|
|
31
|
-
<span
|
|
32
|
-
className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
|
|
33
|
-
data-testid="loading"
|
|
34
|
-
>
|
|
35
|
-
<span className="loading loading-spinner" />
|
|
36
|
-
</span>
|
|
37
|
-
) : null}
|
|
38
|
-
</button>
|
|
39
|
-
);
|
|
40
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import c from 'clsx';
|
|
2
|
-
import type { ButtonSize, ButtonVariant } from './types';
|
|
3
|
-
|
|
4
|
-
const BUTTON_SIZE = {
|
|
5
|
-
xs: c('btn-xs'),
|
|
6
|
-
sm: c('btn-sm'),
|
|
7
|
-
md: c('btn-md'),
|
|
8
|
-
lg: c('btn-lg'),
|
|
9
|
-
} satisfies Record<ButtonSize, string>;
|
|
10
|
-
|
|
11
|
-
const BUTTON_VARIANTS = {
|
|
12
|
-
accent: c('btn-accent'),
|
|
13
|
-
default: c('btn-default'),
|
|
14
|
-
error: c('btn-error'),
|
|
15
|
-
ghost: c('btn-ghost'),
|
|
16
|
-
info: c('btn-info'),
|
|
17
|
-
link: c('btn-link'),
|
|
18
|
-
neutral: c('btn-neutral'),
|
|
19
|
-
primary: c('btn-primary'),
|
|
20
|
-
secondary: c('btn-secondary'),
|
|
21
|
-
success: c('btn-success'),
|
|
22
|
-
warning: c('btn-warning'),
|
|
23
|
-
} satisfies Record<ButtonVariant, string>;
|
|
24
|
-
|
|
25
|
-
export const getButtonClasses = ({
|
|
26
|
-
size,
|
|
27
|
-
wide,
|
|
28
|
-
loading,
|
|
29
|
-
outline,
|
|
30
|
-
variant,
|
|
31
|
-
}: {
|
|
32
|
-
size?: ButtonSize;
|
|
33
|
-
wide?: boolean;
|
|
34
|
-
loading?: boolean;
|
|
35
|
-
outline?: boolean;
|
|
36
|
-
variant?: ButtonVariant;
|
|
37
|
-
}) => {
|
|
38
|
-
return c('btn', BUTTON_VARIANTS[variant!], BUTTON_SIZE[size!], {
|
|
39
|
-
'btn-outline': outline,
|
|
40
|
-
'btn-wide': wide,
|
|
41
|
-
'relative overflow-hidden': loading,
|
|
42
|
-
'min-h-fit h-10': !size,
|
|
43
|
-
});
|
|
44
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Button } from "./Button";
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
4
|
-
|
|
5
|
-
export type ButtonVariant =
|
|
6
|
-
| 'default'
|
|
7
|
-
| 'neutral'
|
|
8
|
-
| 'primary'
|
|
9
|
-
| 'secondary'
|
|
10
|
-
| 'accent'
|
|
11
|
-
| 'ghost'
|
|
12
|
-
| 'link'
|
|
13
|
-
| 'info'
|
|
14
|
-
| 'success'
|
|
15
|
-
| 'warning'
|
|
16
|
-
| 'error';
|
|
17
|
-
|
|
18
|
-
export type ButtonProps = {
|
|
19
|
-
size?: ButtonSize;
|
|
20
|
-
wide?: boolean;
|
|
21
|
-
label: ReactNode;
|
|
22
|
-
loading?: boolean;
|
|
23
|
-
outline?: boolean;
|
|
24
|
-
variant?: ButtonVariant;
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import c from "clsx";
|
|
2
|
-
import {
|
|
3
|
-
CardContentProps,
|
|
4
|
-
CardDescriptionProps,
|
|
5
|
-
CardFooterProps,
|
|
6
|
-
CardHeaderProps,
|
|
7
|
-
CardImageProps,
|
|
8
|
-
CardProps,
|
|
9
|
-
} from "./types";
|
|
10
|
-
|
|
11
|
-
const Card = ({
|
|
12
|
-
compact,
|
|
13
|
-
bordered,
|
|
14
|
-
horizontal,
|
|
15
|
-
overlay,
|
|
16
|
-
className,
|
|
17
|
-
...props
|
|
18
|
-
}: CardProps) => (
|
|
19
|
-
<div
|
|
20
|
-
className={c(
|
|
21
|
-
"card",
|
|
22
|
-
{
|
|
23
|
-
"card-bordered": bordered,
|
|
24
|
-
"card-compact": compact,
|
|
25
|
-
"card-normal": !compact,
|
|
26
|
-
"image-full": overlay,
|
|
27
|
-
"card-side": horizontal,
|
|
28
|
-
},
|
|
29
|
-
className
|
|
30
|
-
)}
|
|
31
|
-
{...props}
|
|
32
|
-
/>
|
|
33
|
-
);
|
|
34
|
-
|
|
35
|
-
const CardHeader = ({ className, ...props }: CardHeaderProps) => (
|
|
36
|
-
<h3 className={c("card-title", className)} {...props} />
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
const CardDescription = ({ className, ...props }: CardDescriptionProps) => (
|
|
40
|
-
<p className={c("text-sm text-muted-foreground", className)} {...props} />
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
const CardContent = ({ className, ...props }: CardContentProps) => (
|
|
44
|
-
<div className={c("card-body p-6 pt-0", className)} {...props} />
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
const CardImage = ({ className, src, alt, ...props }: CardImageProps) => (
|
|
48
|
-
<figure>
|
|
49
|
-
<img className={className} src={src} alt={alt} {...props} />
|
|
50
|
-
</figure>
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
const CardFooter = ({ className, ...props }: CardFooterProps) => (
|
|
54
|
-
<div className={c("card-actions", className)} {...props} />
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
export {
|
|
58
|
-
Card,
|
|
59
|
-
CardHeader,
|
|
60
|
-
CardFooter,
|
|
61
|
-
CardDescription,
|
|
62
|
-
CardContent,
|
|
63
|
-
CardImage,
|
|
64
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Card";
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
export type CardProps = {
|
|
4
|
-
/**
|
|
5
|
-
* applies smaller padding to the card.
|
|
6
|
-
*/
|
|
7
|
-
compact?: boolean;
|
|
8
|
-
/**
|
|
9
|
-
* applies border to the card.
|
|
10
|
-
*/
|
|
11
|
-
bordered?: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* shows the card horizontally with image to the right or left of it.
|
|
14
|
-
*/
|
|
15
|
-
horizontal?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* overlay is used to make the image full width with the content on top.
|
|
18
|
-
*/
|
|
19
|
-
overlay?: boolean;
|
|
20
|
-
} & React.HTMLAttributes<HTMLDivElement>;
|
|
21
|
-
|
|
22
|
-
export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
|
|
23
|
-
export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
|
|
24
|
-
export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
|
|
25
|
-
export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
|
|
26
|
-
export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Detail } from './Detail';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import c from 'clsx';
|
|
2
|
-
import { createElement } from 'react';
|
|
3
|
-
import { type TextProps } from './types';
|
|
4
|
-
import { getTextClasses } from './constants';
|
|
5
|
-
|
|
6
|
-
export const Text = ({ as = 'span', size, variant, children, className }: TextProps) => {
|
|
7
|
-
return createElement(
|
|
8
|
-
as,
|
|
9
|
-
{ className: c(getTextClasses({ size, variant }), className) },
|
|
10
|
-
children
|
|
11
|
-
);
|
|
12
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import c from 'clsx';
|
|
2
|
-
import type { TextSize, TextVariant } from './types';
|
|
3
|
-
|
|
4
|
-
const TEXT_SIZE = {
|
|
5
|
-
xs: c('text-xs'),
|
|
6
|
-
sm: c('text-sm'),
|
|
7
|
-
base: c('text-base'),
|
|
8
|
-
lg: c('text-lg'),
|
|
9
|
-
xl: c('text-xl'),
|
|
10
|
-
'2xl': c('text-2xl'),
|
|
11
|
-
'3xl': c('text-3xl'),
|
|
12
|
-
'4xl': c('text-4xl'),
|
|
13
|
-
'5xl': c('text-5xl'),
|
|
14
|
-
} satisfies Record<TextSize, string>;
|
|
15
|
-
|
|
16
|
-
const TEXT_VARIANT = {
|
|
17
|
-
info: c('text-info'),
|
|
18
|
-
error: c('text-error'),
|
|
19
|
-
success: c('text-success'),
|
|
20
|
-
warning: c('text-warning'),
|
|
21
|
-
primary: c('text-primary'),
|
|
22
|
-
secondary: c('text-secondary'),
|
|
23
|
-
accent: c('text-accent'),
|
|
24
|
-
neutral: c('text-neutral'),
|
|
25
|
-
} satisfies Record<TextVariant, string>;
|
|
26
|
-
|
|
27
|
-
export const getTextClasses = ({ size, variant }: { size?: TextSize; variant?: TextVariant }) => {
|
|
28
|
-
return c(TEXT_VARIANT[variant!], TEXT_SIZE[size!]);
|
|
29
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Text } from './Text';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
|
|
2
|
-
|
|
3
|
-
export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
|
|
4
|
-
|
|
5
|
-
export type TextVariant =
|
|
6
|
-
| 'info'
|
|
7
|
-
| 'error'
|
|
8
|
-
| 'success'
|
|
9
|
-
| 'warning'
|
|
10
|
-
| 'primary'
|
|
11
|
-
| 'secondary'
|
|
12
|
-
| 'accent'
|
|
13
|
-
| 'neutral';
|
|
14
|
-
|
|
15
|
-
export type TextProps = {
|
|
16
|
-
as?: TextTag;
|
|
17
|
-
size?: TextSize;
|
|
18
|
-
variant?: TextVariant;
|
|
19
|
-
children: React.ReactNode;
|
|
20
|
-
className?: string;
|
|
21
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import c from 'clsx';
|
|
2
|
-
import { getTooltipClasses } from './constants';
|
|
3
|
-
import { type TooltipProps } from './types';
|
|
4
|
-
|
|
5
|
-
export const Tooltip = ({ tip, children, variant, position, className }: TooltipProps) => {
|
|
6
|
-
return (
|
|
7
|
-
<div className={c(getTooltipClasses({ variant, position }), className)} data-tip={tip}>
|
|
8
|
-
{children}
|
|
9
|
-
</div>
|
|
10
|
-
);
|
|
11
|
-
};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import c from "clsx";
|
|
2
|
-
import type { TooltipPosition, TooltipVariant } from "./types";
|
|
3
|
-
|
|
4
|
-
const TOOLTIP_POSITION = {
|
|
5
|
-
top: c("tooltip-top"),
|
|
6
|
-
right: c("tooltip-right"),
|
|
7
|
-
bottom: c("tooltip-bottom"),
|
|
8
|
-
left: c("tooltip-left"),
|
|
9
|
-
} satisfies Record<TooltipPosition, string>;
|
|
10
|
-
|
|
11
|
-
const TOOLTIP_VARIANTS = {
|
|
12
|
-
accent: c("tooltip-accent"),
|
|
13
|
-
default: c("tooltip-default"),
|
|
14
|
-
error: c("tooltip-error"),
|
|
15
|
-
ghost: c("tooltip-ghost"),
|
|
16
|
-
info: c("tooltip-info"),
|
|
17
|
-
link: c("tooltip-link"),
|
|
18
|
-
neutral: c("tooltip-neutral"),
|
|
19
|
-
primary: c("tooltip-primary"),
|
|
20
|
-
secondary: c("tooltip-secondary"),
|
|
21
|
-
success: c("tooltip-success"),
|
|
22
|
-
warning: c("tooltip-warning"),
|
|
23
|
-
} satisfies Record<TooltipVariant, string>;
|
|
24
|
-
|
|
25
|
-
export const getTooltipClasses = ({
|
|
26
|
-
variant,
|
|
27
|
-
position,
|
|
28
|
-
}: {
|
|
29
|
-
variant?: TooltipVariant;
|
|
30
|
-
position?: TooltipPosition;
|
|
31
|
-
}) => {
|
|
32
|
-
return c("tooltip", TOOLTIP_VARIANTS[variant!], TOOLTIP_POSITION[position!]);
|
|
33
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Tooltip } from './Tooltip';
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
4
|
-
|
|
5
|
-
export type TooltipVariant =
|
|
6
|
-
| 'default'
|
|
7
|
-
| 'neutral'
|
|
8
|
-
| 'primary'
|
|
9
|
-
| 'secondary'
|
|
10
|
-
| 'accent'
|
|
11
|
-
| 'ghost'
|
|
12
|
-
| 'link'
|
|
13
|
-
| 'info'
|
|
14
|
-
| 'success'
|
|
15
|
-
| 'warning'
|
|
16
|
-
| 'error';
|
|
17
|
-
|
|
18
|
-
export type TooltipProps = {
|
|
19
|
-
tip: string;
|
|
20
|
-
children: ReactNode;
|
|
21
|
-
variant?: TooltipVariant;
|
|
22
|
-
position?: TooltipPosition;
|
|
23
|
-
className?: string;
|
|
24
|
-
};
|