@nakashim/tp-custom 0.1.6

package/dist/styles/tp-custom.css

@@ -0,0 +1,329 @@
+/*
+ * Tweakpane customization layer
+ * - Keep pane sizing outside component code
+ * - Override values with CSS variables per host/container
+ */
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("./assets/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations");
+  font-weight: 100 800;
+  font-style: normal;
+  font-display: swap;
+}
+:root {
+  --tp-base-background-color: rgba(60, 60, 60, 1);
+  --tp-button-background-color: rgba(158, 158, 158, 1);
+  --tp-button-background-color-active: hsla(0, 0%, 70%, 1);
+  --tp-button-background-color-focus: hsla(0, 0%, 70%, 1);
+  --tp-button-background-color-hover: hsla(0, 0%, 70%, 1);
+  --tp-button-foreground-color: rgba(0, 0, 0, 0.7);
+  --tp-container-background-color: transparent;
+  --tp-container-background-color-active: rgba(79, 79, 79, 1);
+  --tp-container-background-color-focus: rgba(79, 79, 79, 1);
+  --tp-container-background-color-hover: rgba(79, 79, 79, 1);
+  --tp-container-foreground-color: rgba(255, 255, 255, 0.5);
+  --tp-groove-foreground-color: rgba(255, 255, 255, 0.03);
+  --tp-input-background-color: rgba(255, 255, 255, 0.1);
+  --tp-input-background-color-active: rgba(255, 255, 255, 0.15);
+  --tp-input-background-color-focus: rgba(255, 255, 255, 0.15);
+  --tp-input-background-color-hover: rgba(255, 255, 255, 0.15);
+  --tp-input-foreground-color: rgba(255, 255, 255, 0.5);
+  --tp-label-foreground-color: rgba(255, 255, 255, 0.5);
+  --tp-monitor-background-color: rgba(0, 0, 0, 0.1);
+  --tp-monitor-foreground-color: rgba(255, 255, 255, 0.5);
+}
+
+.tp-custom {
+  --tp-c-base-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --tp-c-base-line-height: 14px !important;
+  --tp-c-base-border-radius: 2px;
+  --tp-c-base-max-width: 100%;
+  --tp-c-base-box-shadow: none;
+  --tp-c-base-gap: 4px;
+  --tp-c-container-unit-size: 20px;
+  --tp-c-container-vertical-gap: 4px;
+  --tp-c-container-horizontal-gap: 4px;
+  --tp-c-container-padding-inline: 6px;
+  --tp-c-base-background-color: var(--tp-base-background-color);
+  --tp-c-base-label-flex-basis: 29.41%;
+  --tp-c-base-value-flex-basis: calc(100% - var(--tp-c-base-label-flex-basis));
+  --tp-c-tab-background-color-hover: rgba(255, 255, 255, 0.1);
+  --tp-c-button-background-color-upper: rgba(206, 206, 206, 1);
+  --tp-c-textarea-padding-block: 3px;
+  --tp-container-unit-spacing: var(--tp-c-container-vertical-gap);
+  background: rgb(57, 57, 57) url("./assets/images/bg-grid.png") top left/20px 20px;
+  padding: var(--tp-c-base-gap);
+}
+.tp-custom * {
+  line-height: var(--tp-c-base-line-height);
+}
+.tp-custom button {
+  border-radius: var(--tp-c-base-border-radius);
+  outline: none;
+}
+.tp-custom .tp-rotv {
+  background-color: transparent;
+  font-family: var(--tp-c-base-font-family);
+  line-height: var(--tp-c-base-line-height);
+  border-radius: var(--tp-c-base-border-radius);
+  width: 100%;
+  max-width: var(--tp-c-base-max-width);
+  box-shadow: var(--tp-c-base-box-shadow);
+}
+.tp-custom .tp-rotv_b,
+.tp-custom .tp-fldv_b {
+  height: calc(var(--tp-c-container-unit-size) + var(--tp-c-container-vertical-gap) * 2);
+}
+.tp-custom .tp-rotv_b {
+  background-color: var(--tp-c-base-background-color);
+  border-radius: var(--tp-c-base-border-radius);
+}
+.tp-custom .tp-rotv_t {
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+.tp-custom .tp-fldv {
+  background-color: var(--tp-c-base-background-color);
+  border-radius: var(--tp-c-base-border-radius);
+}
+.tp-custom .tp-fldv .tp-fldv .tp-fldv_b {
+  height: calc(var(--tp-c-container-unit-size));
+}
+.tp-custom .tp-fldv .tp-fldv .tp-fldv_t {
+  font-size: 11px;
+  margin-bottom: 0;
+}
+.tp-custom .tp-fldv .tp-fldv .tp-fldv {
+  background-color: var(--tp-monitor-background-color);
+}
+.tp-custom .tp-rotv.tp-rotv-not .tp-rotv_c > .tp-fldv.tp-v-fst {
+  margin-top: 0;
+}
+.tp-custom .tp-fldv:not(.tp-v-fst) {
+  margin-top: var(--tp-c-base-gap) !important;
+}
+.tp-custom .tp-rotv.tp-rotv-not .tp-rotv_c {
+  padding-top: 0;
+}
+.tp-custom .tp-fldv_t {
+  font-size: 12px;
+  padding-left: 0;
+  margin-bottom: 1px;
+}
+.tp-custom .tp-fldv_b {
+  padding-left: var(--tp-c-container-padding-inline);
+}
+.tp-custom .tp-tabv_t {
+  padding-bottom: 1px;
+}
+.tp-custom .tp-tabv_t:before {
+  height: 1px;
+  background-color: var(--tp-c-tab-background-color-hover);
+}
+.tp-custom .tp-tbiv.tp-tbiv-sel > .tp-tbiv_b {
+  background-color: var(--tp-c-tab-background-color-hover);
+}
+.tp-custom .tp-tbiv_t {
+  height: calc(var(--cnt-usz) + 3px);
+  line-height: calc(var(--cnt-usz) + 3px);
+}
+.tp-custom .tp-tbiv_b {
+  overflow: hidden;
+}
+.tp-custom .tp-tbiv_b:before {
+  display: none;
+}
+.tp-custom .tp-tbiv_b:active, .tp-custom .tp-tbiv_b:hover {
+  background-color: var(--tp-c-tab-background-color-hover);
+}
+.tp-custom .tp-tbiv_b,
+.tp-custom .tp-fldv_b,
+.tp-custom .tp-rotv.tp-rotv-not .tp-rotv_c > .tp-fldv.tp-v-fst > .tp-fldv_b {
+  border-top-left-radius: var(--tp-c-base-border-radius);
+  border-top-right-radius: var(--tp-c-base-border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.tp-custom .tp-tbpv_c > .tp-cntv + .tp-fldv > .tp-fldv_b,
+.tp-custom .tp-fldv_c > .tp-cntv + .tp-fldv > .tp-fldv_b,
+.tp-custom .tp-tbpv_c > .tp-fldv > .tp-fldv_b,
+.tp-custom .tp-fldv_c > .tp-fldv > .tp-fldv_b {
+  border-radius: var(--tp-c-base-border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.tp-custom .tp-rotv_c > .tp-fldv.tp-v-lst .tp-fldv_b,
+.tp-custom .tp-tbpv_c > .tp-fldv.tp-v-lst .tp-fldv_b,
+.tp-custom .tp-fldv_c > .tp-fldv.tp-v-lst .tp-fldv_b {
+  border-bottom-right-radius: 0;
+}
+.tp-custom .tp-rotv_c .tp-fldv.tp-v-vlst:not(.tp-fldv-expanded) > .tp-fldv_b,
+.tp-custom .tp-rotv_c > .tp-fldv.tp-v-lst:not(.tp-fldv-expanded) > .tp-fldv_b {
+  border-bottom-left-radius: var(--tp-c-base-border-radius);
+  border-bottom-right-radius: var(--tp-c-base-border-radius);
+}
+.tp-custom .tp-rotv_c .tp-fldv:not(.tp-fldv-expanded) > .tp-fldv_b,
+.tp-custom .tp-rotv_c > .tp-fldv:not(.tp-fldv-expanded) > .tp-fldv_b {
+  border-bottom-left-radius: var(--tp-c-base-border-radius);
+  border-bottom-right-radius: var(--tp-c-base-border-radius);
+}
+.tp-custom .tp-txtv_i,
+.tp-custom .tp-btnv_b {
+  padding-inline: var(--tp-c-container-padding-inline);
+}
+.tp-custom .tp-lstv_s {
+  padding-left: var(--tp-c-container-padding-inline);
+}
+.tp-custom .tp-txtv_k:before {
+  opacity: 0.25;
+}
+.tp-custom .tp-lstv_m:before {
+  background-color: var(--tp-button-foreground-color);
+  content: "";
+  bottom: 1px;
+  height: 16px;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 16px;
+  object-fit: cover;
+  -webkit-mask: url("./assets/icons/triangle-down-16.svg") no-repeat center/contain;
+  mask: url("./assets/icons/triangle-down-16.svg") no-repeat center/contain;
+}
+.tp-custom .tp-lstv_m svg {
+  display: none;
+}
+.tp-custom .tp-rotv_m,
+.tp-custom .tp-fldv_m {
+  background: none;
+  background-color: #FFF;
+  border-radius: 0;
+  bottom: 1px;
+  height: 16px;
+  right: 8px;
+  width: 16px;
+  transform: rotate(-180deg);
+  object-fit: cover;
+  -webkit-mask: url("./assets/icons/triangle-down-16.svg") no-repeat center/contain;
+  mask: url("./assets/icons/triangle-down-16.svg") no-repeat center/contain;
+}
+.tp-custom .tp-rotv.tp-rotv-expanded .tp-rotv_m,
+.tp-custom .tp-fldv.tp-fldv-expanded > .tp-fldv_b > .tp-fldv_m {
+  transform: none;
+}
+.tp-custom .tp-tabv_i,
+.tp-custom .tp-fldv_i {
+  display: none;
+}
+.tp-custom .tp-tbpv_c,
+.tp-custom .tp-fldv_c {
+  padding-left: 0;
+}
+.tp-custom .tp-tbpv_c > .tp-cntv,
+.tp-custom .tp-fldv_c > .tp-cntv {
+  margin-left: 0;
+}
+.tp-custom .tp-lblv {
+  padding-inline: var(--tp-c-container-padding-inline);
+}
+.tp-custom .tp-lblv_l {
+  flex-basis: var(--tp-c-base-label-flex-basis);
+  padding-inline: 0 var(--tp-c-container-padding-inline);
+  padding-block: var(--tp-c-textarea-padding-block);
+}
+.tp-custom .tp-lblv_v {
+  flex-basis: var(--tp-c-base-value-flex-basis);
+  width: auto;
+}
+.tp-custom .tp-ckbv_i:checked + .tp-ckbv_w:before {
+  opacity: 1;
+}
+.tp-custom .tp-ckbv_w {
+  margin-left: auto;
+}
+.tp-custom .tp-ckbv_w:before {
+  background-color: var(--tp-c-button-background-color-upper);
+  content: "";
+  bottom: 0;
+  height: 16px;
+  left: 2px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  width: 16px;
+  opacity: 0;
+  object-fit: cover;
+  -webkit-mask: url("./assets/icons/check-16.svg") no-repeat center/contain;
+  mask: url("./assets/icons/check-16.svg") no-repeat center/contain;
+}
+.tp-custom .tp-ckbv_w svg {
+  display: none;
+}
+.tp-custom .tp-sldv_t:before {
+  margin-inline: -6px;
+}
+.tp-custom .tp-sldv_t .tp-sldv_k:before {
+  opacity: 0.6;
+  left: -6px;
+  width: calc(100% + 6px);
+}
+.tp-custom .tp-sldtxtv_t {
+  margin-left: calc(var(--tp-c-container-horizontal-gap) + 6px);
+}
+.tp-custom .tp-sldtxtv_s {
+  flex: 1.55;
+}
+.tp-custom .tp-colv_t,
+.tp-custom .tp-pndtxtv_a + .tp-pndtxtv_a,
+.tp-custom .tp-coltxtv_c + .tp-pndtxtv_a,
+.tp-custom .tp-pndtxtv_a + .tp-coltxtv_c,
+.tp-custom .tp-coltxtv_c + .tp-coltxtv_c {
+  margin-left: var(--tp-c-container-horizontal-gap);
+}
+.tp-custom .tp-p2dv_b {
+  margin-right: var(--tp-c-container-horizontal-gap);
+}
+.tp-custom .tp-sprv_r {
+  height: 1px;
+  border-radius: 0.5px;
+  margin-block: var(--tp-c-container-vertical-gap);
+  margin-inline: var(--tp-c-container-padding-inline);
+  width: calc(100% - var(--tp-c-container-padding-inline) * 2);
+}
+.tp-custom .tp-dynlistblade_btn {
+  color: transparent;
+  background-color: transparent;
+  opacity: 0.2;
+}
+.tp-custom .tp-dynlistblade_btn:before {
+  background-color: #FFF;
+  content: "";
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask: url("./assets/icons/x-12.svg") no-repeat center/contain;
+  mask: url("./assets/icons/x-12.svg") no-repeat center/contain;
+  transform: scale(0.8);
+}
+.tp-custom .tp-dynlistblade_btn:hover {
+  color: transparent;
+  background-color: transparent;
+  opacity: 0.5;
+}
+.tp-custom .tp-dynlistblade_btn:disabled {
+  color: transparent;
+  background-color: transparent;
+  opacity: 0.1;
+  display: none;
+}
+.tp-custom .tp-dynlistblade_btn.tp-dynlistblade_btn-up:before {
+  -webkit-mask: url("./assets/icons/chevron-up-12.svg") no-repeat center/contain;
+  mask: url("./assets/icons/chevron-up-12.svg") no-repeat center/contain;
+}
+.tp-custom .tp-dynlistblade_btn.tp-dynlistblade_btn-down:before {
+  -webkit-mask: url("./assets/icons/chevron-down-12.svg") no-repeat center/contain;
+  mask: url("./assets/icons/chevron-down-12.svg") no-repeat center/contain;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@nakashim/tp-custom",
+  "private": false,
+  "version": "0.1.6",
+  "type": "module",
+  "main": "./dist/lib/index.js",
+  "module": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
+    },
+    "./styles": "./dist/styles/tp-custom.css"
+  },
+  "files": [
+    "dist/lib",
+    "dist/styles"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "tsc -p tsconfig.lib.json",
+    "build:styles": "node ./scripts/build-styles.mjs",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typecheck:stories": "tsc -p tsconfig.storybook.json --noEmit",
+    "test": "vitest run",
+    "prepack": "npm run build:lib && npm run build:styles"
+  },
+  "peerDependencies": {
+    "@tweakpane/core": "^2.0.5",
+    "tweakpane": "^4.0.5"
+  },
+  "dependencies": {
+    "preact": "^10.27.2"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/preact-vite": "^8.6.18",
+    "@storybook/test": "^8.6.14",
+    "@tweakpane/core": "^2.0.5",
+    "@types/node": "^24.10.1",
+    "jsdom": "^27.2.0",
+    "sass": "^1.97.3",
+    "tweakpane": "^4.0.5",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.0"
+  }
+}