+
@@ -118,6 +124,8 @@ export function InputGroup({
onMouseLeave={onMouseLeave}
onFocus={onFocus}
onBlur={onBlur}
+ isInvalid={isInvalid}
+ defaultValue={defaultValue}
/>
@@ -127,12 +135,11 @@ export function InputGroup({
label=""
id=""
onChange={onGroupChange}
- className="inputGroup-select"
value={groupValue}
options={group}
/>
) : (
-
{group}
+
{group}
)}
diff --git a/src/components/InputGroup/inputGroup.css b/src/components/InputGroup/inputGroup.css
index 804fa78..c90c0c4 100644
--- a/src/components/InputGroup/inputGroup.css
+++ b/src/components/InputGroup/inputGroup.css
@@ -1,4 +1,6 @@
.input-group {
+ box-sizing: border-box;
+
> div {
flex-grow: 1;
@@ -14,12 +16,6 @@
border-bottom-right-radius: 0;
border-right: none;
}
-
- select {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- min-width: 110px;
- }
}
> div:nth-child(2) {
@@ -28,8 +24,17 @@
border: 1px solid var(--codex-border-color);
border-top-right-radius: var(--codex-border-radius);
border-bottom-right-radius: var(--codex-border-radius);
- background-color: var(--codex-border-color);
- padding: calc(0.5rem + 0.5px);
+ height: 64px;
+ box-sizing: border-box;
+
+ select {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ min-width: 110px;
+ border-color: transparent;
+ background-color: transparent;
+ box-shadow: none;
+ }
}
}
}
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 4bffa5a..3f5e8c3 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,8 +1,9 @@
import { useEffect, useRef, useState } from "react";
import { attributes } from "../utils/attributes";
import "./toast.css";
-import { CircleCheck, CircleX, Info, X } from "lucide-react";
-import { ButtonIcon } from "../ButtonIcon/ButtonIcon";
+import SuccessCircleIcon from "../../assets/icons/success-circle.svg?react";
+import ErrorCircleIcon from "../../assets/icons/error-circle.svg?react";
+import CloseIcon from "../../assets/icons/close.svg?react";
type Props = {
message: string;
@@ -23,7 +24,7 @@ type Props = {
className?: string;
- variant: "success" | "error" | "default";
+ variant: "success" | "error";
};
export function Toast({
@@ -57,9 +58,8 @@ export function Toast({
};
const icons = {
- success: CircleCheck,
- error: CircleX,
- default: Info,
+ success: SuccessCircleIcon,
+ error: ErrorCircleIcon,
};
const Icon = icons[variant];
@@ -68,19 +68,14 @@ export function Toast({
className={`toast ${className} toast--${variant}`}
{...attributes({ "aria-hidden": time == 0 || msg === "" })}
>
-
+
-
+
{variant} !
{msg}
-
+
- }
- >
+
);
}
diff --git a/src/components/Toast/toast.css b/src/components/Toast/toast.css
index e53391b..d0f73c7 100644
--- a/src/components/Toast/toast.css
+++ b/src/components/Toast/toast.css
@@ -1,38 +1,41 @@
.toast {
position: fixed;
- bottom: 1rem;
- right: 1rem;
background: var(--codex-toast-background, var(--codex-background-light));
min-width: 150px;
- transform: translateX(0px);
- transition: transform 0.35s;
+ transition: top 0.35s;
+ top: 50px;
display: flex;
align-items: center;
- gap: 0.75rem;
+ gap: 8px;
border: 1px solid var(--codex-toast-border-color, var(--codex-border-color));
- border-radius: var(--codex-border-radius);
- padding: 0.75rem;
- padding-left: 1.5rem;
- color: var(--codex-toast-color, --codex-color);
+ border-radius: 6px;
+ padding: 16px;
+ color: white;
word-break: break-word;
border: 1px solid rgb(var(--codex-toast-color));
- background: rgba(var(--codex-toast-color), 1);
+ background: var(--codex-toast-color);
z-index: 20;
+ backdrop-filter: blur(32px);
+ left: 0;
+ right: 0;
+ max-width: 450px;
+ margin: auto;
&[aria-hidden] {
- transform: translateX(1000px);
+ top: -1000px;
}
&.toast--success {
- --codex-toast-color: var(--codex-color-success);
+ --codex-toast-color: #6fcb9433;
+ border-bottom: 2px solid #6fcb94;
+
+ svg {
+ color: #6fcb94;
+ }
}
&.toast--error {
- --codex-toast-color: var(--codex-color-error);
- }
-
- &.toast--default {
- --codex-toast-color: var(--codex-color-grey);
+ --codex-toast-color: rgba(var(--codex-color-error));
}
.button {
@@ -41,10 +44,29 @@
b {
text-transform: capitalize;
+ display: block;
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 16px;
+ }
+
+ div {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+
+ span {
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ text-align: left;
+ color: #ffffffcc;
}
svg {
- fill: rgba(var(--codex-toast-color), 0.2);
- stroke: white;
+ cursor: pointer;
}
}
diff --git a/src/index.ts b/src/index.ts
index 776aabe..564802e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,6 @@ export { ButtonIcon } from "./components/ButtonIcon/ButtonIcon";
export { Input } from "./components/Input/Input";
export { InputGroup } from "./components/InputGroup/InputGroup";
export * from "./components/Upload/Upload";
-export { Card } from "./components/Card/Card";
export { Select } from "./components/Select/Select";
export { Toast } from "./components/Toast/Toast";
export { SpaceAllocation, type SpaceAllocationItem } from "./components/SpaceAllocation/SpaceAllocation";
diff --git a/stories/Card.stories.ts b/stories/Card.stories.ts
deleted file mode 100644
index 7d174c5..0000000
--- a/stories/Card.stories.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Card } from "../src/components/Card/Card";
-import React from "react";
-
-const meta = {
- title: "Components/Card",
- component: Card,
- parameters: {
- layout: "centered",
- },
- tags: ["autodocs"],
- argTypes: {},
-} satisfies Meta
;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- title: "Hello",
- children: React.createElement("div", {}, "Hello World !"),
- },
-};
-
-export const CustomStyle: Story = {
- args: {
- title: "Hello",
- children: React.createElement("div", {}, "Hello World !"),
- },
-};
diff --git a/stories/Toast.stories.tsx b/stories/Toast.stories.tsx
index b20dd94..0d0e4fc 100644
--- a/stories/Toast.stories.tsx
+++ b/stories/Toast.stories.tsx
@@ -50,22 +50,3 @@ const ErrorTemplate = () => {
};
export const Error = ErrorTemplate.bind({});
-
-const DefaultTemplate = () => {
- const [time, setTime] = useState(0);
-
- const onClick = () => setTime(Date.now());
-
- return (
-
-
-
-
- );
-};
-
-export const Default = DefaultTemplate.bind({});