@ktnpm_devops/react-component 0.4.0 → 0.5.0

package/dist/style.css

@@ -269,6 +269,62 @@
   /* Overlay */
   --overlay-color: rgba(0, 0, 0, 0.6);
 }
+.krc-root-xKc1n {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.krc-item-Omuyb {
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.krc-head-ePoJ- {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  width: 100%;
+  padding: var(--spacing-md) 1.125rem;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  text-align: left;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.krc-head-ePoJ-:hover {
+  background: var(--surface-alt);
+}
+
+.krc-head-ePoJ-:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-headContent-wymxG {
+  flex: 1;
+  min-width: 0;
+}
+
+.krc-chev-yPNHx {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+}
+
+.krc-isOpen-wp7DR .krc-chev-yPNHx {
+  transform: rotate(90deg);
+}
+
+.krc-body-pZ1Bk {
+  border-top: var(--border-width) solid var(--border-color);
+}
 .krc-root-la9-1 {
   display: flex;
   flex-direction: column;
@@ -1116,6 +1172,345 @@
   overflow-y: auto;
   padding: var(--spacing-lg);
 }
+.krc-root-zHJLB {
+  position: relative;
+  display: inline-block;
+}
+
+.krc-trigger-kRS4l {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5625rem;
+  border: var(--border-width) solid var(--border-color);
+  background: var(--surface-color);
+  color: var(--text-primary);
+  border-radius: var(--radius-md);
+  padding: 0.5625rem 0.9375rem;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: var(--shadow-subtle);
+}
+
+.krc-trigger-kRS4l:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-trigger-kRS4l:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-isOpen-4fsg7 {
+  border-color: var(--accent-color);
+  color: var(--accent-color-strong);
+  background: var(--accent-color-soft);
+}
+
+.krc-icon-YS-DJ {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  flex: none;
+  color: var(--accent-color);
+}
+
+.krc-arrow-wiq8b {
+  font-size: 0.58rem;
+  color: var(--text-muted);
+  margin-left: 0.125rem;
+}
+
+.krc-pop-boLzq {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  z-index: 9;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 0.75rem 0.875rem;
+  width: 15.5rem;
+  box-sizing: border-box;
+}
+
+.krc-head-FDhHr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.krc-nav-ZcR0Q {
+  border: none;
+  background: none;
+  color: var(--text-secondary);
+  font-size: var(--font-size-lg);
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+}
+
+.krc-nav-ZcR0Q:hover {
+  background: var(--surface-alt);
+  color: var(--accent-color-strong);
+}
+
+.krc-title-MqB3H {
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+  color: var(--text-secondary);
+}
+
+.krc-dows-EshP3 {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.125rem;
+  margin-bottom: 0.25rem;
+}
+
+.krc-dows-EshP3 span {
+  font-size: 0.6rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.krc-grid-xiUF- {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.125rem;
+}
+
+.krc-day-2W9yq {
+  font-size: var(--font-size-xs);
+  text-align: center;
+  padding: 0.375rem 0;
+  border-radius: 0.4375rem;
+  color: var(--text-muted);
+  border: none;
+  background: none;
+  font-family: inherit;
+}
+
+.krc-empty-Mf05c {
+  visibility: hidden;
+}
+
+.krc-off-tATo- {
+  color: var(--border-color);
+}
+
+.krc-able-bD-du {
+  color: var(--text-primary);
+  cursor: pointer;
+  font-weight: 600;
+  background: var(--accent-color-soft);
+}
+
+.krc-able-bD-du:hover {
+  background: var(--accent-color);
+  color: var(--accent-color-contrast);
+}
+
+.krc-able-bD-du:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-selected-Q1am3 {
+  background: var(--accent-color);
+  color: var(--accent-color-contrast);
+  font-weight: 700;
+}
+.krc-root-oXC0g {
+  position: relative;
+  display: inline-block;
+}
+
+.krc-trigger-2YW6R {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4375rem;
+  border: var(--border-width) solid var(--border-color);
+  background: var(--surface-color);
+  color: var(--text-secondary);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.875rem;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.krc-trigger-2YW6R:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-isActive-HSFfq {
+  border-color: var(--accent-color);
+  color: var(--accent-color-strong);
+  background: var(--accent-color-soft);
+}
+
+.krc-arrow-3UdEd {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+}
+
+.krc-arrowOpen-DvGky {
+  transform: rotate(180deg);
+}
+
+.krc-pop-IfyfL {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  z-index: 9;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 0.75rem 0.875rem;
+  min-width: 14.375rem;
+  max-height: 18.75rem;
+  overflow: auto;
+}
+
+.krc-chips-J7YEf {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  max-width: 21.25rem;
+}
+
+.krc-chip-HbgDr {
+  font-size: var(--font-size-xs);
+  padding: 0.1875rem 0.5625rem;
+  border-radius: var(--radius-pill);
+  border: var(--border-width) solid var(--border-color);
+  background: var(--surface-color);
+  color: var(--text-secondary);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.krc-chipOn--fbh8 {
+  background: var(--accent-color-soft);
+  border-color: var(--accent-color);
+  color: var(--accent-color-strong);
+  font-weight: 600;
+}
+
+.krc-clear--yvPZ {
+  display: block;
+  margin-top: 0.625rem;
+  border: none;
+  background: none;
+  color: var(--accent-color-strong);
+  font-family: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+}
+
+.krc-input--QI2U {
+  width: 100%;
+  box-sizing: border-box;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 0.4375rem 0.625rem;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  outline: none;
+}
+
+.krc-input--QI2U:focus {
+  border-color: var(--accent-color);
+}
+.krc-wrap-JRsc1 {
+  overflow: auto;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+}
+
+.krc-root-k9ocd {
+  border-collapse: collapse;
+  font-size: var(--font-size-xs);
+}
+
+.krc-root-k9ocd th,
+.krc-root-k9ocd td {
+  border: var(--border-width) solid var(--border-color-light);
+  padding: 0.3125rem 0.4375rem;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.krc-colh-Fi0Kr {
+  background: var(--surface-alt);
+  font-weight: 700;
+  color: var(--text-secondary);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.krc-rowh-bTG4G {
+  text-align: left;
+  font-weight: 600;
+  background: var(--surface-alt);
+  color: var(--text-primary);
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+
+.krc-corner-MNGJd {
+  background: var(--surface-alt);
+  text-align: left;
+  font-weight: 700;
+  color: var(--text-secondary);
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.krc-cell-i0lDG {
+  color: var(--text-primary);
+}
+
+.krc-cell-i0lDG.krc-bad-Hb1F3 {
+  background: var(--danger-color-soft);
+  color: var(--danger-color);
+  font-weight: 700;
+}
+
+.krc-cell-i0lDG.krc-ok-hx6Lc {
+  background: var(--success-color-soft);
+  color: var(--success-color);
+}
+
+.krc-clickable-Q8fZg {
+  cursor: pointer;
+}
+
+.krc-clickable-Q8fZg:hover {
+  outline: var(--border-width-md, 0.125rem) solid var(--accent-color);
+  outline-offset: calc(-1 * var(--border-width-md, 0.125rem));
+}
+
+.krc-clickable-Q8fZg:focus-visible {
+  outline: var(--border-width-md, 0.125rem) solid var(--accent-color);
+  outline-offset: calc(-1 * var(--border-width-md, 0.125rem));
+}
 .krc-root-bWynN {
   width: 100%;
   padding: 0.65rem 0.85rem;
@@ -1874,6 +2269,60 @@
   background: var(--warning-color-soft);
   border-bottom: var(--border-width) solid var(--border-color);
 }
+.krc-root-vqaJ6 {
+  display: inline-flex;
+  border: var(--border-width) solid var(--border-color);
+  background: var(--surface-color);
+  overflow: hidden;
+}
+
+.krc-pill-8z557 {
+  border-radius: var(--radius-pill);
+}
+
+.krc-square-g0EM3 {
+  border-radius: var(--radius-md);
+}
+
+.krc-segment-5-V31 {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.krc-segment-5-V31:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-segment-5-V31:not(.krc-isOn-7tAhJ):not(:disabled):hover {
+  background: var(--surface-alt);
+}
+
+.krc-segment-5-V31:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.krc-isOn-7tAhJ {
+  background: var(--accent-color);
+  color: var(--accent-color-contrast);
+}
+
+.krc-md-pA-Ck .krc-segment-5-V31 {
+  padding: 0.4375rem 1rem;
+  font-size: var(--font-size-sm);
+}
+
+.krc-sm-VMB3s .krc-segment-5-V31 {
+  padding: 0.3125rem 0.75rem;
+  font-size: var(--font-size-xs);
+}
 .krc-root-jba0x {
   width: 100%;
   padding: 0.65rem 0.85rem;
@@ -2210,6 +2659,15 @@
   color: var(--text-secondary);
   font-size: var(--font-size-xs);
 }
+.krc-root--zhUO {
+  display: inline-block;
+  vertical-align: middle;
+  color: var(--text-muted);
+}
+
+.krc-dot-uJk1V {
+  fill: var(--danger-color);
+}
 .krc-root-U8B4Y {
   background: var(--surface-color);
   border: var(--border-width) solid var(--border-color);
@@ -2358,6 +2816,61 @@
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
 }
+.krc-root-ZwPiG {
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.125rem;
+}
+
+.krc-label-WG17f {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.025rem;
+}
+
+.krc-value-S9SSu {
+  font-size: var(--font-size-4xl);
+  font-weight: 800;
+  color: var(--text-primary);
+  margin-top: 0.375rem;
+  line-height: 1;
+}
+
+.krc-value-S9SSu.krc-red-stqO- {
+  color: var(--danger-color);
+}
+
+.krc-value-S9SSu.krc-amber-lZgsd {
+  color: var(--warning-color);
+}
+
+.krc-sub-0xfrv {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  margin-top: 0.375rem;
+}
+
+.krc-isClick-CnKvM {
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.krc-isClick-CnKvM:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-isClick-CnKvM:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-isActive-YLCNL {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 var(--border-width-md, 0.125rem) var(--accent-color-soft);
+}
 .krc-container-cpDoQ {
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-lg);
@@ -2561,3 +3074,51 @@
   opacity: 0.6;
   cursor: not-allowed;
 }
+.krc-region-4A3qS {
+  position: fixed;
+  bottom: 1.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+  z-index: 99999;
+  pointer-events: none;
+}
+
+.krc-toast-VuzaK {
+  pointer-events: auto;
+  max-width: 92vw;
+  padding: 0.75rem 1.375rem;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  box-shadow: var(--shadow-lg);
+  cursor: pointer;
+  /* Inverse of the surface so contrast holds in both light and dark themes. */
+  background: var(--text-primary);
+  color: var(--surface-color);
+  animation: krc-toast-in-TA6-r 0.25s ease;
+}
+
+.krc-success-oDnTy {
+  background: var(--success-color);
+  color: var(--accent-color-contrast);
+}
+
+.krc-error-dSTQn {
+  background: var(--danger-color);
+  color: var(--accent-color-contrast);
+}
+
+@keyframes krc-toast-in-TA6-r {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/styles.cjs

@@ -0,0 +1 @@
+import './style.css';

package/dist/styles.mjs

@@ -0,0 +1 @@
+import './style.css';

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@ktnpm_devops/react-component",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Kenmei Technologies React Component Library",
   "type": "module",
   "license": "MIT",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./dist/styles.mjs",
+    "./dist/styles.cjs"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -24,7 +26,10 @@
     "./tokens": "./dist/tokens/index.css",
     "./tokens/orbit": "./dist/tokens/orbit-tokens.css",
     "./tokens/semantic": "./dist/tokens/semantic-tokens.css",
-    "./styles": "./dist/style.css"
+    "./styles": {
+      "import": "./dist/styles.mjs",
+      "require": "./dist/styles.cjs"
+    }
   },
   "files": [
     "dist",