@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.js

@@ -0,0 +1,846 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.tsx
+var PisellDateTimeDisplay_stories_exports = {};
+__export(PisellDateTimeDisplay_stories_exports, {
+  AllLayouts: () => AllLayouts,
+  Basic: () => Basic,
+  CenterAlign: () => CenterAlign,
+  CustomContainerStyle: () => CustomContainerStyle,
+  CustomFieldOrder: () => CustomFieldOrder,
+  CustomFormatChinese: () => CustomFormatChinese,
+  CustomFormatISO: () => CustomFormatISO,
+  CustomFormatWithWeekday: () => CustomFormatWithWeekday,
+  CustomRefreshInterval: () => CustomRefreshInterval,
+  CustomTextStyle: () => CustomTextStyle,
+  DarkTheme: () => DarkTheme,
+  DateChinese: () => DateChinese,
+  DateCustomSeparator: () => DateCustomSeparator,
+  DateDMY: () => DateDMY,
+  DateFormats: () => DateFormats,
+  DateFullMonth: () => DateFullMonth,
+  DateFullYMD: () => DateFullYMD,
+  DateMDY: () => DateMDY,
+  DisableRefresh: () => DisableRefresh,
+  HorizontalLayout: () => HorizontalLayout,
+  InlineDateTimeWeekdayZh: () => InlineDateTimeWeekdayZh,
+  InlineLayout: () => InlineLayout,
+  InlineWithCustomSeparator: () => InlineWithCustomSeparator,
+  LocaleChinese: () => LocaleChinese,
+  LocaleEnglish: () => LocaleEnglish,
+  MultiLanguage: () => MultiLanguage,
+  OnlyDate: () => OnlyDate,
+  OnlyTime: () => OnlyTime,
+  RelativeDay: () => RelativeDay,
+  RelativeDayCustomLabels: () => RelativeDayCustomLabels,
+  RelativeDayEn: () => RelativeDayEn,
+  ScenarioDashboard: () => ScenarioDashboard,
+  ScenarioLargeScreen: () => ScenarioLargeScreen,
+  ScenarioStatusBar: () => ScenarioStatusBar,
+  ScenarioWelcome: () => ScenarioWelcome,
+  Time12Hour: () => Time12Hour,
+  Time12HourWithSeconds: () => Time12HourWithSeconds,
+  TimeFormats: () => TimeFormats,
+  TimeOnlyHour: () => TimeOnlyHour,
+  TimePadHour: () => TimePadHour,
+  TimeWithSeconds: () => TimeWithSeconds,
+  VerticalLayout: () => VerticalLayout,
+  WeekdayFormats: () => WeekdayFormats,
+  WeekdayFull: () => WeekdayFull,
+  WeekdayFullChinese: () => WeekdayFullChinese,
+  WeekdaySingleLetter: () => WeekdaySingleLetter,
+  default: () => PisellDateTimeDisplay_stories_default
+});
+module.exports = __toCommonJS(PisellDateTimeDisplay_stories_exports);
+var import_PisellDateTimeDisplay = __toESM(require("./PisellDateTimeDisplay"));
+var meta = {
+  title: "Data Display/PisellDateTimeDisplay",
+  component: import_PisellDateTimeDisplay.default,
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      control: "radio",
+      options: ["horizontal", "vertical", "inline"],
+      description: "布局方向"
+    },
+    textAlign: {
+      control: "radio",
+      options: ["left", "center", "right"],
+      description: "文本对齐方式"
+    },
+    locale: {
+      control: "select",
+      options: ["zh-cn", "en", "ja"],
+      description: "语言"
+    }
+  }
+};
+var PisellDateTimeDisplay_stories_default = meta;
+var Basic = {
+  args: {}
+};
+var HorizontalLayout = {
+  args: {
+    layout: "horizontal"
+  }
+};
+var VerticalLayout = {
+  args: {
+    layout: "vertical"
+  }
+};
+var InlineLayout = {
+  args: {
+    layout: "inline"
+  }
+};
+var InlineWithCustomSeparator = {
+  args: {
+    layout: "inline",
+    inlineSeparator: " | "
+  }
+};
+var InlineDateTimeWeekdayZh = {
+  args: {
+    layout: "inline",
+    locale: "zh-cn",
+    fields: {
+      fieldOrder: ["date", "time", "weekday"],
+      inlineSeparators: [" - ", " "]
+    },
+    dateFormat: {
+      order: "YMD",
+      showYear: true,
+      separator: "-",
+      showChineseUnit: false,
+      showRelativeDay: false
+    }
+  }
+};
+var Time12Hour = {
+  args: {
+    timeFormat: {
+      use12Hour: true
+    }
+  }
+};
+var TimeWithSeconds = {
+  args: {
+    timeFormat: {
+      showSeconds: true
+    }
+  }
+};
+var Time12HourWithSeconds = {
+  args: {
+    timeFormat: {
+      use12Hour: true,
+      showSeconds: true
+    }
+  }
+};
+var TimePadHour = {
+  args: {
+    timeFormat: {
+      use12Hour: true,
+      padHour: true
+    }
+  }
+};
+var TimeOnlyHour = {
+  args: {
+    timeFormat: {
+      onlyShowHour: true
+    }
+  }
+};
+var DateFullYMD = {
+  args: {
+    dateFormat: {
+      order: "YMD",
+      showYear: true,
+      showMonth: true,
+      showDay: true
+    }
+  }
+};
+var DateMDY = {
+  args: {
+    locale: "en",
+    dateFormat: {
+      order: "MDY",
+      showYear: true
+    }
+  }
+};
+var DateDMY = {
+  args: {
+    locale: "en",
+    dateFormat: {
+      order: "DMY",
+      showYear: true
+    }
+  }
+};
+var DateChinese = {
+  args: {
+    locale: "zh-cn",
+    dateFormat: {
+      showYear: true,
+      showChineseUnit: true
+    }
+  }
+};
+var RelativeDay = {
+  args: {
+    layout: "horizontal",
+    dateFormat: {
+      showRelativeDay: true,
+      showYear: true,
+      showChineseUnit: true
+    },
+    locale: "zh-cn"
+  }
+};
+var RelativeDayEn = {
+  args: {
+    layout: "horizontal",
+    dateFormat: {
+      showRelativeDay: true,
+      order: "MDY",
+      showYear: true
+    },
+    locale: "en"
+  }
+};
+var RelativeDayCustomLabels = {
+  args: {
+    layout: "horizontal",
+    dateFormat: {
+      showRelativeDay: true,
+      relativeDayLabels: {
+        today: "今日",
+        yesterday: "昨日",
+        tomorrow: "翌日"
+      },
+      showYear: true,
+      showChineseUnit: true
+    },
+    locale: "zh-cn"
+  }
+};
+var DateFullMonth = {
+  args: {
+    locale: "en",
+    dateFormat: {
+      order: "MDY",
+      showYear: true,
+      shortMonth: false
+    }
+  }
+};
+var DateCustomSeparator = {
+  args: {
+    dateFormat: {
+      showYear: true,
+      separator: "/"
+    }
+  }
+};
+var WeekdayFull = {
+  args: {
+    locale: "en",
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+var WeekdayFullChinese = {
+  args: {
+    locale: "zh-cn",
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+var WeekdaySingleLetter = {
+  args: {
+    weekdayFormat: {
+      singleLetter: true
+    }
+  }
+};
+var OnlyTime = {
+  args: {
+    fields: {
+      showTime: true,
+      showDate: false,
+      showWeekday: false
+    }
+  }
+};
+var OnlyDate = {
+  args: {
+    fields: {
+      showTime: false,
+      showDate: true,
+      showWeekday: false
+    },
+    dateFormat: {
+      showYear: true
+    }
+  }
+};
+var CustomFieldOrder = {
+  args: {
+    layout: "vertical",
+    fields: {
+      fieldOrder: ["weekday", "date", "time"]
+    }
+  }
+};
+var CustomFormatISO = {
+  args: {
+    customFormat: "YYYY-MM-DD HH:mm:ss"
+  }
+};
+var CustomFormatChinese = {
+  args: {
+    customFormat: "YYYY年MM月DD日 HH:mm"
+  }
+};
+var CustomFormatWithWeekday = {
+  args: {
+    locale: "en",
+    customFormat: "YYYY-MM-DD dddd HH:mm"
+  }
+};
+var LocaleChinese = {
+  args: {
+    locale: "zh-cn",
+    layout: "vertical",
+    dateFormat: {
+      showYear: true,
+      showChineseUnit: true
+    },
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+var LocaleEnglish = {
+  args: {
+    locale: "en",
+    layout: "vertical",
+    dateFormat: {
+      order: "MDY",
+      showYear: true,
+      shortMonth: false
+    },
+    weekdayFormat: {
+      full: true
+    }
+  }
+};
+var CustomContainerStyle = {
+  args: {
+    containerStyle: {
+      background: "#f5f5f5",
+      borderRadius: 8,
+      border: "1px solid #d9d9d9",
+      padding: 16
+    }
+  }
+};
+var CustomTextStyle = {
+  args: {
+    layout: "vertical",
+    timeStyle: {
+      fontSize: 32,
+      fontWeight: 700,
+      color: "#1890ff"
+    },
+    dateStyle: {
+      fontSize: 18,
+      fontWeight: 400,
+      color: "#666"
+    },
+    weekdayStyle: {
+      fontSize: 16,
+      fontWeight: 400,
+      color: "#999"
+    }
+  }
+};
+var CenterAlign = {
+  args: {
+    textAlign: "center",
+    containerStyle: {
+      border: "1px solid #d9d9d9",
+      padding: 16
+    }
+  }
+};
+var DisableRefresh = {
+  args: {
+    disableAutoRefresh: true
+  }
+};
+var CustomRefreshInterval = {
+  args: {
+    timeFormat: {
+      showSeconds: true
+    },
+    refreshInterval: 5e3
+  }
+};
+var ScenarioDashboard = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement("div", { style: { padding: 24, background: "#fff", borderRadius: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 20, fontWeight: 600, marginBottom: 16 } }, "欢迎回来！"), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        layout: "horizontal",
+        timeFormat: { showSeconds: false },
+        dateFormat: { showYear: true, showChineseUnit: true },
+        locale: "zh-cn",
+        timeStyle: { fontSize: 32, fontWeight: 700 },
+        dateStyle: { fontSize: 18, fontWeight: 400, color: "#666" },
+        weekdayStyle: { fontSize: 18, fontWeight: 400, color: "#666" }
+      }
+    ));
+  }
+};
+var ScenarioStatusBar = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "12px 24px",
+          background: "#001529",
+          color: "#fff"
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { fontSize: 18, fontWeight: 600 } }, "系统管理后台"),
+      /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          layout: "inline",
+          inlineSeparator: " | ",
+          timeFormat: { showSeconds: false },
+          dateFormat: { showYear: false },
+          locale: "zh-cn",
+          style: { color: "rgba(255, 255, 255, 0.8)" }
+        }
+      )
+    );
+  }
+};
+var ScenarioWelcome = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: 300,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          borderRadius: 8
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          layout: "vertical",
+          textAlign: "center",
+          timeFormat: { use12Hour: true, showSeconds: true },
+          dateFormat: { showYear: true },
+          locale: "en",
+          containerStyle: {
+            background: "rgba(255, 255, 255, 0.2)",
+            borderRadius: 16,
+            padding: 32
+          },
+          timeStyle: {
+            fontSize: 48,
+            fontWeight: 700,
+            color: "#fff"
+          },
+          dateStyle: {
+            fontSize: 20,
+            fontWeight: 400,
+            color: "rgba(255, 255, 255, 0.9)"
+          },
+          weekdayStyle: {
+            fontSize: 18,
+            fontWeight: 400,
+            color: "rgba(255, 255, 255, 0.8)"
+          }
+        }
+      )
+    );
+  }
+};
+var ScenarioLargeScreen = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: 200,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#000",
+          borderRadius: 8
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          layout: "inline",
+          inlineSeparator: " ",
+          timeFormat: { showSeconds: true },
+          dateFormat: { showYear: true },
+          customFormat: "YYYY-MM-DD HH:mm:ss",
+          containerStyle: {
+            padding: 24
+          },
+          style: {
+            fontSize: 48,
+            fontWeight: 700,
+            color: "#0f0",
+            fontFamily: "monospace"
+          }
+        }
+      )
+    );
+  }
+};
+var MultiLanguage = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+          gap: 16
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { border: "1px solid #d9d9d9", padding: 16, borderRadius: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 8, fontWeight: 600 } }, "中文"), /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          locale: "zh-cn",
+          dateFormat: { showYear: true, showChineseUnit: true },
+          weekdayFormat: { full: true }
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { style: { border: "1px solid #d9d9d9", padding: 16, borderRadius: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 8, fontWeight: 600 } }, "English"), /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          locale: "en",
+          dateFormat: { order: "MDY", showYear: true },
+          weekdayFormat: { full: true }
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { style: { border: "1px solid #d9d9d9", padding: 16, borderRadius: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 8, fontWeight: 600 } }, "日本語"), /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          locale: "ja",
+          dateFormat: { showYear: true },
+          weekdayFormat: { full: true }
+        }
+      ))
+    );
+  }
+};
+var TimeFormats = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "24小时制："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        fields: { showDate: false, showWeekday: false },
+        timeFormat: { use12Hour: false }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "12小时制："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        fields: { showDate: false, showWeekday: false },
+        timeFormat: { use12Hour: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "显示秒："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        fields: { showDate: false, showWeekday: false },
+        timeFormat: { showSeconds: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "12小时+秒+补零："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        fields: { showDate: false, showWeekday: false },
+        timeFormat: { use12Hour: true, showSeconds: true, padHour: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "只显示小时："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        fields: { showDate: false, showWeekday: false },
+        timeFormat: { onlyShowHour: true }
+      }
+    )));
+  }
+};
+var DateFormats = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "默认（不显示年）："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        fields: { showTime: false, showWeekday: false }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "Y-M-D："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        fields: { showTime: false, showWeekday: false },
+        dateFormat: { order: "YMD", showYear: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "M-D-Y（英文）："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "en",
+        fields: { showTime: false, showWeekday: false },
+        dateFormat: { order: "MDY", showYear: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "D-M-Y（英文）："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "en",
+        fields: { showTime: false, showWeekday: false },
+        dateFormat: { order: "DMY", showYear: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "中文带单位："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "zh-cn",
+        fields: { showTime: false, showWeekday: false },
+        dateFormat: { showYear: true, showChineseUnit: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "英文完整月份："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "en",
+        fields: { showTime: false, showWeekday: false },
+        dateFormat: { order: "MDY", showYear: true, shortMonth: false }
+      }
+    )));
+  }
+};
+var WeekdayFormats = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "英文默认："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "en",
+        fields: { showTime: false, showDate: false }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "英文完整："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "en",
+        fields: { showTime: false, showDate: false },
+        weekdayFormat: { full: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "英文单字母："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "en",
+        fields: { showTime: false, showDate: false },
+        weekdayFormat: { singleLetter: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "中文默认："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "zh-cn",
+        fields: { showTime: false, showDate: false }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "中文完整："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "zh-cn",
+        fields: { showTime: false, showDate: false },
+        weekdayFormat: { full: true }
+      }
+    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8, width: 150, display: "inline-block", color: "#666" } }, "中文单字："), /* @__PURE__ */ React.createElement(
+      import_PisellDateTimeDisplay.default,
+      {
+        locale: "zh-cn",
+        fields: { showTime: false, showDate: false },
+        weekdayFormat: { singleLetter: true }
+      }
+    )));
+  }
+};
+var AllLayouts = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+          gap: 24
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { border: "1px solid #d9d9d9", padding: 16, borderRadius: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 12, fontWeight: 600 } }, "水平布局（默认）"), /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          layout: "horizontal",
+          locale: "zh-cn",
+          dateFormat: { showChineseUnit: true }
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { style: { border: "1px solid #d9d9d9", padding: 16, borderRadius: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 12, fontWeight: 600 } }, "垂直布局"), /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          layout: "vertical",
+          locale: "zh-cn",
+          dateFormat: { showYear: true, showChineseUnit: true }
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { style: { border: "1px solid #d9d9d9", padding: 16, borderRadius: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 12, fontWeight: 600 } }, "单行布局"), /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          layout: "inline",
+          locale: "zh-cn",
+          dateFormat: { showYear: true, showChineseUnit: true }
+        }
+      ))
+    );
+  }
+};
+var DarkTheme = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          padding: 32,
+          background: "#1f1f1f",
+          borderRadius: 8,
+          minHeight: 200,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        import_PisellDateTimeDisplay.default,
+        {
+          layout: "vertical",
+          textAlign: "center",
+          timeFormat: { use12Hour: true, showSeconds: true },
+          dateFormat: { showYear: true },
+          containerStyle: {
+            background: "rgba(255, 255, 255, 0.1)",
+            borderRadius: 12,
+            padding: 24
+          },
+          timeStyle: {
+            fontSize: 36,
+            fontWeight: 700,
+            color: "#fff"
+          },
+          dateStyle: {
+            fontSize: 18,
+            fontWeight: 400,
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          weekdayStyle: {
+            fontSize: 16,
+            fontWeight: 400,
+            color: "rgba(255, 255, 255, 0.6)"
+          }
+        }
+      )
+    );
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AllLayouts,
+  Basic,
+  CenterAlign,
+  CustomContainerStyle,
+  CustomFieldOrder,
+  CustomFormatChinese,
+  CustomFormatISO,
+  CustomFormatWithWeekday,
+  CustomRefreshInterval,
+  CustomTextStyle,
+  DarkTheme,
+  DateChinese,
+  DateCustomSeparator,
+  DateDMY,
+  DateFormats,
+  DateFullMonth,
+  DateFullYMD,
+  DateMDY,
+  DisableRefresh,
+  HorizontalLayout,
+  InlineDateTimeWeekdayZh,
+  InlineLayout,
+  InlineWithCustomSeparator,
+  LocaleChinese,
+  LocaleEnglish,
+  MultiLanguage,
+  OnlyDate,
+  OnlyTime,
+  RelativeDay,
+  RelativeDayCustomLabels,
+  RelativeDayEn,
+  ScenarioDashboard,
+  ScenarioLargeScreen,
+  ScenarioStatusBar,
+  ScenarioWelcome,
+  Time12Hour,
+  Time12HourWithSeconds,
+  TimeFormats,
+  TimeOnlyHour,
+  TimePadHour,
+  TimeWithSeconds,
+  VerticalLayout,
+  WeekdayFormats,
+  WeekdayFull,
+  WeekdayFullChinese,
+  WeekdaySingleLetter
+});