@hivcd-printshop/design-system 1.0.0

package/README.md

@@ -0,0 +1 @@
+# 시각디자인과 프린트실 디자인시스템

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+
+interface CTAProps {
+    primary?: boolean;
+    variable: CTAVariable;
+    label: string;
+    onClick?: () => void;
+    className?: string;
+}
+type CTAVariable = "disabled" | "default" | "pressed";
+declare const CTA: ({ primary, variable, label, onClick, className, }: CTAProps) => react.JSX.Element;
+
+export { CTA, type CTAProps };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+
+interface CTAProps {
+    primary?: boolean;
+    variable: CTAVariable;
+    label: string;
+    onClick?: () => void;
+    className?: string;
+}
+type CTAVariable = "disabled" | "default" | "pressed";
+declare const CTA: ({ primary, variable, label, onClick, className, }: CTAProps) => react.JSX.Element;
+
+export { CTA, type CTAProps };

package/dist/index.js

@@ -0,0 +1,92 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CTA: () => CTA
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-typography": [
+        "text-head1-medium",
+        "text-head2-medium",
+        "text-head3-medium",
+        "text-head4-regular",
+        "text-body1-medium",
+        "text-body1-regular",
+        "text-body2-regular",
+        "text-body3-medium",
+        "text-body3-regular",
+        "text-body3-book",
+        "text-caption-regular",
+        "text-caption-book"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/CTA/CTA.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CTA = ({
+  primary = true,
+  variable = "default",
+  label,
+  onClick,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "w-full max-w-360 h-12 p-2.5 text-center text-head3-medium",
+        `${primary ? "border-0" : "border border-gray02"}`,
+        /** Disabled */
+        `${variable == "disabled" ? primary ? "bg-gray01 text-gray04 border border-gray01" : "bg-gray02 text-gray04" : ""}`,
+        /** Default */
+        `${variable == "default" ? primary ? "bg-black text-white" : "bg-white text-strong" : ""}`,
+        /** Hover */
+        `${variable != "disabled" ? primary ? "hover:bg-gray08 hover:text-white" : "hover:bg-gray01 hover:text-strong" : ""}`,
+        /** Hover */
+        `${variable != "disabled" && "hover:cursor-pointer"}`,
+        /** Pressed */
+        `${variable == "pressed" ? primary ? "bg-gray09 text-white" : "bg-gray02 text-strong" : ""}`,
+        className
+      ),
+      onClick,
+      children: label
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CTA
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/lib/cn.ts","../src/components/CTA/CTA.tsx"],"sourcesContent":["export { CTA, CTAProps } from \"./components/CTA/CTA\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n// text-head*/text-body*/text-caption* are custom typography utilities (src/styles.css),\n// not text-color utilities — tailwind-merge would otherwise treat them as the same\n// group as text-white/text-gray04 and silently drop one of them.\nconst twMerge = extendTailwindMerge<\"font-typography\">({\n  extend: {\n    classGroups: {\n      \"font-typography\": [\n        \"text-head1-medium\",\n        \"text-head2-medium\",\n        \"text-head3-medium\",\n        \"text-head4-regular\",\n        \"text-body1-medium\",\n        \"text-body1-regular\",\n        \"text-body2-regular\",\n        \"text-body3-medium\",\n        \"text-body3-regular\",\n        \"text-body3-book\",\n        \"text-caption-regular\",\n        \"text-caption-book\",\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from \"../../lib/cn\";\n\nexport interface CTAProps {\n  primary?: boolean;\n  variable: CTAVariable;\n  label: string;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport type CTAVariable = \"disabled\" | \"default\" | \"pressed\";\n\nexport const CTA = ({\n  primary = true,\n  variable = \"default\",\n  label,\n  onClick,\n  className,\n}: CTAProps) => {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"w-full max-w-360 h-12 p-2.5 text-center text-head3-medium\",\n        `${primary ? \"border-0\" : \"border border-gray02\"}`,\n        /** Disabled */ `${variable == \"disabled\" ? (primary ? \"bg-gray01 text-gray04 border border-gray01\" : \"bg-gray02 text-gray04\") : \"\"}`,\n        /** Default */ `${variable == \"default\" ? (primary ? \"bg-black text-white\" : \"bg-white text-strong\") : \"\"}`,\n        /** Hover */ `${variable != \"disabled\" ? (primary ? \"hover:bg-gray08 hover:text-white\" : \"hover:bg-gray01 hover:text-strong\") : \"\"}`,\n        /** Hover */ `${variable != \"disabled\" && \"hover:cursor-pointer\"}`,\n        /** Pressed */ `${variable == \"pressed\" ? (primary ? \"bg-gray09 text-white\" : \"bg-gray02 text-strong\") : \"\"}`,\n        className,\n      )}\n      onClick={onClick}\n    >\n      {label}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAoC;AAKpC,IAAM,cAAU,2CAAuC;AAAA,EACrD,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,mBAAmB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,YAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACTI;AARG,IAAM,MAAM,CAAC;AAAA,EAClB,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,GAAG,UAAU,aAAa,sBAAsB;AAAA;AAAA,QAChC,GAAG,YAAY,aAAc,UAAU,+CAA+C,0BAA2B,EAAE;AAAA;AAAA,QACpH,GAAG,YAAY,YAAa,UAAU,wBAAwB,yBAA0B,EAAE;AAAA;AAAA,QAC5F,GAAG,YAAY,aAAc,UAAU,qCAAqC,sCAAuC,EAAE;AAAA;AAAA,QACrH,GAAG,YAAY,cAAc,sBAAsB;AAAA;AAAA,QACjD,GAAG,YAAY,YAAa,UAAU,yBAAyB,0BAA2B,EAAE;AAAA,QAC3G;AAAA,MACF;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,66 @@
+'use client';
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-typography": [
+        "text-head1-medium",
+        "text-head2-medium",
+        "text-head3-medium",
+        "text-head4-regular",
+        "text-body1-medium",
+        "text-body1-regular",
+        "text-body2-regular",
+        "text-body3-medium",
+        "text-body3-regular",
+        "text-body3-book",
+        "text-caption-regular",
+        "text-caption-book"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/CTA/CTA.tsx
+import { jsx } from "react/jsx-runtime";
+var CTA = ({
+  primary = true,
+  variable = "default",
+  label,
+  onClick,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "w-full max-w-360 h-12 p-2.5 text-center text-head3-medium",
+        `${primary ? "border-0" : "border border-gray02"}`,
+        /** Disabled */
+        `${variable == "disabled" ? primary ? "bg-gray01 text-gray04 border border-gray01" : "bg-gray02 text-gray04" : ""}`,
+        /** Default */
+        `${variable == "default" ? primary ? "bg-black text-white" : "bg-white text-strong" : ""}`,
+        /** Hover */
+        `${variable != "disabled" ? primary ? "hover:bg-gray08 hover:text-white" : "hover:bg-gray01 hover:text-strong" : ""}`,
+        /** Hover */
+        `${variable != "disabled" && "hover:cursor-pointer"}`,
+        /** Pressed */
+        `${variable == "pressed" ? primary ? "bg-gray09 text-white" : "bg-gray02 text-strong" : ""}`,
+        className
+      ),
+      onClick,
+      children: label
+    }
+  );
+};
+export {
+  CTA
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/CTA/CTA.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n// text-head*/text-body*/text-caption* are custom typography utilities (src/styles.css),\n// not text-color utilities — tailwind-merge would otherwise treat them as the same\n// group as text-white/text-gray04 and silently drop one of them.\nconst twMerge = extendTailwindMerge<\"font-typography\">({\n  extend: {\n    classGroups: {\n      \"font-typography\": [\n        \"text-head1-medium\",\n        \"text-head2-medium\",\n        \"text-head3-medium\",\n        \"text-head4-regular\",\n        \"text-body1-medium\",\n        \"text-body1-regular\",\n        \"text-body2-regular\",\n        \"text-body3-medium\",\n        \"text-body3-regular\",\n        \"text-body3-book\",\n        \"text-caption-regular\",\n        \"text-caption-book\",\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from \"../../lib/cn\";\n\nexport interface CTAProps {\n  primary?: boolean;\n  variable: CTAVariable;\n  label: string;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport type CTAVariable = \"disabled\" | \"default\" | \"pressed\";\n\nexport const CTA = ({\n  primary = true,\n  variable = \"default\",\n  label,\n  onClick,\n  className,\n}: CTAProps) => {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"w-full max-w-360 h-12 p-2.5 text-center text-head3-medium\",\n        `${primary ? \"border-0\" : \"border border-gray02\"}`,\n        /** Disabled */ `${variable == \"disabled\" ? (primary ? \"bg-gray01 text-gray04 border border-gray01\" : \"bg-gray02 text-gray04\") : \"\"}`,\n        /** Default */ `${variable == \"default\" ? (primary ? \"bg-black text-white\" : \"bg-white text-strong\") : \"\"}`,\n        /** Hover */ `${variable != \"disabled\" ? (primary ? \"hover:bg-gray08 hover:text-white\" : \"hover:bg-gray01 hover:text-strong\") : \"\"}`,\n        /** Hover */ `${variable != \"disabled\" && \"hover:cursor-pointer\"}`,\n        /** Pressed */ `${variable == \"pressed\" ? (primary ? \"bg-gray09 text-white\" : \"bg-gray02 text-strong\") : \"\"}`,\n        className,\n      )}\n      onClick={onClick}\n    >\n      {label}\n    </button>\n  );\n};\n"],"mappings":";;;AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAKpC,IAAM,UAAU,oBAAuC;AAAA,EACrD,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,mBAAmB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACTI;AARG,IAAM,MAAM,CAAC;AAAA,EAClB,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,GAAG,UAAU,aAAa,sBAAsB;AAAA;AAAA,QAChC,GAAG,YAAY,aAAc,UAAU,+CAA+C,0BAA2B,EAAE;AAAA;AAAA,QACpH,GAAG,YAAY,YAAa,UAAU,wBAAwB,yBAA0B,EAAE;AAAA;AAAA,QAC5F,GAAG,YAAY,aAAc,UAAU,qCAAqC,sCAAuC,EAAE;AAAA;AAAA,QACrH,GAAG,YAAY,cAAc,sBAAsB;AAAA;AAAA,QACjD,GAAG,YAAY,YAAa,UAAU,yBAAyB,0BAA2B,EAAE;AAAA,QAC3G;AAAA,MACF;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/style.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-default:"ABCWhyteHangul"}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.contents{display:contents}.h-12{height:calc(var(--spacing) * 12)}.w-full{width:100%}.max-w-360{max-width:calc(var(--spacing) * 360)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-gray01{border-color:#eff1f5}.border-gray02{border-color:#e4e7eb}.bg-black{background-color:#121212}.bg-gray01{background-color:#eff1f5}.bg-gray02{background-color:#e4e7eb}.bg-gray09{background-color:#292f39}.bg-white{background-color:#fff}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.text-center{text-align:center}.text-gray04{color:#b4b9c2}.text-strong{color:#292f39}.text-white{color:#fff}@media (hover:hover){.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-gray01:hover{background-color:#eff1f5}.hover\:bg-gray08:hover{background-color:#3a414c}.hover\:text-strong:hover{color:#292f39}.hover\:text-white:hover{color:#fff}}.text-head1-medium{font-size:22px;font-weight:500;line-height:160%}.text-head2-medium{font-size:20px;font-weight:500;line-height:160%}.text-head3-medium{font-size:18px;font-weight:500;line-height:150%}.text-head4-regular{font-size:18px;font-weight:400;line-height:150%}.text-body1-medium{font-size:16px;font-weight:500;line-height:150%}.text-body1-regular{font-size:16px;font-weight:400;line-height:150%}.text-body2-regular{font-size:15px;font-weight:400;line-height:150%}.text-body3-medium{font-size:14px;font-weight:500;line-height:150%}.text-body3-regular{font-size:14px;font-weight:400;line-height:150%}.text-body3-book{font-size:14px;font-weight:350;line-height:150%}.text-caption-regular{font-size:12px;font-weight:400;line-height:150%}.text-caption-book{font-size:12px;font-weight:350;line-height:150%}}body{font-family:var(--font-default)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@hivcd-printshop/design-system",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/style.css --minify",
+    "build": "tsup && npm run build:css",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HIVCD-PRINTSHOP/Design-System.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/HIVCD-PRINTSHOP/Design-System/issues"
+  },
+  "homepage": "https://github.com/HIVCD-PRINTSHOP/Design-System#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "latest",
+    "@eslint/js": "^9.39.5",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.2",
+    "@storybook/addon-a11y": "^10.5.7",
+    "@storybook/addon-docs": "^10.5.7",
+    "@storybook/addon-vitest": "^10.5.7",
+    "@storybook/react-vite": "^10.5.7",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/browser-playwright": "4.1.10",
+    "@vitest/coverage-v8": "4.1.10",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^10.5.7",
+    "jsdom": "^30.0.1",
+    "playwright": "latest",
+    "prettier": "^3.9.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "semantic-release": "^24.2.9",
+    "storybook": "^10.5.7",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.67.0",
+    "vitest": "^4.1.10"
+  },
+  "overrides": {
+    "esbuild": "^0.28.2"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  }
+}