tsp-form 0.0.1

package/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

package/dist/index.js

@@ -0,0 +1,2 @@
+/*! For license information please see index.js.LICENSE.txt */
+!function(r,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("clsx")):"function"==typeof define&&define.amd?define("MyUIComponents",["react","clsx"],e):"object"==typeof exports?exports.MyUIComponents=e(require("react"),require("clsx")):r.MyUIComponents=e(r.React,r.clsx)}(this,(r,e)=>(()=>{"use strict";var n={12:e=>{e.exports=r},56:(r,e,n)=>{r.exports=function(r){var e=n.nc;e&&r.setAttribute("nonce",e)}},72:r=>{var e=[];function n(r){for(var n=-1,t=0;t<e.length;t++)if(e[t].identifier===r){n=t;break}return n}function t(r,t){for(var a={},c=[],i=0;i<r.length;i++){var l=r[i],s=t.base?l[0]+t.base:l[0],u=a[s]||0,f="".concat(s," ").concat(u);a[s]=u+1;var p=n(f),d={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==p)e[p].references++,e[p].updater(d);else{var v=o(d,t);t.byIndex=i,e.splice(i,0,{identifier:f,updater:v,references:1})}c.push(f)}return c}function o(r,e){var n=e.domAPI(e);return n.update(r),function(e){if(e){if(e.css===r.css&&e.media===r.media&&e.sourceMap===r.sourceMap&&e.supports===r.supports&&e.layer===r.layer)return;n.update(r=e)}else n.remove()}}r.exports=function(r,o){var a=t(r=r||[],o=o||{});return function(r){r=r||[];for(var c=0;c<a.length;c++){var i=n(a[c]);e[i].references--}for(var l=t(r,o),s=0;s<a.length;s++){var u=n(a[s]);0===e[u].references&&(e[u].updater(),e.splice(u,1))}a=l}}},113:r=>{r.exports=function(r,e){if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}},314:r=>{r.exports=function(r){var e=[];return e.toString=function(){return this.map(function(e){var n="",t=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),t&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=r(e),t&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n}).join("")},e.i=function(r,n,t,o,a){"string"==typeof r&&(r=[[null,r,void 0]]);var c={};if(t)for(var i=0;i<this.length;i++){var l=this[i][0];null!=l&&(c[l]=!0)}for(var s=0;s<r.length;s++){var u=[].concat(r[s]);t&&c[u[0]]||(void 0!==a&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=a),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),e.push(u))}},e}},405:(r,e,n)=>{n.d(e,{A:()=>i});var t=n(601),o=n.n(t),a=n(314),c=n.n(a)()(o());c.push([r.id,".cpanel {\n    border: 1px solid var(--color-line);\n    border-radius: var(--radius-control);\n    overflow: hidden;\n}\n\n.cpanel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: left;\n    border-bottom: 1px solid var(--color-line);\n}\n\n.cpanel-header-title {\n    padding: var(--spacing-title-y) var(--spacing-title-x);\n    letter-spacing: var(--text-title--letter-spacing);\n    font-size: var(--text-title);\n    line-height: var(--text-title--line-height);\n    font-weight: var(--text-title--font-weight);\n}\n\n.cpanel-header:focus {\n    outline: none;\n}\n\n.cpanel-header:focus-visible {\n    box-shadow: 0 0 0 1px var(--color-primary);\n}\n\n.cpanel-chevron {\n    flex-shrink: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: var(--spacing-title-h);\n    height: var(--spacing-title-h);\n    border-left: var(--spacing-line) solid var(--color-line);\n    cursor: pointer;\n}\n\n.cpanel-content.open {\n    display: block;\n}\n\n.cpanel-content {\n    display: none;\n}",""]);const i=c},525:(r,e,n)=>{n.d(e,{A:()=>i});var t=n(601),o=n.n(t),a=n(314),c=n.n(a)()(o());c.push([r.id,".rotate-0 {\n    transform: rotate(0deg);\n}\n\n.rotate-90 {\n    transform: rotate(90deg);\n}\n\n.rotate-180 {\n    transform: rotate(180deg);\n}\n\n.-rotate-90 {\n    transform: rotate(-90deg);\n}\n\n.chevron-animated {\n    transition: transform 200ms ease-out;\n}",""]);const i=c},540:r=>{r.exports=function(r){var e=document.createElement("style");return r.setAttributes(e,r.attributes),r.insert(e,r.options),e}},601:r=>{r.exports=function(r){return r[1]}},659:r=>{var e={};r.exports=function(r,n){var t=function(r){if(void 0===e[r]){var n=document.querySelector(r);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(r){n=null}e[r]=n}return e[r]}(r);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(n)}},698:(r,e)=>{var n=Symbol.for("react.transitional.element");function t(r,e,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==e.key&&(o=""+e.key),"key"in e)for(var a in t={},e)"key"!==a&&(t[a]=e[a]);else t=e;return e=t.ref,{$$typeof:n,type:r,key:o,ref:void 0!==e?e:null,props:t}}Symbol.for("react.fragment"),e.jsx=t,e.jsxs=t},825:r=>{r.exports=function(r){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=r.insertStyleElement(r);return{update:function(n){!function(r,e,n){var t="";n.supports&&(t+="@supports (".concat(n.supports,") {")),n.media&&(t+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(t+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),t+=n.css,o&&(t+="}"),n.media&&(t+="}"),n.supports&&(t+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(t,r,e.options)}(e,r,n)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(e)}}}},848:(r,e,n)=>{r.exports=n(698)},894:r=>{r.exports=e},998:(r,e,n)=>{n.d(e,{A:()=>i});var t=n(601),o=n.n(t),a=n(314),c=n.n(a)()(o());c.push([r.id,".btn {\n    --color-text: var(--color-fg);\n    --color-bg: var(--color-surface);\n    --color-border: var(--color-surface);\n    --color-bg-hover: var(--color-fg);\n    --color-border-hover: var(--color-fg);\n    --color-text-hover: var(--color-fg-contrast);\n    padding: var(--spacing-control-y) var(--spacing-control-x);\n    border-radius: var(--radius-control);\n    border: 1px solid var(--color-border);\n    cursor: pointer;\n    background: var(--color-bg);\n    color: var(--color-text);\n    transition: all 0.2s ease-in-out;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: 600;\n}\n\n.btn:hover {\n    background: var(--color-bg-hover);\n    border-color: var(--color-border-hover);\n    color: var(--color-text-hover);\n}\n\n.btn.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n.btn-sm {\n    padding: var(--spacing-control-compact-y) var(--spacing-control-compact-x);\n}\n\n.btn-lg {\n    padding: var(--spacing-control-relaxed-y) var(--spacing-control-relaxed-x);\n}\n\n.btn-primary {\n    --color-text: var(--color-primary-contrast);\n    --color-bg: var(--color-primary);\n    --color-border: var(--color-primary);\n}\n\n.btn-secondary {\n    --color-text: var(--color-secondary-contrast);\n    --color-bg: var(--color-secondary);\n    --color-border: var(--color-secondary);\n}\n\n.btn-danger {\n    --color-text: var(--color-danger-contrast);\n    --color-bg: var(--color-danger);\n    --color-border: var(--color-danger);\n}\n\n.btn-outline-default {\n    --color-text: var(--color-fg);\n    --color-bg: transparent;\n    --color-border: var(--color-line);\n}\n\n.btn-outline-primary {\n    --color-text: var(--color-primary);\n    --color-border: var(--color-primary);\n    --color-text-hover: var(--color-primary-contrast);\n    --color-bg-hover: var(--color-primary);\n    --color-border-hover: var(--color-primary);\n}\n\n.btn-outline-secondary {\n    --color-text: var(--color-secondary);\n    --color-border: var(--color-secondary);\n    --color-text-hover: var(--color-secondary-contrast);\n    --color-bg-hover: var(--color-secondary);\n    --color-border-hover: var(--color-secondary);\n}\n\n.btn-outline-danger {\n    --color-text: var(--color-danger);\n    --color-border: var(--color-danger);\n    --color-text-hover: var(--color-danger-contrast);\n    --color-bg-hover: var(--color-danger);\n    --color-border-hover: var(--color-danger);\n}\n\n.btn-ghost-default {\n    --color-text: var(--color-fg);\n    --color-bg: transparent;\n    --color-border: transparent;\n    --color-text-hover: var(--color-fg);\n    --color-bg-hover: var(--color-surface);\n    --color-border-hover: var(--color-surface);\n}\n\n.btn-ghost-primary {\n    --color-text: var(--color-primary);\n    --color-bg: transparent;\n    --color-border: transparent;\n    --color-text-hover: var(--color-fg);\n    --color-bg-hover: var(--color-surface);\n    --color-border-hover: var(--color-surface);\n}\n\n.btn-ghost-secondary {\n    --color-text: var(--color-secondary);\n    --color-bg: transparent;\n    --color-border: transparent;\n    --color-text-hover: var(--color-fg);\n    --color-bg-hover: var(--color-surface);\n    --color-border-hover: var(--color-surface);\n}\n\n.btn-ghost-danger {\n    --color-text: var(--color-danger);\n    --color-bg: transparent;\n    --color-border: transparent;\n}\n",""]);const i=c}},t={};function o(r){var e=t[r];if(void 0!==e)return e.exports;var a=t[r]={id:r,exports:{}};return n[r](a,a.exports,o),a.exports}o.n=r=>{var e=r&&r.__esModule?()=>r.default:()=>r;return o.d(e,{a:e}),e},o.d=(r,e)=>{for(var n in e)o.o(e,n)&&!o.o(r,n)&&Object.defineProperty(r,n,{enumerable:!0,get:e[n]})},o.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),o.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.nc=void 0;var a={};o.r(a),o.d(a,{Button:()=>E,Chevron:()=>U,ExpandablePanel:()=>F});var c=o(12),i=o(894),l=o.n(i),s=o(72),u=o.n(s),f=o(825),p=o.n(f),d=o(659),v=o.n(d),b=o(56),y=o.n(b),m=o(540),g=o.n(m),h=o(113),x=o.n(h),O=o(998),j={};j.styleTagTransform=x(),j.setAttributes=y(),j.insert=v().bind(null,"head"),j.domAPI=p(),j.insertStyleElement=g(),u()(O.A,j),O.A&&O.A.locals&&O.A.locals;var w=o(848);function S(r){return S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},S(r)}var P=["color","variant","size","className","disabled","type"];function A(r,e){var n=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e&&(t=t.filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})),n.push.apply(n,t)}return n}function k(r,e,n){return(e=function(r){var e=function(r){if("object"!=S(r)||!r)return r;var e=r[Symbol.toPrimitive];if(void 0!==e){var n=e.call(r,"string");if("object"!=S(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r);return"symbol"==S(e)?e:e+""}(e))in r?Object.defineProperty(r,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):r[e]=n,r}var E=(0,c.forwardRef)(function(r,e){var n=r.color,t=void 0===n?"default":n,o=r.variant,a=void 0===o?"solid":o,c=r.size,i=void 0===c?"md":c,s=r.className,u=r.disabled,f=r.type,p=void 0===f?"button":f,d=function(r,e){if(null==r)return{};var n,t,o=function(r,e){if(null==r)return{};var n={};for(var t in r)if({}.hasOwnProperty.call(r,t)){if(-1!==e.indexOf(t))continue;n[t]=r[t]}return n}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(t=0;t<a.length;t++)n=a[t],-1===e.indexOf(n)&&{}.propertyIsEnumerable.call(r,n)&&(o[n]=r[n])}return o}(r,P),v=function(r,e,n,t){var o=["btn","btn-".concat(n),t];switch(r){case"solid":o.push("btn-".concat(e));break;case"outline":o.push("btn-outline-".concat(e));break;case"ghost":o.push("btn-ghost-".concat(e))}return l()(o)}(a,t,i,s);return(0,w.jsx)("button",function(r){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?A(Object(n),!0).forEach(function(e){k(r,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):A(Object(n)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))})}return r}({ref:e,type:p,className:v,disabled:u},d))});E.displayName="Button";var T=o(525),N={};function I(r){return I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},I(r)}N.styleTagTransform=x(),N.setAttributes=y(),N.insert=v().bind(null,"head"),N.domAPI=p(),N.insertStyleElement=g(),u()(T.A,N),T.A&&T.A.locals&&T.A.locals;var C=["direction","open","size","strokeWidth","className","title","animated"];function M(r,e){var n=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e&&(t=t.filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})),n.push.apply(n,t)}return n}function D(r){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?M(Object(n),!0).forEach(function(e){z(r,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):M(Object(n)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))})}return r}function z(r,e,n){return(e=function(r){var e=function(r){if("object"!=I(r)||!r)return r;var e=r[Symbol.toPrimitive];if(void 0!==e){var n=e.call(r,"string");if("object"!=I(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r);return"symbol"==I(e)?e:e+""}(e))in r?Object.defineProperty(r,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):r[e]=n,r}function U(r){var e=r.direction,n=void 0===e?"down":e,t=r.open,o=r.size,a=void 0===o?16:o,c=r.strokeWidth,i=void 0===c?2:c,s=r.className,u=r.title,f=r.animated,p=void 0===f||f,d=function(r,e){if(null==r)return{};var n,t,o=function(r,e){if(null==r)return{};var n={};for(var t in r)if({}.hasOwnProperty.call(r,t)){if(-1!==e.indexOf(t))continue;n[t]=r[t]}return n}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(t=0;t<a.length;t++)n=a[t],-1===e.indexOf(n)&&{}.propertyIsEnumerable.call(r,n)&&(o[n]=r[n])}return o}(r,C),v={down:0,up:180,left:90,right:-90},b=void 0===t?v[n]:"down"===n?t?180:0:"right"===n?t?0:-90:v[n],y=0===b?"rotate-0":180===b?"rotate-180":90===b?"rotate-90":-90===b?"-rotate-90":"rotate-0";return(0,w.jsxs)("svg",D(D({xmlns:"http://www.w3.org/2000/svg",width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:i,strokeLinecap:"round",strokeLinejoin:"round",className:l()("shrink-0",p&&"chevron-animated",y,s),"aria-hidden":!d["aria-label"]||void 0,role:d["aria-label"]?"img":void 0},d),{},{children:[u?(0,w.jsx)("title",{children:u}):null,(0,w.jsx)("path",{d:"M6 9l6 6 6-6"})]}))}var q=o(405),L={};function R(r){return R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},R(r)}function _(r,e){var n=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e&&(t=t.filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})),n.push.apply(n,t)}return n}function B(r){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?_(Object(n),!0).forEach(function(e){W(r,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))})}return r}function W(r,e,n){return(e=function(r){var e=function(r){if("object"!=R(r)||!r)return r;var e=r[Symbol.toPrimitive];if(void 0!==e){var n=e.call(r,"string");if("object"!=R(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r);return"symbol"==R(e)?e:e+""}(e))in r?Object.defineProperty(r,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):r[e]=n,r}function $(r,e){(null==e||e>r.length)&&(e=r.length);for(var n=0,t=Array(e);n<e;n++)t[n]=r[n];return t}L.styleTagTransform=x(),L.setAttributes=y(),L.insert=v().bind(null,"head"),L.domAPI=p(),L.insertStyleElement=g(),u()(q.A,L),q.A&&q.A.locals&&q.A.locals;var F=function(r){var e,n,t=r.title,o=r.children,a=r.className,i=r.chevronProps,s=r.defaultOpen,u=void 0===s||s,f=(e=(0,c.useState)(u),n=2,function(r){if(Array.isArray(r))return r}(e)||function(r,e){var n=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=n){var t,o,a,c,i=[],l=!0,s=!1;try{if(a=(n=n.call(r)).next,0===e){if(Object(n)!==n)return;l=!1}else for(;!(l=(t=a.call(n)).done)&&(i.push(t.value),i.length!==e);l=!0);}catch(r){s=!0,o=r}finally{try{if(!l&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(s)throw o}}return i}}(e,n)||function(r,e){if(r){if("string"==typeof r)return $(r,e);var n={}.toString.call(r).slice(8,-1);return"Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n?Array.from(r):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?$(r,e):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),p=f[0],d=f[1];return(0,w.jsxs)("div",{className:l()("cpanel",a),children:[(0,w.jsxs)("div",{className:"cpanel-header",onClick:function(){return d(function(r){return!r})},"aria-expanded":p,children:[(0,w.jsx)("div",{className:"cpanel-header-title",children:t}),(0,w.jsx)("div",{className:"cpanel-chevron",children:(0,w.jsx)(U,B({direction:"right",open:p,className:"text-current cursor-pointer",size:24},i))})]}),(0,w.jsx)("div",{className:l()("cpanel-content",p&&"open"),children:o})]})};return a})());

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "tsp-form",
+  "version": "0.0.1",
+  "description": "A unified Tailwind 4 variables compatible UI component library for my own projects.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "webpack serve --mode development --env APP_MODE=example",
+    "build": "webpack --mode production --env APP_MODE=library",
+    "clean": "rm -rf dist",
+    "build:lib": "webpack --env APP_MODE=library",
+    "build:example": "webpack",
+    "start:example": "webpack serve",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "component",
+    "ui",
+    "tailwind"
+  ],
+  "author": "Tsupol",
+  "license": "MIT",
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.62.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "babel-loader": "^10.0.0",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.4",
+    "style-loader": "^4.0.0",
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from "react";
+import clsx from "clsx";
+import "../styles/button.css";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  color?: string;
+  variant?: string;
+  size?: string;
+  className?: string;
+}
+
+function getClassName(variant: string, color: string, size: string, className?: string) {
+  const classes = ['btn', `btn-${size}`, className];
+  switch (variant) {
+    case 'solid':
+      classes.push(`btn-${color}`);
+      break;
+    case 'outline':
+      classes.push(`btn-outline-${color}`);
+      break;
+    case 'ghost':
+      classes.push(`btn-ghost-${color}`);
+      break;
+    default:
+      break;
+  }
+  return clsx(classes);
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      color = "default",
+      variant = "solid",
+      size = "md",
+      className,
+      disabled,
+      type = "button",
+      ...props
+    },
+    ref
+  ) => {
+    const classes = getClassName(variant, color, size, className);
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={classes}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export default Button;

package/src/components/Chevron.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import clsx from 'clsx';
+import '../styles/chevron.css';
+
+type Direction = 'down' | 'up' | 'left' | 'right';
+
+export type ChevronProps = {
+  direction?: Direction;     // visual direction when "closed"
+  open?: boolean;            // if provided, animates to an "expanded" angle
+  size?: number | string;    // 16 | 20 | '1em' | '24px' ...
+  strokeWidth?: number;      // 1 to 2.5 typically
+  className?: string;
+  title?: string;
+  'aria-label'?: string;
+  animated?: boolean;        // enables CSS transition
+};
+
+export function Chevron({
+                          direction = 'down',
+                          open,
+                          size = 16,
+                          strokeWidth = 2,
+                          className,
+                          title,
+                          animated = true,
+                          ...aria
+                        }: ChevronProps) {
+  // Base rotation angles for the "closed" state
+  const baseAngle: Record<Direction, number> = {
+    down: 0,
+    up: 180,
+    left: 90,
+    right: -90,
+  };
+
+  // If `open` is provided, rotate to a sensible expanded angle
+  const angle = (() => {
+    if (open === undefined) return baseAngle[direction];
+    if (direction === 'down') return open ? 180 : 0;   // caret flips up when open
+    if (direction === 'right') return open ? 0 : -90;  // caret points down when open
+    // For 'up' and 'left' keep base angle unless you want a custom behavior
+    return baseAngle[direction];
+  })();
+
+  // Map to Tailwind rotation classes we actually use
+  const angleClass =
+    angle === 0
+      ? 'rotate-0'
+      : angle === 180
+        ? 'rotate-180'
+        : angle === 90
+          ? 'rotate-90'
+          : angle === -90
+            ? '-rotate-90'
+            : 'rotate-0';
+
+  // Inline SVG chevron (stroke follows currentColor)
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size as number}
+      height={size as number}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={clsx(
+        'shrink-0',
+        animated && 'chevron-animated',
+        angleClass,
+        className
+      )}
+      aria-hidden={aria['aria-label'] ? undefined : true}
+      role={aria['aria-label'] ? 'img' : undefined}
+      {...aria}
+    >
+      {title ? <title>{title}</title> : null}
+      {/* ChevronDown path */}
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  );
+}

package/src/components/ExpandablePanel.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { Chevron } from './Chevron';
+import '../styles/collapsible-panel.css';
+
+export const ExpandablePanel = ({
+                                  title,
+                                  children,
+                                  className,
+                                  chevronProps,
+                                  defaultOpen = true,
+                                }: {
+  title: string;
+  className?: string;
+  children: React.ReactNode;
+  chevronProps?: React.ComponentProps<typeof Chevron>;
+  defaultOpen?: boolean;
+}) => {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className={clsx('cpanel', className)}>
+      <div
+        className="cpanel-header"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+      >
+        <div className="cpanel-header-title">{title}</div>
+        <div className="cpanel-chevron">
+          <Chevron direction="right" open={open} className="text-current cursor-pointer" size={24} {...chevronProps}/>
+        </div>
+      </div>
+
+      <div className={clsx('cpanel-content', open && 'open')}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/example/ExampleButtons.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { ContentPanel } from './components/ContentPanel';
+import Button from '../components/Button';
+
+export function ExampleButtons() {
+  return (
+    <div className="grid gap-4">
+      <ContentPanel title="CSS Buttons">
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <button className="btn">
+            Button
+          </button>
+          <button className="btn btn-primary">
+            Button Primary
+          </button>
+          <button className="btn btn-secondary">
+            Button Secondary
+          </button>
+          <button className="btn btn-secondary disabled">
+            Button Secondary
+          </button>
+        </div>
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <button className="btn btn-outline-default">
+            Button
+          </button>
+          <button className="btn btn-outline-primary">
+            Button Primary
+          </button>
+          <button className="btn btn-outline-secondary">
+            Outline Secondary
+          </button>
+          <button className="btn btn-outline-secondary disabled">
+            Outline Secondary
+          </button>
+        </div>
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <button className="btn btn-ghost-default">
+            Ghost
+          </button>
+          <button className="btn btn-ghost-primary">
+            Ghost Primary
+          </button>
+          <button className="btn btn-ghost-secondary">
+            Ghost Secondary
+          </button>
+          <button className="btn btn-ghost-secondary disabled">
+            Ghost Secondary
+          </button>
+        </div>
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <button className="btn btn-lg">
+            Large
+          </button>
+          <button className="btn btn-sm">
+            Small
+          </button>
+          <button className="btn btn-outline-default btn-lg">
+            Large
+          </button>
+          <div>
+            <button className="btn btn-outline-secondary btn-sm">
+              Small
+            </button>
+          </div>
+        </div>
+      </ContentPanel>
+      <ContentPanel title="React Buttons">
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <Button>
+            Button
+          </Button>
+          <Button color="primary">
+            Button Primary
+          </Button>
+          <Button color="secondary">
+            Button Secondary
+          </Button>
+          <Button color="secondary" disabled>
+            Button Secondary
+          </Button>
+        </div>
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <Button variant="outline">
+            Button
+          </Button>
+          <Button variant="outline" color="primary">
+            Button Primary
+          </Button>
+          <Button variant="outline" color="secondary">
+            Outline Secondary
+          </Button>
+          <Button variant="outline" color="secondary" disabled>
+            Outline Secondary
+          </Button>
+        </div>
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <Button variant="ghost">
+            Ghost
+          </Button>
+          <Button variant="ghost" color="primary">
+            Ghost Primary
+          </Button>
+          <Button variant="ghost" color="secondary">
+            Ghost Secondary
+          </Button>
+          <Button variant="ghost" color="secondary" disabled>
+            Ghost Secondary
+          </Button>
+        </div>
+        <div className="flex gap-2 border border-line bg-surface p-card">
+          <Button size="lg">
+            Large
+          </Button>
+          <Button size="sm">
+            Small
+          </Button>
+          <Button variant="outline" size="lg">
+            Large
+          </Button>
+          <div>
+            <Button variant="outline" color="secondary" size="sm">
+              Small
+            </Button>
+          </div>
+        </div>
+
+      </ContentPanel>
+    </div>
+  );
+}

package/src/example/components/ContentPanel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const ContentPanel = ({ title, children }: { title: string; children: React.ReactNode}) => {
+  return (
+    <div className="content-panel">
+      <div className="content-panel-header-wrapper">
+        <span className="content-panel-header">{title}</span>
+      </div>
+      {children}
+    </div>
+  )
+}

package/src/example/example.css

@@ -0,0 +1,83 @@
+@import '../global.css';
+@import './styles/components.css';
+@import './styles/utils.css';
+
+:root {
+    --color-danger: #ff0000;
+    --color-danger-contrast: #ffffff;
+    --spacing-main-sidebar: 10rem;
+    --spacing-mini-sidebar: 2.5rem;
+    --spacing-card: 1rem;
+
+    --color-fg: #cccccc;
+    --color-fg-contrast: #000000;
+    --color-bg: #0a0a0a;
+    --color-bg-contrast: #ffffff;
+
+    --color-line: #2a2a2a;
+    --color-link: #0070f3;
+
+    --color-surface: rgba(255, 255, 255, 0.025);
+    --color-surface-hover: rgba(255, 255, 255, 0.05);
+    --color-surface-shallow: rgba(255, 255, 255, 0.01);
+    --color-surface-elevated: rgba(255, 255, 255, 0.05);
+
+    --spacing-line: 1px;
+
+    --color-primary: #0070f3;
+    --color-primary-hover: #005bb5;
+    --color-primary-active: #004c9b;
+    --color-primary-contrast: #ffffff;
+    --color-primary-light: rgba(0, 112, 243, 0.1);
+
+    --color-secondary: #8200ff;
+    --color-secondary-hover: #6800cc;
+    --color-secondary-active: #5300a8;
+    --color-secondary-contrast: #ffffff;
+
+    --spacing-control-y: 0.625rem;
+    --spacing-control-x: 1rem;
+    --spacing-control-compact-y: 0.25rem;
+    --spacing-control-compact-x: 0.5rem;
+    --spacing-control-relaxed-y: 1rem;
+    --spacing-control-relaxed-x: 2rem;
+    --radius-control: .5rem;
+    --text-control: 1rem;
+    --text-control--letter-spacing: 0em;
+    --text-control--line-height: 1.5;
+    --text-control--font-weight: 400;
+
+    --space-scrollbar-track: .5rem;
+    --color-scrollbar-track: rgba(125, 125, 125, 0.1);
+    --color-scrollbar-thumb: rgba(125, 125, 125, 0.25);
+    --color-bg-control: transparent;
+    --color-label-control: #888888;
+
+    --space-title-x: 1rem;
+    --space-title-y: 1rem;
+    --text-title: 1.5rem;
+    --text-title--letter-spacing: -0.025em;
+    --text-title--line-height: 1.25;
+    --text-title--font-weight: 600;
+
+    --spacing-title-y: 1rem;
+    --spacing-title-x: 1rem;
+    --spacing-title-h: calc(var(--spacing-title-y) * 2 + var(--text-title) * var(--text-title--line-height));
+
+    --text-base: 1rem;
+    --text-base--letter-spacing: 0em;
+    --text-base--line-height: 1.5;
+    --text-base--font-weight: 400;
+}
+
+html, body {
+    background: var(--color-bg);
+    color: var(--color-fg);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+}
+
+.page-content {
+    padding: 1rem 2rem;
+}

package/src/example/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Button Component Example</title>
+</head>
+<body>
+<div id="root"></div>
+<!-- Webpack will inject the bundle.js here -->
+</body>
+</html>

package/src/example/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { ExpandablePanel } from '../components/ExpandablePanel';
+import { ExampleButtons } from './ExampleButtons';
+import './example.css';
+
+const App = () => {
+  return (
+    <div>
+      <ExpandablePanel title="Buttons">
+        <ExampleButtons />
+      </ExpandablePanel>
+    </div>
+  );
+};
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}

package/src/example/styles/components.css

@@ -0,0 +1,14 @@
+.content-panel {
+    padding: 1rem;
+}
+
+.content-panel-header-wrapper {
+    padding-left: .5rem;
+    padding-bottom: .5rem;
+    border-left: .5rem solid var(--color-primary);
+}
+
+.content-panel-header {
+    font-size: 1.25rem;
+    font-weight: 600;
+}

package/src/example/styles/utils.css

@@ -0,0 +1,23 @@
+.flex {
+    display: flex;
+}
+
+.gap-2 {
+    gap: 0.5rem;
+}
+
+.border {
+    border: 1px solid var(--color-line);
+}
+
+.border-line {
+    border-color: var(--color-line);
+}
+
+.bg-surface {
+    background-color: var(--color-surface);
+}
+
+.p-card {
+    padding: 1rem;
+}

package/src/global.css

@@ -0,0 +1,2 @@
+@import "./styles/form.css";
+@import "./styles/button.css";

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components/Button';
+export * from './components/ExpandablePanel';
+export * from './components/Chevron';

package/src/styles/button.css

@@ -0,0 +1,119 @@
+.btn {
+    --color-text: var(--color-fg);
+    --color-bg: var(--color-surface);
+    --color-border: var(--color-surface);
+    --color-bg-hover: var(--color-fg);
+    --color-border-hover: var(--color-fg);
+    --color-text-hover: var(--color-fg-contrast);
+    padding: var(--spacing-control-y) var(--spacing-control-x);
+    border-radius: var(--radius-control);
+    border: 1px solid var(--color-border);
+    cursor: pointer;
+    background: var(--color-bg);
+    color: var(--color-text);
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+}
+
+.btn:hover {
+    background: var(--color-bg-hover);
+    border-color: var(--color-border-hover);
+    color: var(--color-text-hover);
+}
+
+.btn.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.btn-sm {
+    padding: var(--spacing-control-compact-y) var(--spacing-control-compact-x);
+}
+
+.btn-lg {
+    padding: var(--spacing-control-relaxed-y) var(--spacing-control-relaxed-x);
+}
+
+.btn-primary {
+    --color-text: var(--color-primary-contrast);
+    --color-bg: var(--color-primary);
+    --color-border: var(--color-primary);
+}
+
+.btn-secondary {
+    --color-text: var(--color-secondary-contrast);
+    --color-bg: var(--color-secondary);
+    --color-border: var(--color-secondary);
+}
+
+.btn-danger {
+    --color-text: var(--color-danger-contrast);
+    --color-bg: var(--color-danger);
+    --color-border: var(--color-danger);
+}
+
+.btn-outline-default {
+    --color-text: var(--color-fg);
+    --color-bg: transparent;
+    --color-border: var(--color-line);
+}
+
+.btn-outline-primary {
+    --color-text: var(--color-primary);
+    --color-border: var(--color-primary);
+    --color-text-hover: var(--color-primary-contrast);
+    --color-bg-hover: var(--color-primary);
+    --color-border-hover: var(--color-primary);
+}
+
+.btn-outline-secondary {
+    --color-text: var(--color-secondary);
+    --color-border: var(--color-secondary);
+    --color-text-hover: var(--color-secondary-contrast);
+    --color-bg-hover: var(--color-secondary);
+    --color-border-hover: var(--color-secondary);
+}
+
+.btn-outline-danger {
+    --color-text: var(--color-danger);
+    --color-border: var(--color-danger);
+    --color-text-hover: var(--color-danger-contrast);
+    --color-bg-hover: var(--color-danger);
+    --color-border-hover: var(--color-danger);
+}
+
+.btn-ghost-default {
+    --color-text: var(--color-fg);
+    --color-bg: transparent;
+    --color-border: transparent;
+    --color-text-hover: var(--color-fg);
+    --color-bg-hover: var(--color-surface);
+    --color-border-hover: var(--color-surface);
+}
+
+.btn-ghost-primary {
+    --color-text: var(--color-primary);
+    --color-bg: transparent;
+    --color-border: transparent;
+    --color-text-hover: var(--color-fg);
+    --color-bg-hover: var(--color-surface);
+    --color-border-hover: var(--color-surface);
+}
+
+.btn-ghost-secondary {
+    --color-text: var(--color-secondary);
+    --color-bg: transparent;
+    --color-border: transparent;
+    --color-text-hover: var(--color-fg);
+    --color-bg-hover: var(--color-surface);
+    --color-border-hover: var(--color-surface);
+}
+
+.btn-ghost-danger {
+    --color-text: var(--color-danger);
+    --color-bg: transparent;
+    --color-border: transparent;
+}

package/src/styles/chevron.css

@@ -0,0 +1,19 @@
+.rotate-0 {
+    transform: rotate(0deg);
+}
+
+.rotate-90 {
+    transform: rotate(90deg);
+}
+
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+.-rotate-90 {
+    transform: rotate(-90deg);
+}
+
+.chevron-animated {
+    transition: transform 200ms ease-out;
+}

package/src/styles/collapsible-panel.css

@@ -0,0 +1,48 @@
+.cpanel {
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-control);
+    overflow: hidden;
+}
+
+.cpanel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: left;
+    border-bottom: 1px solid var(--color-line);
+}
+
+.cpanel-header-title {
+    padding: var(--spacing-title-y) var(--spacing-title-x);
+    letter-spacing: var(--text-title--letter-spacing);
+    font-size: var(--text-title);
+    line-height: var(--text-title--line-height);
+    font-weight: var(--text-title--font-weight);
+}
+
+.cpanel-header:focus {
+    outline: none;
+}
+
+.cpanel-header:focus-visible {
+    box-shadow: 0 0 0 1px var(--color-primary);
+}
+
+.cpanel-chevron {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--spacing-title-h);
+    height: var(--spacing-title-h);
+    border-left: var(--spacing-line) solid var(--color-line);
+    cursor: pointer;
+}
+
+.cpanel-content.open {
+    display: block;
+}
+
+.cpanel-content {
+    display: none;
+}

package/src/styles/form.css

@@ -0,0 +1,47 @@
+@layer utilities {
+    .form-control {
+        border: 1px solid var(--color-line, #d1d5db);
+        border-radius: var(--radius-control, 0.375rem);
+        background-color: var(--color-bg-control, #ffffff);
+        padding: var(--spacing-control-y, 0.5rem) var(--spacing-control-y, 0.75rem);
+        transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        font-size: var(--text-control, 0.875rem);
+        font-weight: var(--text-control--font-weight, 400);
+        letter-spacing: var(--text-control--letter-spacing, 0em);
+        line-height: var(--text-control--line-height, 1.25);
+        min-height: calc(
+                var(--text-control--line-height) * var(--text-control, 0.875rem) +
+                2 * var(--spacing-control-y) +
+                2 * 1px /* Assuming 1px border*/
+        );
+
+    }
+
+    .form-error-border .form-control, /* for Select */
+    .form-error-border {
+        border-color: var(--color-danger);
+    }
+
+    .form-control:focus-within {
+        border-color: var(--color-primary); /* Focus border color */
+        box-shadow: none;
+        outline: none;
+    }
+
+    .form-control:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .form-label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--color-label-control);
+    }
+
+    .form-error {
+        color: var(--color-danger);
+        font-size: 0.75rem;
+    }
+
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "lib": ["dom", "dom.iterable", "esnext"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "src/example"] // Added: Exclude src/example
+
+}

package/webpack.config.js

@@ -0,0 +1,107 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = (env) => {
+	const isLibraryBuild = env.APP_MODE === 'library';
+
+	const commonConfig = {
+		resolve: {
+			extensions: ['.ts', '.tsx', '.js', '.jsx'],
+		},
+		module: {
+			rules: [
+				{
+					test: /\.(ts|tsx|js|jsx)$/,
+					exclude: /node_modules/,
+					use: {
+						loader: 'babel-loader',
+						options: {
+							cacheDirectory: true,
+						},
+					},
+				},
+				// Add this rule for CSS files
+				{
+					test: /\.css$/,
+					use: ['style-loader', 'css-loader'],
+				},
+			],
+		},
+	};
+
+	if (isLibraryBuild) {
+		return {
+			...commonConfig,
+			entry: './src/index.ts', // Entry point for the component library
+			output: {
+				path: path.resolve(__dirname, 'dist'),
+				filename: 'index.js',
+				library: {
+					name: 'MyUIComponents',
+					type: 'umd', // Universal Module Definition (CJS, AMD, global)
+				},
+				globalObject: 'this', // For UMD to work correctly in different environments
+				clean: true, // Clean the dist folder before each build
+				libraryTarget: 'umd', // Legacy, prefer 'library.type'
+				umdNamedDefine: true, // Give a name to the AMD module
+				auxiliaryComment: 'Button Component Library',
+			},
+			externals: {
+				// Don't bundle React and ReactDOM, expect them to be provided by the consumer
+				react: {
+					commonjs: 'react',
+					commonjs2: 'react',
+					amd: 'react',
+					root: 'React',
+				},
+				'react-dom': {
+					commonjs: 'react-dom',
+					commonjs2: 'react-dom',
+					amd: 'react-dom',
+					root: 'ReactDOM',
+				},
+				clsx: {
+					commonjs: 'clsx',
+					commonjs2: 'clsx',
+					amd: 'clsx',
+					root: 'clsx',
+				},
+				'react-hook-form': {
+					commonjs: 'react-hook-form',
+					commonjs2: 'react-hook-form',
+					amd: 'react-hook-form',
+					root: 'ReactHookForm',
+				},
+
+			},
+			optimization: {
+				minimize: true,
+			},
+		};
+	} else {
+		// Development server for the example app
+		return {
+			...commonConfig,
+			entry: './src/example/index.tsx', // Changed: Entry point for the example app
+			output: {
+				path: path.resolve(__dirname, 'dist'),
+				filename: 'bundle.js',
+			},
+			plugins: [
+				new HtmlWebpackPlugin({
+					template: path.resolve(__dirname, 'src/example/index.html'), // Changed: Path to your HTML template
+				}),
+			],
+			devServer: {
+				static: {
+					directory: path.join(__dirname, 'dist'), // The static directory should point to where webpack-dev-server serves files
+				},
+				compress: true,
+				port: 3000,
+				open: true,
+				hot: true,
+			},
+			devtool: 'eval-source-map',
+		};
+	}
+};