@moyeorak/design-system 0.1.0

package/dist/style.css

@@ -0,0 +1 @@
+@layer reset,base,tokens,recipes,utilities;@layer reset{html,:host{--font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--global-font-body, var(--font-fallback))}*,:before,:after,::backdrop,::file-selector-button{margin:0;padding:0;box-sizing:border-box;border-width:0px;border-style:solid;border-color:var(--global-color-border, currentcolor)}hr{height:0px;color:inherit;border-top-width:1px}body{height:100%;line-height:inherit}img{border-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ol,ul,menu{list-style:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-moz-appearance:button;appearance:button;-webkit-appearance:button}button,input,optgroup,select,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}::placeholder{opacity:1;--placeholder-fallback: rgba(0, 0, 0, .5);color:var(--global-color-placeholder, var(--placeholder-fallback))}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{--placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent)}}textarea{resize:vertical}table{text-indent:0px;border-collapse:collapse;border-color:inherit}summary{display:list-item}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}dialog{padding:0}a{color:inherit;text-decoration:inherit}abbr:where([title]){text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{--font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";font-feature-settings:normal;font-variation-settings:normal;font-family:var(--global-font-mono, var(--font-mono-fallback));font-size:1em}progress{vertical-align:baseline}::-webkit-search-decoration,::-webkit-search-cancel-button{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer base{:root{--made-with-panda: "🐼"}*,:before,:after,::backdrop{--blur: ;--brightness: ;--contrast: ;--grayscale: ;--hue-rotate: ;--invert: ;--saturate: ;--sepia: ;--drop-shadow: ;--backdrop-blur: ;--backdrop-brightness: ;--backdrop-contrast: ;--backdrop-grayscale: ;--backdrop-hue-rotate: ;--backdrop-invert: ;--backdrop-opacity: ;--backdrop-saturate: ;--backdrop-sepia: ;--gradient-from-position: ;--gradient-to-position: ;--gradient-via-position: ;--scroll-snap-strictness: proximity;--border-spacing-x: 0;--border-spacing-y: 0;--translate-x: 0;--translate-y: 0;--rotate: 0;--rotate-x: 0;--rotate-y: 0;--skew-x: 0;--skew-y: 0;--scale-x: 1;--scale-y: 1}}@layer tokens{:where(:root,:host){--colors-neutral-0: #ffffff;--colors-neutral-50: #f9fafd;--colors-neutral-100: #f2f4f9;--colors-neutral-200: #e1e4ec;--colors-neutral-300: #ccd0d9;--colors-neutral-400: #9fa5b3;--colors-neutral-500: #737a89;--colors-neutral-600: #5f6572;--colors-neutral-700: #464b53;--colors-neutral-800: #2c3038;--colors-neutral-900: #171a1f;--colors-blue-100: #f7faff;--colors-blue-200: #ebf2ff;--colors-blue-300: #e5eeff;--colors-blue-400: #cbddff;--colors-blue-500: #b0ccff;--colors-blue-600: #82acff;--colors-blue-700: #4181ff;--colors-blue-800: #3c76e9;--colors-blue-900: #3265cb;--colors-neutral-opacity-100: rgba(15, 17, 24, .02);--colors-neutral-opacity-200: rgba(15, 17, 24, .04);--colors-neutral-opacity-300: rgba(15, 17, 24, .08);--colors-neutral-opacity-400: rgba(15, 17, 24, .2);--colors-neutral-opacity-500: rgba(15, 17, 24, .28);--colors-neutral-opacity-600: rgba(15, 17, 24, .56);--colors-neutral-opacity-700: rgba(15, 17, 24, .7);--colors-neutral-opacity-800: rgba(15, 17, 24, .8);--colors-neutral-opacity-900: rgba(15, 17, 24, .9);--colors-red: #f0405c;--colors-green: #00cf95;--font-sizes-xs: 12px;--font-sizes-sm: 14px;--font-sizes-md: 16px;--font-sizes-lg: 20px;--font-sizes-xl: 24px;--font-sizes-2xl: 28px;--font-weights-regular: 400;--font-weights-medium: 500;--font-weights-semibold: 600;--font-weights-bold: 700;--letter-spacings-tight: -.01em;--letter-spacings-tighter: -.005em;--radii-2xs: 4px;--radii-xs: 6px;--radii-sm: 8px;--radii-md: 12px;--radii-lg: 16px;--radii-xl: 20px;--radii-full: 9999px;--shadows-subtle: 0 0 8px 4px var(--colors-shadow-subtle);--shadows-default: 0 0 8px 0px var(--colors-shadow-default);--shadows-strong: 0 0 12px 0px var(--colors-shadow-strong);--shadows-stronger: 0 0 6px 2px var(--colors-shadow-stronger);--breakpoints-sm: 640px;--breakpoints-md: 768px;--breakpoints-lg: 1024px;--breakpoints-xl: 1280px;--breakpoints-2xl: 1536px;--sizes-breakpoint-sm: 640px;--sizes-breakpoint-md: 768px;--sizes-breakpoint-lg: 1024px;--sizes-breakpoint-xl: 1280px;--sizes-breakpoint-2xl: 1536px;--colors-fill-neutral-default: var(--colors-neutral-0);--colors-fill-neutral-strong: var(--colors-neutral-50);--colors-fill-neutral-stronger: var(--colors-neutral-100);--colors-fill-neutral-strongest: var(--colors-neutral-300);--colors-fill-inverted-default: var(--colors-neutral-800);--colors-fill-inverted-default-pressed: var(--colors-neutral-600);--colors-fill-inverted-default-disabled: var(--colors-neutral-200);--colors-fill-brand-subtlest: var(--colors-blue-100);--colors-fill-brand-subtler: var(--colors-blue-200);--colors-fill-brand-subtle: var(--colors-blue-300);--colors-fill-brand-subtle-pressed: var(--colors-blue-500);--colors-fill-brand-default: var(--colors-blue-700);--colors-fill-brand-default-pressed: var(--colors-blue-900);--colors-bg-neutral-default: var(--colors-neutral-0);--colors-bg-neutral-strong: var(--colors-neutral-100);--colors-bg-dim-default: var(--colors-neutral-opacity-700);--colors-stroke-neutral-subtler: var(--colors-neutral-100);--colors-stroke-neutral-subtle: var(--colors-neutral-200);--colors-stroke-neutral-default: var(--colors-neutral-300);--colors-stroke-neutral-strong: var(--colors-neutral-400);--colors-stroke-brand-subtle: var(--colors-blue-600);--colors-stroke-brand-default: var(--colors-blue-700);--colors-stroke-negative-default: var(--colors-red);--colors-shadow-subtle: var(--colors-neutral-opacity-100);--colors-shadow-default: var(--colors-neutral-opacity-200);--colors-shadow-strong: var(--colors-neutral-opacity-300);--colors-shadow-stronger: var(--colors-neutral-opacity-500);--colors-fg-neutral-faintest: var(--colors-neutral-300);--colors-fg-neutral-subtlest: var(--colors-neutral-400);--colors-fg-neutral-subtler: var(--colors-neutral-500);--colors-fg-neutral-subtle: var(--colors-neutral-700);--colors-fg-neutral-default: var(--colors-neutral-800);--colors-fg-neutral-strong: var(--colors-neutral-900);--colors-fg-neutral-default-disabled: var(--colors-neutral-200);--colors-fg-inverted-default: var(--colors-neutral-0);--colors-fg-brand-subtlest: var(--colors-blue-200);--colors-fg-brand-default: var(--colors-blue-700);--colors-fg-positive-default: var(--colors-green);--colors-fg-negative-default: var(--colors-red)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}}@layer utilities{@layer compositions{.textStyle_caption3{letter-spacing:var(--letter-spacings-tight);font-size:var(--font-sizes-xs);font-weight:var(--font-weights-regular);line-height:1.5}.textStyle_body4{font-weight:var(--font-weights-medium)}.textStyle_body4,.textStyle_body5{letter-spacing:var(--letter-spacings-tight);font-size:var(--font-sizes-sm);line-height:1.57}.textStyle_body5{font-weight:var(--font-weights-regular)}.textStyle_body1{letter-spacing:var(--letter-spacings-tight);font-weight:var(--font-weights-medium);line-height:1.5}.textStyle_body1,.textStyle_title3{font-size:var(--font-sizes-md)}.textStyle_title3{line-height:1.38}.textStyle_title3,.textStyle_title1{letter-spacing:var(--letter-spacings-tighter);font-weight:var(--font-weights-semibold)}.textStyle_title1{font-size:var(--font-sizes-lg);line-height:1.4}.textStyle_caption1{font-size:var(--font-sizes-xs);font-weight:var(--font-weights-semibold);line-height:1.67}.textStyle_caption1,.textStyle_body2{letter-spacing:var(--letter-spacings-tight)}.textStyle_body2{font-size:var(--font-sizes-md);font-weight:var(--font-weights-regular);line-height:1.5}}.d_inline-flex{display:inline-flex}.white-space_nowrap{white-space:nowrap}.bdr_xs{border-radius:var(--radii-xs)}.px_8px{padding-inline:8px}.py_4px{padding-block:4px}.bg_fill\.brand\.subtler{background:var(--colors-fill-brand-subtler)}.c_fg\.brand\.default{color:var(--colors-fg-brand-default)}.bg_stroke\.neutral\.subtler{background:var(--colors-stroke-neutral-subtler)}.c_fg\.neutral\.subtler{color:var(--colors-fg-neutral-subtler)}.bg_fill\.neutral\.default{background:var(--colors-fill-neutral-default)}.cursor_pointer{cursor:pointer}.gap_2px{gap:2px}.bg_fill\.inverted\.default{background:var(--colors-fill-inverted-default)}.c_fg\.inverted\.default{color:var(--colors-fg-inverted-default)}.bg_fill\.brand\.default{background:var(--colors-fill-brand-default)}.bg_fill\.brand\.subtle{background:var(--colors-fill-brand-subtle)}.c_fg\.neutral\.subtle{color:var(--colors-fg-neutral-subtle)}.bg_transparent{background:transparent}.px_10px{padding-inline:10px}.bdr_sm{border-radius:var(--radii-sm)}.px_16px{padding-inline:16px}.py_10px{padding-block:10px}.py_12px{padding-block:12px}.p_16px{padding:16px}.d_flex{display:flex}.w_100\%{width:100%}.py_6px{padding-block:6px}.px_12px{padding-inline:12px}.bdr_full{border-radius:var(--radii-full)}.px_14px{padding-inline:14px}.w_40px{width:40px}.h_40px{height:40px}.bx-sh_strong{box-shadow:var(--shadows-strong)}.pos_relative{position:relative}.h_56px{height:56px}.w_full{width:full}.ov_hidden{overflow:hidden}.pos_absolute{position:absolute}.trf_translateY\(-50\%\){transform:translateY(-50%)}.trf_translate\(-50\%\,_-50\%\){transform:translate(-50%,-50%)}.c_fg\.neutral\.default{color:var(--colors-fg-neutral-default)}.ta_center{text-align:center}.d_inline-block{display:inline-block}.c_fg\.neutral\.subtlest{color:var(--colors-fg-neutral-subtlest)}.w_36px{width:36px}.h_36px{height:36px}.w_48px{width:48px}.h_48px{height:48px}.pos_fixed{position:fixed}.inset_0{top:0;right:0;bottom:0;left:0}.bg_bg\.dim\.default{background:var(--colors-bg-dim-default)}.z_50{z-index:50}.w_303px{width:303px}.bdr_lg{border-radius:var(--radii-lg)}.gap_24px{gap:24px}.ring_none{outline:2px solid transparent;outline-offset:2px}.gap_4px{gap:4px}.gap_11px{gap:11px}.flex_1{flex:1 1 0%}.c_fill\.brand\.default{color:var(--colors-fill-brand-default)}.c_fill\.inverted\.default{color:var(--colors-fill-inverted-default)}.filter_drop-shadow\(0_0_4px_rgba\(15\,_17\,_24\,_0\.28\)\){filter:drop-shadow(0 0 4px rgba(15,17,24,.28))}.bdr_4px{border-radius:4px}.px_11px{padding-inline:11px}.trs_border-color_0\.15s_ease{transition:border-color .15s ease}.px_4px{padding-inline:4px}.bd_none{border:none}.ca-c_stroke\.brand\.default{caret-color:var(--colors-stroke-brand-default)}.gap_8px{gap:8px}.py_8px{padding-block:8px}.bdr_12px{border-radius:12px}.us_none{-webkit-user-select:none;user-select:none}.bg_fill\.neutral\.stronger{background:var(--colors-fill-neutral-stronger)}.w_56px{width:56px}.bg_\[\#FBE300\]{background:#fbe300}.bg_fg\.brand\.default{background:var(--colors-fg-brand-default)}.bg_fg\.neutral\.subtlest{background:var(--colors-fg-neutral-subtlest)}.px_20px{padding-inline:20px}.bg_fg\.neutral\.subtle{background:var(--colors-fg-neutral-subtle)}.ai_center{align-items:center}.bd-w_1px{border-width:1px}.border-style_solid{border-style:solid}.bd-c_stroke\.neutral\.subtle{border-color:var(--colors-stroke-neutral-subtle)}.jc_center{justify-content:center}.bd-c_stroke\.brand\.default{border-color:var(--colors-stroke-brand-default)}.flex-sh_0{flex-shrink:0}.left_4px{left:4px}.top_50\%{top:50%}.left_50\%{left:50%}.right_12px{right:12px}.top_4px{top:4px}.pt_32px{padding-top:32px}.pb_16px{padding-bottom:16px}.flex-d_column{flex-direction:column}.mb_-5px{margin-bottom:-5px}.pt_4px{padding-top:4px}.mb_-2px{margin-bottom:-2px}.bd-c_stroke\.neutral\.default{border-color:var(--colors-stroke-neutral-default)}.mr_-11px{margin-right:-11px}.border-bottom-style_solid{border-bottom-style:solid}.bd-b-w_2px{border-bottom-width:2px}.bd-b-c_stroke\.brand\.default{border-bottom-color:var(--colors-stroke-brand-default)}.bd-b-w_1px{border-bottom-width:1px}.bd-b-c_stroke\.neutral\.subtle{border-bottom-color:var(--colors-stroke-neutral-subtle)}.disabled\:cursor_not-allowed:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.disabled\:bg_fill\.inverted\.default-disabled:is(:disabled,[disabled],[data-disabled]){background:var(--colors-fill-inverted-default-disabled)}.disabled\:c_fg\.neutral\.subtlest:is(:disabled,[disabled],[data-disabled]){color:var(--colors-fg-neutral-subtlest)}.disabled\:bg_fill\.neutral\.stronger:is(:disabled,[disabled],[data-disabled]){background:var(--colors-fill-neutral-stronger)}.disabled\:c_fg\.neutral\.subtler:is(:disabled,[disabled],[data-disabled]){color:var(--colors-fg-neutral-subtler)}.disabled\:op_0\.4:is(:disabled,[disabled],[data-disabled]){opacity:.4}.placeholder\:c_fg\.neutral\.subtlest::placeholder,.placeholder\:c_fg\.neutral\.subtlest[data-placeholder]{color:var(--colors-fg-neutral-subtlest)}.disabled\:bd-c_transparent:is(:disabled,[disabled],[data-disabled]){border-color:transparent}.active\:bg_fill\.inverted\.default-pressed:is(:active,[data-active]){background:var(--colors-fill-inverted-default-pressed)}.active\:bg_fill\.brand\.default-pressed:is(:active,[data-active]){background:var(--colors-fill-brand-default-pressed)}.active\:bg_fill\.brand\.subtle-pressed:is(:active,[data-active]){background:var(--colors-fill-brand-subtle-pressed)}.active\:bg_fill\.neutral\.stronger:is(:active,[data-active]){background:var(--colors-fill-neutral-stronger)}.disabled\:active\:bg_fill\.inverted\.default-disabled:is(:disabled,[disabled],[data-disabled]):is(:active,[data-active]){background:var(--colors-fill-inverted-default-disabled)}}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@moyeorak/design-system",
+  "version": "0.1.0",
+  "description": "React UI component library for moyeorak project",
+  "license": "MIT",
+  "author": "meteorqz6",
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "components",
+    "panda-css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/style.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "prepare": "panda codegen",
+    "build": "bun run prepare && vite build",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "bun run prepare && storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "prepublishOnly": "bun run typecheck && bun run test && bun run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.2"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^0.53.0",
+    "@storybook/addon-a11y": "^8.6.0",
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.0",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "chromatic": "^16.1.0",
+    "jsdom": "^26.0.0",
+    "postcss": "^8.5.0",
+    "prettier": "^3.4.0",
+    "storybook": "^8.6.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.0.0",
+    "vitest-axe": "^1.0.0-pre.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "bun@1.3.13"
+}