@tsiky/components-r19 1.1.0 → 1.2.0

package/src/components/AnnouncementPanel/ListBox/CounterListBox.tsx

@@ -1,106 +1,106 @@
-import React from 'react';
-import './CounterListBox.css';
-
-export type CounterListBoxProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  title?: string;
-  titleColor?: string;
-  data?: (string | [string, string])[];
-  badgeColor?: string;
-  badgeColors?: { [index: number]: string };
-  badgePadding?: string;
-  badgeWidth?: string;
-  itemBg?: string;
-  lineClasses?: { [index: number]: string };
-  colGap?: string;
-};
-
-export const CounterListBox: React.FC<CounterListBoxProps> = ({
-  className = '',
-  style = {},
-  title,
-  titleColor,
-  data = [],
-  badgeColor = '#0ea5e9',
-  badgeColors = {},
-  badgePadding = '8px 16px',
-  badgeWidth,
-  itemBg,
-  lineClasses = {},
-  colGap = '1rem',
-}) => {
-  const has2D = data.some((r) => Array.isArray(r));
-  const gridStyle: React.CSSProperties | undefined = colGap
-    ? ({ ['--col-gap' as any]: colGap } as React.CSSProperties)
-    : undefined;
-
-  return (
-    <div className={`clb-root ${className}`} style={{ ...style }}>
-      {title && (
-        <div className='clb-title' style={titleColor ? { color: titleColor } : undefined}>
-          {title}
-        </div>
-      )}
-
-      <div className='clb-grid' style={gridStyle}>
-        {(data as (string | [string, string])[]).map((row, idx) => {
-          const lineClass = lineClasses[idx] || '';
-
-          if (Array.isArray(row)) {
-            const [left, right] = row;
-            const currentBadgeColor = badgeColors[idx] || badgeColor;
-
-            return (
-              <div
-                key={idx}
-                className={`clb-row ${lineClass}`}
-                style={{ background: itemBg ?? undefined }}
-              >
-                <div className='clb-badge-col'>
-                  <div
-                    className='counter-badge'
-                    style={{
-                      background: currentBadgeColor,
-                      padding: badgePadding,
-                      width: badgeWidth,
-                      minWidth: badgeWidth,
-                    }}
-                  >
-                    {left}
-                  </div>
-                </div>
-
-                <div className='clb-text'>{right}</div>
-              </div>
-            );
-          }
-
-          if (!has2D) {
-            return (
-              <div
-                key={idx}
-                className={`clb-fullrow ${lineClass}`}
-                style={{ background: itemBg ?? undefined }}
-              >
-                <span>{row as string}</span>
-              </div>
-            );
-          }
-
-          // 1D in mixed mode: empty badge + text
-          return (
-            <div
-              key={idx}
-              className={`clb-row ${lineClass}`}
-              style={{ background: itemBg ?? undefined }}
-            >
-              <div className='clb-badge-col clb-empty-badge' />
-              <div className='clb-text'>{row as string}</div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
+import React from 'react';
+import './CounterListBox.css';
+
+export type CounterListBoxProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+  titleColor?: string;
+  data?: (string | [string, string])[];
+  badgeColor?: string;
+  badgeColors?: { [index: number]: string };
+  badgePadding?: string;
+  badgeWidth?: string;
+  itemBg?: string;
+  lineClasses?: { [index: number]: string };
+  colGap?: string;
+};
+
+export const CounterListBox: React.FC<CounterListBoxProps> = ({
+  className = '',
+  style = {},
+  title,
+  titleColor,
+  data = [],
+  badgeColor = '#0ea5e9',
+  badgeColors = {},
+  badgePadding = '8px 16px',
+  badgeWidth,
+  itemBg,
+  lineClasses = {},
+  colGap = '1rem',
+}) => {
+  const has2D = data.some((r) => Array.isArray(r));
+  const gridStyle: React.CSSProperties | undefined = colGap
+    ? ({ ['--col-gap' as any]: colGap } as React.CSSProperties)
+    : undefined;
+
+  return (
+    <div className={`clb-root ${className}`} style={{ ...style }}>
+      {title && (
+        <div className='clb-title' style={titleColor ? { color: titleColor } : undefined}>
+          {title}
+        </div>
+      )}
+
+      <div className='clb-grid' style={gridStyle}>
+        {(data as (string | [string, string])[]).map((row, idx) => {
+          const lineClass = lineClasses[idx] || '';
+
+          if (Array.isArray(row)) {
+            const [left, right] = row;
+            const currentBadgeColor = badgeColors[idx] || badgeColor;
+
+            return (
+              <div
+                key={idx}
+                className={`clb-row ${lineClass}`}
+                style={{ background: itemBg ?? undefined }}
+              >
+                <div className='clb-badge-col'>
+                  <div
+                    className='counter-badge'
+                    style={{
+                      background: currentBadgeColor,
+                      padding: badgePadding,
+                      width: badgeWidth,
+                      minWidth: badgeWidth,
+                    }}
+                  >
+                    {left}
+                  </div>
+                </div>
+
+                <div className='clb-text'>{right}</div>
+              </div>
+            );
+          }
+
+          if (!has2D) {
+            return (
+              <div
+                key={idx}
+                className={`clb-fullrow ${lineClass}`}
+                style={{ background: itemBg ?? undefined }}
+              >
+                <span>{row as string}</span>
+              </div>
+            );
+          }
+
+          // 1D in mixed mode: empty badge + text
+          return (
+            <div
+              key={idx}
+              className={`clb-row ${lineClass}`}
+              style={{ background: itemBg ?? undefined }}
+            >
+              <div className='clb-badge-col clb-empty-badge' />
+              <div className='clb-text'>{row as string}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/AnnouncementPanel/ListBox/SimpleListBox.css

@@ -1,57 +1,57 @@
-.slb-root {
-  padding: 0.125rem;
-}
-.slb-title {
-  font-weight: var(--font-bold);
-  padding: 0.0625rem 0.125rem;
-  border-radius: 0.03125rem;
-  margin-bottom: 0.0625rem;
-}
-.slb-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.03125rem;
-}
-.slb-item {
-  padding: 0.0625rem 0.125rem;
-}
-
-.slb-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0.03125rem;
-}
-
-.slb-row {
-  display: grid;
-  grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr);
-  gap: var(--col-gap, 0.125rem);
-  align-items: center;
-  padding: 0;
-}
-
-.slb-grid-left {
-  padding: 0.0625rem 0.125rem;
-  min-width: 0;
-  justify-self: start;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-}
-
-.slb-grid-right {
-  padding: 0.0625rem 0.125rem;
-  min-width: 0;
-  justify-self: start;
-}
-
-.slb-empty {
-  color: #666;
-  padding: 0.125rem 0.125rem;
-  text-align: center;
-}
-.slb-empty-cell {
-  opacity: 0.5;
-}
+.slb-root {
+  padding: 0.125rem;
+}
+.slb-title {
+  font-weight: var(--font-bold);
+  padding: 0.0625rem 0.125rem;
+  border-radius: 0.03125rem;
+  margin-bottom: 0.0625rem;
+}
+.slb-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.03125rem;
+}
+.slb-item {
+  padding: 0.0625rem 0.125rem;
+}
+
+.slb-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.03125rem;
+}
+
+.slb-row {
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr);
+  gap: var(--col-gap, 0.125rem);
+  align-items: center;
+  padding: 0;
+}
+
+.slb-grid-left {
+  padding: 0.0625rem 0.125rem;
+  min-width: 0;
+  justify-self: start;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.slb-grid-right {
+  padding: 0.0625rem 0.125rem;
+  min-width: 0;
+  justify-self: start;
+}
+
+.slb-empty {
+  color: #666;
+  padding: 0.125rem 0.125rem;
+  text-align: center;
+}
+.slb-empty-cell {
+  opacity: 0.5;
+}