date

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/date/Date.astro directly.
3import { cn } from "@/lib/utils";
4/**
5 * @component Date
6 * @description Formats and displays dates and times in human-readable styles.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2527-2986&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <div class="grid grid-cols-2 gap-4">
12 *   <div>Default:</div> <Date date="2025-06-13T12:00:00Z" />
13 *   <Separator class="col-span-2" />
14 *   <div>Short:</div> <Date date="2025-06-13T12:00:00Z" format="short" />
15 *   <Separator class="col-span-2" />
16 *   <div>Time:</div> <Date date="2025-06-13T12:00:00Z" format="time" />
17 *   <Separator class="col-span-2" />
18 *   <div>Full:</div> <Date date="2025-06-13T12:00:00Z" format="full" />
19 *   <Separator class="col-span-2" />
20 *   <div>Long:</div> <Date date="2025-06-13T12:00:00Z" format="long" />
21 *   <Separator class="col-span-2" />
22 *   <div>Long with time:</div> <Date date="2025-06-13T12:00:00Z" format="long" includeTime />
23 * </div>
24 *
25 * @usage
26 *
27 * ```astro nocollapse
28 * ---
29 * import { Date } from '@bejamas/ui/components/date';
30 * ---
31 *
32 * <Date date="2025-06-24T12:00:00Z" />
33 * ```
34 *
35 * @examples
36 *
37 * ### Custom locale
38 *
39 * <div class="flex gap-2 flex-col">
40 *   <Date date="2025-06-24T12:00:00Z" locale="fr-FR" />
41 *   <Date date="2025-06-24T12:00:00Z" locale="de-DE" />
42 *   <Date date="2025-06-24T12:00:00Z" locale="es-ES" />
43 *   <Date date="2025-06-24T12:00:00Z" locale="pl-PL" />
44 * </div>
45 */
46const {
47  date,
48  format = "long",
49  includeTime = false,
50  locale = "en-US",
51  class: className = "",
52  ...props
53} = Astro.props;
54 
55// Helper: parse date input
56function parseDate(input: string | globalThis.Date | null | undefined) {
57  if (!input) return null;
58  if (input instanceof globalThis.Date) return input;
59  // Try to parse string
60  const d = new globalThis.Date(input);
61  return isNaN(d.getTime()) ? null : d;
62}
63 
64const parsedDate = parseDate(date);
65 
66// Precompute separate date and time strings to support custom rendering via slot
67let dateText = "";
68let timeText = "";
69let formatted = "";
70let html = "";
71if (parsedDate) {
72  let dateOptions: Intl.DateTimeFormatOptions | undefined;
73  switch (format) {
74    case "short":
75      dateOptions = { dateStyle: "short" };
76      break;
77    case "full":
78      dateOptions = { dateStyle: "full" };
79      break;
80    case "time":
81      dateOptions = undefined;
82      break;
83    case "long":
84// … truncated