infinity-ui-elements 1.0.1 → 1.0.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/dist/components/Button/Button.d.ts +23 -9
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.stories.d.ts +12 -1
- package/dist/components/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Button/index.d.ts +2 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.js +3504 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3522 -7
- package/dist/index.js.map +1 -1
- package/dist/lib/utils.d.ts +3 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/package.json +14 -4
- package/src/components/Button/Button.stories.tsx +0 -62
- package/src/components/Button/Button.tsx +0 -35
- package/src/components/Button/index.ts +0 -1
- package/src/index.css +0 -54
- package/src/index.ts +0 -2
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { fn } from "@storybook/test";
|
|
3
|
-
import { Button } from "./Button";
|
|
4
|
-
|
|
5
|
-
const meta: Meta<typeof Button> = {
|
|
6
|
-
title: "Components/Button",
|
|
7
|
-
component: Button,
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: "centered",
|
|
10
|
-
},
|
|
11
|
-
tags: ["autodocs"],
|
|
12
|
-
argTypes: {
|
|
13
|
-
variant: {
|
|
14
|
-
control: { type: "select" },
|
|
15
|
-
options: ["primary", "secondary"],
|
|
16
|
-
},
|
|
17
|
-
disabled: {
|
|
18
|
-
control: { type: "boolean" },
|
|
19
|
-
},
|
|
20
|
-
children: {
|
|
21
|
-
control: { type: "text" },
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
args: { onClick: fn() },
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export default meta;
|
|
28
|
-
type Story = StoryObj<typeof meta>;
|
|
29
|
-
|
|
30
|
-
export const Primary: Story = {
|
|
31
|
-
args: {
|
|
32
|
-
variant: "primary",
|
|
33
|
-
children: "Primary Button",
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export const Secondary: Story = {
|
|
38
|
-
args: {
|
|
39
|
-
variant: "secondary",
|
|
40
|
-
children: "Secondary Button",
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export const Disabled: Story = {
|
|
45
|
-
args: {
|
|
46
|
-
variant: "primary",
|
|
47
|
-
children: "Disabled Button",
|
|
48
|
-
disabled: true,
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export const AllVariants: Story = {
|
|
53
|
-
render: () => (
|
|
54
|
-
<div className="flex gap-4">
|
|
55
|
-
<Button variant="primary">Primary</Button>
|
|
56
|
-
<Button variant="secondary">Secondary</Button>
|
|
57
|
-
<Button variant="primary" disabled>
|
|
58
|
-
Disabled
|
|
59
|
-
</Button>
|
|
60
|
-
</div>
|
|
61
|
-
),
|
|
62
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
interface ButtonProps {
|
|
4
|
-
variant?: "primary" | "secondary";
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
onClick?: () => void;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
className?: string;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const Button: React.FC<ButtonProps> = ({
|
|
12
|
-
variant = "primary",
|
|
13
|
-
children,
|
|
14
|
-
onClick,
|
|
15
|
-
disabled = false,
|
|
16
|
-
className = "",
|
|
17
|
-
}) => {
|
|
18
|
-
const baseClasses =
|
|
19
|
-
"px-4 py-2 rounded font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
|
|
20
|
-
|
|
21
|
-
const variantClasses = {
|
|
22
|
-
primary:
|
|
23
|
-
"bg-primary text-white hover:bg-blue-600 focus:ring-primary disabled:bg-gray-400 disabled:cursor-not-allowed",
|
|
24
|
-
secondary:
|
|
25
|
-
"bg-secondary text-white hover:bg-gray-600 focus:ring-secondary disabled:bg-gray-400 disabled:cursor-not-allowed",
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<button className={combinedClasses} onClick={onClick} disabled={disabled}>
|
|
32
|
-
{children}
|
|
33
|
-
</button>
|
|
34
|
-
);
|
|
35
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Button } from "./Button";
|
package/src/index.css
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
/* Design System Colors */
|
|
5
|
-
--color-primary: #007bff;
|
|
6
|
-
--color-secondary: #6c757d;
|
|
7
|
-
--color-success: #28a745;
|
|
8
|
-
--color-danger: #dc3545;
|
|
9
|
-
--color-warning: #ffc107;
|
|
10
|
-
--color-info: #17a2b8;
|
|
11
|
-
--color-light: #f8f9fa;
|
|
12
|
-
--color-dark: #343a40;
|
|
13
|
-
|
|
14
|
-
/* Design System Spacing */
|
|
15
|
-
--spacing-18: 4.5rem;
|
|
16
|
-
--spacing-88: 22rem;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/* Map CSS variables to Tailwind utilities */
|
|
20
|
-
@utility bg-primary { background-color: var(--color-primary); }
|
|
21
|
-
@utility bg-secondary { background-color: var(--color-secondary); }
|
|
22
|
-
@utility bg-success { background-color: var(--color-success); }
|
|
23
|
-
@utility bg-danger { background-color: var(--color-danger); }
|
|
24
|
-
@utility bg-warning { background-color: var(--color-warning); }
|
|
25
|
-
@utility bg-info { background-color: var(--color-info); }
|
|
26
|
-
@utility bg-light { background-color: var(--color-light); }
|
|
27
|
-
@utility bg-dark { background-color: var(--color-dark); }
|
|
28
|
-
|
|
29
|
-
@utility text-primary { color: var(--color-primary); }
|
|
30
|
-
@utility text-secondary { color: var(--color-secondary); }
|
|
31
|
-
@utility text-success { color: var(--color-success); }
|
|
32
|
-
@utility text-danger { color: var(--color-danger); }
|
|
33
|
-
@utility text-warning { color: var(--color-warning); }
|
|
34
|
-
@utility text-info { color: var(--color-info); }
|
|
35
|
-
@utility text-light { color: var(--color-light); }
|
|
36
|
-
@utility text-dark { color: var(--color-dark); }
|
|
37
|
-
|
|
38
|
-
@utility border-primary { border-color: var(--color-primary); }
|
|
39
|
-
@utility border-secondary { border-color: var(--color-secondary); }
|
|
40
|
-
@utility border-success { border-color: var(--color-success); }
|
|
41
|
-
@utility border-danger { border-color: var(--color-danger); }
|
|
42
|
-
@utility border-warning { border-color: var(--color-warning); }
|
|
43
|
-
@utility border-info { border-color: var(--color-info); }
|
|
44
|
-
@utility border-light { border-color: var(--color-light); }
|
|
45
|
-
@utility border-dark { border-color: var(--color-dark); }
|
|
46
|
-
|
|
47
|
-
@utility ring-primary { --tw-ring-color: var(--color-primary); }
|
|
48
|
-
@utility ring-secondary { --tw-ring-color: var(--color-secondary); }
|
|
49
|
-
@utility ring-success { --tw-ring-color: var(--color-success); }
|
|
50
|
-
@utility ring-danger { --tw-ring-color: var(--color-danger); }
|
|
51
|
-
@utility ring-warning { --tw-ring-color: var(--color-warning); }
|
|
52
|
-
@utility ring-info { --tw-ring-color: var(--color-info); }
|
|
53
|
-
@utility ring-light { --tw-ring-color: var(--color-light); }
|
|
54
|
-
@utility ring-dark { --tw-ring-color: var(--color-dark); }
|
package/src/index.ts
DELETED