\n \n {icon && svg\": { color: \"inherit\" } }} top=\"50%\" transform=\"translate(-100%, -50%)\">\n {icon}\n }\n \n {children}\n \n \n
;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new
new file mode 100644
index 00000000..f18461f6
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new
@@ -0,0 +1,9 @@
+---
+source: libs/extractor/src/lib.rs
+assertion_line: 2140
+expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"'use client'\n\nimport type { Conditional } from 'src/types/utils'\n\nimport { DevupTheme } from '../types/theme'\n\n/**\n * Initialize the theme, if you can't use the `ThemeScript` component\n * e.g. in vite\n * @param auto - Whether to use the system theme\n * @param theme - The theme to use\n */\nexport function initTheme(\n auto?: boolean,\n theme?: Conditional
+ 
+
+
+
+
++ Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor +
+ +--- + + + +--- + +English | [í•œêµì–´](README_ko.md) + +## Install + +```sh +npm install @devup-ui/react + +# on next.js +npm install @devup-ui/next-plugin + +# on vite +npm install @devup-ui/vite-plugin +``` + +## Features + +- Preprocessor +- Zero Config +- Zero FOUC +- Zero Runtime +- RSC Support +- Must not use JavaScript, client-side logic, or hybrid solutions +- Support Library mode +- Zero Cost Dynamic Theme Support based on CSS Variables +- Theme with Typing +- Smallest size, fastest speed + +## Inspirations + +- Styled System +- Chakra UI +- Theme UI +- Vanilla Extract +- Rainbow Sprinkles +- Kuma UI + +## Comparison Benchmarks + +Next.js Build Time and Build Size (AMD Ryzen 9 9950X, 128GB RAM, Windows 11) + +| Library | Build Time | Build Size | +|-----------|------------|--------------| +| kuma-ui | 20.933s | 57,295,073b | +| chakra-ui | 36.961s | 129,527,610b | +| devup-ui | 15.162s | 48,047,678b | + +## How it works + +Devup UI is a CSS in JS preprocessor that does not require runtime. +Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor. +We develop a preprocessor that considers all grammatical cases. + +```jsx +// Before +
+
+
+
+
+
+
+
+ ),
+ ],
+}
+
+export const Default: Story = {
+ args: {
+ children: 'Button Text',
+ disabled: false,
+ },
+}
+
+export const WithIcon: Story = {
+ args: {
+ children: 'Button text',
+ disabled: true,
+ icon: (
+
+ ),
+ },
+}
+
+export const WithForm: Story = {
+ args: {
+ children: 'Button text',
+ type: 'submit',
+ },
+ decorators: [
+ (Story, { args }: { args: Story['args'] }) => {
+ const [submitted, setSubmitted] = useState<{ text?: string }>({})
+ const [value, setValue] = useState('')
+ const [error, setError] = useState('')
+
+ return (
+ <>
+ {submitted.text}
+
+
+ )
+ },
+ ],
+}
+
+export default meta
diff --git a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
new file mode 100644
index 00000000..fdc1a277
--- /dev/null
+++ b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -0,0 +1,346 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Button > color should be white 1`] = `
+
+
+
+`;
+
+exports[`Button > should disable 1`] = `
+
+
+
+`;
+
+exports[`Button > should have class name when className is provided 1`] = `
+
+
+
+`;
+
+exports[`Button > should have font size 14px when size is sm and variant is default 1`] = `
+
+
+
+`;
+
+exports[`Button > should have font size 15px when size is md and variant is primary 1`] = `
+
+
+
+`;
+
+exports[`Button > should have font size 15px when size is sm and variant is primary 1`] = `
+
+
+
+`;
+
+exports[`Button > should have text overflow ellipsis when ellipsis is true 1`] = `
+
+
+
+`;
+
+exports[`Button > should have typography when typography is provided 1`] = `
+
+
+
+`;
+
+exports[`Button > should not have bg when a wrong size variable is provided 1`] = `
+
+
+
+`;
+
+exports[`Button > should not have px when a wrong size variable is provided 1`] = `
+
+
+
+`;
+
+exports[`Button > should not render error color when danger is false and variant is default 1`] = `
+
+`;
+
+exports[`Button > should render 1`] = `
+
+
+
+`;
+
+exports[`Button > should render default style when variant is default 1`] = `
+
+
+
+`;
+
+exports[`Button > should render error style when danger is true and variant is default 1`] = `
+
+
+
+`;
+
+exports[`Button > should render icon when icon is provided 1`] = `
+
+
+
+`;
+
+exports[`Button > should render primary background color when danger is true and variant is primary 1`] = `
+
+
+
+`;
diff --git a/packages/components/src/components/Button/__tests__/index.browser.test.tsx b/packages/components/src/components/Button/__tests__/index.browser.test.tsx
new file mode 100644
index 00000000..87b1f717
--- /dev/null
+++ b/packages/components/src/components/Button/__tests__/index.browser.test.tsx
@@ -0,0 +1,182 @@
+import { css, DevupThemeTypography } from '@devup-ui/react'
+import { render } from '@testing-library/react'
+
+import { Button } from '../index'
+
+describe('Button', () => {
+ it('should render', () => {
+ const { container } = render()
+ expect(container).toMatchSnapshot()
+ })
+
+ it('should render default style when variant is default', () => {
+ const { container } = render()
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveStyle({
+ color: 'var(--text, #272727)',
+ })
+ })
+
+ it('should disable', () => {
+ const { container } = render()
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveAttribute('disabled')
+ })
+
+ it('should render error style when danger is true and variant is default', () => {
+ const { container } = render()
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveStyle({
+ color: 'var(--error, #D52B2E)',
+ })
+ })
+
+ it('should render primary background color when danger is true and variant is primary', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveStyle({
+ backgroundColor: 'var(--primary, #8163E1)',
+ })
+ })
+
+ it('should not render error color when danger is false and variant is default', async () => {
+ const { container } = render()
+ const button = container.querySelector('button')
+ expect(button).toHaveStyle({
+ color: 'var(--text, #272727)',
+ })
+ expect(button).toMatchSnapshot()
+ })
+
+ it('should have class name when className is provided', () => {
+ const { container } = render()
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveClass('test')
+ })
+
+ it('should not have px when a wrong size variable is provided', () => {
+ const { container } = render(
+ // @ts-expect-error
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).not.toHaveClass('px-0-16px--1')
+ })
+
+ it('should not have bg when a wrong size variable is provided', () => {
+ const { container } = render(
+ // @ts-expect-error
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).not.toHaveClass(
+ 'bg-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1',
+ )
+ })
+
+ it('should have text overflow ellipsis when ellipsis is true', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ const button = container.querySelector('button>div>div')
+ expect(button).toHaveClass('textOverflow-0-ellipsis--255')
+ })
+
+ it('should have font size 15px when size is md and variant is primary', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveClass('fontSize-0-15px--1')
+ })
+
+ it('should have font size 15px when size is sm and variant is primary', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveClass('fontSize-0-15px--1')
+ })
+
+ it('should have font size 14px when size is sm and variant is default', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveClass('fontSize-0-14px--1')
+ })
+
+ it('should render icon when icon is provided', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('svg')).toBeInTheDocument()
+ })
+ it('color should be white', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveStyle({
+ color: 'var(--text, #272727)',
+ })
+ })
+
+ it('should have typography when typography is provided', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('button')).toHaveClass('typo-inlineLabelS')
+ })
+})
diff --git a/packages/components/src/components/Button/index.tsx b/packages/components/src/components/Button/index.tsx
new file mode 100644
index 00000000..dba686c4
--- /dev/null
+++ b/packages/components/src/components/Button/index.tsx
@@ -0,0 +1,260 @@
+import {
+ Box,
+ Button as DevupButton,
+ Center,
+ css,
+ type DevupThemeTypography,
+} from '@devup-ui/react'
+import { clsx } from 'clsx'
+
+type ButtonProps = React.ButtonHTMLAttributes