From 6462a172a29fc047b03298f7ab6696c24c432e7b Mon Sep 17 00:00:00 2001 From: Lewis Nguyen Date: Thu, 22 Feb 2024 15:52:01 +0700 Subject: [PATCH] Update: Add zn prefix --- lib/components/box/box.stories.tsx | 2 +- lib/components/calendar/calendar.tsx | 14 +- lib/components/center/center.stories.tsx | 4 +- lib/components/flex/flex.stories.tsx | 14 +- lib/components/menu/menu.stories.tsx | 2 +- lib/components/modal/modal.stories.tsx | 6 +- lib/components/popover/popover.stories.tsx | 7 +- .../styles/components/alert.styles.ts | 104 +++--- .../styles/components/avatar.styles.ts | 66 ++-- .../styles/components/box.styles.ts | 2 +- .../styles/components/button.styles.ts | 179 ++++++----- .../styles/components/calendar.styles.ts | 194 ++++++------ .../styles/components/center.styles.ts | 14 +- .../styles/components/checkbox.styles.ts | 62 ++-- .../styles/components/date-picker.styles.ts | 144 ++++----- .../styles/components/flex.styles.ts | 40 +-- .../styles/components/image.styles.ts | 73 +++-- .../styles/components/input.styles.ts | 122 +++---- .../styles/components/menu.styles.ts | 30 +- .../styles/components/modal.styles.ts | 92 +++--- .../styles/components/number-input.styles.ts | 138 ++++---- .../styles/components/popover.styles.ts | 14 +- .../styles/components/radio.styles.ts | 56 ++-- .../styles/components/select.styles.ts | 299 +++++++++--------- .../styles/components/spinner.styles.ts | 32 +- .../styles/components/switch.styles.ts | 92 +++--- .../styles/components/table.styles.ts | 23 +- .../styles/components/tabs.styles.ts | 62 ++-- .../styles/components/text.styles.ts | 2 +- .../styles/components/textarea.styles.ts | 78 ++--- .../styles/components/toast.styles.ts | 27 +- .../styles/components/tooltip.styles.ts | 14 +- package.json | 2 +- src/App.tsx | 6 +- tailwind.config.js | 3 +- 35 files changed, 1042 insertions(+), 977 deletions(-) diff --git a/lib/components/box/box.stories.tsx b/lib/components/box/box.stories.tsx index 6a626b7..5b299fc 100644 --- a/lib/components/box/box.stories.tsx +++ b/lib/components/box/box.stories.tsx @@ -15,6 +15,6 @@ type Story = StoryObj; export const Primary: Story = { args: { children: "Actually this is a div", - className: "bg-primary-base p-4 text-white", + className: "zn-bg-primary-base zn-p-4 zn-text-white", }, }; diff --git a/lib/components/calendar/calendar.tsx b/lib/components/calendar/calendar.tsx index c90a348..884016f 100644 --- a/lib/components/calendar/calendar.tsx +++ b/lib/components/calendar/calendar.tsx @@ -96,7 +96,7 @@ export const Calendar = (props: ICalendar) => { > {format(currentDate, "yyyy")} -
+
@@ -112,14 +112,14 @@ export const Calendar = (props: ICalendar) => { -
+
-
+
@@ -134,7 +134,7 @@ export const Calendar = (props: ICalendar) => { -
+
-
+
@@ -228,7 +228,7 @@ export const Calendar = (props: ICalendar) => { return (
-
+
{rows.map((row, i) => ( @@ -278,7 +278,7 @@ export const Calendar = (props: ICalendar) => { return (
-
+
{rows.map((row, i) => ( diff --git a/lib/components/center/center.stories.tsx b/lib/components/center/center.stories.tsx index f174c3f..adde3f3 100644 --- a/lib/components/center/center.stories.tsx +++ b/lib/components/center/center.stories.tsx @@ -19,7 +19,7 @@ export const Primary: Story = { return (
{children}
@@ -36,7 +36,7 @@ export const CircleComponent: StoryObj = { return ( {children} diff --git a/lib/components/flex/flex.stories.tsx b/lib/components/flex/flex.stories.tsx index 71a6813..4d0aa31 100644 --- a/lib/components/flex/flex.stories.tsx +++ b/lib/components/flex/flex.stories.tsx @@ -29,10 +29,10 @@ type Story = StoryObj; export const Primary: Story = { render: (args) => { return ( - - Block 1 + + Block 1 {/* */} - Block 2 + Block 2 ); }, @@ -49,10 +49,12 @@ export const Primary: Story = { export const Spacer: Story = { render: (args) => { return ( - - Spacer is the gap between us + + Spacer is the gap between us - Spacer is the gap between us + + Spacer is the gap between us + ); }, diff --git a/lib/components/menu/menu.stories.tsx b/lib/components/menu/menu.stories.tsx index f2ce0d3..3a30483 100644 --- a/lib/components/menu/menu.stories.tsx +++ b/lib/components/menu/menu.stories.tsx @@ -42,7 +42,7 @@ type Story = StoryObj; export const Primary: Story = { render: ({ children, ...rest }) => ( - {children} + {children} ), args: { diff --git a/lib/components/modal/modal.stories.tsx b/lib/components/modal/modal.stories.tsx index 4b9ef1d..c331e84 100644 --- a/lib/components/modal/modal.stories.tsx +++ b/lib/components/modal/modal.stories.tsx @@ -38,7 +38,7 @@ export const Primary: Story = { title: "Modal Title", showHeader: true, backdropClassName: "", - className: "w-[500px]", + className: "zn-w-[500px]", closeIcon: null, isOpen: true, }, @@ -68,7 +68,7 @@ export const CenteredModal: Story = { isOpen: true, title: "Modal Title", showHeader: true, - className: "w-[500px]", + className: "zn-w-[500px]", }, }; @@ -77,6 +77,6 @@ export const NoHeaderModal: Story = { children: "Hey, this is your modal mate!", isOpen: true, showHeader: false, - className: "w-[400px]", + className: "zn-w-[400px]", }, }; diff --git a/lib/components/popover/popover.stories.tsx b/lib/components/popover/popover.stories.tsx index a84cd44..953be3f 100644 --- a/lib/components/popover/popover.stories.tsx +++ b/lib/components/popover/popover.stories.tsx @@ -44,8 +44,11 @@ type Story = StoryObj; export const Primary: Story = { render: ({ children, content, ...rest }) => ( - {content}}> - {children} + {content}} + > + {children} ), args: { diff --git a/lib/customization/styles/components/alert.styles.ts b/lib/customization/styles/components/alert.styles.ts index 164a595..0558e2e 100644 --- a/lib/customization/styles/components/alert.styles.ts +++ b/lib/customization/styles/components/alert.styles.ts @@ -2,34 +2,34 @@ import { cva } from "class-variance-authority"; const base = cva( [ - "block", - "flex", - "relative", - "items-start", - "justify-start", - "gap-3", - "py-3", - "px-3", + "zn-block", + "zn-flex", + "zn-relative", + "zn-items-start", + "zn-justify-start", + "zn-gap-3", + "zn-py-3", + "zn-px-3", ], { variants: { variant: { - subtle: ["before:hidden"], + subtle: ["before:zn-hidden"], solid: [], "left-accent": [ - "before:h-full", - "before:w-1", - "before:top-0", - "before:absolute", - "before:left-0", + "before:zn-h-full", + "before:zn-w-1", + "before:zn-top-0", + "before:zn-absolute", + "before:zn-left-0", ], "top-accent": [ - "before:h-1", - "before:w-full", - "before:top-0", - "before:absolute", - "before:left-0", - "before:right-0", + "before:zn-h-1", + "before:zn-w-full", + "before:zn-top-0", + "before:zn-absolute", + "before:zn-left-0", + "before:zn-right-0", ], }, status: { @@ -43,42 +43,42 @@ const base = cva( { variant: ["subtle", "left-accent", "top-accent"], status: "info", - class: ["bg-white", "before:bg-info-base"], + class: ["zn-bg-white", "before:zn-bg-info-base"], }, { variant: ["subtle", "left-accent", "top-accent"], status: "success", - class: ["bg-white", "before:bg-success-base"], + class: ["zn-bg-white", "before:zn-bg-success-base"], }, { variant: ["subtle", "left-accent", "top-accent"], status: "warning", - class: ["bg-white", "before:bg-warning-base"], + class: ["zn-bg-white", "before:zn-bg-warning-base"], }, { variant: ["subtle", "left-accent", "top-accent"], status: "error", - class: ["bg-white", "before:bg-error-base"], + class: ["zn-bg-white", "before:zn-bg-error-base"], }, { variant: "solid", status: "info", - class: "bg-info-base", + class: "zn-bg-info-base", }, { variant: "solid", status: "success", - class: "bg-success-base", + class: "zn-bg-success-base", }, { variant: "solid", status: "warning", - class: "bg-warning-base", + class: "zn-bg-warning-base", }, { variant: "solid", status: "error", - class: "bg-error-base", + class: "zn-bg-error-base", }, ], defaultVariants: { @@ -88,13 +88,13 @@ const base = cva( } ); -const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], { +const icon = cva(["zn-text-2xl", "zn-border", "zn-rounded-full", "zn-p-2"], { variants: { status: { - info: ["text-info-base"], - success: ["text-success-base"], - warning: ["text-warning-base"], - error: ["text-error-base"], + info: ["zn-text-info-base"], + success: ["zn-text-success-base"], + warning: ["zn-text-warning-base"], + error: ["zn-text-error-base"], }, variant: { subtle: [], @@ -107,38 +107,38 @@ const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], { { variant: ["subtle", "left-accent", "top-accent"], status: "info", - class: ["text-info-base", "bg-info-10"], + class: ["zn-text-info-base", "zn-bg-info-10"], }, { variant: ["subtle", "left-accent", "top-accent"], status: "success", - class: ["text-success-base", "bg-success-10"], + class: ["zn-text-success-base", "zn-bg-success-10"], }, { variant: ["subtle", "left-accent", "top-accent"], status: "warning", - class: ["text-warning-base", "bg-warning-10"], + class: ["zn-text-warning-base", "zn-bg-warning-10"], }, { variant: ["subtle", "left-accent", "top-accent"], status: "error", - class: ["text-error-base", "bg-error-10"], + class: ["zn-text-error-base", "zn-bg-error-10"], }, { variant: "solid", status: ["info", "success", "warning", "error"], - class: ["border-none", "bg-white"], + class: ["zn-border-none", "zn-bg-white"], }, ], }); -const text = cva(["text-base"], { +const text = cva(["zn-text-base"], { variants: { status: { - info: ["text-info-base"], - success: ["text-success-base"], - warning: ["text-warning-base"], - error: ["text-error-base"], + info: ["zn-text-info-base"], + success: ["zn-text-success-base"], + warning: ["zn-text-warning-base"], + error: ["zn-text-error-base"], }, variant: { subtle: [], @@ -151,27 +151,27 @@ const text = cva(["text-base"], { { variant: ["subtle", "left-accent", "top-accent"], status: ["info", "success", "warning", "error"], - class: "text-gray-900", + class: "zn-text-gray-900", }, { variant: "solid", status: ["info", "success", "warning", "error"], - class: "text-white", + class: "zn-text-white", }, ], }); -const close = cva(["font-medium", "absolute", "top-3", "right-3"], { +const close = cva(["zn-font-medium", "zn-absolute", "zn-top-3", "zn-right-3"], { variants: { variant: { - subtle: ["!text-gray-400"], - solid: ["!text-white"], - "left-accent": ["!text-gray-400"], - "top-accent": ["!text-gray-400"], + subtle: ["!zn-text-gray-400"], + solid: ["!zn-text-white"], + "left-accent": ["!zn-text-gray-400"], + "top-accent": ["!zn-text-gray-400"], }, }, }); -const titleText = cva(["font-medium", "m-0", "text-sm"]); -const descriptionText = cva(["m-0", "text-sm", "font-normal"]); +const titleText = cva(["zn-font-medium", "zn-m-0", "zn-text-sm"]); +const descriptionText = cva(["zn-m-0", "zn-text-sm", "zn-font-normal"]); const alertStyles = { base, diff --git a/lib/customization/styles/components/avatar.styles.ts b/lib/customization/styles/components/avatar.styles.ts index 0d1ecac..3094468 100644 --- a/lib/customization/styles/components/avatar.styles.ts +++ b/lib/customization/styles/components/avatar.styles.ts @@ -2,27 +2,27 @@ import { cva } from "class-variance-authority"; const base = cva( [ - "flex", - "justify-center", - "items-center", - "rounded-full", - "overflow-hidden", - "uppercase", - "bg-primary-base", - "border", - "border-transparent", - "bg-clip-padding", + "zn-flex", + "zn-justify-center", + "zn-items-center", + "zn-rounded-full", + "zn-overflow-hidden", + "zn-uppercase", + "zn-bg-primary-base", + "zn-border", + "zn-border-transparent", + "zn-bg-clip-padding", ], { variants: { size: { - "2xs": ["w-4", "h-4"], - xs: ["w-6", "h-6"], - sm: ["w-8", "h-8"], - md: ["w-12", "h-12"], - lg: ["w-16", "h-16"], - xl: ["w-28", "h-28"], - "2xl": ["w-36", "h-36"], + "2xs": ["zn-w-4", "zn-h-4"], + xs: ["zn-w-6", "zn-h-6"], + sm: ["zn-w-8", "zn-h-8"], + md: ["zn-w-12", "zn-h-12"], + lg: ["zn-w-16", "zn-h-16"], + xl: ["zn-w-28", "zn-h-28"], + "2xl": ["zn-w-36", "zn-h-36"], }, }, defaultVariants: { @@ -30,29 +30,29 @@ const base = cva( }, } ); -const img = cva(["block"], { +const img = cva(["zn-block"], { variants: { size: { - "2xs": ["w-3", "h-3"], - xs: ["w-4", "h-4"], - sm: ["w-6", "h-6"], - md: ["w-8", "h-8"], - lg: ["w-12", "h-12"], - xl: ["w-20", "h-20"], - "2xl": ["w-24", "h-24"], + "2xs": ["zn-w-3", "zn-h-3"], + xs: ["zn-w-4", "zn-h-4"], + sm: ["zn-w-6", "zn-h-6"], + md: ["zn-w-8", "zn-h-8"], + lg: ["zn-w-12", "zn-h-12"], + xl: ["zn-w-20", "zn-h-20"], + "2xl": ["zn-w-24", "zn-h-24"], }, }, }); -const name = cva(["font-medium", "text-white"], { +const name = cva(["zn-font-medium", "zn-text-white"], { variants: { size: { - "2xs": ["text-[6px]"], - xs: ["text-[10px]"], - sm: ["text-sm"], - md: ["text-xl"], - lg: ["text-2xl"], - xl: ["text-5xl"], - "2xl": ["text-6xl"], + "2xs": ["zn-text-[6px]"], + xs: ["zn-text-[10px]"], + sm: ["zn-text-sm"], + md: ["zn-text-xl"], + lg: ["zn-text-2xl"], + xl: ["zn-text-5xl"], + "2xl": ["zn-text-6xl"], }, }, }); diff --git a/lib/customization/styles/components/box.styles.ts b/lib/customization/styles/components/box.styles.ts index 3501015..daa4c50 100644 --- a/lib/customization/styles/components/box.styles.ts +++ b/lib/customization/styles/components/box.styles.ts @@ -1,6 +1,6 @@ import { cva } from "class-variance-authority"; -const base = cva(["block"]); +const base = cva(["zn-block"]); const boxStyles = { base, diff --git a/lib/customization/styles/components/button.styles.ts b/lib/customization/styles/components/button.styles.ts index c6dc247..112a9c8 100644 --- a/lib/customization/styles/components/button.styles.ts +++ b/lib/customization/styles/components/button.styles.ts @@ -2,90 +2,90 @@ import { cva } from "class-variance-authority"; const base = cva( [ - "rounded-base", - "disabled:cursor-not-allowed", - "transition-opacity", - "duration-400", - "ease-in-out", - "font-semibold", + "zn-rounded-base", + "disabled:zn-cursor-not-allowed", + "zn-transition-opacity", + "zn-duration-400", + "zn-ease-in-out", + "zn-font-semibold", ], { variants: { variant: { solid: [ - "border", - "bg-primary-base", - "border-transparent", - "text-white", + "zn-border", + "zn-bg-primary-base", + "zn-border-transparent", + "zn-text-white", - "hover:bg-primary-50", + "hover:zn-bg-primary-50", - "focus:bg-primary-60", + "focus:zn-bg-primary-60", - "active:bg-primary-80", + "active:zn-bg-primary-80", - "disabled:bg-neutral-10", - "disabled:text-neutral-40", + "disabled:zn-bg-neutral-10", + "disabled:zn-text-neutral-40", ], subtle: [ - "bg-primary-20", - "border", - "border-transparent", + "zn-bg-primary-20", + "zn-border", + "zn-border-transparent", - "hover:bg-primary-10", + "hover:zn-bg-primary-10", - "focus:bg-primary-30", + "focus:zn-bg-primary-30", - "active:bg-primary-40", + "active:zn-bg-primary-40", - "disabled:bg-neutral-10", - "disabled:text-neutral-40", + "disabled:zn-bg-neutral-10", + "disabled:zn-text-neutral-40", - "disabled:bg-neutral-10", - "disabled:text-neutral-40", + "disabled:zn-bg-neutral-10", + "disabled:zn-text-neutral-40", ], outline: [ - "border", - "bg-neutral-5", - "border-primary-10", - "text-neutral-100", + "zn-border", + "zn-bg-neutral-5", + "zn-border-primary-10", + "zn-text-neutral-100", - "hover:border-neutral-10", - "hover:text-primary-base", + "hover:zn-border-neutral-10", + "hover:zn-text-primary-base", - "active:border-neutral-10", - "active:text-primary-base", + "active:zn-border-neutral-10", + "active:zn-text-primary-base", - "disabled:bg-neutral-10", - "disabled:text-neutral-40", + "disabled:zn-bg-neutral-10", + "disabled:zn-text-neutral-40", ], text: [ - "border", - "bg-transparent", - "border-transparent", + "zn-border", + "zn-bg-transparent", + "zn-border-transparent", - "hover:bg-primary-10", - "hover:text-primary-base", + "hover:zn-bg-primary-10", + "hover:zn-text-primary-base", - "active:bg-primary-10", - "active:text-primary-base", + "active:zn-bg-primary-10", + "active:zn-text-primary-base", - "disabled:text-neutral-40", + "disabled:zn-text-neutral-40", ], link: [ - "border", - "bg-transparent", - "border-transparent", - "underline", - "text-neutral-100", - "disabled:text-neutral-40", + "zn-border", + "zn-bg-transparent", + "zn-border-transparent", + "zn-underline", + "zn-text-neutral-100", + "disabled:zn-text-neutral-40", ], }, size: { - xs: ["text-xs", "h-[24px]", "py-1", "px-2"], - sm: ["text-xs", "h-[32px]", "py-1", "px-4"], - md: ["text-sm", "h-[44px]", "py-1", "px-[20px]"], - lg: ["text-base", "h-[48px]", "py-1", "px-[24px]"], + xs: ["zn-text-xs", "zn-h-[24px]", "zn-py-1", "zn-px-2"], + sm: ["zn-text-xs", "zn-h-[32px]", "zn-py-1", "zn-px-4"], + md: ["zn-text-sm", "zn-h-[44px]", "zn-py-1", "zn-px-[20px]"], + lg: ["zn-text-base", "zn-h-[48px]", "zn-py-1", "zn-px-[24px]"], }, isDanger: { true: [], @@ -97,59 +97,63 @@ const base = cva( variant: "solid", isDanger: true, class: [ - "bg-error-base", - "hover:bg-error-50", - "focus:bg-error-60", - "active:bg-error-80", + "zn-bg-error-base", + "hover:zn-bg-error-50", + "focus:zn-bg-error-60", + "active:zn-bg-error-80", ], }, { variant: "subtle", isDanger: true, class: [ - "bg-error-20", - "hover:bg-error-10", - "focus:bg-error-30", - "active:bg-error-40", + "zn-bg-error-20", + "hover:zn-bg-error-10", + "focus:zn-bg-error-30", + "active:zn-bg-error-40", ], }, { variant: "outline", isDanger: true, class: [ - "border-error-base", - "text-error-base", - "bg-neutral-5", + "zn-border-error-base", + "zn-text-error-base", + "zn-bg-neutral-5", - "hover:border-error-60", - "hover:text-error-60", - "hover:bg-neutral-5", + "hover:zn-border-error-60", + "hover:zn-text-error-60", + "hover:zn-bg-neutral-5", - "focus:border-error-60", - "focus:text-error-60", - "focus:bg-neutral-5", + "focus:zn-border-error-60", + "focus:zn-text-error-60", + "focus:zn-bg-neutral-5", - "active:border-error-60", - "active:text-error-60", - "active:bg-neutral-5", + "active:zn-border-error-60", + "active:zn-text-error-60", + "active:zn-bg-neutral-5", ], }, { variant: "text", isDanger: true, class: [ - "text-error-base", - "hover:text-error-base", - "hover:bg-error-10", + "zn-text-error-base", + "hover:zn-text-error-base", + "hover:zn-bg-error-10", - "active:text-error-base", - "active:bg-error-10", + "active:zn-text-error-base", + "active:zn-bg-error-10", ], }, { variant: "link", isDanger: true, - class: ["text-error-base", "hover:text-error-base", "hover:underline"], + class: [ + "zn-text-error-base", + "hover:zn-text-error-base", + "hover:zn-underline", + ], }, ], @@ -160,15 +164,20 @@ const base = cva( } ); -const container = cva(["flex", "justify-center", "items-center", "gap-2"]); +const container = cva([ + "zn-flex", + "zn-justify-center", + "zn-items-center", + "zn-gap-2", +]); -const spinner = cva(["animate-spin"], { +const spinner = cva(["zn-animate-spin"], { variants: { size: { - xs: ["w-[12px]", "h-[12px]"], - sm: ["w-[14px]", "h-[14px]"], - md: ["w-[18px]", "h-[18px]"], - lg: ["w-[20px]", "h-[20px]"], + xs: ["zn-w-[12px]", "zn-h-[12px]"], + sm: ["zn-w-[14px]", "zn-h-[14px]"], + md: ["zn-w-[18px]", "zn-h-[18px]"], + lg: ["zn-w-[20px]", "zn-h-[20px]"], }, }, }); diff --git a/lib/customization/styles/components/calendar.styles.ts b/lib/customization/styles/components/calendar.styles.ts index 22b9ad1..8ce4c42 100644 --- a/lib/customization/styles/components/calendar.styles.ts +++ b/lib/customization/styles/components/calendar.styles.ts @@ -1,52 +1,52 @@ import { cva } from "class-variance-authority"; // CONTAINER -const container = cva(["block", "bg-white"]); -const tableContainer = cva(["w-full", "py-2", "px-4"]); -const table = cva(["table-fixed", "w-full", "max-w-full"]); // i dont know why "w-full" crashes the browser +const container = cva(["zn-block", "zn-bg-white"]); +const tableContainer = cva(["zn-w-full", "zn-py-2", "zn-px-4"]); +const table = cva(["zn-table-fixed", "zn-w-full", "zn-max-w-full"]); // i dont know why "zn-w-full" crashes the browser // DAY VIEW const labelCell = cva([ - "px-1", - "text-center", - "font-medium", - "h-[36px]", - "text-sm", + "zn-px-1", + "zn-text-center", + "zn-font-medium", + "zn-h-[36px]", + "zn-text-sm", ]); -const valueCell = cva(["px-1"]); +const valueCell = cva(["zn-px-1"]); const valueCellInner = cva( [ - "my-0.5", - "block", - "w-[28px]", - "h-[28px]", - "mx-auto", - "text-center", - "text-sm", - "border", - "border-transparent", - "rounded", - "leading-[24px]", - "hover:cursor-pointer", - "hover:bg-gray-200", - "hover:text-neutral-100", + "zn-my-0.5", + "zn-block", + "zn-w-[28px]", + "zn-h-[28px]", + "zn-mx-auto", + "zn-text-center", + "zn-text-sm", + "zn-border", + "zn-border-transparent", + "zn-rounded", + "zn-leading-[24px]", + "hover:zn-cursor-pointer", + "hover:zn-bg-gray-200", + "hover:zn-text-neutral-100", ], { variants: { isToday: { - true: ["!text-primary-base", "!border-primary-base"], + true: ["!zn-text-primary-base", "!zn-border-primary-base"], }, isSameMonth: { - true: ["text-neutral-100"], - false: ["text-gray-300"], + true: ["zn-text-neutral-100"], + false: ["zn-text-gray-300"], }, isSelectedDate: { - true: ["!text-white", "!bg-primary-base", "!font-medium"], + true: ["!zn-text-white", "!zn-bg-primary-base", "!zn-font-medium"], }, isDisabled: { true: [ - "!bg-gray-200", - "hover:!cursor-not-allowed", + "!zn-bg-gray-200", + "hover:!zn-cursor-not-allowed", "hover:!text-gray-300", ], false: [], @@ -56,42 +56,42 @@ const valueCellInner = cva( { isDisabled: true, isSameMonth: true, - className: ["!text-gray-300"], + className: ["!zn-text-gray-300"], }, ], } ); // MONTH VIEW -const monthPickValueCell = cva(["px-1"]); +const monthPickValueCell = cva(["zn-px-1"]); const monthPickValueCellInner = cva( [ - "my-0.5", - "block", - "w-full", - "h-[28px]", - "px-2", - "mx-auto", - "text-center", - "border", - "border-transparent", - "rounded", - "leading-[24px]", - "hover:cursor-pointer", - "hover:bg-gray-200", - "hover:text-neutral-100", + "zn-my-0.5", + "zn-block", + "zn-w-full", + "zn-h-[28px]", + "zn-px-2", + "zn-mx-auto", + "zn-text-center", + "zn-border", + "zn-border-transparent", + "zn-rounded", + "zn-leading-[24px]", + "hover:zn-cursor-pointer", + "hover:zn-bg-gray-200", + "hover:zn-text-neutral-100", ], { variants: { isSameMonth: { - true: ["text-primary-base"], - false: ["text-neutral-100"], + true: ["zn-text-primary-base"], + false: ["zn-text-neutral-100"], }, isDisabled: { true: [ - "!bg-gray-200", - "hover:!cursor-not-allowed", - "hover:text-neutral-100", + "!zn-bg-gray-200", + "hover:!zn-cursor-not-allowed", + "hover:zn-text-neutral-100", ], false: [], }, @@ -100,35 +100,35 @@ const monthPickValueCellInner = cva( ); // YEAR VIEW -const yearPickValueCell = cva(["px-1"]); +const yearPickValueCell = cva(["zn-px-1"]); const yearPickValueCellInner = cva( [ - "my-0.5", - "block", - "w-full", - "h-[28px]", - "px-2", - "mx-auto", - "text-center", - "border", - "border-transparent", - "rounded", - "leading-[24px]", - "hover:cursor-pointer", - "hover:bg-gray-200", - "hover:text-neutral-100", + "zn-my-0.5", + "zn-block", + "zn-w-full", + "zn-h-[28px]", + "zn-px-2", + "zn-mx-auto", + "zn-text-center", + "zn-border", + "zn-border-transparent", + "zn-rounded", + "zn-leading-[24px]", + "hover:zn-cursor-pointer", + "hover:zn-bg-gray-200", + "hover:zn-text-neutral-100", ], { variants: { isSameYear: { - true: ["text-primary-base"], - false: ["text-neutral-100"], + true: ["zn-text-primary-base"], + false: ["zn-text-neutral-100"], }, isDisabled: { true: [ - "!bg-gray-200", - "hover:!cursor-not-allowed", - "hover:text-neutral-100", + "!zn-bg-gray-200", + "hover:!zn-cursor-not-allowed", + "hover:zn-text-neutral-100", ], false: [], }, @@ -137,52 +137,52 @@ const yearPickValueCellInner = cva( ); // COMMON -const labelRow = cva(["mb-4"]); +const labelRow = cva(["zn-mb-4"]); const valueRow = cva([]); const header = cva([ - "flex", - "items-center", - "w-full", - "gap-1", - "px-[20px]", - "pt-4", - // "border-b", - // "border-base", + "zn-flex", + "zn-items-center", + "zn-w-full", + "zn-gap-1", + "zn-px-[20px]", + "zn-pt-4", + // "zn-border-b", + // "zn-border-base", ]); const headerButton = cva( [ - "rounded-md", - "font-medium", - "px-1", - "py-1", - "leading-none", - "hover:text-primary-base", - "hover:bg-gray-100", - "text-base", + "zn-rounded-md", + "zn-font-medium", + "zn-px-1", + "zn-py-1", + "zn-leading-none", + "hover:zn-text-primary-base", + "hover:zn-bg-gray-100", + "zn-text-base", ], { variants: { isNoAction: { - true: ["!cursor-default", "pointer-events-none"], + true: ["!cursor-default", "zn-pointer-events-none"], false: [], }, }, } ); -const headerArrow = cva(["text-neutral-100", "hover:text-neutral-50"]); +const headerArrow = cva(["zn-text-neutral-100", "hover:zn-text-neutral-50"]); // FOOTER const footer = cva([ - "flex", - "justify-center", - "border-t", - "border-neutral-10", - "py-2", + "zn-flex", + "zn-justify-center", + "zn-border-t", + "zn-border-neutral-10", + "zn-py-2", ]); const footerButton = cva([ - "block", - "hover:cursor-pointer", - "text-primary-base", + "zn-block", + "hover:zn-cursor-pointer", + "zn-text-primary-base", ]); const calendarStyles = { diff --git a/lib/customization/styles/components/center.styles.ts b/lib/customization/styles/components/center.styles.ts index 4cea50c..8799df0 100644 --- a/lib/customization/styles/components/center.styles.ts +++ b/lib/customization/styles/components/center.styles.ts @@ -1,8 +1,18 @@ import { cva } from "class-variance-authority"; -const base = cva(["flex w-full justify-center items-center"]); +const base = cva([ + "zn-flex", + "zn-w-full", + "zn-justify-center", + "zn-items-center", +]); const circle = cva([ - "flex justify-center items-center rounded-full w-fit h-fit", + "zn-flex", + "zn-justify-center", + "zn-items-center", + "zn-rounded-full", + "zn-w-fit", + "zn-h-fit", ]); const centerStyles = { diff --git a/lib/customization/styles/components/checkbox.styles.ts b/lib/customization/styles/components/checkbox.styles.ts index b73bf97..7610155 100644 --- a/lib/customization/styles/components/checkbox.styles.ts +++ b/lib/customization/styles/components/checkbox.styles.ts @@ -1,11 +1,11 @@ import { cva } from "class-variance-authority"; const container = cva( - ["flex", "items-center", "w-fit", "gap-2", "select-none"], + ["zn-flex", "zn-items-center", "zn-w-fit", "zn-gap-2", "zn-select-none"], { variants: { isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, }, @@ -13,43 +13,43 @@ const container = cva( ); const input = cva( [ - "form-checkbox", - "!rounded-[4px]", - "border-neutral-100", - "checked:bg-primary-base", - "text-primary-base", - "focus:ring-2", - "focus:ring-primary-20", - "focus:!ring-offset-0", - "active:ring-2", - "active:ring-primary-20", - "active:!ring-offset-0", + "zn-form-checkbox", + "!zn-rounded-[4px]", + "zn-border-neutral-100", + "checked:zn-bg-primary-base", + "zn-text-primary-base", + "focus:zn-ring-2", + "focus:zn-ring-primary-20", + "focus:!zn-ring-offset-0", + "active:zn-ring-2", + "active:zn-ring-primary-20", + "active:!zn-ring-offset-0", ], { variants: { size: { - sm: ["h-3", "w-3"], - md: ["h-4", "w-4"], - lg: ["h-5", "w-5"], + sm: ["zn-h-3", "zn-w-3"], + md: ["zn-h-4", "zn-w-4"], + lg: ["zn-h-5", "zn-w-5"], }, indeterminate: { true: [], false: [], }, readOnly: { - true: ["pointer-events-none"], + true: ["zn-pointer-events-none"], }, isDisabled: { true: [ - "cursor-not-allowed", - "checked:bg-neutral-20", - "checked:border-neutral-20", - "bg-neutral-10", - "border-neutral-10", - "hover:bg-neutral-10", - "checked:hover:bg-neutral-20", - "active:ring-0", - "focus:ring-0", + "zn-cursor-not-allowed", + "checked:zn-bg-neutral-20", + "checked:zn-border-neutral-20", + "zn-bg-neutral-10", + "zn-border-neutral-10", + "hover:zn-bg-neutral-10", + "checked:hover:zn-bg-neutral-20", + "active:zn-ring-0", + "focus:zn-ring-0", ], false: [], }, @@ -59,19 +59,19 @@ const input = cva( }, } ); -const label = cva(["text-sm", "font-medium", "text-neutral-100"], { +const label = cva(["zn-text-sm", "zn-font-medium", "zn-text-neutral-100"], { variants: { isDisabled: { - true: ["text-neutral-40"], + true: ["zn-text-neutral-40"], false: [], }, }, }); -const group = cva(["flex"], { +const group = cva(["zn-flex"], { variants: { layout: { - vertical: ["flex-col", "gap-2"], - horizontal: ["flex-row", "gap-2-4", "gap-x-10"], + vertical: ["zn-flex-col", "zn-gap-2"], + horizontal: ["zn-flex-row", "zn-gap-2-4", "zn-gap-x-10"], }, }, }); diff --git a/lib/customization/styles/components/date-picker.styles.ts b/lib/customization/styles/components/date-picker.styles.ts index 4e1003a..6328d62 100644 --- a/lib/customization/styles/components/date-picker.styles.ts +++ b/lib/customization/styles/components/date-picker.styles.ts @@ -2,61 +2,61 @@ import { cva } from "class-variance-authority"; const container = cva( [ - "rounded-base", - "text-neutral-100", - "w-fit", - "outline", - "outline-1", - "outline-transparent", - "w-full", + "zn-rounded-base", + "zn-text-neutral-100", + "zn-w-fit", + "zn-outline", + "zn-outline-1", + "zn-outline-transparent", + "zn-w-full", ], { variants: { size: { - xs: ["h-6"], - sm: ["h-8"], - md: ["h-10"], - lg: ["h-12"], + xs: ["zn-h-6"], + sm: ["zn-h-8"], + md: ["zn-h-10"], + lg: ["zn-h-12"], }, variant: { outline: [ - "border", - "border-base", + "zn-border", + "zn-border-base", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", ], filled: [ - "bg-primary-10", + "zn-bg-primary-10", - "border", - "border-primary-10", + "zn-border", + "zn-border-primary-10", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", - "focus-within:!bg-transparent", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", + "focus-within:!zn-bg-transparent", ], flushed: [ - "!rounded-none", + "!zn-rounded-none", - "border-b", - "border-b-primary-base", + "zn-border-b", + "zn-border-b-primary-base", - "hover:shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!border-b-primary-base", + "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-border-b-primary-base", - "!px-0", + "!zn-px-0", ], }, isDisabled: { - true: ["!bg-neutral-10", "cursor-not-allowed"], + true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"], false: [], }, }, @@ -65,70 +65,70 @@ const container = cva( const input = cva( [ - "rounded-md", - "w-full", - "h-full", - "!bg-transparent", - "outline-none", - "cursor-pointer", - "caret-transparent", - "placeholder:text-neutral-40", + "zn-rounded-md", + "zn-w-full", + "zn-h-full", + "!zn-bg-transparent", + "zn-outline-none", + "zn-cursor-pointer", + "zn-caret-transparent", + "placeholder:zn-text-neutral-40", ], { variants: { size: { - xs: ["text-xs"], - sm: ["text-sm"], - md: ["text-sm"], - lg: ["text-base"], + xs: ["zn-text-xs"], + sm: ["zn-text-sm"], + md: ["zn-text-sm"], + lg: ["zn-text-base"], }, variant: { outline: [], filled: [], - flushed: ["!px-0"], - unstyled: ["!px-0"], + flushed: ["!zn-px-0"], + unstyled: ["!zn-px-0"], }, isInGroup: { - true: ["!px-0"], + true: ["!zn-px-0"], false: [], }, isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, }, } ); -const group = cva(["flex", "items-center"]); +const group = cva(["zn-flex", "zn-items-center"]); const leftElement = cva([ - "flex", - "items-center", - "justify-center", - "px-4", - "text-gray-500", + "zn-flex", + "zn-items-center", + "zn-justify-center", + "zn-px-4", + "zn-text-gray-500", ]); const clearElement = cva([ - "flex", - "items-center", - "justify-center", - "my-3", - "mx-3", - "[&>div]:p-1", - "[&>div]:hover:bg-gray-100", - "[&>div]:hover:cursor-pointer", - "[&>div]:hover:rounded-lg", + "zn-flex", + "zn-items-center", + "zn-justify-center", + "zn-my-3", + "zn-mx-3", + "[&>div]:zn-p-1", + "[&>div]:hover:zn-bg-gray-100", + "[&>div]:hover:zn-cursor-pointer", + "[&>div]:hover:zn-rounded-lg", ]); const dropdown = cva([ - "rounded-lg", - "bg-sec-background", - "text-neutral-100", - "text-base", - "shadow-base", - "overflow-hidden", - "w-[270px]", + "zn-rounded-lg", + "zn-bg-sec-background", + "zn-text-neutral-100", + "zn-text-base", + "zn-shadow-base", + "zn-overflow-hidden", + "zn-w-[270px]", ]); -const iconColor = cva(["text-gray-500"]); +const iconColor = cva(["zn-text-gray-500"]); const datePickerStyles = { container, diff --git a/lib/customization/styles/components/flex.styles.ts b/lib/customization/styles/components/flex.styles.ts index 1ef94de..fe06542 100644 --- a/lib/customization/styles/components/flex.styles.ts +++ b/lib/customization/styles/components/flex.styles.ts @@ -1,32 +1,32 @@ import { cva } from "class-variance-authority"; -const base = cva(["flex"], { +const base = cva(["zn-flex"], { variants: { direction: { - row: ["flex-row"], - "row-reverse": ["flex-row-reverse"], - column: ["flex-col"], - "column-reverse": ["flex-col-reverse"], + row: ["zn-flex-row"], + "row-reverse": ["zn-flex-row-reverse"], + column: ["zn-flex-col"], + "column-reverse": ["zn-flex-col-reverse"], }, justify: { - "flex-end": ["justify-end"], - "flex-start": ["justify-start"], - center: ["justify-center"], - "space-around": ["justify-around"], - "space-between": ["justify-between"], - "space-evenly": ["justify-evenly"], + "flex-end": ["zn-justify-end"], + "flex-start": ["zn-justify-start"], + center: ["zn-justify-center"], + "space-around": ["zn-justify-around"], + "space-between": ["zn-justify-between"], + "space-evenly": ["zn-justify-evenly"], }, align: { - "flex-end": ["items-end"], - "flex-start": ["items-start"], - center: ["items-center"], - baseline: ["items-baseline"], - stretch: ["items-stretch"], + "flex-end": ["zn-items-end"], + "flex-start": ["zn-items-start"], + center: ["zn-items-center"], + baseline: ["zn-items-baseline"], + stretch: ["zn-items-stretch"], }, wrap: { - nowrap: ["flex-nowrap"], - wrap: ["flex-wrap"], - "wrap-reverse": ["flex-wrap-reverse"], + nowrap: ["zn-flex-nowrap"], + wrap: ["zn-flex-wrap"], + "wrap-reverse": ["zn-flex-wrap-reverse"], }, }, defaultVariants: { @@ -37,7 +37,7 @@ const base = cva(["flex"], { }, }); -const spacer = cva(["flex-1 place-self-stretch"]); +const spacer = cva(["zn-flex-1", "zn-place-self-stretch"]); const flexStyles = { base, diff --git a/lib/customization/styles/components/image.styles.ts b/lib/customization/styles/components/image.styles.ts index 72157b0..4a183c4 100644 --- a/lib/customization/styles/components/image.styles.ts +++ b/lib/customization/styles/components/image.styles.ts @@ -1,45 +1,50 @@ import { cva } from "class-variance-authority"; -const img = cva(["block", "h-auto", "select-none"]); -const imgPreview = cva(["block", "h-auto", "select-none", "w-full"]); +const img = cva(["zn-block", "zn-h-auto", "zn-select-none"]); +const imgPreview = cva([ + "zn-block", + "zn-h-auto", + "zn-select-none", + "zn-w-full", +]); const backdrop = cva([ - "fixed", - "bg-black", - "bg-opacity-50", - "inset-0", - "overflow-hidden", - "w-full", - "h-full", - "flex", - "justify-center", - "items-center", + "zn-fixed", + "zn-bg-black", + "zn-bg-opacity-50", + "zn-inset-0", + "zn-overflow-hidden", + "zn-w-full", + "zn-h-full", + "zn-flex", + "zn-justify-center", + "zn-items-center", ]); -const imgContainer = cva(["select-none"]); -const isPreviewable = cva(["hover:brightness-75", "cursor-pointer"]); +const imgContainer = cva(["zn-select-none"]); +const isPreviewable = cva(["hover:zn-brightness-75", "zn-cursor-pointer"]); const tools = cva([ - "flex", - "items-center", - "gap-1", - "fixed", - "left-[50%]", - "-translate-x-1/2", - "bottom-3", - "bg-black", - "bg-opacity-60", - "rounded-lg", - "px-2", - "py-1", - "select-none", + "zn-flex", + "zn-items-center", + "zn-gap-1", + "zn-fixed", + "zn-left-[50%]", + "-zn-translate-x-1/2", + "zn-bottom-3", + "zn-bg-black", + "zn-bg-opacity-60", + "zn-rounded-lg", + "zn-px-2", + "zn-py-1", + "zn-select-none", "backdrop-blur-sm", ]); const toolIcon = cva([ - "p-2", - "cursor-pointer", - "text-white", - "hover:brightness-75", - "select-none", - "hover:scale-110", - "active:scale-100", + "zn-p-2", + "zn-cursor-pointer", + "zn-text-white", + "hover:zn-brightness-75", + "zn-select-none", + "hover:zn-scale-110", + "active:zn-scale-100", ]); const imageStyles = { img, diff --git a/lib/customization/styles/components/input.styles.ts b/lib/customization/styles/components/input.styles.ts index 76a8190..eaeb1a9 100644 --- a/lib/customization/styles/components/input.styles.ts +++ b/lib/customization/styles/components/input.styles.ts @@ -2,75 +2,75 @@ import { cva } from "class-variance-authority"; const container = cva( [ - "rounded-base", - "text-neutral-100", - "w-fit", - "outline", - "outline-1", - "outline-transparent", - "w-full", + "zn-rounded-base", + "zn-text-neutral-100", + "zn-w-fit", + "zn-outline", + "zn-outline-1", + "zn-outline-transparent", + "zn-w-full", ], { variants: { size: { - xs: ["h-6"], - sm: ["h-8"], - md: ["h-10"], - lg: ["h-12"], + xs: ["zn-h-6"], + sm: ["zn-h-8"], + md: ["zn-h-10"], + lg: ["zn-h-12"], }, variant: { outline: [ - "border", - "border-base", + "zn-border", + "zn-border-base", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], filled: [ - "bg-primary-10", + "zn-bg-primary-10", - "border", - "border-primary-10", + "zn-border", + "zn-border-primary-10", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", - "focus-within:!bg-transparent", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", + "focus-within:!zn-bg-transparent", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], flushed: [ - "!rounded-none", + "!zn-rounded-none", - "border-b", - "border-b-primary-base", + "zn-border-b", + "zn-border-b-primary-base", - "hover:shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!border-b-primary-base", + "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-border-b-primary-base", - "!px-0", + "!zn-px-0", ], }, addonRight: { - true: ["!pl-4"], + true: ["!zn-pl-4"], false: [], }, addonLeft: { - true: ["!pr-4"], + true: ["!zn-pr-4"], false: [], }, isDisabled: { - true: ["!bg-neutral-10", "cursor-not-allowed"], + true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"], false: [], }, }, @@ -78,7 +78,7 @@ const container = cva( { addonLeft: true, addonRight: true, - class: "!px-0", + class: "!zn-px-0", }, ], } @@ -86,41 +86,51 @@ const container = cva( const input = cva( [ - "rounded-md", - "w-full", - "h-full", - "!bg-transparent", - "outline-none", - "placeholder:text-neutral-40", + "zn-rounded-md", + "zn-w-full", + "zn-h-full", + "!zn-bg-transparent", + "zn-outline-none", + "placeholder:zn-text-neutral-40", ], { variants: { size: { - xs: ["px-4", "text-xs"], - sm: ["px-4", "text-sm"], - md: ["px-4", "text-sm"], - lg: ["px-4", "text-base"], + xs: ["zn-px-4", "zn-text-xs"], + sm: ["zn-px-4", "zn-text-sm"], + md: ["zn-px-4", "zn-text-sm"], + lg: ["zn-px-4", "zn-text-base"], }, variant: { outline: [], filled: [], - flushed: ["!px-0"], + flushed: ["!zn-px-0"], }, isInGroup: { - true: ["!px-0"], + true: ["!zn-px-0"], false: [], }, isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, }, } ); -const group = cva(["flex", "items-center"]); -const leftElement = cva(["flex", "items-center", "justify-center", "px-4"]); -const rightElement = cva(["flex", "items-center", "justify-center", "px-4"]); +const group = cva(["zn-flex", "zn-items-center"]); +const leftElement = cva([ + "zn-flex", + "zn-items-center", + "zn-justify-center", + "zn-px-4", +]); +const rightElement = cva([ + "zn-flex", + "zn-items-center", + "zn-justify-center", + "zn-px-4", +]); const inputStyles = { container, input, diff --git a/lib/customization/styles/components/menu.styles.ts b/lib/customization/styles/components/menu.styles.ts index 1f4db5b..e050bed 100644 --- a/lib/customization/styles/components/menu.styles.ts +++ b/lib/customization/styles/components/menu.styles.ts @@ -1,23 +1,23 @@ import { cva } from "class-variance-authority"; const base = cva([ - "rounded-base", - "p-1", - "bg-color-component-background", - "text-neutral-100", - "shadow-base", + "zn-rounded-base", + "zn-p-1", + "zn-bg-color-component-background", + "zn-text-neutral-100", + "zn-shadow-base", ]); const item = cva([ - "w-full", - "px-3", - "py-2", - "rounded-base", - "hover:bg-primary-10", - "cursor-pointer", - "text-sm", - "font-medium", - "flex", - "gap-2", + "zn-w-full", + "zn-px-3", + "zn-py-2", + "zn-rounded-base", + "hover:zn-bg-primary-10", + "zn-cursor-pointer", + "zn-text-sm", + "zn-font-medium", + "zn-flex", + "zn-gap-2", ]); const itemIcon = cva([]); const arrow = cva([]); diff --git a/lib/customization/styles/components/modal.styles.ts b/lib/customization/styles/components/modal.styles.ts index aba7e41..51e6e7f 100644 --- a/lib/customization/styles/components/modal.styles.ts +++ b/lib/customization/styles/components/modal.styles.ts @@ -1,75 +1,83 @@ import { cva } from "class-variance-authority"; const backdrop = cva([ - "fixed", - "bg-black", - "bg-opacity-50", - "inset-0", - "overflow-y-auto", - "flex", - "justify-center", - "w-full", - "h-full", - "p-12", + "zn-fixed", + "zn-bg-black", + "zn-bg-opacity-50", + "zn-inset-0", + "zn-overflow-y-auto", + "zn-flex", + "zn-justify-center", + "zn-w-full", + "zn-h-full", + "zn-p-12", // "backdrop-blur-sm", ]); const container = cva( [ - "m-auto", - "bg-color-component-background", - "min-w-[350px] max-w-[90%]", - "h-fit", - "rounded-base", - "relative", + "zn-m-auto", + "zn-bg-color-component-background", + "zn-min-w-[350px] max-w-[90%]", + "zn-h-fit", + "zn-rounded-base", + "zn-relative", ], { variants: { isCentered: { true: [""], - false: ["mt-28"], + false: ["zn-mt-28"], }, }, } ); -const close = cva(["absolute", "right-4", "top-4", "text-neutral-50"]); -const header = cva(["px-6", "pt-6"]); -const titleContainer = cva(["flex", "gap-2"]); -const titleIcon = cva(["mt-1"], { +const close = cva([ + "zn-absolute", + "zn-right-4", + "zn-top-4", + "zn-text-neutral-50", +]); +const header = cva(["zn-px-6", "zn-pt-6"]); +const titleContainer = cva(["zn-flex", "zn-gap-2"]); +const titleIcon = cva(["zn-mt-1"], { variants: { variant: { - success: ["text-success-base"], - error: ["text-error-base"], - warning: ["text-warning-base"], - info: ["text-info-base"], + success: ["zn-text-success-base"], + error: ["zn-text-error-base"], + warning: ["zn-text-warning-base"], + info: ["zn-text-info-base"], }, }, }); -const title = cva(["text-xl", "font-bold"]); -const content = cva(["px-6", "pb-6"], { +const title = cva(["zn-text-xl", "zn-font-bold"]); +const content = cva(["zn-px-6", "zn-pb-6"], { variants: { showHeader: { - true: ["pt-3"], - false: ["pt-6"], + true: ["zn-pt-3"], + false: ["zn-pt-6"], }, }, }); -const footer = cva(["px-6", "pb-6", "flex", "justify-end", "gap-3"], { - variants: { - variant: { - success: [], - error: [], - warning: [], - info: [], +const footer = cva( + ["zn-px-6", "zn-pb-6", "zn-flex", "zn-justify-end", "zn-gap-3"], + { + variants: { + variant: { + success: [], + error: [], + warning: [], + info: [], + }, }, - }, -}); + } +); const okButton = cva([], { variants: { variant: { - success: ["bg-success-base"], - error: ["bg-error-base"], - warning: ["bg-warning-base"], - info: ["bg-info-base"], + success: ["zn-bg-success-base"], + error: ["zn-bg-error-base"], + warning: ["zn-bg-warning-base"], + info: ["zn-bg-info-base"], }, }, }); diff --git a/lib/customization/styles/components/number-input.styles.ts b/lib/customization/styles/components/number-input.styles.ts index 328e23d..58f17c3 100644 --- a/lib/customization/styles/components/number-input.styles.ts +++ b/lib/customization/styles/components/number-input.styles.ts @@ -2,71 +2,71 @@ import { cva } from "class-variance-authority"; const container = cva( [ - "rounded-base", - "text-neutral-100", - "w-full", - "h-full", - "outline", - "outline-1", - "outline-transparent", - "flex", - "justify-between", - "items-center", - "overflow-hidden", + "zn-rounded-base", + "zn-text-neutral-100", + "zn-w-full", + "zn-h-full", + "zn-outline", + "zn-outline-1", + "zn-outline-transparent", + "zn-flex", + "zn-justify-between", + "zn-items-center", + "zn-overflow-hidden", ], { variants: { size: { - xs: ["h-6"], - sm: ["h-8"], - md: ["h-10"], - lg: ["h-12"], + xs: ["zn-h-6"], + sm: ["zn-h-8"], + md: ["zn-h-10"], + lg: ["zn-h-12"], }, variant: { outline: [ - "border", - "border-base", + "zn-border", + "zn-border-base", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], filled: [ - "bg-primary-10", + "zn-bg-primary-10", - "border", - "border-primary-10", + "zn-border", + "zn-border-primary-10", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", - "focus-within:!bg-transparent", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", + "focus-within:!zn-bg-transparent", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], flushed: [ - "!rounded-none", + "!zn-rounded-none", - "border-b", - "border-b-primary-base", + "zn-border-b", + "zn-border-b-primary-base", - "hover:shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!border-b-primary-base", + "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-border-b-primary-base", - "!px-0", + "!zn-px-0", ], }, isDisabled: { - true: ["!bg-neutral-10", "cursor-not-allowed"], + true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"], false: [], }, }, @@ -75,33 +75,33 @@ const container = cva( const input = cva( [ - "rounded-md", - "w-full", - "h-full", - "!bg-transparent", - "outline-none", - "placeholder:text-neutral-40", + "zn-rounded-md", + "zn-w-full", + "zn-h-full", + "!zn-bg-transparent", + "zn-outline-none", + "placeholder:zn-text-neutral-40", ], { variants: { size: { - xs: ["px-2", "text-xs"], - sm: ["px-2", "text-sm"], - md: ["px-3", "text-sm"], - lg: ["px-3", "text-base"], + xs: ["zn-px-2", "zn-text-xs"], + sm: ["zn-px-2", "zn-text-sm"], + md: ["zn-px-3", "zn-text-sm"], + lg: ["zn-px-3", "zn-text-base"], }, variant: { outline: [], filled: [], - flushed: ["!px-0"], - unstyled: ["!px-0"], + flushed: ["!zn-px-0"], + unstyled: ["!zn-px-0"], }, isInGroup: { - true: ["!px-0"], + true: ["!zn-px-0"], false: [], }, isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, }, @@ -109,25 +109,25 @@ const input = cva( ); const arrowContainer = cva([ - "flex", - "flex-col", - "border-l", - "border-l-base", - "justify-stretch", - "h-full", + "zn-flex", + "zn-flex-col", + "zn-border-l", + "zn-border-l-base", + "zn-justify-stretch", + "zn-h-full", ]); const arrow = cva([ - "flex", - "justify-center", - "items-center", - "px-1.5", - "leading-none", - "hover:bg-primary-10", - "grow", + "zn-flex", + "zn-justify-center", + "zn-items-center", + "zn-px-1.5", + "zn-leading-none", + "hover:zn-bg-primary-10", + "zn-grow", ]); -const arrowDivider = cva(["text-base", "w-full"]); +const arrowDivider = cva(["zn-text-base", "zn-w-full"]); const numberInputStyles = { container, diff --git a/lib/customization/styles/components/popover.styles.ts b/lib/customization/styles/components/popover.styles.ts index 0375ba0..520634b 100644 --- a/lib/customization/styles/components/popover.styles.ts +++ b/lib/customization/styles/components/popover.styles.ts @@ -1,13 +1,13 @@ import { cva } from "class-variance-authority"; const base = cva([ - "rounded-base", - "px-3", - "py-2", - "bg-color-component-background", - "text-neutral-100", - "text-sm", - "shadow-base", + "zn-rounded-base", + "zn-px-3", + "zn-py-2", + "zn-bg-color-component-background", + "zn-text-neutral-100", + "zn-text-sm", + "zn-shadow-base", ]); const arrow = cva([]); const popoverStyles = { diff --git a/lib/customization/styles/components/radio.styles.ts b/lib/customization/styles/components/radio.styles.ts index f8f77b4..03e5c86 100644 --- a/lib/customization/styles/components/radio.styles.ts +++ b/lib/customization/styles/components/radio.styles.ts @@ -1,11 +1,11 @@ import { cva } from "class-variance-authority"; const container = cva( - ["flex", "items-center", "w-fit", "gap-2", "select-none"], + ["zn-flex", "zn-items-center", "zn-w-fit", "zn-gap-2", "zn-select-none"], { variants: { isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, }, @@ -13,40 +13,40 @@ const container = cva( ); const input = cva( [ - "form-radio", - "checked:bg-primary-base", - "border-neutral-100", - "text-primary-base", - "focus:ring-2", - "focus:ring-primary-20", - "focus:!ring-offset-0", - "active:ring-2", - "active:ring-primary-20", - "active:!ring-offset-0", + "zn-form-radio", + "checked:zn-bg-primary-base", + "zn-border-neutral-100", + "zn-text-primary-base", + "focus:zn-ring-2", + "focus:zn-ring-primary-20", + "focus:!zn-ring-offset-0", + "active:zn-ring-2", + "active:zn-ring-primary-20", + "active:!zn-ring-offset-0", ], { variants: { size: { - sm: ["h-3", "w-3"], - md: ["h-4", "w-4"], - lg: ["h-5", "w-5"], + sm: ["zn-h-3", "zn-w-3"], + md: ["zn-h-4", "zn-w-4"], + lg: ["zn-h-5", "zn-w-5"], }, indeterminate: { true: [], false: [], }, readOnly: { - true: ["pointer-events-none"], + true: ["zn-pointer-events-none"], }, isDisabled: { true: [ - "cursor-not-allowed", - "checked:bg-neutral-20", - "bg-neutral-5", - "hover:bg-neutral-5", - "checked:hover:bg-neutral-20", - "active:ring-0", - "focus:ring-0", + "zn-cursor-not-allowed", + "checked:zn-bg-neutral-20", + "zn-bg-neutral-5", + "hover:zn-bg-neutral-5", + "checked:hover:zn-bg-neutral-20", + "active:zn-ring-0", + "focus:zn-ring-0", ], false: [], }, @@ -56,18 +56,18 @@ const input = cva( }, } ); -const label = cva(["text-sm", "font-medium", "text-neutral-100"], { +const label = cva(["zn-text-sm", "zn-font-medium", "zn-text-neutral-100"], { variants: { isDisabled: { - true: ["text-neutral-40"], + true: ["zn-text-neutral-40"], }, }, }); -const group = cva(["flex"], { +const group = cva(["zn-flex"], { variants: { layout: { - vertical: ["flex-col", "gap-2"], - horizontal: ["flex-row", "gap-2-4", "gap-x-10"], + vertical: ["zn-flex-col", "zn-gap-2"], + horizontal: ["zn-flex-row", "zn-gap-2-4", "zn-gap-x-10"], }, }, }); diff --git a/lib/customization/styles/components/select.styles.ts b/lib/customization/styles/components/select.styles.ts index bbba0f4..a0aedf9 100644 --- a/lib/customization/styles/components/select.styles.ts +++ b/lib/customization/styles/components/select.styles.ts @@ -2,87 +2,87 @@ import { cva } from "class-variance-authority"; const container = cva( [ - "rounded-base", - "text-neutral-100", - "w-fit", - "outline", - "outline-1", - "outline-transparent", - "w-full", + "zn-rounded-base", + "zn-text-neutral-100", + "zn-w-fit", + "zn-outline", + "zn-outline-1", + "zn-outline-transparent", + "zn-w-full", ], { variants: { size: { - xs: ["min-h-6"], - sm: ["min-h-8"], - md: ["min-h-10"], - lg: ["min-h-12"], + xs: ["zn-min-h-6"], + sm: ["zn-min-h-8"], + md: ["zn-min-h-10"], + lg: ["zn-min-h-12"], }, variant: { outline: [ - "border", - "border-base", + "zn-border", + "zn-border-base", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], filled: [ - "bg-primary-10", + "zn-bg-primary-10", - "border", - "border-primary-10", + "zn-border", + "zn-border-primary-10", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", - "focus-within:!bg-transparent", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", + "focus-within:!zn-bg-transparent", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], flushed: [ - "!rounded-none", + "!zn-rounded-none", - "border-b", - "border-b-primary-base", + "zn-border-b", + "zn-border-b-primary-base", - "hover:shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!border-b-primary-base", + "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-border-b-primary-base", - "!px-0", + "!zn-px-0", ], }, isDisabled: { - true: ["!bg-neutral-10", "cursor-not-allowed"], + true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"], false: [], }, }, } ); const secContainer = cva( - ["w-full", "min-h-inherit", "h-full", "flex", "items-center"], + ["zn-w-full", "zn-min-h-inherit", "zn-h-full", "zn-flex", "zn-items-center"], { variants: { addonRight: { - true: ["pl-4", "pr-2.5"], + true: ["zn-pl-4", "zn-pr-2.5"], false: [], }, addonLeft: { - true: ["pr-4"], + true: ["zn-pr-4"], false: [], }, isSearchable: { - true: ["cursor-text"], - false: ["cursor-pointer"], + true: ["zn-cursor-text"], + false: ["zn-cursor-pointer"], }, isMultiple: { true: [], @@ -93,43 +93,43 @@ const secContainer = cva( { addonLeft: true, addonRight: true, - class: "!px-0", + class: "!zn-px-0", }, ], } ); const inputGroup = cva( [ - "w-full", - "min-h-inherit", - "h-full", - "!bg-transparent", - "outline-none", - "flex", - "items-center", - // "cursor-pointer", - "truncate", - "relative", + "zn-w-full", + "zn-min-h-inherit", + "zn-h-full", + "!zn-bg-transparent", + "zn-outline-none", + "zn-flex", + "zn-items-center", + // "zn-cursor-pointer", + "zn-truncate", + "zn-relative", ], { variants: { size: { - xs: ["px-4", "text-xs"], - sm: ["px-4", "text-sm"], - md: ["px-4", "text-sm"], - lg: ["px-4", "text-base"], + xs: ["zn-px-4", "zn-text-xs"], + sm: ["zn-px-4", "zn-text-sm"], + md: ["zn-px-4", "zn-text-sm"], + lg: ["zn-px-4", "zn-text-base"], }, variant: { outline: [], filled: [], - flushed: ["!px-0"], + flushed: ["!zn-px-0"], }, isInGroup: { - true: ["!px-0"], + true: ["!zn-px-0"], false: [], }, isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, }, @@ -143,140 +143,145 @@ const inputGroup = cva( const input = cva( [ - "outline-none", - "border-none", - "p-0", - "m-0", - "min-w-[2px]", - "min-h-inherit", - "h-full", - "appearance-none", - "cursor-inherit", + "zn-outline-none", + "zn-border-none", + "zn-p-0", + "zn-m-0", + "zn-min-w-[2px]", + "zn-min-h-inherit", + "zn-h-full", + "zn-appearance-none", + "zn-cursor-inherit", ], { variants: { isMultiple: { - true: ["ml-0.5"], - false: ["absolute", "top-0", "bottom-0"], + true: ["zn-ml-0.5"], + false: ["zn-absolute", "zn-top-0", "zn-bottom-0"], }, }, } ); const dropdown = cva([ - "overflow-y-auto", - "rounded-base", - "px-1", - "py-0.5", - "bg-color-component-background", - "text-neutral-100", - "text-base", - "shadow-base", - "overflow-x-hidden", - "w-[270px]", + "zn-overflow-y-auto", + "zn-rounded-base", + "zn-px-1", + "zn-py-0.5", + "zn-bg-color-component-background", + "zn-text-neutral-100", + "zn-text-base", + "zn-shadow-base", + "zn-overflow-x-hidden", + "zn-w-[270px]", ]); const option = cva( [ - "w-full", - "flex", - "items-center", - "justify-between", - "gap-4", - "px-3", - "py-1.5", - "my-0.5", - "rounded-base", - "hover:bg-neutral-10", - "cursor-pointer", - "font-medium", - "text-base", + "zn-w-full", + "zn-flex", + "zn-items-center", + "zn-justify-between", + "zn-gap-4", + "zn-px-3", + "zn-py-1.5", + "zn-my-0.5", + "zn-rounded-base", + "hover:zn-bg-neutral-10", + "zn-cursor-pointer", + "zn-font-medium", + "zn-text-base", ], { variants: { isSelected: { - true: ["font-medium", "bg-primary-10"], + true: ["zn-font-medium", "zn-bg-primary-10"], false: [], }, isDisabled: { - true: ["cursor-not-allowed", "text-neutral-40"], + true: ["zn-cursor-not-allowed", "zn-text-neutral-40"], false: [], }, }, } ); -const optionLabelContainer = cva(["flex", "gap-x-4", "items-center", "w-full"]); -const optionLabel = cva(["truncate", "inline-block"]); -const optionCheckIcon = cva(["text-primary-base", "text-[18px]"]); -const group = cva(["flex", "items-center"]); -const inputLabel = cva(["truncate", "inline-block", "w-full"]); +const optionLabelContainer = cva([ + "zn-flex", + "zn-gap-x-4", + "zn-items-center", + "zn-w-full", +]); +const optionLabel = cva(["zn-truncate", "zn-inline-block"]); +const optionCheckIcon = cva(["zn-text-primary-base", "zn-text-[18px]"]); +const group = cva(["zn-flex", "zn-items-center"]); +const inputLabel = cva(["zn-truncate", "zn-inline-block", "zn-w-full"]); const placeholder = cva([ - "text-neutral-40", - "text-black", - "inline-block", - "w-full", + "zn-text-neutral-40", + "zn-text-black", + "zn-inline-block", + "zn-w-full", ]); const leftElement = cva([ - "flex", - "items-center", - "justify-center", - "cursor-pointer", - "p-1.5", + "zn-flex", + "zn-items-center", + "zn-justify-center", + "zn-cursor-pointer", + "zn-p-1.5", ]); const rightElement = cva([ - "flex", - "items-center", - "justify-center", - "cursor-pointer", - "p-1.5", + "zn-flex", + "zn-items-center", + "zn-justify-center", + "zn-cursor-pointer", + "zn-p-1.5", ]); const clearElement = cva([ - "flex", - "items-center", - "justify-center", - "p-1.5", - "hover:cursor-pointer", - "hover:bg-gray-100", - "hover:rounded-lg", + "zn-flex", + "zn-items-center", + "zn-justify-center", + "zn-p-1.5", + "hover:zn-cursor-pointer", + "hover:zn-bg-gray-100", + "hover:zn-rounded-lg", ]); const empty = cva([ - "p-6", - "flex", - "justify-center", - "items-center", - "text-neutral-40", + "zn-p-6", + "zn-flex", + "zn-justify-center", + "zn-items-center", + "zn-text-neutral-40", ]); const tagContainer = cva([ - "flex", - "items-center", - "gap-x-1", - "gap-y-1", - "flex-wrap", - "py-1", + "zn-flex", + "zn-items-center", + "zn-gap-x-1", + "zn-gap-y-1", + "zn-flex-wrap", + "zn-py-1", ]); const tag = cva( [ - "rounded-3xl", - "px-3", - "py-1.5", - "font-medium", - "flex", - "items-center", - "text-xs", - "gap-2", - "leading-none", + "zn-rounded-3xl", + "zn-px-3", + "zn-py-1.5", + "zn-font-medium", + "zn-flex", + "zn-items-center", + "zn-text-xs", + "zn-gap-2", + "zn-leading-none", ], { variants: { variant: { - outline: ["bg-primary-10"], - filled: ["bg-neutral-5"], - flushed: ["bg-primary-10"], + outline: ["zn-bg-primary-10"], + filled: ["zn-bg-neutral-5"], + flushed: ["zn-bg-primary-10"], }, }, } ); -const tagX = cva(["cursor-pointer"]); -const iconColor = cva(["text-neutral-50"]); +const tagX = cva(["zn-cursor-pointer"]); +const iconColor = cva(["zn-text-neutral-50"]); const selectStyles = { container, secContainer, diff --git a/lib/customization/styles/components/spinner.styles.ts b/lib/customization/styles/components/spinner.styles.ts index 16c5ccb..d7df1b0 100644 --- a/lib/customization/styles/components/spinner.styles.ts +++ b/lib/customization/styles/components/spinner.styles.ts @@ -1,31 +1,31 @@ import { cva } from "class-variance-authority"; // JUST ICON -const spinner = cva(["animate-spin", "!opacity-100"], { +const spinner = cva(["zn-animate-spin", "!zn-opacity-100"], { variants: { size: { - xs: ["w-[8px]", "h-[8px]"], - sm: ["w-[16px]", "h-[16px]"], - md: ["w-[24px]", "h-[24px]"], - lg: ["w-[48px]", "h-[48px]"], + xs: ["zn-w-[8px]", "zn-h-[8px]"], + sm: ["zn-w-[16px]", "zn-h-[16px]"], + md: ["zn-w-[24px]", "zn-h-[24px]"], + lg: ["zn-w-[48px]", "zn-h-[48px]"], }, }, }); // OVERLAY -const container = cva(["relative", "block", "w-full", "h-full"]); +const container = cva(["zn-relative", "zn-block", "zn-w-full", "zn-h-full"]); const overlay = cva([ - "absolute", - "inset-0", - "w-full", - "h-full", - "flex", - "justify-center", - "items-center", - "flex-col", - "gap-2", + "zn-absolute", + "zn-inset-0", + "zn-w-full", + "zn-h-full", + "zn-flex", + "zn-justify-center", + "zn-items-center", + "zn-flex-col", + "zn-gap-2", ]); -const description = cva(["text-neutral-100", "text-sm"]); +const description = cva(["zn-text-neutral-100", "zn-text-sm"]); const spinnerStyles = { spinner, container, diff --git a/lib/customization/styles/components/switch.styles.ts b/lib/customization/styles/components/switch.styles.ts index a4080d0..8e91397 100644 --- a/lib/customization/styles/components/switch.styles.ts +++ b/lib/customization/styles/components/switch.styles.ts @@ -1,11 +1,11 @@ import { cva } from "class-variance-authority"; const base = cva( - ["relative", "inline-flex", "items-center", "cursor-pointer"], + ["zn-relative", "zn-inline-flex", "zn-items-center", "zn-cursor-pointer"], { variants: { isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, isReadOnly: { @@ -15,10 +15,10 @@ const base = cva( }, } ); -const input = cva(["sr-only", "peer"], { +const input = cva(["zn-sr-only", "zn-peer"], { variants: { isDisabled: { - true: ["cursor-not-allowed"], + true: ["zn-cursor-not-allowed"], false: [], }, isReadOnly: { @@ -29,62 +29,62 @@ const input = cva(["sr-only", "peer"], { }); const span = cva( [ - "bg-primary-10", - "peer-focus:outline-none", - "rounded-full", - "focus:ring-2", - "focus:ring-primary-20", - "active:ring-2", - "active:ring-primary-20", + "zn-bg-primary-10", + "peer-focus:zn-outline-none", + "zn-rounded-full", + "focus:zn-ring-2", + "focus:zn-ring-primary-20", + "active:zn-ring-2", + "active:zn-ring-primary-20", "peer", - "peer-checked:after:translate-x-full", - "peer-checked:after:border-none", - "after:content-['']", - "after:absolute", - "after:bg-white", - "after:rounded-full", - "after:hover:bg-primary-20", - "after:transition-all", - "peer-checked:bg-primary-base", - "peer-checked:hover:bg-primary-50", - "peer-checked:after:hover:bg-white", + "peer-checked:after:zn-translate-x-full", + "peer-checked:after:zn-border-none", + "after:zn-content-['']", + "after:zn-absolute", + "after:zn-bg-white", + "after:zn-rounded-full", + "after:hover:zn-bg-primary-20", + "after:zn-transition-all", + "peer-checked:zn-bg-primary-base", + "peer-checked:hover:zn-bg-primary-50", + "peer-checked:after:hover:zn-bg-white", ], { variants: { size: { sm: [ - "w-[35px]", - "h-5", - "after:top-[2.5px]", - "after:start-[3px]", - "after:h-[14px]", - "after:w-[14px]", + "zn-w-[35px]", + "zn-h-5", + "after:zn-top-[2.5px]", + "after:zn-start-[3px]", + "after:zn-h-[14px]", + "after:zn-w-[14px]", ], md: [ - "w-[44px]", - "h-6", - "after:top-[3px]", - "after:start-[4px]", - "after:h-[18px]", - "after:w-[18px]", + "zn-w-[44px]", + "zn-h-6", + "after:zn-top-[3px]", + "after:zn-start-[4px]", + "after:zn-h-[18px]", + "after:zn-w-[18px]", ], lg: [ - "w-[52px]", - "h-7", - "after:top-[3px]", - "after:start-[4px]", - "after:h-[22px]", - "after:w-[22px]", + "zn-w-[52px]", + "zn-h-7", + "after:zn-top-[3px]", + "after:zn-start-[4px]", + "after:zn-h-[22px]", + "after:zn-w-[22px]", ], }, isDisabled: { true: [ - "cursor-not-allowed", - "bg-neutral-10", - "peer-checked:bg-neutral-10", - "peer-checked:hover:bg-neutral-10", - "after:hover:bg-white", - "after:bg-white", + "zn-cursor-not-allowed", + "zn-bg-neutral-10", + "peer-checked:zn-bg-neutral-10", + "peer-checked:hover:zn-bg-neutral-10", + "after:hover:zn-bg-white", + "after:zn-bg-white", ], false: [], }, diff --git a/lib/customization/styles/components/table.styles.ts b/lib/customization/styles/components/table.styles.ts index 9342252..454055f 100644 --- a/lib/customization/styles/components/table.styles.ts +++ b/lib/customization/styles/components/table.styles.ts @@ -3,25 +3,30 @@ import { cva } from "class-variance-authority"; const tableBorder = cva([], { variants: { isBordered: { - true: ["border", "border-base", "border-collapse"], + true: ["zn-border", "zn-border-base", "zn-border-collapse"], false: [], }, }, }); -const base = cva(["w-full"]); -const row = cva(["hover:bg-gray-100"]); -const cell = cva(["text-left"], { +const base = cva(["zn-w-full"]); +const row = cva(["hover:zn-bg-gray-100"]); +const cell = cva(["zn-text-left"], { variants: { size: { - sm: ["px-2", "py-1"], - md: ["px-4", "py-2"], - lg: ["px-4", "py-4"], + sm: ["zn-px-2", "zn-py-1"], + md: ["zn-px-4", "zn-py-2"], + lg: ["zn-px-4", "zn-py-4"], }, }, }); -const th = cva(["uppercase", "text-sm", "font-semibold", "text-neutral-100"]); -const td = cva(["text-sm"]); +const th = cva([ + "zn-uppercase", + "zn-text-sm", + "zn-font-semibold", + "zn-text-neutral-100", +]); +const td = cva(["zn-text-sm"]); const tableStyles = { base, row, diff --git a/lib/customization/styles/components/tabs.styles.ts b/lib/customization/styles/components/tabs.styles.ts index 52ee8ac..df42a63 100644 --- a/lib/customization/styles/components/tabs.styles.ts +++ b/lib/customization/styles/components/tabs.styles.ts @@ -1,53 +1,53 @@ import { cva } from "class-variance-authority"; -const container = cva(["block"]); -const nav = cva(["block"], { +const container = cva(["zn-block"]); +const nav = cva(["zn-block"], { variants: { variant: { - underline: ["border-b", "border-b-base"], + underline: ["zn-border-b", "zn-border-b-base"], solid: [], outline: [], }, }, }); -const ul = cva(["flex", "w-full", "list-none", "p-0", "m-0"], { +const ul = cva(["zn-flex", "zn-w-full", "zn-list-none", "zn-p-0", "zn-m-0"], { variants: { variant: { - underline: ["gap-8"], - solid: ["gap-3"], - outline: ["gap-3"], + underline: ["zn-gap-8"], + solid: ["zn-gap-3"], + outline: ["zn-gap-3"], }, }, }); const li = cva( [ - "flex", - "items-center", - "justify-start", - "gap-3", - "rounded-base", - "py-2", - "relative", - "cursor-pointer", - "text-sm", + "zn-flex", + "zn-items-center", + "zn-justify-start", + "zn-gap-3", + "zn-rounded-base", + "zn-py-2", + "zn-relative", + "zn-cursor-pointer", + "zn-text-sm", ], { variants: { variant: { underline: [], - solid: ["px-6", "border", "border-transparent"], - outline: ["px-6", "border", "border-transparent"], + solid: ["zn-px-6", "zn-border", "zn-border-transparent"], + outline: ["zn-px-6", "zn-border", "zn-border-transparent"], }, isSelected: { true: [], false: [], }, isFitted: { - true: ["w-full", "justify-center"], + true: ["zn-w-full", "zn-justify-center"], false: [], }, isDisabled: { - true: ["!cursor-not-allowed", "!text-gray-400"], + true: ["!zn-cursor-not-allowed", "!zn-text-gray-400"], false: [], }, }, @@ -55,31 +55,31 @@ const li = cva( { variant: "underline", isSelected: true, - class: "text-primary-base", + class: "zn-text-primary-base", }, { variant: "solid", isSelected: true, - class: ["bg-primary-base", "text-white"], + class: ["zn-bg-primary-base", "zn-text-white"], }, { variant: "outline", isSelected: true, - class: ["border-primary-base", "text-primary-base"], + class: ["zn-border-primary-base", "zn-text-primary-base"], }, ], } ); const indicator = cva([ - "absolute", - "bottom-[-1px]", - "left-0", - "right-0", - "w-full", - "h-[1.5px]", - "bg-primary-base", + "zn-absolute", + "zn-bottom-[-1px]", + "zn-left-0", + "zn-right-0", + "zn-w-full", + "zn-h-[1.5px]", + "zn-bg-primary-base", ]); -const content = cva(["block", "py-4"]); +const content = cva(["zn-block", "zn-py-4"]); const tabsStyles = { container, nav, diff --git a/lib/customization/styles/components/text.styles.ts b/lib/customization/styles/components/text.styles.ts index d876583..54ac301 100644 --- a/lib/customization/styles/components/text.styles.ts +++ b/lib/customization/styles/components/text.styles.ts @@ -1,6 +1,6 @@ import { cva } from "class-variance-authority"; -const base = cva(["text-neutral-100"]); +const base = cva(["zn-text-neutral-100"]); const textStyles = { base, diff --git a/lib/customization/styles/components/textarea.styles.ts b/lib/customization/styles/components/textarea.styles.ts index 9194264..ec3c0b8 100644 --- a/lib/customization/styles/components/textarea.styles.ts +++ b/lib/customization/styles/components/textarea.styles.ts @@ -2,70 +2,70 @@ import { cva } from "class-variance-authority"; const base = cva( [ - "block", - "rounded-base", - "text-neutral-100", - "w-fit", - "outline", - "outline-1", - "outline-transparent", - "w-full", - "px-4", - "py-3", - "text-sm", + "zn-block", + "zn-rounded-base", + "zn-text-neutral-100", + "zn-w-fit", + "zn-outline", + "zn-outline-1", + "zn-outline-transparent", + "zn-w-full", + "zn-px-4", + "zn-py-3", + "zn-text-sm", ], { variants: { variant: { outline: [ - "border", - "border-base", + "zn-border", + "zn-border-base", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], filled: [ - "bg-primary-10", + "zn-bg-primary-10", - "border", - "border-primary-10", + "zn-border", + "zn-border-primary-10", - "hover:!border-primary-base", + "hover:!zn-border-primary-base", - "focus-within:!border-primary-base", - "focus-within:!outline-primary-20", - "focus-within:!outline-2", - "focus-within:!bg-transparent", + "focus-within:!zn-border-primary-base", + "focus-within:!zn-outline-primary-20", + "focus-within:!zn-outline-2", + "focus-within:!zn-bg-transparent", - "focus-within:!ring-2", - "focus-within:!ring-primary-20", + "focus-within:!zn-ring-2", + "focus-within:!zn-ring-primary-20", ], flushed: [ - "!rounded-none", + "!zn-rounded-none", - "border-b", - "border-b-primary-base", + "zn-border-b", + "zn-border-b-primary-base", - "hover:shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]", - "focus-within:!border-b-primary-base", + "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]", + "focus-within:!zn-border-b-primary-base", - "!px-0", + "!zn-px-0", ], }, isDisabled: { - true: ["!bg-neutral-10", "cursor-not-allowed"], + true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"], false: [], }, isResizable: { - true: ["resize-y"], - false: ["resize-none"], + true: ["zn-resize-y"], + false: ["zn-resize-none"], }, }, } diff --git a/lib/customization/styles/components/toast.styles.ts b/lib/customization/styles/components/toast.styles.ts index 3f49fc9..5a8c819 100644 --- a/lib/customization/styles/components/toast.styles.ts +++ b/lib/customization/styles/components/toast.styles.ts @@ -1,7 +1,14 @@ import { cva } from "class-variance-authority"; const toastsContainer = cva( - ["fixed", "z-[9999]", "pointer-events-none", "flex", "flex-col", "m-2"], + [ + "zn-fixed", + "zn-z-[9999]", + "zn-pointer-events-none", + "zn-flex", + "zn-flex-col", + "zn-m-2", + ], { variants: { top: { @@ -21,30 +28,30 @@ const toastsContainer = cva( false: [], }, isTopOrBottom: { - true: ["mx-auto"], + true: ["zn-mx-auto"], false: [], }, }, } ); -const alertContainer = cva(["flex", "flex-col", "items-center"], { +const alertContainer = cva(["zn-flex", "zn-flex-col", "zn-items-center"], { variants: { isRighty: { - true: ["items-end"], + true: ["zn-items-end"], false: [], }, isLefty: { - true: ["items-start"], + true: ["zn-items-start"], false: [], }, }, }); const alert = cva([ - "min-w-[250px]", - "max-w-[500px]", - "rounded-base", - "overflow-hidden", - "shadow-base", + "zn-min-w-[250px]", + "zn-max-w-[500px]", + "zn-rounded-base", + "zn-overflow-hidden", + "zn-shadow-base", ]); const toastStyles = { diff --git a/lib/customization/styles/components/tooltip.styles.ts b/lib/customization/styles/components/tooltip.styles.ts index 2162d92..57d7b9f 100644 --- a/lib/customization/styles/components/tooltip.styles.ts +++ b/lib/customization/styles/components/tooltip.styles.ts @@ -1,13 +1,13 @@ import { cva } from "class-variance-authority"; const base = cva([ - "bg-black", - "text-white", - "rounded-base", - "px-3", - "py-2", - "text-sm", - "shadow-base", + "zn-bg-black", + "zn-text-white", + "zn-rounded-base", + "zn-px-3", + "zn-py-2", + "zn-text-sm", + "zn-shadow-base", ]); const arrow = cva([]); diff --git a/package.json b/package.json index e4ebef4..ae303e1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "zeni-ui", "private": false, - "version": "1.2.7-beta", + "version": "1.2.8-beta", "type": "module", "main": "dist/main.js", "types": "dist/main.d.ts", diff --git a/src/App.tsx b/src/App.tsx index 6de7777..5cad134 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -51,8 +51,8 @@ function App() { // ]; return ( -
- +
+ {/* {items.map((x) => (