@x-plat/design-system 0.5.6 → 0.5.8

package/dist/index.css

@@ -2244,6 +2244,7 @@
 .lib-xplat-datepicker.range {
   display: flex;
   flex-direction: column;
+  container-type: inline-size;
 }
 .lib-xplat-datepicker .datepicker-range-tabs {
   display: none;
@@ -2286,7 +2287,7 @@
   color: var(--semantic-text-muted);
   margin-bottom: var(--spacing-space-2);
 }
-@media (max-width: 600px) {
+@container (max-width: 600px) {
   .lib-xplat-datepicker .datepicker-range-tabs {
     display: flex;
   }
@@ -2303,6 +2304,18 @@
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
 }
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger input {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger {
+  cursor: not-allowed;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger input {
+  cursor: not-allowed;
+}
 .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
   position: absolute;
   top: 100%;
@@ -4079,6 +4092,9 @@
   max-height: 100%;
   object-fit: contain;
   vertical-align: middle;
+}
+.lib-xplat-video.has-controls > video,
+.lib-xplat-video:has(> .center-play) > video {
   cursor: pointer;
 }
 .lib-xplat-video > .center-play {
@@ -4241,6 +4257,9 @@
   appearance: none;
   background: transparent;
   cursor: pointer;
+  margin: 0;
+  padding: 0;
+  align-self: center;
 }
 .lib-xplat-video .seekbar:focus,
 .lib-xplat-video .volume-slider:focus {
@@ -4252,6 +4271,7 @@
   appearance: none;
   width: 12px;
   height: 12px;
+  margin-top: -4px;
   border-radius: 50%;
   background: #fff;
   border: none;

package/dist/index.js

@@ -6117,23 +6117,30 @@ var CardTab_default = CardTab;
 // src/components/Chart/Chart.tsx
 import React5 from "react";
 import { jsx as jsx305, jsxs as jsxs196 } from "react/jsx-runtime";
-var LINE_BAR_PALETTES = [
-  ["var(--primitive-red-100)", "var(--primitive-red-200)", "var(--primitive-red-300)", "var(--primitive-red-400)", "var(--primitive-red-500)", "var(--primitive-red-600)"],
-  ["var(--primitive-orange-100)", "var(--primitive-orange-200)", "var(--primitive-orange-300)", "var(--primitive-orange-400)", "var(--primitive-orange-500)", "var(--primitive-orange-600)"],
-  ["var(--primitive-yellow-100)", "var(--primitive-yellow-200)", "var(--primitive-yellow-300)", "var(--primitive-yellow-400)", "var(--primitive-yellow-500)", "var(--primitive-yellow-600)"],
-  ["var(--primitive-green-100)", "var(--primitive-green-200)", "var(--primitive-green-300)", "var(--primitive-green-400)", "var(--primitive-green-500)", "var(--primitive-green-600)"],
-  ["var(--primitive-blue-100)", "var(--primitive-blue-200)", "var(--primitive-blue-300)", "var(--primitive-blue-400)", "var(--primitive-blue-500)", "var(--primitive-blue-600)"],
-  ["var(--primitive-light-blue-100)", "var(--primitive-light-blue-200)", "var(--primitive-light-blue-300)", "var(--primitive-light-blue-400)", "var(--primitive-light-blue-500)", "var(--primitive-light-blue-600)"],
-  ["var(--primitive-purple-100)", "var(--primitive-purple-200)", "var(--primitive-purple-300)", "var(--primitive-purple-400)", "var(--primitive-purple-500)", "var(--primitive-purple-600)"],
-  ["var(--primitive-pink-100)", "var(--primitive-pink-200)", "var(--primitive-pink-300)", "var(--primitive-pink-400)", "var(--primitive-pink-500)", "var(--primitive-pink-600)"]
-];
-var PIE_PALETTES = [
-  ["var(--primitive-orange-300)", "var(--primitive-red-300)", "var(--primitive-yellow-300)", "var(--primitive-green-300)", "var(--primitive-blue-300)", "var(--primitive-light-blue-300)"],
-  ["var(--primitive-orange-400)", "var(--primitive-red-400)", "var(--primitive-yellow-400)", "var(--primitive-green-400)", "var(--primitive-blue-400)", "var(--primitive-light-blue-400)"],
-  ["var(--primitive-orange-500)", "var(--primitive-red-500)", "var(--primitive-yellow-500)", "var(--primitive-green-500)", "var(--primitive-blue-500)", "var(--primitive-light-blue-500)"]
-];
-var getPalette = (palettes, index) => {
-  return palettes[index % palettes.length];
+var CATEGORICAL_COUNT2 = 8;
+var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
+  const n = i + 1;
+  return [
+    `var(--semantic-categorical-${n}-bg)`,
+    `var(--semantic-categorical-${n}-area)`,
+    `var(--semantic-categorical-${n}-fill)`,
+    `var(--semantic-categorical-${n}-text)`
+  ];
+});
+var PIE_COLORS = Array.from(
+  { length: CATEGORICAL_COUNT2 },
+  (_, i) => `var(--semantic-categorical-${i + 1}-fill)`
+);
+var hashString = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash);
+};
+var getPalette = (palettes, index, key) => {
+  const offset = key ? hashString(key) : 0;
+  return palettes[(index + offset) % palettes.length];
 };
 var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
 var useChartTooltip = (enabled) => {
@@ -6203,8 +6210,8 @@ var LineChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
       return /* @__PURE__ */ jsx305("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
-      const palette = getPalette(LINE_BAR_PALETTES, di);
-      const color = palette[4];
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
       const points = seriesPoints[di];
       return /* @__PURE__ */ jsxs196("g", { children: [
         /* @__PURE__ */ jsx305(
@@ -6269,8 +6276,8 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
     }),
     labels.map((label, i) => /* @__PURE__ */ jsx305("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
     entries.map(([key], di) => {
-      const palette = getPalette(LINE_BAR_PALETTES, di);
-      const color = palette[4];
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
       return bars[di].map((b, i) => /* @__PURE__ */ jsx305(
         "rect",
         {
@@ -6293,13 +6300,15 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
 BarChart.displayName = "BarChart";
 var PieDonutChart = React5.memo(
   ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
-    const values = React5.useMemo(() => Object.entries(data).flatMap(([, v]) => v), [data]);
+    const entries = React5.useMemo(() => Object.entries(data), [data]);
+    const values = React5.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
     const total = React5.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
     const cx = 150;
     const cy = 150;
     const r2 = 120;
     const innerR = isDoughnut ? 60 : 0;
-    const palette = getPalette(PIE_PALETTES, 0);
+    const firstKey = entries[0]?.[0] ?? "";
+    const colorOffset = hashString(firstKey);
     const sliceData = React5.useMemo(() => {
       let angle0 = -Math.PI / 2;
       return values.map((v, i) => {
@@ -6334,7 +6343,7 @@ var PieDonutChart = React5.memo(
         "path",
         {
           d: s.d,
-          fill: palette[i % palette.length],
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
           className: "chart-slice",
           onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
           onMouseMove: onMove,
@@ -6829,13 +6838,14 @@ var SingleDatePicker_default = SingleDatePicker;
 // src/components/DatePicker/InputDatePicker/index.tsx
 import { jsx as jsx312, jsxs as jsxs201 } from "react/jsx-runtime";
 var formatDate = (date) => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
   const [isOpen, setIsOpen] = React10.useState(false);
   const containerRef = React10.useRef(null);
   const calendarRef = React10.useRef(null);
@@ -6845,27 +6855,42 @@ var InputDatePicker = (props) => {
     onChange?.(date);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs201("div", { className: "lib-xplat-datepicker input-datepicker", ref: containerRef, children: [
-    /* @__PURE__ */ jsx312("div", { onClick: () => !disabled && setIsOpen(!isOpen), children: /* @__PURE__ */ jsx312(
-      Input_default,
-      {
-        value: formatDate(value),
-        suffix: /* @__PURE__ */ jsx312(CalenderIcon_default, {}),
-        disabled,
-        readOnly: true
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ jsx312("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx312(
-      SingleDatePicker_default,
-      {
-        value,
-        onChange: handleSelect,
-        minDate,
-        maxDate,
-        locale
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs201(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx312(
+          "div",
+          {
+            className: "input-datepicker-trigger",
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            children: /* @__PURE__ */ jsx312(
+              Input_default,
+              {
+                value: formatDate(value),
+                placeholder,
+                suffix: /* @__PURE__ */ jsx312(CalenderIcon_default, {}),
+                disabled,
+                readOnly: true
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx312("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx312(
+          SingleDatePicker_default,
+          {
+            value: value ?? /* @__PURE__ */ new Date(),
+            onChange: handleSelect,
+            minDate,
+            maxDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
@@ -9083,7 +9108,7 @@ var Video = React38.forwardRef((props, ref) => {
             onTimeUpdate: handleTimeUpdate,
             onVolumeChange: handleVolumeChange,
             onRateChange: handleRateChange,
-            onClick: togglePlay,
+            onClick: showControls || showCenterPlay ? togglePlay : void 0,
             ...rest,
             children
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",