npm - @linyao.tw/ui - Versions diffs - 0.0.0-snapshot.07df57 → 0.0.0-snapshot.77a04d - Mend

@linyao.tw/ui 0.0.0-snapshot.07df57 → 0.0.0-snapshot.77a04d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/README.md CHANGED Viewed

@@ -18,6 +18,16 @@ pnpm add @linyao.tw/ui @phosphor-icons/react
 import "@linyao.tw/ui/styles.css";
 ```
+> 安裝後，完整文件就在 `node_modules/@linyao.tw/ui/docs/`——元件範例、設計變數、主題與組合規則都在裡面。詳見下方[文件](#文件)。
+`styles.css` 不含任何遠端請求。需要品牌字型時另外匯入可選入口，或自行代管字型並覆寫 `--font-family-*`：
+```tsx
+import "@linyao.tw/ui/fonts.css";
+```
+`styles.css` 除了設計變數與元件樣式，也包含一層文件基準樣式：`box-sizing`、`margin`／`padding` 歸零、`body` 的背景與文字色、表單控制項的 `font: inherit` 與 `::selection`。這層放在 `@layer lyds.base`，未分層的應用程式樣式一律勝過它，因此覆寫不需要提高選擇器權重。
 ## 使用
 ```tsx
@@ -36,6 +46,61 @@ export function ProfileForm() {
 }
 ```
+## React Server Components
+套件內每個模組都帶有 `"use client"`，因此可以直接從 Server Component 匯入，元件會在用戶端邊界渲染，不需要額外包一層：
+```tsx
+// app/page.tsx — Server Component，不需要 "use client"
+import { Button, Card, CardBody } from "@linyao.tw/ui";
+export default function Page() {
+	return (
+		<Card>
+			<CardBody>
+				<Button>儲存</Button>
+			</CardBody>
+		</Card>
+	);
+}
+```
+**圖示是唯一的例外，而且會讓建置失敗。** `@phosphor-icons/react` 沒有自己的用戶端邊界，`/dist/csr/*` 會在模組頂層呼叫 `createContext`，在 Server Component 中匯入會得到：
+```text
+TypeError: (0 , f.createContext) is not a function
+```
+Server Component 請改用同一套圖示的 `/dist/ssr/*` 進入點；`/dist/csr/*` 留給已標記 `"use client"` 的檔案：
+```tsx
+// Server Component
+import { FloppyDiskIcon } from "@phosphor-icons/react/dist/ssr/FloppyDisk";
+// "use client" 的檔案
+import { FloppyDiskIcon } from "@phosphor-icons/react/dist/csr/FloppyDisk";
+```
+兩者的 props 相同，只有 `ssr` 版本不讀取 `IconContext`。
+## 在地化
+元件的預設字串（關閉、上一頁、清除選取…）與日期時間元件的地區設定由同一個 provider 決定。沒有 provider 時使用繁體中文，日期沿用瀏覽器地區：
+```tsx
+import { LinyaoProvider } from "@linyao.tw/ui";
+<LinyaoProvider locale="en-US">
+	<App />
+</LinyaoProvider>;
+```
+`locale` 以 `zh` 開頭時選用繁體中文套件，其餘選用英文；`messages` 可合併覆寫個別字串。`ComponentMessages` 含有函式成員，因此 provider 要放在標記 `"use client"` 的元件內。書寫方向不由 provider 控制，`dir` 請和 `data-lyds-theme` 一起設在 `<html>`。
+## 與 Tailwind 一起使用
+`styles.css` 只有基準重置放在 `@layer lyds.base`，元件樣式刻意維持未分層，讓使用端不必靠權重就能覆寫基準層。代價是未分層樣式一律勝過分層樣式：Tailwind v4 的 utilities 位於 `@layer utilities`，因此 `class="p-2"` 不會蓋過 `.lyds-button` 的 padding。請改用元件屬性、覆寫語意變數，或把應用程式樣式也維持未分層。
 ## 主題
 以 `data-lyds-theme` 切換亮色或深色主題：
@@ -44,17 +109,32 @@ export function ProfileForm() {
 <html data-lyds-theme="dark"></html>
 ```
-自訂主題時應覆寫語意角色，不要直接修改元件顏色：
+自訂主題時應覆寫語意角色，不要直接修改元件顏色。換品牌色時，這一組是完整的清單——只改 `--control-primary` 會漏掉 Slider 與選取狀態，因為它們讀的是另一個角色：
 ```css
 .product-theme {
-	--control-primary: var(--palette-signal-600);
-	--control-primary-hover: var(--palette-signal-700);
+	/* 主要操作：Button、送出、主要 CTA */
+	--control-primary: oklch(48% 0.17 32);
+	--control-primary-hover: oklch(42% 0.17 32);
+	--control-primary-pressed: oklch(36% 0.17 32);
 	--control-on-primary: var(--palette-warm-25);
+	/* 選取與填充：Slider 軌道、Switch 開啟、選取中的項目。
+	   與 --control-primary 視覺相近但語意獨立，漏掉這兩個是換色時最常見的遺漏。 */
+	--control-selected: oklch(48% 0.17 32);
+	--control-selected-muted: oklch(92% 0.04 32);
+	/* 強調表面與其上的文字 */
+	--background-accent: oklch(48% 0.17 32);
+	--text-on-accent: var(--palette-warm-25);
+	/* 焦點環：需與相鄰表面達到 3:1 */
 	--focus-ring: oklch(48% 0.17 32);
 }
 ```
+改色後請自行驗證對比。本套件對自己的預設值有自動檢查，但無法檢查你覆寫後的值。
 ## 設計邊界
 - 元件不包含 API 呼叫、路由、分析、儲存或業務驗證。
@@ -80,6 +160,22 @@ Linyao Design System 以 WCAG 2.2 AA 為目標，提供鍵盤操作、焦點樣
 ## 文件
-完整的安裝、Storybook、開發、元件、設計變數、主題與發佈規範請參閱 [專案 README](https://github.com/linyao-tw/ui#readme) 與 [文件目錄](https://github.com/linyao-tw/ui/tree/main/docs)。
+**完整文件隨套件一起安裝**，不需要連網或回到 GitHub。安裝後可直接讀取：
+```text
+node_modules/@linyao.tw/ui/docs/
+```
+| 想知道什麼                                              | 讀這個檔案                  |
+| ------------------------------------------------------- | --------------------------- |
+| 每個元件的用途、props、組合方式與可執行範例             | `docs/components.md`        |
+| 主題切換、SSR、自訂品牌色、覆寫語意角色                 | `docs/theming.md`           |
+| 設計變數完整清單：色彩、字體、間距、尺寸、動態效果      | `docs/tokens.md`            |
+| 組合模型、浮層堆疊、用戶端邊界、CSS 分層、公開 API 邊界 | `docs/architecture.md`      |
+| 元件結構、色彩與互動的設計依據                          | `docs/design-principles.md` |
+公開匯出項目與型別的權威來源是 `dist/index.d.ts`；上述文件說明的是「為什麼這樣設計」與「怎麼組合」。
+變更記錄見 [CHANGELOG.md](https://github.com/linyao-tw/ui/blob/main/CHANGELOG.md)。線上版本另見 [專案 README](https://github.com/linyao-tw/ui#readme) 與 [文件目錄](https://github.com/linyao-tw/ui/tree/main/docs)。
 授權：Apache-2.0。套件與專案包含相同的完整授權檔。

package/dist/components/date-time/calendar.js CHANGED Viewed

@@ -1,4 +1,6 @@
-import { LocaleBoundary as e, cx as t } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
+import { LocaleBoundary as t } from "./shared.js";
 import { CaretLeftIcon as n } from "@phosphor-icons/react/dist/csr/CaretLeft";
 import { CaretRightIcon as r } from "@phosphor-icons/react/dist/csr/CaretRight";
 import { forwardRef as i } from "react";
@@ -68,22 +70,22 @@ function y({ weekdayStyle: e = "short" }) {
 		}) })]
 	});
 }
-function b({ weekdayStyle: e, showMonthYearPickers: n, disabled: r, className: i }) {
+function b({ weekdayStyle: t, showMonthYearPickers: n, disabled: r, className: i }) {
 	return /* @__PURE__ */ _("div", {
-		className: t("lyds-calendar-panel", i),
+		className: e("lyds-calendar-panel", i),
 		children: [/* @__PURE__ */ g(v, {
 			showMonthYearPickers: n,
 			disabled: r
-		}), /* @__PURE__ */ g(y, { weekdayStyle: e })]
+		}), /* @__PURE__ */ g(y, { weekdayStyle: t })]
 	});
 }
 function x({ locale: n, className: r, disabled: i, readOnly: a, invalid: s, onValueChange: c, weekdayStyle: l, ...u }, d) {
-	return /* @__PURE__ */ g(e, {
+	return /* @__PURE__ */ g(t, {
 		locale: n,
 		children: /* @__PURE__ */ g(o, {
 			...u,
 			ref: d,
-			className: t("lyds-calendar", r),
+			className: e("lyds-calendar", r),
 			...i === void 0 ? {} : { isDisabled: i },
 			...a === void 0 ? {} : { isReadOnly: a },
 			...s === void 0 ? {} : { isInvalid: s },

package/dist/components/date-time/calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.js","names":[],"sources":["../../../src/components/date-time/calendar.tsx"],"sourcesContent":["import type { CalendarDate } from \"@internationalized/date\";\nimport { CaretLeftIcon } from \"@phosphor-icons/react/dist/csr/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/dist/csr/CaretRight\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { Button } from \"react-aria-components/Button\";\nimport {\n\tCalendar as AriaCalendar,\n\tCalendarCell,\n\tCalendarGrid,\n\tCalendarGridBody,\n\tCalendarGridHeader,\n\tCalendarHeaderCell,\n\tCalendarHeading,\n\tCalendarMonthPicker,\n\tCalendarYearPicker,\n\ttype CalendarProps as AriaCalendarProps\n} from \"react-aria-components/Calendar\";\nimport type { CalendarBehaviorProps, DateValue as LydsDateValue } from \"./date-types\";\nimport { LocaleBoundary, cx } from \"./shared\";\n\nexport type { FirstDayOfWeek } from \"./date-types\";\nexport type WeekdayStyle = \"narrow\" \| \"short\" \| \"long\";\n\nexport interface CalendarProps<T extends LydsDateValue = CalendarDate> extends CalendarBehaviorProps<T> {\n\tlocale?: string \| undefined;\n\tclassName?: string;\n\tweekdayStyle?: WeekdayStyle \| undefined;\n}\n\ntype CalendarForwardedKeys = Exclude<keyof CalendarBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"readOnly\">;\ntype CalendarUnexpectedForwardedKeys = Exclude<CalendarForwardedKeys, keyof AriaCalendarProps<LydsDateValue>>;\ntype CalendarPropContract = CalendarUnexpectedForwardedKeys extends never ? true : never;\nconst calendarPropContract: CalendarPropContract = true;\nvoid calendarPropContract;\n\nexport interface CalendarPanelProps {\n\tweekdayStyle?: WeekdayStyle \| undefined;\n\tshowMonthYearPickers?: boolean \| undefined;\n\tdisabled?: boolean \| undefined;\n\tclassName?: string \| undefined;\n}\n\nexport function CalendarNavigation({ showMonthYearPickers = true, disabled }: Pick<CalendarPanelProps, \"showMonthYearPickers\" \| \"disabled\">) {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"lyds-calendar-navigation\">\n\t\t\t\t<Button slot=\"previous\" className=\"lyds-calendar-navigation-button\">\n\t\t\t\t\t<CaretLeftIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"bold\" />\n\t\t\t\t</Button>\n\t\t\t\t<CalendarHeading className=\"lyds-calendar-heading\" />\n\t\t\t\t<Button slot=\"next\" className=\"lyds-calendar-navigation-button\">\n\t\t\t\t\t<CaretRightIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"bold\" />\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t{showMonthYearPickers ? (\n\t\t\t\t<div className=\"lyds-calendar-period-pickers\">\n\t\t\t\t\t<CalendarMonthPicker>\n\t\t\t\t\t\t{({ items, value, onChange, ...ariaProps }) => (\n\t\t\t\t\t\t\t<select {...ariaProps} className=\"lyds-calendar-period-select\" value={String(value)} disabled={disabled} onChange={event => onChange(Number(event.currentTarget.value))}>\n\t\t\t\t\t\t\t\t{items.map(item => (\n\t\t\t\t\t\t\t\t\t<option key={item.id} value={item.id}>\n\t\t\t\t\t\t\t\t\t\t{item.formatted}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</CalendarMonthPicker>\n\t\t\t\t\t<CalendarYearPicker>\n\t\t\t\t\t\t{({ items, value, onChange, ...ariaProps }) => (\n\t\t\t\t\t\t\t<select {...ariaProps} className=\"lyds-calendar-period-select\" value={String(value)} disabled={disabled} onChange={event => onChange(Number(event.currentTarget.value))}>\n\t\t\t\t\t\t\t\t{items.map(item => (\n\t\t\t\t\t\t\t\t\t<option key={item.id} value={item.id}>\n\t\t\t\t\t\t\t\t\t\t{item.formatted}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</CalendarYearPicker>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</>\n\t);\n}\n\nexport function CalendarGridView({ weekdayStyle = \"short\" }: Pick<CalendarPanelProps, \"weekdayStyle\">) {\n\treturn (\n\t\t<CalendarGrid weekdayStyle={weekdayStyle} className=\"lyds-calendar-grid\">\n\t\t\t<CalendarGridHeader>{day => <CalendarHeaderCell className=\"lyds-calendar-weekday\">{day}</CalendarHeaderCell>}</CalendarGridHeader>\n\t\t\t<CalendarGridBody>{date => <CalendarCell date={date} className=\"lyds-calendar-cell\" />}</CalendarGridBody>\n\t\t</CalendarGrid>\n\t);\n}\n\nexport function CalendarPanel({ weekdayStyle, showMonthYearPickers, disabled, className }: CalendarPanelProps) {\n\treturn (\n\t\t<div className={cx(\"lyds-calendar-panel\", className)}>\n\t\t\t<CalendarNavigation showMonthYearPickers={showMonthYearPickers} disabled={disabled} />\n\t\t\t<CalendarGridView weekdayStyle={weekdayStyle} />\n\t\t</div>\n\t);\n}\n\nfunction CalendarImpl<T extends LydsDateValue>(\n\t{ locale, className, disabled, readOnly, invalid, onValueChange, weekdayStyle, ...calendarProps }: CalendarProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>\n) {\n\tconst ariaCalendarProps = calendarProps as unknown as Omit<AriaCalendarProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isReadOnly\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaCalendar\n\t\t\t\t{...ariaCalendarProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-calendar\", className)}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaCalendarProps<T>[\"onChange\"]> })}\n\t\t\t>\n\t\t\t\t<CalendarPanel weekdayStyle={weekdayStyle} disabled={disabled} />\n\t\t\t</AriaCalendar>\n\t\t</LocaleBoundary>\n\t);\n}\n\nexport const Calendar = forwardRef(CalendarImpl) as <T extends LydsDateValue = CalendarDate>(props: CalendarProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":"~~;;;;;;;;~~AA0CA,SAAgB,EAAmB,EAAE,0BAAuB,IAAM,eAA2E;CAC5I,OACC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACC,kBAAC,GAAD;IAAQ,MAAK;IAAW,WAAU;IACjC,UAAA,kBAAC,GAAD;KAAe,eAAY;KAAO,WAAU;KAAkB,QAAO;IAAQ,CAAA;GACtE,CAAA;GACR,kBAAC,GAAD,EAAiB,WAAU,wBAAyB,CAAA;GACpD,kBAAC,GAAD;IAAQ,MAAK;IAAO,WAAU;IAC7B,UAAA,kBAAC,GAAD;KAAgB,eAAY;KAAO,WAAU;KAAkB,QAAO;IAAQ,CAAA;GACvE,CAAA;EACJ;CACJ,CAAA,GAAA,IACA,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,kBAAC,GAAD,EAAA,WACG,EAAE,UAAO,UAAO,aAAU,GAAG,QAC9B,kBAAC,UAAD;GAAQ,GAAI;GAAW,WAAU;GAA8B,OAAO,OAAO,CAAK;GAAa;GAAU,WAAU,MAAS,EAAS,OAAO,EAAM,cAAc,KAAK,CAAC;GACpK,UAAA,EAAM,KAAI,MACV,kBAAC,UAAD;IAAsB,OAAO,EAAK;IAChC,UAAA,EAAK;GACC,GAFK,EAAK,EAEV,CACR;EACM,CAAA,EAEW,CAAA,GACrB,kBAAC,GAAD,EAAA,WACG,EAAE,UAAO,UAAO,aAAU,GAAG,QAC9B,kBAAC,UAAD;GAAQ,GAAI;GAAW,WAAU;GAA8B,OAAO,OAAO,CAAK;GAAa;GAAU,WAAU,MAAS,EAAS,OAAO,EAAM,cAAc,KAAK,CAAC;GACpK,UAAA,EAAM,KAAI,MACV,kBAAC,UAAD;IAAsB,OAAO,EAAK;IAChC,UAAA,EAAK;GACC,GAFK,EAAK,EAEV,CACR;EACM,CAAA,EAEU,CAAA,CAChB;CACF,CAAA,IAAA,IACH,EAAA,CAAA;AAEJ;AAEA,SAAgB,EAAiB,EAAE,kBAAe,WAAqD;CACtG,OACC,kBAAC,GAAD;EAA4B;EAAc,WAAU;EAApD,UAAA,CACC,kBAAC,GAAD,EAAA,WAAqB,MAAO,kBAAC,GAAD;GAAoB,WAAU;GAAyB,UAAA;EAAwB,CAAA,EAAsB,CAAA,GACjI,kBAAC,GAAD,EAAA,WAAmB,MAAQ,kBAAC,GAAD;GAAoB;GAAM,WAAU;EAAsB,CAAA,EAAoB,CAAA,CAC5F;;AAEhB;AAEA,SAAgB,EAAc,EAAE,iBAAc,yBAAsB,aAAU,gBAAiC;CAC9G,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB,CAAS;EAAnD,UAAA,CACC,kBAAC,GAAD;GAA0C;GAAgC;EAAW,CAAA,GACrF,kBAAC,GAAD,EAAgC,gBAAe,CAAA,CAC3C;;AAEP;AAEA,SAAS,EACR,EAAE,WAAQ,cAAW,aAAU,aAAU,YAAS,kBAAe,iBAAc,GAAG,KAClF,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,iBAAiB,CAAS;GACxC,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA0E;GAE9H,UAAA,kBAAC,GAAD;IAA6B;IAAwB;GAAW,CAAA;EACnD,CAAA;CACC,CAAA;AAElB;AAEA,IAAa,IAAW,EAAW,CAAY"}
1	+ {"version":3,"file":"calendar.js","names":[],"sources":["../../../src/components/date-time/calendar.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport type { CalendarDate } from \"@internationalized/date\";\nimport { CaretLeftIcon } from \"@phosphor-icons/react/dist/csr/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/dist/csr/CaretRight\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { Button } from \"react-aria-components/Button\";\nimport {\n\tCalendar as AriaCalendar,\n\tCalendarCell,\n\tCalendarGrid,\n\tCalendarGridBody,\n\tCalendarGridHeader,\n\tCalendarHeaderCell,\n\tCalendarHeading,\n\tCalendarMonthPicker,\n\tCalendarYearPicker,\n\ttype CalendarProps as AriaCalendarProps\n} from \"react-aria-components/Calendar\";\nimport type { CalendarBehaviorProps, DateValue as LydsDateValue } from \"./date-types\";\nimport { LocaleBoundary } from \"./shared\";\nexport type { FirstDayOfWeek } from \"./date-types\";\nexport type WeekdayStyle = \"narrow\" \| \"short\" \| \"long\";\n\nexport interface CalendarProps<T extends LydsDateValue = CalendarDate> extends CalendarBehaviorProps<T> {\n\tlocale?: string \| undefined;\n\tclassName?: string;\n\tweekdayStyle?: WeekdayStyle \| undefined;\n}\n\ntype CalendarForwardedKeys = Exclude<keyof CalendarBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"readOnly\">;\ntype CalendarUnexpectedForwardedKeys = Exclude<CalendarForwardedKeys, keyof AriaCalendarProps<LydsDateValue>>;\ntype CalendarPropContract = CalendarUnexpectedForwardedKeys extends never ? true : never;\nconst calendarPropContract: CalendarPropContract = true;\nvoid calendarPropContract;\n\nexport interface CalendarPanelProps {\n\tweekdayStyle?: WeekdayStyle \| undefined;\n\tshowMonthYearPickers?: boolean \| undefined;\n\tdisabled?: boolean \| undefined;\n\tclassName?: string \| undefined;\n}\n\nexport function CalendarNavigation({ showMonthYearPickers = true, disabled }: Pick<CalendarPanelProps, \"showMonthYearPickers\" \| \"disabled\">) {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"lyds-calendar-navigation\">\n\t\t\t\t<Button slot=\"previous\" className=\"lyds-calendar-navigation-button\">\n\t\t\t\t\t<CaretLeftIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"bold\" />\n\t\t\t\t</Button>\n\t\t\t\t<CalendarHeading className=\"lyds-calendar-heading\" />\n\t\t\t\t<Button slot=\"next\" className=\"lyds-calendar-navigation-button\">\n\t\t\t\t\t<CaretRightIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"bold\" />\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t{showMonthYearPickers ? (\n\t\t\t\t<div className=\"lyds-calendar-period-pickers\">\n\t\t\t\t\t<CalendarMonthPicker>\n\t\t\t\t\t\t{({ items, value, onChange, ...ariaProps }) => (\n\t\t\t\t\t\t\t<select {...ariaProps} className=\"lyds-calendar-period-select\" value={String(value)} disabled={disabled} onChange={event => onChange(Number(event.currentTarget.value))}>\n\t\t\t\t\t\t\t\t{items.map(item => (\n\t\t\t\t\t\t\t\t\t<option key={item.id} value={item.id}>\n\t\t\t\t\t\t\t\t\t\t{item.formatted}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</CalendarMonthPicker>\n\t\t\t\t\t<CalendarYearPicker>\n\t\t\t\t\t\t{({ items, value, onChange, ...ariaProps }) => (\n\t\t\t\t\t\t\t<select {...ariaProps} className=\"lyds-calendar-period-select\" value={String(value)} disabled={disabled} onChange={event => onChange(Number(event.currentTarget.value))}>\n\t\t\t\t\t\t\t\t{items.map(item => (\n\t\t\t\t\t\t\t\t\t<option key={item.id} value={item.id}>\n\t\t\t\t\t\t\t\t\t\t{item.formatted}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</CalendarYearPicker>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</>\n\t);\n}\n\nexport function CalendarGridView({ weekdayStyle = \"short\" }: Pick<CalendarPanelProps, \"weekdayStyle\">) {\n\treturn (\n\t\t<CalendarGrid weekdayStyle={weekdayStyle} className=\"lyds-calendar-grid\">\n\t\t\t<CalendarGridHeader>{day => <CalendarHeaderCell className=\"lyds-calendar-weekday\">{day}</CalendarHeaderCell>}</CalendarGridHeader>\n\t\t\t<CalendarGridBody>{date => <CalendarCell date={date} className=\"lyds-calendar-cell\" />}</CalendarGridBody>\n\t\t</CalendarGrid>\n\t);\n}\n\nexport function CalendarPanel({ weekdayStyle, showMonthYearPickers, disabled, className }: CalendarPanelProps) {\n\treturn (\n\t\t<div className={cx(\"lyds-calendar-panel\", className)}>\n\t\t\t<CalendarNavigation showMonthYearPickers={showMonthYearPickers} disabled={disabled} />\n\t\t\t<CalendarGridView weekdayStyle={weekdayStyle} />\n\t\t</div>\n\t);\n}\n\nfunction CalendarImpl<T extends LydsDateValue>(\n\t{ locale, className, disabled, readOnly, invalid, onValueChange, weekdayStyle, ...calendarProps }: CalendarProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>\n) {\n\tconst ariaCalendarProps = calendarProps as unknown as Omit<AriaCalendarProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isReadOnly\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaCalendar\n\t\t\t\t{...ariaCalendarProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-calendar\", className)}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaCalendarProps<T>[\"onChange\"]> })}\n\t\t\t>\n\t\t\t\t<CalendarPanel weekdayStyle={weekdayStyle} disabled={disabled} />\n\t\t\t</AriaCalendar>\n\t\t</LocaleBoundary>\n\t);\n}\n\nexport const Calendar = forwardRef(CalendarImpl) as <T extends LydsDateValue = CalendarDate>(props: CalendarProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":";;;;;;;;;;AA0CA,SAAgB,EAAmB,EAAE,0BAAuB,IAAM,eAA2E;CAC5I,OACC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACC,kBAAC,GAAD;IAAQ,MAAK;IAAW,WAAU;IACjC,UAAA,kBAAC,GAAD;KAAe,eAAY;KAAO,WAAU;KAAkB,QAAO;IAAQ,CAAA;GACtE,CAAA;GACR,kBAAC,GAAD,EAAiB,WAAU,wBAAyB,CAAA;GACpD,kBAAC,GAAD;IAAQ,MAAK;IAAO,WAAU;IAC7B,UAAA,kBAAC,GAAD;KAAgB,eAAY;KAAO,WAAU;KAAkB,QAAO;IAAQ,CAAA;GACvE,CAAA;EACJ;CACJ,CAAA,GAAA,IACA,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,kBAAC,GAAD,EAAA,WACG,EAAE,UAAO,UAAO,aAAU,GAAG,QAC9B,kBAAC,UAAD;GAAQ,GAAI;GAAW,WAAU;GAA8B,OAAO,OAAO,CAAK;GAAa;GAAU,WAAU,MAAS,EAAS,OAAO,EAAM,cAAc,KAAK,CAAC;GACpK,UAAA,EAAM,KAAI,MACV,kBAAC,UAAD;IAAsB,OAAO,EAAK;IAChC,UAAA,EAAK;GACC,GAFK,EAAK,EAEV,CACR;EACM,CAAA,EAEW,CAAA,GACrB,kBAAC,GAAD,EAAA,WACG,EAAE,UAAO,UAAO,aAAU,GAAG,QAC9B,kBAAC,UAAD;GAAQ,GAAI;GAAW,WAAU;GAA8B,OAAO,OAAO,CAAK;GAAa;GAAU,WAAU,MAAS,EAAS,OAAO,EAAM,cAAc,KAAK,CAAC;GACpK,UAAA,EAAM,KAAI,MACV,kBAAC,UAAD;IAAsB,OAAO,EAAK;IAChC,UAAA,EAAK;GACC,GAFK,EAAK,EAEV,CACR;EACM,CAAA,EAEU,CAAA,CAChB;CACF,CAAA,IAAA,IACH,EAAA,CAAA;AAEJ;AAEA,SAAgB,EAAiB,EAAE,kBAAe,WAAqD;CACtG,OACC,kBAAC,GAAD;EAA4B;EAAc,WAAU;EAApD,UAAA,CACC,kBAAC,GAAD,EAAA,WAAqB,MAAO,kBAAC,GAAD;GAAoB,WAAU;GAAyB,UAAA;EAAwB,CAAA,EAAsB,CAAA,GACjI,kBAAC,GAAD,EAAA,WAAmB,MAAQ,kBAAC,GAAD;GAAoB;GAAM,WAAU;EAAsB,CAAA,EAAoB,CAAA,CAC5F;;AAEhB;AAEA,SAAgB,EAAc,EAAE,iBAAc,yBAAsB,aAAU,gBAAiC;CAC9G,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB,CAAS;EAAnD,UAAA,CACC,kBAAC,GAAD;GAA0C;GAAgC;EAAW,CAAA,GACrF,kBAAC,GAAD,EAAgC,gBAAe,CAAA,CAC3C;;AAEP;AAEA,SAAS,EACR,EAAE,WAAQ,cAAW,aAAU,aAAU,YAAS,kBAAe,iBAAc,GAAG,KAClF,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,iBAAiB,CAAS;GACxC,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA0E;GAE9H,UAAA,kBAAC,GAAD;IAA6B;IAAwB;GAAW,CAAA;EACnD,CAAA;CACC,CAAA;AAElB;AAEA,IAAa,IAAW,EAAW,CAAY"}

package/dist/components/date-time/date-field.js CHANGED Viewed

@@ -1,12 +1,14 @@
-import { FieldLabel as e, FieldMessages as t, LocaleBoundary as n, cx as r } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
+import { FieldLabel as t, FieldMessages as n, LocaleBoundary as r } from "./shared.js";
 import { forwardRef as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { DateField as s, DateInput as c, DateSegment as l } from "react-aria-components/DateField";
 //#region src/components/date-time/date-field.tsx
-function u({ className: e, slot: t }) {
+function u({ className: t, slot: n }) {
 	return /* @__PURE__ */ a(c, {
-		className: r("lyds-date-input", e),
-		...t ? { slot: t } : {},
+		className: e("lyds-date-input", t),
+		...n ? { slot: n } : {},
 		children: (e) => /* @__PURE__ */ a(l, {
 			segment: e,
 			className: "lyds-date-segment"
@@ -14,12 +16,12 @@ function u({ className: e, slot: t }) {
 	});
 }
 function d({ label: i, description: c, error: l, locale: d, size: f = "md", className: p, disabled: m, readOnly: h, required: g, invalid: _, onValueChange: v, ...y }, b) {
-	return /* @__PURE__ */ a(n, {
+	return /* @__PURE__ */ a(r, {
 		locale: d,
 		children: /* @__PURE__ */ o(s, {
 			...y,
 			ref: b,
-			className: r("lyds-date-field", p),
+			className: e("lyds-date-field", p),
 			"data-size": f,
 			...m === void 0 ? {} : { isDisabled: m },
 			...h === void 0 ? {} : { isReadOnly: h },
@@ -27,9 +29,9 @@ function d({ label: i, description: c, error: l, locale: d, size: f = "md", clas
 			..._ === void 0 ? {} : { isInvalid: _ },
 			...v === void 0 ? {} : { onChange: v },
 			children: [
-				/* @__PURE__ */ a(e, { children: i }),
+				/* @__PURE__ */ a(t, { children: i }),
 				/* @__PURE__ */ a(u, {}),
-				/* @__PURE__ */ a(t, {
+				/* @__PURE__ */ a(n, {
 					description: c,
 					error: l
 				})

package/dist/components/date-time/date-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-field.js","names":[],"sources":["../../../src/components/date-time/date-field.tsx"],"sourcesContent":["import type { CalendarDate } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { DateField as AriaDateField, DateInput, DateSegment, type DateFieldProps as AriaDateFieldProps } from \"react-aria-components/DateField\";\nimport type { DateFieldBehaviorProps, DateValue as LydsDateValue } from \"./date-types\";\nimport { FieldLabel, FieldMessages, LocaleBoundary, ~~cx,~~ type DateTimeFieldChromeProps } from \"./shared\";\n\nexport interface DateFieldProps<T extends LydsDateValue = CalendarDate> extends DateFieldBehaviorProps<T>, DateTimeFieldChromeProps {}\n\ntype DateFieldForwardedKeys = Exclude<keyof DateFieldBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"readOnly\" \| \"required\">;\ntype DateFieldUnexpectedForwardedKeys = Exclude<DateFieldForwardedKeys, keyof AriaDateFieldProps<LydsDateValue>>;\ntype DateFieldPropContract = DateFieldUnexpectedForwardedKeys extends never ? true : never;\nconst dateFieldPropContract: DateFieldPropContract = true;\nvoid dateFieldPropContract;\n\nexport function DateInputSegments({ className, slot }: { className?: string; slot?: string }) {\n\treturn (\n\t\t<DateInput className={cx(\"lyds-date-input\", className)} {...(slot ? { slot } : {})}>\n\t\t\t{segment => <DateSegment segment={segment} className=\"lyds-date-segment\" />}\n\t\t</DateInput>\n\t);\n}\n\nfunction DateFieldImpl<T extends LydsDateValue>(\n\t{ label, description, error, locale, size = \"md\", className, disabled, readOnly, required, invalid, onValueChange, ...fieldProps }: DateFieldProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>\n) {\n\tconst ariaFieldProps = fieldProps as unknown as Omit<AriaDateFieldProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaDateField\n\t\t\t\t{...ariaFieldProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaDateFieldProps<T>[\"onChange\"]> })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<DateInputSegments />\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t</AriaDateField>\n\t\t</LocaleBoundary>\n\t);\n}\n\nexport const DateField = forwardRef(DateFieldImpl) as <T extends LydsDateValue = CalendarDate>(props: DateFieldProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":"~~;;;;;~~AAcA,SAAgB,EAAkB,EAAE,cAAW,WAA+C;CAC7F,OACC,kBAAC,GAAD;EAAW,WAAW,EAAG,mBAAmB,CAAS;EAAG,GAAK,IAAO,EAAE,QAAK,IAAI,CAAC;EAC9E,WAAA,MAAW,kBAAC,GAAD;GAAsB;GAAS,WAAU;EAAqB,CAAA;CAChE,CAAA;AAEb;AAEA,SAAS,EACR,EAAE,UAAO,gBAAa,UAAO,WAAQ,UAAO,MAAM,cAAW,aAAU,aAAU,aAAU,YAAS,kBAAe,GAAG,KACtH,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,CAAS;GAC1C,aAAW;GACX,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA2E;GAThI,UAAA;IAWC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,GAAD,CAAoB,CAAA;IACpB,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;GAC1C;;CACA,CAAA;AAElB;AAEA,IAAa,IAAY,EAAW,CAAa"}
1	+ {"version":3,"file":"date-field.js","names":[],"sources":["../../../src/components/date-time/date-field.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport type { CalendarDate } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { DateField as AriaDateField, DateInput, DateSegment, type DateFieldProps as AriaDateFieldProps } from \"react-aria-components/DateField\";\nimport type { DateFieldBehaviorProps, DateValue as LydsDateValue } from \"./date-types\";\nimport { FieldLabel, FieldMessages, LocaleBoundary, type DateTimeFieldChromeProps } from \"./shared\";\nexport interface DateFieldProps<T extends LydsDateValue = CalendarDate> extends DateFieldBehaviorProps<T>, DateTimeFieldChromeProps {}\n\ntype DateFieldForwardedKeys = Exclude<keyof DateFieldBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"readOnly\" \| \"required\">;\ntype DateFieldUnexpectedForwardedKeys = Exclude<DateFieldForwardedKeys, keyof AriaDateFieldProps<LydsDateValue>>;\ntype DateFieldPropContract = DateFieldUnexpectedForwardedKeys extends never ? true : never;\nconst dateFieldPropContract: DateFieldPropContract = true;\nvoid dateFieldPropContract;\n\nexport function DateInputSegments({ className, slot }: { className?: string; slot?: string }) {\n\treturn (\n\t\t<DateInput className={cx(\"lyds-date-input\", className)} {...(slot ? { slot } : {})}>\n\t\t\t{segment => <DateSegment segment={segment} className=\"lyds-date-segment\" />}\n\t\t</DateInput>\n\t);\n}\n\nfunction DateFieldImpl<T extends LydsDateValue>(\n\t{ label, description, error, locale, size = \"md\", className, disabled, readOnly, required, invalid, onValueChange, ...fieldProps }: DateFieldProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>\n) {\n\tconst ariaFieldProps = fieldProps as unknown as Omit<AriaDateFieldProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaDateField\n\t\t\t\t{...ariaFieldProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaDateFieldProps<T>[\"onChange\"]> })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<DateInputSegments />\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t</AriaDateField>\n\t\t</LocaleBoundary>\n\t);\n}\n\nexport const DateField = forwardRef(DateFieldImpl) as <T extends LydsDateValue = CalendarDate>(props: DateFieldProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":";;;;;;;AAcA,SAAgB,EAAkB,EAAE,cAAW,WAA+C;CAC7F,OACC,kBAAC,GAAD;EAAW,WAAW,EAAG,mBAAmB,CAAS;EAAG,GAAK,IAAO,EAAE,QAAK,IAAI,CAAC;EAC9E,WAAA,MAAW,kBAAC,GAAD;GAAsB;GAAS,WAAU;EAAqB,CAAA;CAChE,CAAA;AAEb;AAEA,SAAS,EACR,EAAE,UAAO,gBAAa,UAAO,WAAQ,UAAO,MAAM,cAAW,aAAU,aAAU,aAAU,YAAS,kBAAe,GAAG,KACtH,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,CAAS;GAC1C,aAAW;GACX,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA2E;GAThI,UAAA;IAWC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,GAAD,CAAoB,CAAA;IACpB,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;GAC1C;;CACA,CAAA;AAElB;AAEA,IAAa,IAAY,EAAW,CAAa"}

package/dist/components/date-time/date-picker.js CHANGED Viewed

@@ -1,4 +1,6 @@
-import { CalendarGlyph as e, FieldLabel as t, FieldMessages as n, LocaleBoundary as r, cx as i } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
+import { CalendarGlyph as t, FieldLabel as n, FieldMessages as r, LocaleBoundary as i } from "./shared.js";
 import { CalendarPanel as a } from "./calendar.js";
 import { DateInputSegments as o } from "./date-field.js";
 import { forwardRef as s } from "react";
@@ -11,12 +13,12 @@ import { Group as m } from "react-aria-components/Group";
 import { Popover as h } from "react-aria-components/Popover";
 //#region src/components/date-time/date-picker.tsx
 function g({ label: s, description: g, error: _, locale: v, size: y = "md", className: b, open: x, disabled: S, readOnly: C, required: w, invalid: T, onValueChange: E, firstDayOfWeek: D, weekdayStyle: O, showMonthYearPickers: k, popoverPlacement: A = "bottom start", ...j }, M, N) {
-	return /* @__PURE__ */ u(r, {
+	return /* @__PURE__ */ u(i, {
 		locale: v,
 		children: /* @__PURE__ */ d(f, {
 			...j,
 			ref: M,
-			className: i("lyds-date-field", "lyds-date-picker", N && "lyds-date-time-picker", b),
+			className: e("lyds-date-field", "lyds-date-picker", N && "lyds-date-time-picker", b),
 			"data-size": y,
 			...x === void 0 ? {} : { isOpen: x },
 			...S === void 0 ? {} : { isDisabled: S },
@@ -26,15 +28,15 @@ function g({ label: s, description: g, error: _, locale: v, size: y = "md", clas
 			...E === void 0 ? {} : { onChange: E },
 			...D === void 0 ? {} : { firstDayOfWeek: D },
 			children: [
-				/* @__PURE__ */ u(t, { children: s }),
+				/* @__PURE__ */ u(n, { children: s }),
 				/* @__PURE__ */ d(m, {
 					className: "lyds-date-picker-group",
 					children: [/* @__PURE__ */ u(o, { className: "lyds-date-picker-input" }), /* @__PURE__ */ u(c, {
 						className: "lyds-date-picker-button",
-						children: /* @__PURE__ */ u(e, {})
+						children: /* @__PURE__ */ u(t, {})
 					})]
 				}),
-				/* @__PURE__ */ u(n, {
+				/* @__PURE__ */ u(r, {
 					description: g,
 					error: _
 				}),

package/dist/components/date-time/date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.js","names":[],"sources":["../../../src/components/date-time/date-picker.tsx"],"sourcesContent":["import type { CalendarDate, CalendarDateTime, ZonedDateTime } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { Button } from \"react-aria-components/Button\";\nimport { Calendar as AriaCalendar } from \"react-aria-components/Calendar\";\nimport { DatePicker as AriaDatePicker, type DatePickerProps as AriaDatePickerProps } from \"react-aria-components/DatePicker\";\nimport { Dialog } from \"react-aria-components/Dialog\";\nimport { Group } from \"react-aria-components/Group\";\nimport { Popover } from \"react-aria-components/Popover\";\nimport { CalendarPanel, type WeekdayStyle } from \"./calendar\";\nimport { DateInputSegments } from \"./date-field\";\nimport type { DatePickerBehaviorProps, DatePopoverPlacement, DateValue as LydsDateValue } from \"./date-types\";\nimport { CalendarGlyph, FieldLabel, FieldMessages, LocaleBoundary, ~~cx,~~ type DateTimeFieldChromeProps } from \"./shared\";\n\ninterface DatePickerChromeProps extends DateTimeFieldChromeProps {\n\topen?: boolean;\n\tdisabled?: boolean;\n\treadOnly?: boolean;\n\trequired?: boolean;\n\tinvalid?: boolean;\n\tweekdayStyle?: WeekdayStyle \| undefined;\n\tshowMonthYearPickers?: boolean \| undefined;\n\tpopoverPlacement?: DatePopoverPlacement \| undefined;\n}\n\nexport interface DatePickerProps<T extends LydsDateValue = CalendarDate> extends DatePickerBehaviorProps<T>, DatePickerChromeProps {}\n\ntype DatePickerForwardedKeys = Exclude<keyof DatePickerBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"open\" \| \"readOnly\" \| \"required\">;\ntype DatePickerUnexpectedForwardedKeys = Exclude<DatePickerForwardedKeys, keyof AriaDatePickerProps<LydsDateValue>>;\ntype DatePickerPropContract = DatePickerUnexpectedForwardedKeys extends never ? true : never;\nconst datePickerPropContract: DatePickerPropContract = true;\nvoid datePickerPropContract;\n\n/*\n 日期時間值保留自身語意。不含時區的日期時間請使用 `CalendarDateTime`；\n * 具明確時區的時間點請使用 `ZonedDateTime`。Linyao Design System 不會在兩者之間自動轉換。\n */\nexport type DateTimeValue = CalendarDateTime \| ZonedDateTime;\n\nexport interface DateTimePickerProps<T extends DateTimeValue = CalendarDateTime> extends Omit<DatePickerProps<T>, \"granularity\"> {\n\tgranularity?: \"hour\" \| \"minute\" \| \"second\";\n}\n\nfunction SingleDatePicker<T extends LydsDateValue>(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tlocale,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\topen,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tinvalid,\n\t\tonValueChange,\n\t\tfirstDayOfWeek,\n\t\tweekdayStyle,\n\t\tshowMonthYearPickers,\n\t\tpopoverPlacement = \"bottom start\",\n\t\t...pickerProps\n\t}: DatePickerProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>,\n\tdateTime: boolean\n) {\n\tconst ariaPickerProps = pickerProps as unknown as Omit<AriaDatePickerProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isOpen\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaDatePicker\n\t\t\t\t{...ariaPickerProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-date-picker\", dateTime && \"lyds-date-time-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(open === undefined ? {} : { isOpen: open })}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaDatePickerProps<T>[\"onChange\"]> })}\n\t\t\t\t{...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<Group className=\"lyds-date-picker-group\">\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" />\n\t\t\t\t\t<Button className=\"lyds-date-picker-button\">\n\t\t\t\t\t\t<CalendarGlyph />\n\t\t\t\t\t</Button>\n\t\t\t\t</Group>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t\t<Popover className=\"lyds-date-popover\" placement={popoverPlacement}>\n\t\t\t\t\t<Dialog className=\"lyds-date-popover-dialog\">\n\t\t\t\t\t\t<AriaCalendar className=\"lyds-calendar\" {...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}>\n\t\t\t\t\t\t\t<CalendarPanel weekdayStyle={weekdayStyle} showMonthYearPickers={showMonthYearPickers} disabled={disabled} />\n\t\t\t\t\t\t</AriaCalendar>\n\t\t\t\t\t</Dialog>\n\t\t\t\t</Popover>\n\t\t\t</AriaDatePicker>\n\t\t</LocaleBoundary>\n\t);\n}\n\nfunction DatePickerImpl<T extends LydsDateValue>(props: DatePickerProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn SingleDatePicker(props, ref, false);\n}\n\nfunction DateTimePickerImpl<T extends DateTimeValue>(props: DateTimePickerProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn SingleDatePicker({ ...props, granularity: props.granularity ?? \"minute\" }, ref, true);\n}\n\nexport const DatePicker = forwardRef(DatePickerImpl) as <T extends LydsDateValue = CalendarDate>(props: DatePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n\nexport const DateTimePicker = forwardRef(DateTimePickerImpl) as <T extends DateTimeValue = CalendarDateTime>(props: DateTimePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":"~~;;;;;;;;;;;;~~AA0CA,SAAS,EACR,EACC,UACA,gBACA,UACA,WACA,UAAO,MACP,cACA,SACA,aACA,aACA,aACA,YACA,kBACA,mBACA,iBACA,yBACA,sBAAmB,gBACnB,GAAG,KAEJ,GACA,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,oBAAoB,KAAY,yBAAyB,CAAS;GACnG,aAAW;GACX,GAAK,MAAS,KAAA,IAAY,CAAC,IAAI,EAAE,QAAQ,EAAK;GAC9C,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA4E;GAChI,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;GAX3D,UAAA;IAaC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,GAAD;KAAO,WAAU;KAAjB,UAAA,CACC,kBAAC,GAAD,EAAmB,WAAU,yBAA0B,CAAA,GACvD,kBAAC,GAAD;MAAQ,WAAU;MACjB,UAAA,kBAAC,GAAD,CAAgB,CAAA;KACT,CAAA,CACF;;IACP,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;IACxD,kBAAC,GAAD;KAAS,WAAU;KAAoB,WAAW;KACjD,UAAA,kBAAC,GAAD;MAAQ,WAAU;MACjB,UAAA,kBAAC,GAAD;OAAc,WAAU;OAAgB,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;OACjG,UAAA,kBAAC,GAAD;QAA6B;QAAoC;QAAgC;OAAW,CAAA;MAC/F,CAAA;KACP,CAAA;IACA,CAAA;GACM;;CACD,CAAA;AAElB;AAEA,SAAS,EAAwC,GAA2B,GAAyC;CACpH,OAAO,EAAiB,GAAO,GAAK,EAAK;AAC1C;AAEA,SAAS,EAA4C,GAA+B,GAAyC;CAC5H,OAAO,EAAiB;EAAE,GAAG;EAAO,aAAa,EAAM,eAAe;CAAS,GAAG,GAAK,EAAI;AAC5F;AAEA,IAAa,IAAa,EAAW,CAAc,GAEtC,IAAiB,EAAW,CAAkB"}
1	+ {"version":3,"file":"date-picker.js","names":[],"sources":["../../../src/components/date-time/date-picker.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport type { CalendarDate, CalendarDateTime, ZonedDateTime } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { Button } from \"react-aria-components/Button\";\nimport { Calendar as AriaCalendar } from \"react-aria-components/Calendar\";\nimport { DatePicker as AriaDatePicker, type DatePickerProps as AriaDatePickerProps } from \"react-aria-components/DatePicker\";\nimport { Dialog } from \"react-aria-components/Dialog\";\nimport { Group } from \"react-aria-components/Group\";\nimport { Popover } from \"react-aria-components/Popover\";\nimport { CalendarPanel, type WeekdayStyle } from \"./calendar\";\nimport { DateInputSegments } from \"./date-field\";\nimport type { DatePickerBehaviorProps, DatePopoverPlacement, DateValue as LydsDateValue } from \"./date-types\";\nimport { CalendarGlyph, FieldLabel, FieldMessages, LocaleBoundary, type DateTimeFieldChromeProps } from \"./shared\";\ninterface DatePickerChromeProps extends DateTimeFieldChromeProps {\n\topen?: boolean;\n\tdisabled?: boolean;\n\treadOnly?: boolean;\n\trequired?: boolean;\n\tinvalid?: boolean;\n\tweekdayStyle?: WeekdayStyle \| undefined;\n\tshowMonthYearPickers?: boolean \| undefined;\n\tpopoverPlacement?: DatePopoverPlacement \| undefined;\n}\n\nexport interface DatePickerProps<T extends LydsDateValue = CalendarDate> extends DatePickerBehaviorProps<T>, DatePickerChromeProps {}\n\ntype DatePickerForwardedKeys = Exclude<keyof DatePickerBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"open\" \| \"readOnly\" \| \"required\">;\ntype DatePickerUnexpectedForwardedKeys = Exclude<DatePickerForwardedKeys, keyof AriaDatePickerProps<LydsDateValue>>;\ntype DatePickerPropContract = DatePickerUnexpectedForwardedKeys extends never ? true : never;\nconst datePickerPropContract: DatePickerPropContract = true;\nvoid datePickerPropContract;\n\n/*\n 日期時間值保留自身語意。不含時區的日期時間請使用 `CalendarDateTime`；\n * 具明確時區的時間點請使用 `ZonedDateTime`。Linyao Design System 不會在兩者之間自動轉換。\n */\nexport type DateTimeValue = CalendarDateTime \| ZonedDateTime;\n\nexport interface DateTimePickerProps<T extends DateTimeValue = CalendarDateTime> extends Omit<DatePickerProps<T>, \"granularity\"> {\n\tgranularity?: \"hour\" \| \"minute\" \| \"second\";\n}\n\nfunction SingleDatePicker<T extends LydsDateValue>(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tlocale,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\topen,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tinvalid,\n\t\tonValueChange,\n\t\tfirstDayOfWeek,\n\t\tweekdayStyle,\n\t\tshowMonthYearPickers,\n\t\tpopoverPlacement = \"bottom start\",\n\t\t...pickerProps\n\t}: DatePickerProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>,\n\tdateTime: boolean\n) {\n\tconst ariaPickerProps = pickerProps as unknown as Omit<AriaDatePickerProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isOpen\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaDatePicker\n\t\t\t\t{...ariaPickerProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-date-picker\", dateTime && \"lyds-date-time-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(open === undefined ? {} : { isOpen: open })}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaDatePickerProps<T>[\"onChange\"]> })}\n\t\t\t\t{...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<Group className=\"lyds-date-picker-group\">\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" />\n\t\t\t\t\t<Button className=\"lyds-date-picker-button\">\n\t\t\t\t\t\t<CalendarGlyph />\n\t\t\t\t\t</Button>\n\t\t\t\t</Group>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t\t<Popover className=\"lyds-date-popover\" placement={popoverPlacement}>\n\t\t\t\t\t<Dialog className=\"lyds-date-popover-dialog\">\n\t\t\t\t\t\t<AriaCalendar className=\"lyds-calendar\" {...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}>\n\t\t\t\t\t\t\t<CalendarPanel weekdayStyle={weekdayStyle} showMonthYearPickers={showMonthYearPickers} disabled={disabled} />\n\t\t\t\t\t\t</AriaCalendar>\n\t\t\t\t\t</Dialog>\n\t\t\t\t</Popover>\n\t\t\t</AriaDatePicker>\n\t\t</LocaleBoundary>\n\t);\n}\n\nfunction DatePickerImpl<T extends LydsDateValue>(props: DatePickerProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn SingleDatePicker(props, ref, false);\n}\n\nfunction DateTimePickerImpl<T extends DateTimeValue>(props: DateTimePickerProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn SingleDatePicker({ ...props, granularity: props.granularity ?? \"minute\" }, ref, true);\n}\n\nexport const DatePicker = forwardRef(DatePickerImpl) as <T extends LydsDateValue = CalendarDate>(props: DatePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n\nexport const DateTimePicker = forwardRef(DateTimePickerImpl) as <T extends DateTimeValue = CalendarDateTime>(props: DateTimePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":";;;;;;;;;;;;;;AA0CA,SAAS,EACR,EACC,UACA,gBACA,UACA,WACA,UAAO,MACP,cACA,SACA,aACA,aACA,aACA,YACA,kBACA,mBACA,iBACA,yBACA,sBAAmB,gBACnB,GAAG,KAEJ,GACA,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,oBAAoB,KAAY,yBAAyB,CAAS;GACnG,aAAW;GACX,GAAK,MAAS,KAAA,IAAY,CAAC,IAAI,EAAE,QAAQ,EAAK;GAC9C,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA4E;GAChI,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;GAX3D,UAAA;IAaC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,GAAD;KAAO,WAAU;KAAjB,UAAA,CACC,kBAAC,GAAD,EAAmB,WAAU,yBAA0B,CAAA,GACvD,kBAAC,GAAD;MAAQ,WAAU;MACjB,UAAA,kBAAC,GAAD,CAAgB,CAAA;KACT,CAAA,CACF;;IACP,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;IACxD,kBAAC,GAAD;KAAS,WAAU;KAAoB,WAAW;KACjD,UAAA,kBAAC,GAAD;MAAQ,WAAU;MACjB,UAAA,kBAAC,GAAD;OAAc,WAAU;OAAgB,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;OACjG,UAAA,kBAAC,GAAD;QAA6B;QAAoC;QAAgC;OAAW,CAAA;MAC/F,CAAA;KACP,CAAA;IACA,CAAA;GACM;;CACD,CAAA;AAElB;AAEA,SAAS,EAAwC,GAA2B,GAAyC;CACpH,OAAO,EAAiB,GAAO,GAAK,EAAK;AAC1C;AAEA,SAAS,EAA4C,GAA+B,GAAyC;CAC5H,OAAO,EAAiB;EAAE,GAAG;EAAO,aAAa,EAAM,eAAe;CAAS,GAAG,GAAK,EAAI;AAC5F;AAEA,IAAa,IAAa,EAAW,CAAc,GAEtC,IAAiB,EAAW,CAAkB"}

package/dist/components/date-time/date-range-picker.js CHANGED Viewed

@@ -1,4 +1,6 @@
-import { CalendarGlyph as e, FieldLabel as t, FieldMessages as n, LocaleBoundary as r, cx as i } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
+import { CalendarGlyph as t, FieldLabel as n, FieldMessages as r, LocaleBoundary as i } from "./shared.js";
 import { CalendarPanel as a } from "./calendar.js";
 import { DateInputSegments as o } from "./date-field.js";
 import { forwardRef as s } from "react";
@@ -10,12 +12,12 @@ import { Popover as p } from "react-aria-components/Popover";
 import { DateRangePicker as m, RangeCalendar as h } from "react-aria-components/DateRangePicker";
 //#region src/components/date-time/date-range-picker.tsx
 function g({ label: s, description: g, error: _, locale: v, size: y = "md", className: b, open: x, disabled: S, readOnly: C, required: w, invalid: T, onValueChange: E, firstDayOfWeek: D, weekdayStyle: O, showMonthYearPickers: k, popoverPlacement: A = "bottom start", ...j }, M) {
-	return /* @__PURE__ */ l(r, {
+	return /* @__PURE__ */ l(i, {
 		locale: v,
 		children: /* @__PURE__ */ u(m, {
 			...j,
 			ref: M,
-			className: i("lyds-date-field", "lyds-date-picker", "lyds-date-range-picker", b),
+			className: e("lyds-date-field", "lyds-date-picker", "lyds-date-range-picker", b),
 			"data-size": y,
 			...x === void 0 ? {} : { isOpen: x },
 			...S === void 0 ? {} : { isDisabled: S },
@@ -25,7 +27,7 @@ function g({ label: s, description: g, error: _, locale: v, size: y = "md", clas
 			...E === void 0 ? {} : { onChange: E },
 			...D === void 0 ? {} : { firstDayOfWeek: D },
 			children: [
-				/* @__PURE__ */ l(t, { children: s }),
+				/* @__PURE__ */ l(n, { children: s }),
 				/* @__PURE__ */ u(f, {
 					className: "lyds-date-picker-group",
 					children: [
@@ -44,11 +46,11 @@ function g({ label: s, description: g, error: _, locale: v, size: y = "md", clas
 						}),
 						/* @__PURE__ */ l(c, {
 							className: "lyds-date-picker-button",
-							children: /* @__PURE__ */ l(e, {})
+							children: /* @__PURE__ */ l(t, {})
 						})
 					]
 				}),
-				/* @__PURE__ */ l(n, {
+				/* @__PURE__ */ l(r, {
 					description: g,
 					error: _
 				}),

package/dist/components/date-time/date-range-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../src/components/date-time/date-range-picker.tsx"],"sourcesContent":["import type { CalendarDate } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { Button } from \"react-aria-components/Button\";\nimport { DateRangePicker as AriaDateRangePicker, RangeCalendar, type DateRangePickerProps as AriaDateRangePickerProps } from \"react-aria-components/DateRangePicker\";\nimport { Dialog } from \"react-aria-components/Dialog\";\nimport { Group } from \"react-aria-components/Group\";\nimport { Popover } from \"react-aria-components/Popover\";\nimport { CalendarPanel, type WeekdayStyle } from \"./calendar\";\nimport { DateInputSegments } from \"./date-field\";\nimport type { DatePopoverPlacement, DateRangePickerBehaviorProps, DateValue as LydsDateValue } from \"./date-types\";\nimport { CalendarGlyph, FieldLabel, FieldMessages, LocaleBoundary, ~~cx,~~ type DateTimeFieldChromeProps } from \"./shared\";\n\nexport interface DateRangePickerProps<T extends LydsDateValue = CalendarDate> extends DateRangePickerBehaviorProps<T>, DateTimeFieldChromeProps {\n\tweekdayStyle?: WeekdayStyle \| undefined;\n\tshowMonthYearPickers?: boolean \| undefined;\n\tpopoverPlacement?: DatePopoverPlacement \| undefined;\n}\n\ntype DateRangePickerForwardedKeys = Exclude<keyof DateRangePickerBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"open\" \| \"readOnly\" \| \"required\">;\ntype DateRangePickerUnexpectedForwardedKeys = Exclude<DateRangePickerForwardedKeys, keyof AriaDateRangePickerProps<LydsDateValue>>;\ntype DateRangePickerPropContract = DateRangePickerUnexpectedForwardedKeys extends never ? true : never;\nconst dateRangePickerPropContract: DateRangePickerPropContract = true;\nvoid dateRangePickerPropContract;\n\nfunction DateRangePickerImpl<T extends LydsDateValue>(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tlocale,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\topen,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tinvalid,\n\t\tonValueChange,\n\t\tfirstDayOfWeek,\n\t\tweekdayStyle,\n\t\tshowMonthYearPickers,\n\t\tpopoverPlacement = \"bottom start\",\n\t\t...pickerProps\n\t}: DateRangePickerProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>\n) {\n\tconst ariaPickerProps = pickerProps as unknown as Omit<AriaDateRangePickerProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isOpen\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaDateRangePicker\n\t\t\t\t{...ariaPickerProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-date-picker\", \"lyds-date-range-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(open === undefined ? {} : { isOpen: open })}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaDateRangePickerProps<T>[\"onChange\"]> })}\n\t\t\t\t{...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<Group className=\"lyds-date-picker-group\">\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" slot=\"start\" />\n\t\t\t\t\t<span className=\"lyds-date-range-separator\" aria-hidden=\"true\">\n\t\t\t\t\t\t–\n\t\t\t\t\t</span>\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" slot=\"end\" />\n\t\t\t\t\t<Button className=\"lyds-date-picker-button\">\n\t\t\t\t\t\t<CalendarGlyph />\n\t\t\t\t\t</Button>\n\t\t\t\t</Group>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t\t<Popover className=\"lyds-date-popover\" placement={popoverPlacement}>\n\t\t\t\t\t<Dialog className=\"lyds-date-popover-dialog\">\n\t\t\t\t\t\t<RangeCalendar className=\"lyds-calendar lyds-range-calendar\" {...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}>\n\t\t\t\t\t\t\t<CalendarPanel weekdayStyle={weekdayStyle} showMonthYearPickers={showMonthYearPickers} disabled={disabled} />\n\t\t\t\t\t\t</RangeCalendar>\n\t\t\t\t\t</Dialog>\n\t\t\t\t</Popover>\n\t\t\t</AriaDateRangePicker>\n\t\t</LocaleBoundary>\n\t);\n}\n\nexport const DateRangePicker = forwardRef(DateRangePickerImpl) as <T extends LydsDateValue = CalendarDate>(props: DateRangePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":"~~;;;;;;;;;;;~~AAwBA,SAAS,EACR,EACC,UACA,gBACA,UACA,WACA,UAAO,MACP,cACA,SACA,aACA,aACA,aACA,YACA,kBACA,mBACA,iBACA,yBACA,sBAAmB,gBACnB,GAAG,KAEJ,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,oBAAoB,0BAA0B,CAAS;GACxF,aAAW;GACX,GAAK,MAAS,KAAA,IAAY,CAAC,IAAI,EAAE,QAAQ,EAAK;GAC9C,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAAiF;GACrI,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;GAX3D,UAAA;IAaC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,GAAD;KAAO,WAAU;KAAjB,UAAA;MACC,kBAAC,GAAD;OAAmB,WAAU;OAAyB,MAAK;MAAS,CAAA;MACpE,kBAAC,QAAD;OAAM,WAAU;OAA4B,eAAY;OAAO,UAAA;MAEzD,CAAA;MACN,kBAAC,GAAD;OAAmB,WAAU;OAAyB,MAAK;MAAO,CAAA;MAClE,kBAAC,GAAD;OAAQ,WAAU;OACjB,UAAA,kBAAC,GAAD,CAAgB,CAAA;MACT,CAAA;KACF;;IACP,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;IACxD,kBAAC,GAAD;KAAS,WAAU;KAAoB,WAAW;KACjD,UAAA,kBAAC,GAAD;MAAQ,WAAU;MACjB,UAAA,kBAAC,GAAD;OAAe,WAAU;OAAoC,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;OACtH,UAAA,kBAAC,GAAD;QAA6B;QAAoC;QAAgC;OAAW,CAAA;MAC9F,CAAA;KACR,CAAA;IACA,CAAA;GACW;;CACN,CAAA;AAElB;AAEA,IAAa,IAAkB,EAAW,CAAmB"}
1	+ {"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../src/components/date-time/date-range-picker.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport type { CalendarDate } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { Button } from \"react-aria-components/Button\";\nimport { DateRangePicker as AriaDateRangePicker, RangeCalendar, type DateRangePickerProps as AriaDateRangePickerProps } from \"react-aria-components/DateRangePicker\";\nimport { Dialog } from \"react-aria-components/Dialog\";\nimport { Group } from \"react-aria-components/Group\";\nimport { Popover } from \"react-aria-components/Popover\";\nimport { CalendarPanel, type WeekdayStyle } from \"./calendar\";\nimport { DateInputSegments } from \"./date-field\";\nimport type { DatePopoverPlacement, DateRangePickerBehaviorProps, DateValue as LydsDateValue } from \"./date-types\";\nimport { CalendarGlyph, FieldLabel, FieldMessages, LocaleBoundary, type DateTimeFieldChromeProps } from \"./shared\";\nexport interface DateRangePickerProps<T extends LydsDateValue = CalendarDate> extends DateRangePickerBehaviorProps<T>, DateTimeFieldChromeProps {\n\tweekdayStyle?: WeekdayStyle \| undefined;\n\tshowMonthYearPickers?: boolean \| undefined;\n\tpopoverPlacement?: DatePopoverPlacement \| undefined;\n}\n\ntype DateRangePickerForwardedKeys = Exclude<keyof DateRangePickerBehaviorProps<LydsDateValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"open\" \| \"readOnly\" \| \"required\">;\ntype DateRangePickerUnexpectedForwardedKeys = Exclude<DateRangePickerForwardedKeys, keyof AriaDateRangePickerProps<LydsDateValue>>;\ntype DateRangePickerPropContract = DateRangePickerUnexpectedForwardedKeys extends never ? true : never;\nconst dateRangePickerPropContract: DateRangePickerPropContract = true;\nvoid dateRangePickerPropContract;\n\nfunction DateRangePickerImpl<T extends LydsDateValue>(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tlocale,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\topen,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tinvalid,\n\t\tonValueChange,\n\t\tfirstDayOfWeek,\n\t\tweekdayStyle,\n\t\tshowMonthYearPickers,\n\t\tpopoverPlacement = \"bottom start\",\n\t\t...pickerProps\n\t}: DateRangePickerProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>\n) {\n\tconst ariaPickerProps = pickerProps as unknown as Omit<AriaDateRangePickerProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isOpen\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaDateRangePicker\n\t\t\t\t{...ariaPickerProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-date-picker\", \"lyds-date-range-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(open === undefined ? {} : { isOpen: open })}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaDateRangePickerProps<T>[\"onChange\"]> })}\n\t\t\t\t{...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<Group className=\"lyds-date-picker-group\">\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" slot=\"start\" />\n\t\t\t\t\t<span className=\"lyds-date-range-separator\" aria-hidden=\"true\">\n\t\t\t\t\t\t–\n\t\t\t\t\t</span>\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" slot=\"end\" />\n\t\t\t\t\t<Button className=\"lyds-date-picker-button\">\n\t\t\t\t\t\t<CalendarGlyph />\n\t\t\t\t\t</Button>\n\t\t\t\t</Group>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t\t<Popover className=\"lyds-date-popover\" placement={popoverPlacement}>\n\t\t\t\t\t<Dialog className=\"lyds-date-popover-dialog\">\n\t\t\t\t\t\t<RangeCalendar className=\"lyds-calendar lyds-range-calendar\" {...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}>\n\t\t\t\t\t\t\t<CalendarPanel weekdayStyle={weekdayStyle} showMonthYearPickers={showMonthYearPickers} disabled={disabled} />\n\t\t\t\t\t\t</RangeCalendar>\n\t\t\t\t\t</Dialog>\n\t\t\t\t</Popover>\n\t\t\t</AriaDateRangePicker>\n\t\t</LocaleBoundary>\n\t);\n}\n\nexport const DateRangePicker = forwardRef(DateRangePickerImpl) as <T extends LydsDateValue = CalendarDate>(props: DateRangePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAS,EACR,EACC,UACA,gBACA,UACA,WACA,UAAO,MACP,cACA,SACA,aACA,aACA,aACA,YACA,kBACA,mBACA,iBACA,yBACA,sBAAmB,gBACnB,GAAG,KAEJ,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,oBAAoB,0BAA0B,CAAS;GACxF,aAAW;GACX,GAAK,MAAS,KAAA,IAAY,CAAC,IAAI,EAAE,QAAQ,EAAK;GAC9C,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAAiF;GACrI,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;GAX3D,UAAA;IAaC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,GAAD;KAAO,WAAU;KAAjB,UAAA;MACC,kBAAC,GAAD;OAAmB,WAAU;OAAyB,MAAK;MAAS,CAAA;MACpE,kBAAC,QAAD;OAAM,WAAU;OAA4B,eAAY;OAAO,UAAA;MAEzD,CAAA;MACN,kBAAC,GAAD;OAAmB,WAAU;OAAyB,MAAK;MAAO,CAAA;MAClE,kBAAC,GAAD;OAAQ,WAAU;OACjB,UAAA,kBAAC,GAAD,CAAgB,CAAA;MACT,CAAA;KACF;;IACP,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;IACxD,kBAAC,GAAD;KAAS,WAAU;KAAoB,WAAW;KACjD,UAAA,kBAAC,GAAD;MAAQ,WAAU;MACjB,UAAA,kBAAC,GAAD;OAAe,WAAU;OAAoC,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;OACtH,UAAA,kBAAC,GAAD;QAA6B;QAAoC;QAAgC;OAAW,CAAA;MAC9F,CAAA;KACR,CAAA;IACA,CAAA;GACW;;CACN,CAAA;AAElB;AAEA,IAAa,IAAkB,EAAW,CAAmB"}

package/dist/components/date-time/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* empty css          */
+"use client";
 import { Calendar as e } from "./calendar.js";
 import { DateField as t } from "./date-field.js";
 import { DatePicker as n, DateTimePicker as r } from "./date-picker.js";

package/dist/components/date-time/shared.d.ts CHANGED Viewed

@@ -12,7 +12,6 @@ export interface DateTimeFieldChromeProps {
     size?: DateTimeSize;
     className?: string;
 }
-export declare function cx(...values: Array<string | false | null | undefined>): string;
 export declare function LocaleBoundary({ locale, children }: {
     locale?: string | undefined;
     children: ReactNode;

package/dist/components/date-time/shared.js CHANGED Viewed

@@ -1,3 +1,4 @@
+"use client";
 import { CalendarDotsIcon as e } from "@phosphor-icons/react/dist/csr/CalendarDots";
 import { ClockIcon as t } from "@phosphor-icons/react/dist/csr/Clock";
 import { FieldError as n } from "react-aria-components/FieldError";
@@ -6,22 +7,19 @@ import { Label as i } from "react-aria-components/Label";
 import { Text as a } from "react-aria-components/Text";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/date-time/shared.tsx
-function l(...e) {
-	return e.filter(Boolean).join(" ");
-}
-function u({ locale: e, children: t }) {
+function l({ locale: e, children: t }) {
 	return e ? /* @__PURE__ */ s(r, {
 		locale: e,
 		children: t
 	}) : /* @__PURE__ */ s(o, { children: t });
 }
-function d({ children: e }) {
+function u({ children: e }) {
 	return e == null ? null : /* @__PURE__ */ s(i, {
 		className: "lyds-date-label",
 		children: e
 	});
 }
-function f({ description: e, error: t }) {
+function d({ description: e, error: t }) {
 	return /* @__PURE__ */ c(o, { children: [e == null ? null : /* @__PURE__ */ s(a, {
 		slot: "description",
 		className: "lyds-date-description",
@@ -33,14 +31,14 @@ function f({ description: e, error: t }) {
 		children: t
 	})] });
 }
-function p() {
+function f() {
 	return /* @__PURE__ */ s(e, {
 		"aria-hidden": "true",
 		className: "lyds-date-glyph",
 		weight: "regular"
 	});
 }
-function m() {
+function p() {
 	return /* @__PURE__ */ s(t, {
 		"aria-hidden": "true",
 		className: "lyds-date-glyph",
@@ -48,6 +46,6 @@ function m() {
 	});
 }
 //#endregion
-export { p as CalendarGlyph, m as ClockGlyph, d as FieldLabel, f as FieldMessages, u as LocaleBoundary, l as cx };
+export { f as CalendarGlyph, p as ClockGlyph, u as FieldLabel, d as FieldMessages, l as LocaleBoundary };
 //# sourceMappingURL=shared.js.map

package/dist/components/date-time/shared.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shared.js","names":[],"sources":["../../../src/components/date-time/shared.tsx"],"sourcesContent":["import { CalendarDotsIcon } from \"@phosphor-icons/react/dist/csr/CalendarDots\";\nimport { ClockIcon } from \"@phosphor-icons/react/dist/csr/Clock\";\nimport type { ReactNode } from \"react\";\nimport { FieldError } from \"react-aria-components/FieldError\";\nimport { I18nProvider } from \"react-aria-components/I18nProvider\";\nimport { Label } from \"react-aria-components/Label\";\nimport { Text } from \"react-aria-components/Text\";\n\nexport type DateTimeSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface DateTimeFieldChromeProps {\n\t/** 欄位的可見標籤。不適合顯示可見標籤時，請改用 `aria-label`。 /\n\tlabel?: ReactNode;\n\t/* 透過 React Aria 與控制項關聯的補充說明。 /\n\tdescription?: ReactNode;\n\t/* 與控制項關聯的驗證訊息。 /\n\terror?: ReactNode;\n\t/* 用於區段順序、標籤與數字格式的 BCP 47 地區設定。省略時沿用最近的 `I18nProvider`。 */\n\tlocale?: string \| undefined;\n\tsize?: DateTimeSize;\n\tclassName?: string;\n}\n\nexport function ~~cx(...values: Array<string \| false \| null \| undefined>): string {\n\treturn values.filter(Boolean).join(\" \");\n}\n\nexport function~~ LocaleBoundary({ locale, children }: { locale?: string \| undefined; children: ReactNode }) {\n\tif (!locale) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <I18nProvider locale={locale}>{children}</I18nProvider>;\n}\n\nexport function FieldLabel({ children }: { children?: ReactNode }) {\n\treturn children == null ? null : <Label className=\"lyds-date-label\">{children}</Label>;\n}\n\nexport function FieldMessages({ description, error }: Pick<DateTimeFieldChromeProps, \"description\" \| \"error\">) {\n\treturn (\n\t\t<>\n\t\t\t{description == null ? null : (\n\t\t\t\t<Text slot=\"description\" className=\"lyds-date-description\">\n\t\t\t\t\t{description}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t\t{error == null ? null : (\n\t\t\t\t<FieldError aria-atomic=\"true\" aria-live=\"polite\" className=\"lyds-date-error\">\n\t\t\t\t\t{error}\n\t\t\t\t</FieldError>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport function CalendarGlyph() {\n\treturn <CalendarDotsIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"regular\" />;\n}\n\nexport function ClockGlyph() {\n\treturn <ClockIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"regular\" />;\n}\n"],"mappings":"~~;;;;;;;;~~AAuBA,SAAgB,~~EAAG,GAAG,GAA0D;CAC/E,OAAO,EAAO,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAEA,SAAgB,~~EAAe,EAAE,WAAQ,eAAkE;CAK1G,OAJK,IAIE,kBAAC,GAAD;EAAsB;EAAS;CAAuB,CAAA,IAHrD,kBAAA,GAAA,EAAG,YAAW,CAAA;AAIvB;AAEA,SAAgB,EAAW,EAAE,eAAsC;CAClE,OAAO,KAAY,OAAO,OAAO,kBAAC,GAAD;EAAO,WAAU;EAAmB;CAAgB,CAAA;AACtF;AAEA,SAAgB,EAAc,EAAE,gBAAa,YAAkE;CAC9G,OACC,kBAAA,GAAA,EAAA,UAAA,CACE,KAAe,OAAO,OACtB,kBAAC,GAAD;EAAM,MAAK;EAAc,WAAU;EACjC,UAAA;CACI,CAAA,GAEN,KAAS,OAAO,OAChB,kBAAC,GAAD;EAAY,eAAY;EAAO,aAAU;EAAS,WAAU;EAC1D,UAAA;CACU,CAAA,CAEZ,EAAA,CAAA;AAEJ;AAEA,SAAgB,IAAgB;CAC/B,OAAO,kBAAC,GAAD;EAAkB,eAAY;EAAO,WAAU;EAAkB,QAAO;CAAW,CAAA;AAC3F;AAEA,SAAgB,IAAa;CAC5B,OAAO,kBAAC,GAAD;EAAW,eAAY;EAAO,WAAU;EAAkB,QAAO;CAAW,CAAA;AACpF"}
1	+ {"version":3,"file":"shared.js","names":[],"sources":["../../../src/components/date-time/shared.tsx"],"sourcesContent":["import { CalendarDotsIcon } from \"@phosphor-icons/react/dist/csr/CalendarDots\";\nimport { ClockIcon } from \"@phosphor-icons/react/dist/csr/Clock\";\nimport type { ReactNode } from \"react\";\nimport { FieldError } from \"react-aria-components/FieldError\";\nimport { I18nProvider } from \"react-aria-components/I18nProvider\";\nimport { Label } from \"react-aria-components/Label\";\nimport { Text } from \"react-aria-components/Text\";\n\nexport type DateTimeSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface DateTimeFieldChromeProps {\n\t/** 欄位的可見標籤。不適合顯示可見標籤時，請改用 `aria-label`。 /\n\tlabel?: ReactNode;\n\t/* 透過 React Aria 與控制項關聯的補充說明。 /\n\tdescription?: ReactNode;\n\t/* 與控制項關聯的驗證訊息。 /\n\terror?: ReactNode;\n\t/* 用於區段順序、標籤與數字格式的 BCP 47 地區設定。省略時沿用最近的 `I18nProvider`。 */\n\tlocale?: string \| undefined;\n\tsize?: DateTimeSize;\n\tclassName?: string;\n}\n\nexport function LocaleBoundary({ locale, children }: { locale?: string \| undefined; children: ReactNode }) {\n\tif (!locale) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <I18nProvider locale={locale}>{children}</I18nProvider>;\n}\n\nexport function FieldLabel({ children }: { children?: ReactNode }) {\n\treturn children == null ? null : <Label className=\"lyds-date-label\">{children}</Label>;\n}\n\nexport function FieldMessages({ description, error }: Pick<DateTimeFieldChromeProps, \"description\" \| \"error\">) {\n\treturn (\n\t\t<>\n\t\t\t{description == null ? null : (\n\t\t\t\t<Text slot=\"description\" className=\"lyds-date-description\">\n\t\t\t\t\t{description}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t\t{error == null ? null : (\n\t\t\t\t<FieldError aria-atomic=\"true\" aria-live=\"polite\" className=\"lyds-date-error\">\n\t\t\t\t\t{error}\n\t\t\t\t</FieldError>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport function CalendarGlyph() {\n\treturn <CalendarDotsIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"regular\" />;\n}\n\nexport function ClockGlyph() {\n\treturn <ClockIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"regular\" />;\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,EAAe,EAAE,WAAQ,eAAkE;CAK1G,OAJK,IAIE,kBAAC,GAAD;EAAsB;EAAS;CAAuB,CAAA,IAHrD,kBAAA,GAAA,EAAG,YAAW,CAAA;AAIvB;AAEA,SAAgB,EAAW,EAAE,eAAsC;CAClE,OAAO,KAAY,OAAO,OAAO,kBAAC,GAAD;EAAO,WAAU;EAAmB;CAAgB,CAAA;AACtF;AAEA,SAAgB,EAAc,EAAE,gBAAa,YAAkE;CAC9G,OACC,kBAAA,GAAA,EAAA,UAAA,CACE,KAAe,OAAO,OACtB,kBAAC,GAAD;EAAM,MAAK;EAAc,WAAU;EACjC,UAAA;CACI,CAAA,GAEN,KAAS,OAAO,OAChB,kBAAC,GAAD;EAAY,eAAY;EAAO,aAAU;EAAS,WAAU;EAC1D,UAAA;CACU,CAAA,CAEZ,EAAA,CAAA;AAEJ;AAEA,SAAgB,IAAgB;CAC/B,OAAO,kBAAC,GAAD;EAAkB,eAAY;EAAO,WAAU;EAAkB,QAAO;CAAW,CAAA;AAC3F;AAEA,SAAgB,IAAa;CAC5B,OAAO,kBAAC,GAAD;EAAW,eAAY;EAAO,WAAU;EAAkB,QAAO;CAAW,CAAA;AACpF"}

package/dist/components/date-time/time-field.js CHANGED Viewed

@@ -1,15 +1,17 @@
-import { ClockGlyph as e, FieldLabel as t, FieldMessages as n, LocaleBoundary as r, cx as i } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
+import { ClockGlyph as t, FieldLabel as n, FieldMessages as r, LocaleBoundary as i } from "./shared.js";
 import { forwardRef as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { DateInput as c, DateSegment as l, TimeField as u } from "react-aria-components/TimeField";
 //#region src/components/date-time/time-field.tsx
 function d({ label: a, description: d, error: f, locale: p, size: m = "md", className: h, disabled: g, readOnly: _, required: v, invalid: y, onValueChange: b, ...x }, S, C) {
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ o(i, {
 		locale: p,
 		children: /* @__PURE__ */ s(u, {
 			...x,
 			ref: S,
-			className: i("lyds-date-field", "lyds-time-field", C && "lyds-time-picker", h),
+			className: e("lyds-date-field", "lyds-time-field", C && "lyds-time-picker", h),
 			"data-size": m,
 			...g === void 0 ? {} : { isDisabled: g },
 			..._ === void 0 ? {} : { isReadOnly: _ },
@@ -17,7 +19,7 @@ function d({ label: a, description: d, error: f, locale: p, size: m = "md", clas
 			...y === void 0 ? {} : { isInvalid: y },
 			...b === void 0 ? {} : { onChange: b },
 			children: [
-				/* @__PURE__ */ o(t, { children: a }),
+				/* @__PURE__ */ o(n, { children: a }),
 				/* @__PURE__ */ s("div", {
 					className: "lyds-date-input-shell",
 					children: [/* @__PURE__ */ o(c, {
@@ -28,10 +30,10 @@ function d({ label: a, description: d, error: f, locale: p, size: m = "md", clas
 						})
 					}), C ? /* @__PURE__ */ o("span", {
 						className: "lyds-date-input-affordance",
-						children: /* @__PURE__ */ o(e, {})
+						children: /* @__PURE__ */ o(t, {})
 					}) : null]
 				}),
-				/* @__PURE__ */ o(n, {
+				/* @__PURE__ */ o(r, {
 					description: d,
 					error: f
 				})

package/dist/components/date-time/time-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-field.js","names":[],"sources":["../../../src/components/date-time/time-field.tsx"],"sourcesContent":["import type { Time } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { TimeField as AriaTimeField, DateInput, DateSegment, type TimeFieldProps as AriaTimeFieldProps } from \"react-aria-components/TimeField\";\nimport type { TimeValue as LydsTimeValue, TimeFieldBehaviorProps } from \"./date-types\";\nimport { ClockGlyph, FieldLabel, FieldMessages, LocaleBoundary, ~~cx,~~ type DateTimeFieldChromeProps } from \"./shared\";\n\nexport interface TimeFieldProps<T extends LydsTimeValue = Time> extends TimeFieldBehaviorProps<T>, DateTimeFieldChromeProps {}\n\nexport type TimePickerProps<T extends LydsTimeValue = Time> = TimeFieldProps<T>;\n\ntype TimeFieldForwardedKeys = Exclude<keyof TimeFieldBehaviorProps<LydsTimeValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"readOnly\" \| \"required\">;\ntype TimeFieldUnexpectedForwardedKeys = Exclude<TimeFieldForwardedKeys, keyof AriaTimeFieldProps<LydsTimeValue>>;\ntype TimeFieldPropContract = TimeFieldUnexpectedForwardedKeys extends never ? true : never;\nconst timeFieldPropContract: TimeFieldPropContract = true;\nvoid timeFieldPropContract;\n\nfunction TimeControl<T extends LydsTimeValue>(\n\t{ label, description, error, locale, size = \"md\", className, disabled, readOnly, required, invalid, onValueChange, ...fieldProps }: TimeFieldProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>,\n\tshowPickerGlyph: boolean\n) {\n\tconst ariaFieldProps = fieldProps as unknown as Omit<AriaTimeFieldProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaTimeField\n\t\t\t\t{...ariaFieldProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-time-field\", showPickerGlyph && \"lyds-time-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaTimeFieldProps<T>[\"onChange\"]> })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<div className=\"lyds-date-input-shell\">\n\t\t\t\t\t<DateInput className=\"lyds-date-input\">{segment => <DateSegment segment={segment} className=\"lyds-date-segment\" />}</DateInput>\n\t\t\t\t\t{showPickerGlyph ? (\n\t\t\t\t\t\t<span className=\"lyds-date-input-affordance\">\n\t\t\t\t\t\t\t<ClockGlyph />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t</AriaTimeField>\n\t\t</LocaleBoundary>\n\t);\n}\n\nfunction TimeFieldImpl<T extends LydsTimeValue>(props: TimeFieldProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn TimeControl(props, ref, false);\n}\n\nfunction TimePickerImpl<T extends LydsTimeValue>(props: TimePickerProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn TimeControl(props, ref, true);\n}\n\nexport const TimeField = forwardRef(TimeFieldImpl) as <T extends LydsTimeValue = Time>(props: TimeFieldProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n\n/*\n 支援地區格式的區段式時間選擇器。此元件不預設有限的時間選項；\n * `minValue`、`maxValue`、`granularity` 與 `hourCycle` 仍由使用端依 React Aria 語意控制。\n */\nexport const TimePicker = forwardRef(TimePickerImpl) as <T extends LydsTimeValue = Time>(props: TimePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":"~~;;;;;~~AAgBA,SAAS,EACR,EAAE,UAAO,gBAAa,UAAO,WAAQ,UAAO,MAAM,cAAW,aAAU,aAAU,aAAU,YAAS,kBAAe,GAAG,KACtH,GACA,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,mBAAmB,KAAmB,oBAAoB,CAAS;GACpG,aAAW;GACX,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA2E;GAThI,UAAA;IAWC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,GAAD;MAAW,WAAU;MAAmB,WAAA,MAAW,kBAAC,GAAD;OAAsB;OAAS,WAAU;MAAqB,CAAA;KAAa,CAAA,GAC7H,IACA,kBAAC,QAAD;MAAM,WAAU;MACf,UAAA,kBAAC,GAAD,CAAa,CAAA;KACR,CAAA,IACH,IACA;;IACL,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;GAC1C;;CACA,CAAA;AAElB;AAEA,SAAS,EAAuC,GAA0B,GAAyC;CAClH,OAAO,EAAY,GAAO,GAAK,EAAK;AACrC;AAEA,SAAS,EAAwC,GAA2B,GAAyC;CACpH,OAAO,EAAY,GAAO,GAAK,EAAI;AACpC;AAEA,IAAa,IAAY,EAAW,CAAa,GAMpC,IAAa,EAAW,CAAc"}
1	+ {"version":3,"file":"time-field.js","names":[],"sources":["../../../src/components/date-time/time-field.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport type { Time } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { TimeField as AriaTimeField, DateInput, DateSegment, type TimeFieldProps as AriaTimeFieldProps } from \"react-aria-components/TimeField\";\nimport type { TimeValue as LydsTimeValue, TimeFieldBehaviorProps } from \"./date-types\";\nimport { ClockGlyph, FieldLabel, FieldMessages, LocaleBoundary, type DateTimeFieldChromeProps } from \"./shared\";\nexport interface TimeFieldProps<T extends LydsTimeValue = Time> extends TimeFieldBehaviorProps<T>, DateTimeFieldChromeProps {}\n\nexport type TimePickerProps<T extends LydsTimeValue = Time> = TimeFieldProps<T>;\n\ntype TimeFieldForwardedKeys = Exclude<keyof TimeFieldBehaviorProps<LydsTimeValue>, \"disabled\" \| \"invalid\" \| \"onValueChange\" \| \"readOnly\" \| \"required\">;\ntype TimeFieldUnexpectedForwardedKeys = Exclude<TimeFieldForwardedKeys, keyof AriaTimeFieldProps<LydsTimeValue>>;\ntype TimeFieldPropContract = TimeFieldUnexpectedForwardedKeys extends never ? true : never;\nconst timeFieldPropContract: TimeFieldPropContract = true;\nvoid timeFieldPropContract;\n\nfunction TimeControl<T extends LydsTimeValue>(\n\t{ label, description, error, locale, size = \"md\", className, disabled, readOnly, required, invalid, onValueChange, ...fieldProps }: TimeFieldProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>,\n\tshowPickerGlyph: boolean\n) {\n\tconst ariaFieldProps = fieldProps as unknown as Omit<AriaTimeFieldProps<T>, \"children\" \| \"className\" \| \"isDisabled\" \| \"isInvalid\" \| \"isReadOnly\" \| \"isRequired\" \| \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaTimeField\n\t\t\t\t{...ariaFieldProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-time-field\", showPickerGlyph && \"lyds-time-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaTimeFieldProps<T>[\"onChange\"]> })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<div className=\"lyds-date-input-shell\">\n\t\t\t\t\t<DateInput className=\"lyds-date-input\">{segment => <DateSegment segment={segment} className=\"lyds-date-segment\" />}</DateInput>\n\t\t\t\t\t{showPickerGlyph ? (\n\t\t\t\t\t\t<span className=\"lyds-date-input-affordance\">\n\t\t\t\t\t\t\t<ClockGlyph />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t</AriaTimeField>\n\t\t</LocaleBoundary>\n\t);\n}\n\nfunction TimeFieldImpl<T extends LydsTimeValue>(props: TimeFieldProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn TimeControl(props, ref, false);\n}\n\nfunction TimePickerImpl<T extends LydsTimeValue>(props: TimePickerProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn TimeControl(props, ref, true);\n}\n\nexport const TimeField = forwardRef(TimeFieldImpl) as <T extends LydsTimeValue = Time>(props: TimeFieldProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n\n/*\n 支援地區格式的區段式時間選擇器。此元件不預設有限的時間選項；\n * `minValue`、`maxValue`、`granularity` 與 `hourCycle` 仍由使用端依 React Aria 語意控制。\n */\nexport const TimePicker = forwardRef(TimePickerImpl) as <T extends LydsTimeValue = Time>(props: TimePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement \| null;\n"],"mappings":";;;;;;;AAgBA,SAAS,EACR,EAAE,UAAO,gBAAa,UAAO,WAAQ,UAAO,MAAM,cAAW,aAAU,aAAU,aAAU,YAAS,kBAAe,GAAG,KACtH,GACA,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,mBAAmB,KAAmB,oBAAoB,CAAS;GACpG,aAAW;GACX,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA2E;GAThI,UAAA;IAWC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,GAAD;MAAW,WAAU;MAAmB,WAAA,MAAW,kBAAC,GAAD;OAAsB;OAAS,WAAU;MAAqB,CAAA;KAAa,CAAA,GAC7H,IACA,kBAAC,QAAD;MAAM,WAAU;MACf,UAAA,kBAAC,GAAD,CAAa,CAAA;KACR,CAAA,IACH,IACA;;IACL,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;GAC1C;;CACA,CAAA;AAElB;AAEA,SAAS,EAAuC,GAA0B,GAAyC;CAClH,OAAO,EAAY,GAAO,GAAK,EAAK;AACrC;AAEA,SAAS,EAAwC,GAA2B,GAAyC;CACpH,OAAO,EAAY,GAAO,GAAK,EAAI;AACpC;AAEA,IAAa,IAAY,EAAW,CAAa,GAMpC,IAAa,EAAW,CAAc"}