diff --git a/.storybook/output.css b/.storybook/output.css
index c628bcd..1545a55 100644
--- a/.storybook/output.css
+++ b/.storybook/output.css
@@ -735,6 +735,14 @@ select {
right: 0.5rem;
}
+.top-3 {
+ top: 0.75rem;
+}
+
+.-right-10 {
+ right: -2.5rem;
+}
+
.left-0 {
left: 0px;
}
@@ -751,10 +759,6 @@ select {
left: 50%;
}
-.top-3 {
- top: 0.75rem;
-}
-
.right-3 {
right: 0.75rem;
}
@@ -763,26 +767,18 @@ select {
top: 0px;
}
-.-right-5 {
- right: -1.25rem;
-}
-
-.-right-10 {
- right: -2.5rem;
-}
-
.isolate {
isolation: isolate;
}
-.z-40 {
- z-index: 40;
-}
-
.z-50 {
z-index: 50;
}
+.z-40 {
+ z-index: 40;
+}
+
.m-0 {
margin: 0px;
}
@@ -792,6 +788,11 @@ select {
margin-right: -0.5rem;
}
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+
.mt-2 {
margin-top: 0.5rem;
}
@@ -800,14 +801,6 @@ select {
margin-left: auto;
}
-.mt-1 {
- margin-top: 0.25rem;
-}
-
-.ml-2 {
- margin-left: 0.5rem;
-}
-
.mr-2 {
margin-right: 0.5rem;
}
@@ -816,6 +809,14 @@ select {
margin-top: auto;
}
+.mt-1 {
+ margin-top: 0.25rem;
+}
+
+.ml-2 {
+ margin-left: 0.5rem;
+}
+
.box-border {
box-sizing: border-box;
}
@@ -892,6 +893,10 @@ select {
width: 1.5rem;
}
+.w-3\/4 {
+ width: 75%;
+}
+
.w-auto {
width: auto;
}
@@ -900,8 +905,8 @@ select {
width: 1.25rem;
}
-.w-3\/4 {
- width: 75%;
+.w-1\/3 {
+ width: 33.333333%;
}
.min-w-0 {
@@ -1071,10 +1076,6 @@ select {
border-width: 1px;
}
-.border-b-2 {
- border-bottom-width: 2px;
-}
-
.border-r {
border-right-width: 1px;
}
@@ -1083,6 +1084,10 @@ select {
border-left-width: 1px;
}
+.border-b-2 {
+ border-bottom-width: 2px;
+}
+
.border-r-2 {
border-right-width: 2px;
}
@@ -1125,23 +1130,13 @@ select {
background-color: transparent;
}
-.bg-black {
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
-.bg-gray-900 {
- --tw-bg-opacity: 1;
- background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
.bg-black\/80 {
background-color: rgb(0 0 0 / 0.8);
}
-.bg-gray-800 {
+.bg-black {
--tw-bg-opacity: 1;
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
@@ -1168,8 +1163,8 @@ select {
padding: 1rem;
}
-.p-6 {
- padding: 1.5rem;
+.p-5 {
+ padding: 1.25rem;
}
.py-0\.5 {
@@ -1259,10 +1254,6 @@ select {
padding-right: 0.75rem;
}
-.pl-72 {
- padding-left: 18rem;
-}
-
.pb-4 {
padding-bottom: 1rem;
}
@@ -1331,11 +1322,6 @@ select {
color: rgb(239 68 68 / var(--tw-text-opacity));
}
-.text-gray-400 {
- --tw-text-opacity: 1;
- color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1372,14 +1358,6 @@ select {
transition-duration: 300ms;
}
-.duration-500 {
- transition-duration: 500ms;
-}
-
-.duration-200 {
- transition-duration: 200ms;
-}
-
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -1430,14 +1408,6 @@ select {
animation-duration: 300ms;
}
-.duration-500 {
- animation-duration: 500ms;
-}
-
-.duration-200 {
- animation-duration: 200ms;
-}
-
.ease-in-out {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -1470,36 +1440,11 @@ html {
background-color: transparent;
}
-.hover\:bg-gray-800:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-300:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
.hover\:bg-mono-hover:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
-.hover\:text-white:hover {
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-mono-primary:hover {
- --tw-text-opacity: 1;
- color: rgb(39 39 42 / var(--tw-text-opacity));
-}
-
-.hover\:text-mono-text:hover {
- --tw-text-opacity: 1;
- color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
.focus\:rounded-md:focus {
border-radius: 0.375rem;
}
@@ -1663,42 +1608,6 @@ html {
animation-duration: 500ms;
}
-.group[data-state=closed] .group-data-\[state\=closed\]\:duration-300 {
- transition-duration: 300ms;
-}
-
-.group[data-state=open] .group-data-\[state\=open\]\:duration-500 {
- transition-duration: 500ms;
-}
-
-.group[data-state=open] .group-data-\[state\=open\]\:animate-in {
- animation-name: enter;
- animation-duration: 150ms;
- --tw-enter-opacity: initial;
- --tw-enter-scale: initial;
- --tw-enter-rotate: initial;
- --tw-enter-translate-x: initial;
- --tw-enter-translate-y: initial;
-}
-
-.group[data-state=closed] .group-data-\[state\=closed\]\:animate-out {
- animation-name: exit;
- animation-duration: 150ms;
- --tw-exit-opacity: initial;
- --tw-exit-scale: initial;
- --tw-exit-rotate: initial;
- --tw-exit-translate-x: initial;
- --tw-exit-translate-y: initial;
-}
-
-.group[data-state=closed] .group-data-\[state\=closed\]\:duration-300 {
- animation-duration: 300ms;
-}
-
-.group[data-state=open] .group-data-\[state\=open\]\:duration-500 {
- animation-duration: 500ms;
-}
-
@media (prefers-reduced-motion: no-preference) {
@keyframes spin {
to {
@@ -1775,10 +1684,6 @@ html {
display: flex;
}
- .lg\:hidden {
- display: none;
- }
-
.lg\:w-72 {
width: 18rem;
}
diff --git a/README.md b/README.md
index cfbe6fd..aececc1 100644
--- a/README.md
+++ b/README.md
@@ -1,210 +1,7 @@
-# Ew UI
+## Getting started
-Probably the most opinionated React UI library.
+Install Tailwind CSS via npm:
-## Type of pages
+```bash
-1. App pages. Pages behind the login.
-2. Public pages. Pages accessible to everyone.
-
-## Dashboard
-
-You build your own Dashboard using the DashboardContent component and the sidebar, like so:
-
-```jsx
-function Dashboard() {
- return (
- <>
-
-
- >
- )
-}
-```
-
-## Color palette
-
-You need to define these values:
-
-```js
-"ew-primary": {
- DEFAULT: "#7F5aF0",
-},
-"ew-accent": {
- DEFAULT: "#444652",
-},
-"ew-text": {
- DEFAULT: "#333",
-},
-"ew-text-light": {
- DEFAULT: "#fff",
-},
-"ew-link": {
- DEFAULT: "#006bb8",
-},
-"ew-success": {
- DEFAULT: "#12E999",
-},
-"ew-warning": {
- DEFAULT: "#FBBD23",
-},
-"ew-error": {
- DEFAULT: "#BD271E",
-},
-"ew-bg": {
- DEFAULT: "#fff",
-},
-"ew-bg-dark": {
- DEFAULT: "#333",
-}
-```
-
-Then, generate the shades for each color using https://www.tints.dev/ and fill the objects as:
-
-```js
-"ew-primary": {
- DEFAULT: "#7F5aF0",
- 50: "#F1ECFD",
- 100: "#E6DEFC",
- 200: "#CCBEF9",
- 300: "#B39DF6",
- 400: "#9A7CF3",
- 500: "#7F5AF0",
- 600: "#521FEB",
- 700: "#3A11B6",
- 800: "#270B7A",
- 900: "#13063D",
- 950: "#09031C",
-},
-"ew-accent": {
- DEFAULT: "#444652",
- 50: "#E9EAF1",
- 100: "#D0D2E2",
- 200: "#A1A4C4",
- 300: "#757AA9",
- 400: "#505581",
- 500: "#333652",
- 600: "#292C42",
- 700: "#1F2132",
- 800: "#14151F",
- 900: "#0A0A10",
- 950: "#060609",
-},
-"ew-text": {
- DEFAULT: "#333",
- 50: "#EBEBEB",
- 100: "#D6D6D6",
- 200: "#ADADAD",
- 300: "#858585",
- 400: "#5C5C5C",
- 500: "#333333",
- 600: "#292929",
- 700: "#1F1F1F",
- 800: "#141414",
- 900: "#0A0A0A",
- 950: "#050505",
-},
-"ew-text-light": {
- DEFAULT: "#fff",
- 50: "#FFFFFF",
- 100: "#FFFFFF",
- 200: "#FFFFFF",
- 300: "#FFFFFF",
- 400: "#FFFFFF",
- 500: "#FFFFFF",
- 600: "#CCCCCC",
- 700: "#999999",
- 800: "#666666",
- 900: "#333333",
- 950: "#1A1A1A",
-},
-"ew-link": {
- DEFAULT: "#006bb8",
- 50: "#E0F2FF",
- 100: "#BDE3FF",
- 200: "#7AC8FF",
- 300: "#3DAEFF",
- 400: "#0092FA",
- 500: "#006BB8",
- 600: "#005694",
- 700: "#004170",
- 800: "#002A47",
- 900: "#001524",
- 950: "#000C14",
-},
-"ew-success": {
- DEFAULT: "#12E999",
- 50: "#E7FDF5",
- 100: "#D0FBEB",
- 200: "#A0F8D8",
- 300: "#71F4C4",
- 400: "#3DF0AE",
- 500: "#12E999",
- 600: "#0EB97A",
- 700: "#0B8E5E",
- 800: "#075F3F",
- 900: "#042F1F",
- 950: "#021810",
-},
-"ew-warning": {
- DEFAULT: "#FBBD23",
- 50: "#FFF9EB",
- 100: "#FEF2D2",
- 200: "#FDE4A5",
- 300: "#FDD87D",
- 400: "#FCCB50",
- 500: "#FBBD23",
- 600: "#E1A304",
- 700: "#AA7B03",
- 800: "#6E5002",
- 900: "#372801",
- 950: "#1E1601",
-},
-"ew-error": {
- DEFAULT: "#BD271E",
- 50: "#FBE6E5",
- 100: "#F7D1CF",
- 200: "#EF9E9A",
- 300: "#E77069",
- 400: "#DF3D35",
- 500: "#BD271E",
- 600: "#961E18",
- 700: "#721712",
- 800: "#4B0F0C",
- 900: "#280806",
- 950: "#120403",
-},
-"ew-bg": {
- DEFAULT: "#fff",
- 50: "#FFFFFF",
- 100: "#FFFFFF",
- 200: "#FFFFFF",
- 300: "#FFFFFF",
- 400: "#FFFFFF",
- 500: "#FFFFFF",
- 600: "#CCCCCC",
- 700: "#999999",
- 800: "#666666",
- 900: "#333333",
- 950: "#1A1A1A",
-},
-"ew-bg-dark": {
- DEFAULT: "#333",
- 50: "#EBEBEB",
- 100: "#D6D6D6",
- 200: "#ADADAD",
- 300: "#858585",
- 400: "#5C5C5C",
- 500: "#333333",
- 600: "#292929",
- 700: "#1F1F1F",
- 800: "#141414",
- 900: "#0A0A0A",
- 950: "#050505",
-},
-```
-
-Resources:
-
-* https://www.webdesignrankings.com/resources/lolcolors/
-* https://www.happyhues.co/palettes/4
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index 3b5f268..24d3212 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,3 +1 @@
-import * as Card from "./Card";
-
-export { Card }
\ No newline at end of file
+export * from "./Card";
diff --git a/src/components/Combobox/Combobox.stories.tsx b/src/components/Combobox/Combobox.stories.tsx
index 4379c02..5298dff 100644
--- a/src/components/Combobox/Combobox.stories.tsx
+++ b/src/components/Combobox/Combobox.stories.tsx
@@ -23,18 +23,10 @@ const animals = [
{ label: "Lion", value: "lion" },
{ label: "Monkey", value: "monkey" },
{ label: "Panda", value: "panda" },
+ { label: "Car", value: "car" },
+ { label: "Car Payment", value: "car_payment" },
];
-// export const Default: Story = {
-// render: () => (
-//
-// {animals.map((animal) => (
-// {animal.label}
-// ))}
-//
-// ),
-// };
-
export const Default: Story = {
render: () => ,
};
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index 912b1b3..38de6ad 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -42,7 +42,9 @@ const Combobox = React.forwardRef(
const classes = cx(styles.comboboxStyles({ hasError }), props.className);
const handleOnSelect = (selectedValue: string) => {
- const option = options.find((option) => option.value === selectedValue);
+ const option = options.find(
+ (option) => option.label.toLowerCase() === selectedValue
+ );
if (!_.isNil(option)) {
// If same option then unselect it.
diff --git a/src/examples/Dashboard/Dashboard.tsx b/src/examples/Dashboard/Dashboard.tsx
index fb2ee8d..558ed76 100644
--- a/src/examples/Dashboard/Dashboard.tsx
+++ b/src/examples/Dashboard/Dashboard.tsx
@@ -1,10 +1,8 @@
import * as React from "react";
-import { Box } from "../../components/Box";
-import { cx } from "../../utils";
-import { Header } from "./Header";
+import { Box, cx } from '../../index';
+
import { Sidebar } from "./Sidebar";
import { Content } from "./Content";
-import { Flyout } from "../../components/Flyout";
const Dashboard = () => {
return (
diff --git a/src/examples/SignUp/SignUp.stories.tsx b/src/examples/SignUp/SignUp.stories.tsx
new file mode 100644
index 0000000..7a09953
--- /dev/null
+++ b/src/examples/SignUp/SignUp.stories.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SignUp } from "./SignUp";
+
+const meta: Meta = {
+ title: "Examples / SignUp",
+ component: SignUp,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: () => ,
+};
+
+Default.parameters = {
+ layout: "fullscreen",
+};
diff --git a/src/examples/SignUp/SignUp.tsx b/src/examples/SignUp/SignUp.tsx
new file mode 100644
index 0000000..a4a411a
--- /dev/null
+++ b/src/examples/SignUp/SignUp.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Box, Button, Card, Input, cx } from "../../index";
+
+const SignUp = () => {
+ return (
+
+
+
+ Sign up
+ Create a new account.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export { SignUp };
diff --git a/src/index.ts b/src/index.ts
index 343961f..a5bc1a2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,7 @@
+import * as Card from "./components/Card";
+export { Card };
export { Box } from "./components/Box";
export { Button } from "./components/Button";
-export { Card } from "./components/Card";
export { Divider } from "./components/Divider";
export { Input } from "./components/Input";
export { Modal } from "./components/Modal";