@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/_internal/overlay/overlay.css

@@ -0,0 +1,388 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-overlay-anchor-45d8c {
+    display: none;
+  }
+
+  .sti-overlay-overlay-92b75 {
+    z-index: var(--sti-z-modal);
+    box-sizing: border-box;
+    background: var(--sti-scrim);
+    display: grid;
+    position: fixed;
+    inset: 0;
+  }
+
+  .sti-overlay-overlay-92b75[data-kind="dialog"] {
+    padding: max(var(--sti-space-4), env(safe-area-inset-top, 0px))
+      max(var(--sti-space-4), env(safe-area-inset-right, 0px))
+      max(var(--sti-space-4), env(safe-area-inset-bottom, 0px))
+      max(var(--sti-space-4), env(safe-area-inset-left, 0px));
+    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+    place-items: center;
+  }
+
+  .sti-overlay-overlay-92b75[data-entering] {
+    animation: sti-overlay-sti-overlay-fade-9b951 var(--sti-duration-base) var(--sti-ease-out);
+  }
+
+  .sti-overlay-overlay-92b75[data-exiting] {
+    animation: sti-overlay-sti-overlay-fade-9b951 var(--sti-duration-fast) var(--sti-ease-in) reverse;
+  }
+
+  .sti-overlay-card-be6b3 {
+    --sti-overlay-w: 32rem;
+    box-sizing: border-box;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-surface);
+    min-inline-size: 0;
+    box-shadow: var(--sti-shadow-lg);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    outline: none;
+    display: flex;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="dialog"] {
+    inline-size: min(var(--sti-overlay-w), 100%);
+    border-radius: var(--sti-radius-xl);
+    max-block-size: 100%;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="dialog"][data-size="sm"] {
+    --sti-overlay-w: 24rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="dialog"][data-size="lg"] {
+    --sti-overlay-w: 40rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="dialog"][data-size="xl"] {
+    --sti-overlay-w: 48rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="dialog"][data-entering] {
+    animation: sti-overlay-sti-overlay-pop-f6db7 var(--sti-duration-base) var(--sti-ease-out);
+  }
+
+  .sti-overlay-card-be6b3[data-kind="drawer"] {
+    --sti-overlay-w: 24rem;
+    inline-size: min(var(--sti-overlay-w), calc(100% - var(--sti-space-8)));
+    padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
+    border-block: 0;
+    border-inline-end: 0;
+    position: fixed;
+    inset-block: 0;
+    inset-inline-end: 0;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="drawer"][data-side="start"] {
+    border-inline-start: 0;
+    border-inline-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    inset-inline: 0 auto;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="drawer"][data-size="sm"] {
+    --sti-overlay-w: 20rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="drawer"][data-size="lg"] {
+    --sti-overlay-w: 32rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="drawer"][data-size="xl"] {
+    --sti-overlay-w: 40rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="drawer"][data-entering] {
+    animation: sti-overlay-sti-overlay-from-end-82bd4 var(--sti-duration-base) var(--sti-ease-out);
+  }
+
+  .sti-overlay-card-be6b3[data-kind="drawer"][data-exiting] {
+    animation: sti-overlay-sti-overlay-from-end-82bd4 var(--sti-duration-fast) var(--sti-ease-in) reverse;
+  }
+
+  :is(.sti-overlay-card-be6b3[data-kind="drawer"][data-side="start"][data-entering], .sti-overlay-card-be6b3[data-kind="drawer"][data-side="start"][data-exiting], .sti-overlay-card-be6b3[data-kind="drawer"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))[data-entering], .sti-overlay-card-be6b3[data-kind="drawer"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))[data-exiting]) {
+    animation-name: sti-overlay-sti-overlay-from-start-ccb3d;
+  }
+
+  :is(.sti-overlay-card-be6b3[data-kind="drawer"][data-side="start"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))[data-entering], .sti-overlay-card-be6b3[data-kind="drawer"][data-side="start"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))[data-exiting]) {
+    animation-name: sti-overlay-sti-overlay-from-end-82bd4;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="sheet"] {
+    max-block-size: 90dvh;
+    inline-size: min(40rem, 100%);
+    border-radius: var(--sti-radius-xl) var(--sti-radius-xl) 0 0;
+    transition: translate var(--sti-duration-base) var(--sti-ease-out);
+    border-block-end: 0;
+    margin-inline: auto;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline: 0;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="sheet"][data-dragging] {
+    transition: none;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="sheet"][data-entering] {
+    animation: sti-overlay-sti-overlay-from-bottom-1034d var(--sti-duration-base) var(--sti-ease-out);
+  }
+
+  .sti-overlay-card-be6b3[data-kind="sheet"][data-exiting] {
+    animation: sti-overlay-sti-overlay-from-bottom-1034d var(--sti-duration-fast) var(--sti-ease-in) reverse;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"] {
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
+      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+    box-shadow: none;
+    border: 0;
+    position: fixed;
+    inset: 0;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"][data-entering] {
+    animation: sti-overlay-sti-overlay-rise-ae6b4 var(--sti-duration-base) var(--sti-ease-out);
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"][data-exiting] {
+    animation: sti-overlay-sti-overlay-rise-ae6b4 var(--sti-duration-fast) var(--sti-ease-in) reverse;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"] .sti-overlay-head-5e410, .sti-overlay-card-be6b3[data-kind="fullscreen"] .sti-overlay-footer-0d037 {
+    padding-inline: max(var(--sti-space-5), calc((100% - var(--sti-overlay-w)) / 2));
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"] .sti-overlay-head-5e410 {
+    padding-block: var(--sti-space-3);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    align-items: center;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"] .sti-overlay-titles-51547 {
+    padding-block-start: 0;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"] .sti-overlay-close-8c579 {
+    margin-block-start: 0;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"] .sti-overlay-body-5aa27 {
+    padding-block-start: var(--sti-space-5);
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"] .sti-overlay-bodyInner-c9f28 {
+    max-inline-size: var(--sti-overlay-w);
+    margin-inline: auto;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"][data-size="sm"] {
+    --sti-overlay-w: 32rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"][data-size="md"] {
+    --sti-overlay-w: 48rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"][data-size="lg"] {
+    --sti-overlay-w: 64rem;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="fullscreen"][data-size="xl"] {
+    --sti-overlay-w: 100%;
+  }
+
+  .sti-overlay-dialog-645e1 {
+    outline: none;
+    flex-direction: column;
+    flex: 1;
+    min-block-size: 0;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-overlay-handle-3e7e0 {
+    block-size: var(--sti-space-6);
+    cursor: grab;
+    touch-action: none;
+    flex: none;
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-overlay-grip-5976f {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-border);
+    block-size: 4px;
+    inline-size: 2.5rem;
+  }
+
+  .sti-overlay-head-5e410 {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-5) var(--sti-space-5) var(--sti-space-3);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-overlay-card-be6b3[data-kind="sheet"] .sti-overlay-head-5e410 {
+    padding-block-start: 0;
+  }
+
+  .sti-overlay-head-5e410[data-hidden-title] {
+    z-index: 1;
+    padding: 0;
+    position: absolute;
+    inset-block-start: var(--sti-space-3);
+    inset-inline-end: var(--sti-space-3);
+  }
+
+  .sti-overlay-icon-1669f {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    block-size: 2.5rem;
+    inline-size: 2.5rem;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-overlay-card-be6b3[data-tone="danger"] .sti-overlay-icon-1669f {
+    background: var(--sti-bg-danger-subtle);
+    color: var(--sti-fg-danger-strong);
+  }
+
+  .sti-overlay-card-be6b3[data-tone="warning"] .sti-overlay-icon-1669f {
+    background: var(--sti-bg-warning-subtle);
+    color: var(--sti-fg-warning-strong);
+  }
+
+  .sti-overlay-card-be6b3[data-tone="info"] .sti-overlay-icon-1669f {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-overlay-titles-51547 {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    flex: auto;
+    padding-block-start: var(--sti-space-0-5);
+    display: grid;
+  }
+
+  .sti-overlay-title-8a2c3 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-overlay-description-ba9bc {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-overlay-close-8c579 {
+    flex: none;
+    margin-block-start: calc(var(--sti-space-1) * -1);
+    margin-inline-end: calc(var(--sti-space-2) * -1);
+  }
+
+  .sti-overlay-body-5aa27 {
+    min-block-size: 0;
+    padding: var(--sti-space-2) var(--sti-space-5) var(--sti-space-5);
+    overflow-wrap: anywhere;
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    flex: auto;
+    overflow-y: auto;
+  }
+
+  .sti-overlay-head-5e410[data-hidden-title] + .sti-overlay-body-5aa27 {
+    padding-block-start: var(--sti-space-5);
+  }
+
+  .sti-overlay-footer-0d037 {
+    justify-content: flex-end;
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-4) var(--sti-space-5);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    flex-wrap: wrap;
+    flex: none;
+    display: flex;
+  }
+
+  @media (width <= 30rem) {
+    .sti-overlay-footer-0d037 {
+      flex-direction: column-reverse;
+    }
+
+    .sti-overlay-footer-0d037 > * {
+      inline-size: 100%;
+    }
+  }
+
+  @keyframes sti-overlay-sti-overlay-fade-9b951 {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes sti-overlay-sti-overlay-pop-f6db7 {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(.98);
+    }
+  }
+
+  @keyframes sti-overlay-sti-overlay-rise-ae6b4 {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+  }
+
+  @keyframes sti-overlay-sti-overlay-from-end-82bd4 {
+    from {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes sti-overlay-sti-overlay-from-start-ccb3d {
+    from {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes sti-overlay-sti-overlay-from-bottom-1034d {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-overlay-overlay-92b75[data-entering], .sti-overlay-overlay-92b75[data-exiting], .sti-overlay-card-be6b3[data-entering], .sti-overlay-card-be6b3[data-exiting] {
+      animation: none;
+    }
+
+    .sti-overlay-card-be6b3[data-kind="sheet"] {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-overlay-card-be6b3 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/_internal/overlay/overlay.module.js

@@ -0,0 +1,26 @@
+import './overlay.css';
+// src/components/_internal/overlay/overlay.module.css
+var overlay_module_default = {
+	"anchor": "sti-overlay-anchor-45d8c",
+	"overlay": "sti-overlay-overlay-92b75",
+	"sti-overlay-fade": "sti-overlay-sti-overlay-fade-9b951",
+	"card": "sti-overlay-card-be6b3",
+	"sti-overlay-pop": "sti-overlay-sti-overlay-pop-f6db7",
+	"sti-overlay-from-end": "sti-overlay-sti-overlay-from-end-82bd4",
+	"sti-overlay-from-start": "sti-overlay-sti-overlay-from-start-ccb3d",
+	"sti-overlay-from-bottom": "sti-overlay-sti-overlay-from-bottom-1034d",
+	"sti-overlay-rise": "sti-overlay-sti-overlay-rise-ae6b4",
+	"head": "sti-overlay-head-5e410",
+	"footer": "sti-overlay-footer-0d037",
+	"titles": "sti-overlay-titles-51547",
+	"close": "sti-overlay-close-8c579",
+	"body": "sti-overlay-body-5aa27",
+	"bodyInner": "sti-overlay-bodyInner-c9f28",
+	"dialog": "sti-overlay-dialog-645e1",
+	"handle": "sti-overlay-handle-3e7e0",
+	"grip": "sti-overlay-grip-5976f",
+	"icon": "sti-overlay-icon-1669f",
+	"title": "sti-overlay-title-8a2c3",
+	"description": "sti-overlay-description-ba9bc"
+};
+export { overlay_module_default as default };

package/dist/components/_internal/period/PeriodGrid.js

@@ -0,0 +1,62 @@
+"use client";
+import { ChevronRightIcon } from "../../../icons/generated/ChevronRightIcon.js";
+import { ChevronLeftIcon } from "../../../icons/generated/ChevronLeftIcon.js";
+import calendar_module_default from "../date/calendar.module.js";
+import period_module_default from "./period.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, ListBox, ListBoxItem } from "react-aria-components";
+// src/components/_internal/period/PeriodGrid.tsx
+/**
+* Dönem ızgarası (iç): başlıkta önceki/sonraki sayfa düğmeleri ve sayfa adı (yıl ya da on iki
+* yıllık aralık), altında React Aria ListBox (`layout="grid"`): oklar iki yönde gezer, Home/End
+* baş ve son, harf yazmak arar, Enter seçer.
+*/
+function PeriodGrid({ heading, previousLabel, nextLabel, onPrevious, onNext, canPrevious = true, canNext = true, items, selected, onSelect, columns = 3 }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: calendar_module_default.header,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				className: calendar_module_default.nav,
+				"aria-label": previousLabel,
+				onPress: onPrevious,
+				isDisabled: !canPrevious,
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: calendar_module_default.heading,
+				"aria-live": "polite",
+				children: heading
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				className: calendar_module_default.nav,
+				"aria-label": nextLabel,
+				onPress: onNext,
+				isDisabled: !canNext,
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" })
+			})
+		]
+	}), /* @__PURE__ */ jsx(ListBox, {
+		"aria-label": heading,
+		layout: "grid",
+		selectionMode: "single",
+		escapeKeyBehavior: "none",
+		selectedKeys: selected ? [selected] : [],
+		onSelectionChange: (keys) => {
+			const [key] = [...keys];
+			if (key) onSelect(String(key));
+		},
+		disabledKeys: items.filter((i) => i.isDisabled).map((i) => i.id),
+		autoFocus: selected && items.some((i) => i.id === selected) ? true : "first",
+		className: period_module_default.grid,
+		"data-columns": columns,
+		children: items.map((item) => /* @__PURE__ */ jsx(ListBoxItem, {
+			id: item.id,
+			textValue: item.fullLabel,
+			"aria-label": item.fullLabel,
+			className: period_module_default.item,
+			"data-current": item.isCurrent || void 0,
+			children: item.label
+		}, item.id))
+	})] });
+}
+export { PeriodGrid };

package/dist/components/_internal/period/PeriodShell.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+/** Dönem seçicilerinin (hafta, ay, çeyrek, yıl) ortak özellikleri. */
+export interface PeriodBaseProps {
+  label: ReactNode;
+  description?: ReactNode;
+  /** Hata metni (`isInvalid` ile ya da zorunlu boş gönderimde gösterilir). */
+  errorMessage?: string;
+  showOptional?: boolean;
+  size?: "sm" | "md" | "lg";
+  placeholder?: string;
+  /** Form alanı adı: dönemin ISO yazımı gönderilir. */
+  name?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  className?: string;
+  id?: string;
+}

package/dist/components/_internal/period/PeriodShell.js

@@ -0,0 +1,135 @@
+"use client";
+import { useLocale, useMessages } from "../../../provider/UIProvider.js";
+import listbox_module_default from "../listbox/listbox.module.js";
+import { useThemeContext } from "../themeContext.js";
+import { AlertCircleIcon } from "../../../icons/generated/AlertCircleIcon.js";
+import { fieldStyles } from "../../Field/Field.js";
+import select_module_default from "../listbox/select.module.js";
+import { CalendarIcon } from "../../../icons/generated/CalendarIcon.js";
+import dateField_module_default from "../date/dateField.module.js";
+import period_module_default from "./period.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button, Dialog, DialogTrigger, I18nProvider, Popover } from "react-aria-components";
+// src/components/_internal/period/PeriodShell.tsx
+/**
+* Dönem seçicilerin kabuğu (iç): Field görünüşünde düğme (seçili dönemin adı ve takvim ikonu),
+* açılır katmanda seçici içeriği, gizli form alanı ve zorunlu alan doğrulaması. Düğme etiketle ve
+* değerle adlanır; hata durumunda `aria-invalid` taşır (Form'un hata özeti bulur).
+*/
+function PeriodShell({ label, description, errorMessage, showOptional, size = "md", placeholder, name, isRequired, isDisabled, isInvalid, className, id, value, text, children }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const uid = useId();
+	const labelId = `${uid}-label`;
+	const valueId = `${uid}-value`;
+	const descId = `${uid}-desc`;
+	const errId = `${uid}-err`;
+	const anchor = useRef(null);
+	const trigger = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [missing, setMissing] = useState(false);
+	const context = useThemeContext(anchor, open);
+	const showError = isInvalid || missing && !value;
+	const errorText = isInvalid ? errorMessage : t.errorRequired;
+	useEffect(() => {
+		const el = trigger.current;
+		if (!el) return;
+		if (showError) el.setAttribute("aria-invalid", "true");
+		else el.removeAttribute("aria-invalid");
+	}, [showError]);
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsxs("div", {
+			id,
+			className: [
+				fieldStyles.root,
+				period_module_default.root,
+				className
+			].filter(Boolean).join(" "),
+			"data-size": size,
+			"data-invalid": showError || void 0,
+			"data-disabled": isDisabled || void 0,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					ref: anchor,
+					className: listbox_module_default.anchor,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					id: labelId,
+					className: fieldStyles.label,
+					children: [label, showOptional && !isRequired ? /* @__PURE__ */ jsxs("span", {
+						className: fieldStyles.optional,
+						children: [
+							" (",
+							t.optional,
+							")"
+						]
+					}) : null]
+				}),
+				/* @__PURE__ */ jsxs(DialogTrigger, {
+					isOpen: open,
+					onOpenChange: setOpen,
+					children: [/* @__PURE__ */ jsxs(Button, {
+						ref: trigger,
+						isDisabled,
+						"aria-labelledby": `${labelId} ${valueId}`,
+						"aria-describedby": [description ? descId : null, showError ? errId : null].filter(Boolean).join(" ") || void 0,
+						"aria-required": isRequired || void 0,
+						"data-invalid": showError || void 0,
+						className: [fieldStyles.control, select_module_default.trigger].join(" "),
+						children: [/* @__PURE__ */ jsx("span", {
+							id: valueId,
+							className: select_module_default.value,
+							"data-placeholder": text ? void 0 : "",
+							children: text ?? placeholder ?? t.selectPlaceholder
+						}), /* @__PURE__ */ jsx(CalendarIcon, {
+							className: select_module_default.chevron,
+							"aria-hidden": "true"
+						})]
+					}), /* @__PURE__ */ jsx(Popover, {
+						offset: 6,
+						placement: "bottom start",
+						className: dateField_module_default.popover,
+						...context,
+						children: /* @__PURE__ */ jsx(Dialog, {
+							"aria-labelledby": labelId,
+							className: period_module_default.dialog,
+							children: children(() => {
+								setOpen(false);
+								setMissing(false);
+							})
+						})
+					})]
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					id: descId,
+					className: fieldStyles.description,
+					children: description
+				}) : null,
+				showError && errorText ? /* @__PURE__ */ jsxs("span", {
+					id: errId,
+					className: fieldStyles.error,
+					children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: fieldStyles.errorIcon }), /* @__PURE__ */ jsx("span", { children: errorText })]
+				}) : null,
+				/* @__PURE__ */ jsx("input", {
+					className: period_module_default.native,
+					name,
+					value: value ?? "",
+					required: isRequired,
+					disabled: isDisabled,
+					tabIndex: -1,
+					"aria-hidden": "true",
+					onChange: () => {},
+					onInvalid: (e) => {
+						e.preventDefault();
+						setMissing(true);
+						trigger.current?.focus();
+					}
+				})
+			]
+		})
+	});
+}
+export { PeriodShell };