@petrarca/sonnet-playground 0.5.0 → 0.6.0

package/dist/{PlayCoreComponents-AG5D4SBS.js → PlayCoreComponents-YTEAS3GL.js}

@@ -1,8 +1,8 @@
 import {
   PlayCoreComponents
-} from "./chunk-Q6NLY2BZ.js";
+} from "./chunk-6WI3N7JI.js";
 import "./chunk-C2EZ2ECG.js";
 export {
   PlayCoreComponents as default
 };
-//# sourceMappingURL=PlayCoreComponents-AG5D4SBS.js.map
+//# sourceMappingURL=PlayCoreComponents-YTEAS3GL.js.map

package/dist/{PlayFormWidgets-IWJJQ5XL.js → PlayFormWidgets-6JYFRTAL.js}

@@ -1,8 +1,8 @@
 import {
   PlayFormWidgets
-} from "./chunk-DZB6WFHA.js";
+} from "./chunk-UB7462QG.js";
 import "./chunk-C2EZ2ECG.js";
 export {
   PlayFormWidgets as default
 };
-//# sourceMappingURL=PlayFormWidgets-IWJJQ5XL.js.map
+//# sourceMappingURL=PlayFormWidgets-6JYFRTAL.js.map

package/dist/PlayForms-2G7PROCH.js

@@ -0,0 +1,7 @@
+import {
+  PlayForms
+} from "./chunk-ZSUCFEB6.js";
+export {
+  PlayForms as default
+};
+//# sourceMappingURL=PlayForms-2G7PROCH.js.map

package/dist/PlaySchemaDesigner-ZM4F7KBU.js

@@ -0,0 +1,7 @@
+import {
+  PlaySchemaDesigner
+} from "./chunk-6VQJFBTM.js";
+export {
+  PlaySchemaDesigner as default
+};
+//# sourceMappingURL=PlaySchemaDesigner-ZM4F7KBU.js.map

package/dist/{chunk-PBT6HTKY.js → chunk-6VQJFBTM.js}

@@ -86,6 +86,131 @@ var AUDIT_SCHEMA = {
     }
   }
 };
+var LOGIC_SCHEMA = {
+  title: "Checkout",
+  type: "object",
+  // A reusable definition referenced by $ref (shows read-only expansion).
+  $defs: {
+    Address: {
+      type: "object",
+      properties: {
+        street: { type: "string", title: "Street" },
+        city: { type: "string", title: "City" },
+        zip: { type: "string", title: "ZIP" }
+      }
+    }
+  },
+  "x-ui-order": [
+    "schema_version",
+    "amount",
+    "requires_approval",
+    "currency",
+    "expedited",
+    "delivery_window",
+    "gift_wrap",
+    "gift_message",
+    "shipping_address",
+    "note",
+    "payment"
+  ],
+  properties: {
+    // A $ref to the shared Address definition (read-only in the tree).
+    shipping_address: { $ref: "#/$defs/Address", title: "Shipping address" },
+    // A fixed value carried by every document (const authoring).
+    schema_version: {
+      type: "string",
+      title: "Schema version",
+      const: "checkout/v1"
+    },
+    amount: { type: "number", title: "Amount", minimum: 0 },
+    currency: {
+      type: "string",
+      title: "Currency",
+      enum: ["EUR", "USD", "GBP"]
+    },
+    expedited: { type: "boolean", title: "Expedited" },
+    gift_wrap: { type: "boolean", title: "Gift wrap" },
+    // Declarative visibility rule (x-ui-rule): declared at its own position,
+    // shown only when gift_wrap is checked. Contrast with the if/then/else
+    // fields above, which are structurally added by their conditionals.
+    gift_message: {
+      type: "string",
+      title: "Gift message",
+      "x-ui-rule": {
+        effect: "show",
+        condition: { scope: "/gift_wrap", schema: { const: true } }
+      }
+    },
+    // Nullable optional (anyOf [T, null]) -- the renderer unwraps to T.
+    note: {
+      title: "Note (optional)",
+      anyOf: [{ type: "string" }, { type: "null" }]
+    },
+    // A discriminated union (oneOf): the payment method.
+    payment: {
+      type: "object",
+      title: "Payment method",
+      discriminator: { propertyName: "kind" },
+      oneOf: [
+        {
+          title: "Card",
+          properties: {
+            kind: { const: "card" },
+            card_number: { type: "string", title: "Card number" },
+            cvc: { type: "string", title: "CVC" }
+          }
+        },
+        {
+          title: "Bank transfer",
+          properties: {
+            kind: { const: "bank" },
+            iban: { type: "string", title: "IBAN" }
+          }
+        },
+        {
+          title: "Cash",
+          properties: { kind: { const: "cash" } }
+        }
+      ]
+    }
+  },
+  required: ["amount", "currency"],
+  // Conditionals (if/then/else) authored as allOf members.
+  allOf: [
+    {
+      // Large amounts require an approval reference.
+      if: {
+        properties: { amount: { exclusiveMinimum: 1e3 } },
+        required: ["amount"]
+      },
+      then: {
+        properties: {
+          requires_approval: {
+            type: "string",
+            title: "Approval reference"
+          }
+        },
+        required: ["requires_approval"]
+      }
+    },
+    {
+      // Expedited orders ask for a delivery window; otherwise none.
+      if: {
+        properties: { expedited: { const: true } },
+        required: ["expedited"]
+      },
+      then: {
+        properties: {
+          delivery_window: {
+            type: "string",
+            title: "Delivery window",
+            enum: ["morning", "afternoon", "evening"]
+          }
+        }
+      }
+    }
+  ]
+};
 var AUDIT_EDITABLE_PATHS = [
   "/properties/metadata/properties",
   "/properties/actor/properties/metadata/properties",
@@ -120,11 +245,10 @@ var PROFILES = {
     schema: SAMPLE_SCHEMA,
     capabilities: { mode: "data", previews: [] }
   },
-  readonly: {
-    label: "Read-only",
-    description: "Fully locked -- view only, no edit affordances.",
-    schema: SAMPLE_SCHEMA,
-    readOnly: true,
+  logic: {
+    label: "Logic (variants + conditionals)",
+    description: "Shows every logic construct: a oneOf variant, if/then/else conditionals, a const field, and a nullable optional.",
+    schema: LOGIC_SCHEMA,
     capabilities: { previews: ["form", "table", "json", "capabilities"] }
   }
 };
@@ -188,4 +312,4 @@ function PlaySchemaDesigner() {
 export {
   PlaySchemaDesigner
 };
-//# sourceMappingURL=chunk-PBT6HTKY.js.map
+//# sourceMappingURL=chunk-6VQJFBTM.js.map

package/dist/chunk-6VQJFBTM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlaySchemaDesigner.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  SchemaDesigner,\n  type SchemaDesignerCapabilities,\n} from \"@petrarca/sonnet-schema-designer\";\nimport { FormSelect } from \"@petrarca/sonnet-forms\";\nimport type { JsonSchema, UISchema } from \"@petrarca/sonnet-core/schema\";\n\nconst SAMPLE_SCHEMA: JsonSchema = {\n  title: \"Patient\",\n  type: \"object\",\n  properties: {\n    first_name: { type: \"string\", title: \"First name\", minLength: 1 },\n    last_name: { type: \"string\", title: \"Last name\", minLength: 1 },\n    date_of_birth: { type: \"string\", format: \"date\", title: \"Date of birth\" },\n    gender: {\n      type: \"string\",\n      title: \"Gender\",\n      enum: [\"male\", \"female\", \"other\", \"unknown\"],\n    },\n    active: { type: \"boolean\", title: \"Active\" },\n    contact: {\n      type: \"object\",\n      title: \"Contact\",\n      properties: {\n        email: { type: \"string\", format: \"email\", title: \"Email\" },\n        phone: { type: \"string\", title: \"Phone\" },\n      },\n      required: [\"email\"],\n    },\n    addresses: {\n      type: \"array\",\n      title: \"Addresses\",\n      minItems: 1,\n      maxItems: 3,\n      items: {\n        type: \"object\",\n        properties: {\n          street: { type: \"string\", title: \"Street\" },\n          city: { type: \"string\", title: \"City\" },\n          zip: { type: \"string\", title: \"ZIP\" },\n          country: { type: \"string\", title: \"Country\" },\n        },\n        required: [\"street\", \"city\"],\n      },\n    },\n  },\n  required: [\"first_name\", \"last_name\"],\n};\n\n// An audit-event-like schema: a fixed envelope (actor, targets) with three\n// extensible metadata containers. Used to demo scoped editing.\nconst AUDIT_SCHEMA: JsonSchema = {\n  title: \"AuditEvent\",\n  type: \"object\",\n  properties: {\n    actor: {\n      type: \"object\",\n      title: \"Actor\",\n      properties: {\n        type: { type: \"string\", title: \"Type\" },\n        id: { type: \"string\", title: \"ID\" },\n        metadata: {\n          type: \"object\",\n          title: \"Actor metadata\",\n          properties: { role: { type: \"string\", title: \"Role\" } },\n        },\n      },\n    },\n    targets: {\n      type: \"array\",\n      title: \"Targets\",\n      items: {\n        type: \"object\",\n        properties: {\n          type: { type: \"string\", title: \"Type\" },\n          id: { type: \"string\", title: \"ID\" },\n          metadata: {\n            type: \"object\",\n            title: \"Target metadata\",\n            properties: { ward: { type: \"string\", title: \"Ward\" } },\n          },\n        },\n      },\n    },\n    metadata: {\n      type: \"object\",\n      title: \"Metadata\",\n      properties: { reason: { type: \"string\", title: \"Reason\" } },\n    },\n  },\n};\n\n// A schema exercising every logic construct the designer can author: a oneOf\n// discriminated variant (payment method), if/then/else conditionals (authored\n// as allOf members), a const-tagged field, and a nullable anyOf optional field.\n// x-ui-order places each conditional field right after the property it depends\n// on (see docs/design/schema-designer-logic-authoring.md, ordering note).\nconst LOGIC_SCHEMA: JsonSchema = {\n  title: \"Checkout\",\n  type: \"object\",\n  // A reusable definition referenced by $ref (shows read-only expansion).\n  $defs: {\n    Address: {\n      type: \"object\",\n      properties: {\n        street: { type: \"string\", title: \"Street\" },\n        city: { type: \"string\", title: \"City\" },\n        zip: { type: \"string\", title: \"ZIP\" },\n      },\n    },\n  },\n  \"x-ui-order\": [\n    \"schema_version\",\n    \"amount\",\n    \"requires_approval\",\n    \"currency\",\n    \"expedited\",\n    \"delivery_window\",\n    \"gift_wrap\",\n    \"gift_message\",\n    \"shipping_address\",\n    \"note\",\n    \"payment\",\n  ],\n  properties: {\n    // A $ref to the shared Address definition (read-only in the tree).\n    shipping_address: { $ref: \"#/$defs/Address\", title: \"Shipping address\" },\n    // A fixed value carried by every document (const authoring).\n    schema_version: {\n      type: \"string\",\n      title: \"Schema version\",\n      const: \"checkout/v1\",\n    },\n    amount: { type: \"number\", title: \"Amount\", minimum: 0 },\n    currency: {\n      type: \"string\",\n      title: \"Currency\",\n      enum: [\"EUR\", \"USD\", \"GBP\"],\n    },\n    expedited: { type: \"boolean\", title: \"Expedited\" },\n    gift_wrap: { type: \"boolean\", title: \"Gift wrap\" },\n    // Declarative visibility rule (x-ui-rule): declared at its own position,\n    // shown only when gift_wrap is checked. Contrast with the if/then/else\n    // fields above, which are structurally added by their conditionals.\n    gift_message: {\n      type: \"string\",\n      title: \"Gift message\",\n      \"x-ui-rule\": {\n        effect: \"show\",\n        condition: { scope: \"/gift_wrap\", schema: { const: true } },\n      },\n    },\n    // Nullable optional (anyOf [T, null]) -- the renderer unwraps to T.\n    note: {\n      title: \"Note (optional)\",\n      anyOf: [{ type: \"string\" }, { type: \"null\" }],\n    },\n    // A discriminated union (oneOf): the payment method.\n    payment: {\n      type: \"object\",\n      title: \"Payment method\",\n      discriminator: { propertyName: \"kind\" },\n      oneOf: [\n        {\n          title: \"Card\",\n          properties: {\n            kind: { const: \"card\" },\n            card_number: { type: \"string\", title: \"Card number\" },\n            cvc: { type: \"string\", title: \"CVC\" },\n          },\n        },\n        {\n          title: \"Bank transfer\",\n          properties: {\n            kind: { const: \"bank\" },\n            iban: { type: \"string\", title: \"IBAN\" },\n          },\n        },\n        {\n          title: \"Cash\",\n          properties: { kind: { const: \"cash\" } },\n        },\n      ],\n    },\n  },\n  required: [\"amount\", \"currency\"],\n  // Conditionals (if/then/else) authored as allOf members.\n  allOf: [\n    {\n      // Large amounts require an approval reference.\n      if: {\n        properties: { amount: { exclusiveMinimum: 1000 } },\n        required: [\"amount\"],\n      },\n      then: {\n        properties: {\n          requires_approval: {\n            type: \"string\",\n            title: \"Approval reference\",\n          },\n        },\n        required: [\"requires_approval\"],\n      },\n    },\n    {\n      // Expedited orders ask for a delivery window; otherwise none.\n      if: {\n        properties: { expedited: { const: true } },\n        required: [\"expedited\"],\n      },\n      then: {\n        properties: {\n          delivery_window: {\n            type: \"string\",\n            title: \"Delivery window\",\n            enum: [\"morning\", \"afternoon\", \"evening\"],\n          },\n        },\n      },\n    },\n  ],\n};\n\nconst AUDIT_EDITABLE_PATHS = [\n  \"/properties/metadata/properties\",\n  \"/properties/actor/properties/metadata/properties\",\n  \"/properties/targets/items/properties/metadata/properties\",\n];\n\ntype ProfileKey = \"full\" | \"data\" | \"scoped\" | \"structure\" | \"logic\";\n\ninterface Profile {\n  label: string;\n  description: string;\n  schema: JsonSchema;\n  capabilities?: SchemaDesignerCapabilities;\n  readOnly?: boolean;\n}\n\nconst PROFILES: Record<ProfileKey, Profile> = {\n  full: {\n    label: \"Full (schema + uiSchema)\",\n    description: \"Default: author the schema and its form presentation hints.\",\n    schema: SAMPLE_SCHEMA,\n    capabilities: { previews: [\"form\", \"table\", \"json\", \"capabilities\"] },\n  },\n  data: {\n    label: \"Data schema only\",\n    description:\n      \"Pure JSON Schema (audit, terminology): no UI/Combined tabs, JSON preview only.\",\n    schema: SAMPLE_SCHEMA,\n    capabilities: { mode: \"data\", previews: [\"json\", \"capabilities\"] },\n  },\n  scoped: {\n    label: \"Scoped (audit event)\",\n    description:\n      \"Fixed envelope; only the three metadata containers are editable.\",\n    schema: AUDIT_SCHEMA,\n    capabilities: {\n      mode: \"data\",\n      editablePaths: AUDIT_EDITABLE_PATHS,\n      previews: [\"json\", \"capabilities\"],\n    },\n  },\n  structure: {\n    label: \"Structure only (no preview)\",\n    description: \"Tree + inspector only; the center preview pane is hidden.\",\n    schema: SAMPLE_SCHEMA,\n    capabilities: { mode: \"data\", previews: [] },\n  },\n  logic: {\n    label: \"Logic (variants + conditionals)\",\n    description:\n      \"Shows every logic construct: a oneOf variant, if/then/else conditionals, a const field, and a nullable optional.\",\n    schema: LOGIC_SCHEMA,\n    capabilities: { previews: [\"form\", \"table\", \"json\", \"capabilities\"] },\n  },\n};\n\n/**\n * PlaySchemaDesigner -- exercises SchemaDesigner: visually author a JsonSchema\n * (and its uiSchema presentation hints), with a live preview. The profile\n * switcher presets the capability profile (data/full triage, scoped editing,\n * read-only); the in-designer Capabilities tab tweaks it live.\n */\nexport default function PlaySchemaDesigner() {\n  const [profileKey, setProfileKey] = useState<ProfileKey>(\"full\");\n  const profile = PROFILES[profileKey];\n\n  const [schema, setSchema] = useState<JsonSchema>(profile.schema);\n  const [uiSchema, setUiSchema] = useState<Record<string, UISchema>>({});\n\n  const selectProfile = (key: ProfileKey) => {\n    setProfileKey(key);\n    setSchema(PROFILES[key].schema);\n    setUiSchema({});\n  };\n\n  return (\n    <div className=\"w-full flex flex-col gap-3 h-[calc(100vh-8rem)]\">\n      <div>\n        <h1>Schema Designer</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Visually author a JSON Schema and its UI presentation hints. Edits\n          flow through onChange as a valid schema + uiSchema.\n        </p>\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <label\n          htmlFor=\"capability-profile\"\n          className=\"shrink-0 text-sm font-medium\"\n        >\n          Capability profile\n        </label>\n        <div className=\"w-72\">\n          <FormSelect\n            id=\"capability-profile\"\n            name=\"profile\"\n            value={profileKey}\n            options={(Object.keys(PROFILES) as ProfileKey[]).map((k) => ({\n              value: k,\n              label: PROFILES[k].label,\n            }))}\n            onChange={(v) => selectProfile((v as ProfileKey) ?? \"full\")}\n            clearable={false}\n          />\n        </div>\n        <p className=\"text-sm text-muted-foreground\">{profile.description}</p>\n      </div>\n\n      <div style={{ flex: 1, minHeight: 0 }}>\n        <SchemaDesigner\n          key={profileKey}\n          schema={schema}\n          uiSchema={uiSchema}\n          capabilities={profile.capabilities}\n          readOnly={profile.readOnly}\n          onChange={(nextSchema, nextUiSchema) => {\n            setSchema(nextSchema);\n            setUiSchema(nextUiSchema);\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-Q6NLY2BZ.js → chunk-6WI3N7JI.js}

@@ -19,6 +19,17 @@ import {
   Textarea,
   Checkbox,
   Label,
+  DateInput,
+  TimeInput,
+  DateTimeInput,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
   Avatar,
   AvatarImage,
   AvatarFallback,
@@ -51,6 +62,299 @@ import {
   Copy
 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function SelectSection() {
+  const [fruit, setFruit] = useState("");
+  const [tz, setTz] = useState("cet");
+  return /* @__PURE__ */ jsx(
+    PlaygroundSection,
+    {
+      title: "Select",
+      description: "Single-value dropdown built on Radix Select. Styled trigger, keyboard navigable, with optional groups and labels. For searchable or entity-backed selection use FormSelect / EntitySelect instead.",
+      variant: "card",
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "select-fruit", children: "Basic (with placeholder)" }),
+          /* @__PURE__ */ jsxs(Select, { value: fruit, onValueChange: setFruit, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "select-fruit", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a fruit" }) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "apple", children: "Apple" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "banana", children: "Banana" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "cherry", children: "Cherry" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "durian", disabled: true, children: "Durian (out of stock)" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: fruit || "(none)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "select-tz", children: "Grouped options" }),
+          /* @__PURE__ */ jsxs(Select, { value: tz, onValueChange: setTz, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "select-tz", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsxs(SelectGroup, { children: [
+                /* @__PURE__ */ jsx(SelectLabel, { children: "Europe" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "cet", children: "Central European" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "gmt", children: "Greenwich Mean" })
+              ] }),
+              /* @__PURE__ */ jsx(SelectSeparator, {}),
+              /* @__PURE__ */ jsxs(SelectGroup, { children: [
+                /* @__PURE__ */ jsx(SelectLabel, { children: "Americas" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "est", children: "Eastern" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "pst", children: "Pacific" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: tz })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "select-disabled", children: "Disabled" }),
+          /* @__PURE__ */ jsxs(Select, { disabled: true, value: "apple", children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "select-disabled", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "apple", children: "Apple" }) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DateInputSection() {
+  const [dateDay, setDateDay] = useState("2026-06-15");
+  const [dateMonth, setDateMonth] = useState("1980-06");
+  const [dateYear, setDateYear] = useState("1980");
+  const [dateEmpty, setDateEmpty] = useState("");
+  return /* @__PURE__ */ jsx(
+    PlaygroundSection,
+    {
+      title: "Date Input",
+      description: "Text input with a calendar popover. Value is a partial ISO 8601 date string (YYYY, YYYY-MM, or YYYY-MM-DD depending on precision). Display and parsing follow the playground locale (gear icon, top-right of the Overview page); values stay ISO. Supports typed entry, calendar drill-down, and quick entry ('t', 'today', '.').",
+      variant: "card",
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "date-day", children: "Day precision (YYYY-MM-DD)" }),
+          /* @__PURE__ */ jsx(DateInput, { id: "date-day", value: dateDay, onChange: setDateDay }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: dateDay || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "date-month", children: "Month precision (YYYY-MM)" }),
+          /* @__PURE__ */ jsx(
+            DateInput,
+            {
+              id: "date-month",
+              precision: "month",
+              value: dateMonth,
+              onChange: setDateMonth
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: dateMonth || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "date-year", children: "Year precision (YYYY)" }),
+          /* @__PURE__ */ jsx(
+            DateInput,
+            {
+              id: "date-year",
+              precision: "year",
+              value: dateYear,
+              onChange: setDateYear
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: dateYear || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "date-empty", children: "Empty + clearable" }),
+          /* @__PURE__ */ jsx(
+            DateInput,
+            {
+              id: "date-empty",
+              value: dateEmpty,
+              onChange: setDateEmpty,
+              placeholder: "Pick or type a date"
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: dateEmpty || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "date-disabled", children: "Disabled" }),
+          /* @__PURE__ */ jsx(
+            DateInput,
+            {
+              id: "date-disabled",
+              value: "2026-01-01",
+              onChange: () => {
+              },
+              disabled: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "date-error", children: "With error" }),
+          /* @__PURE__ */ jsx(
+            DateInput,
+            {
+              id: "date-error",
+              value: "",
+              onChange: () => {
+              },
+              error: "This date is required"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function TimeInputSection() {
+  const [timeMin, setTimeMin] = useState("09:30");
+  const [timeSec, setTimeSec] = useState("21:05:07");
+  const [timeEmpty, setTimeEmpty] = useState("");
+  return /* @__PURE__ */ jsx(
+    PlaygroundSection,
+    {
+      title: "Time Input",
+      description: "Zone-free time of day. Value is a normalized ISO time string (HH:mm or HH:mm:ss). No timezone. Supports lenient typed entry ('9', '930', '9:30') and quick entry (type 'n', 'now', or '.' for the current time).",
+      variant: "card",
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "time-min", children: "Minute granularity (HH:mm)" }),
+          /* @__PURE__ */ jsx(TimeInput, { id: "time-min", value: timeMin, onChange: setTimeMin }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: timeMin || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "time-sec", children: "Second granularity (HH:mm:ss)" }),
+          /* @__PURE__ */ jsx(
+            TimeInput,
+            {
+              id: "time-sec",
+              granularity: "second",
+              value: timeSec,
+              onChange: setTimeSec
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: timeSec || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "time-empty", children: "Empty + clearable" }),
+          /* @__PURE__ */ jsx(
+            TimeInput,
+            {
+              id: "time-empty",
+              value: timeEmpty,
+              onChange: setTimeEmpty
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: timeEmpty || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "time-error", children: "With error" }),
+          /* @__PURE__ */ jsx(
+            TimeInput,
+            {
+              id: "time-error",
+              value: "",
+              onChange: () => {
+              },
+              error: "This time is required"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function DateTimeInputSection() {
+  const [dt, setDt] = useState("2026-06-15T09:30");
+  const [dtZoned, setDtZoned] = useState("2026-11-02T10:00");
+  const [dtEmpty, setDtEmpty] = useState("");
+  return /* @__PURE__ */ jsx(
+    PlaygroundSection,
+    {
+      title: "Date-Time Input",
+      description: "Combined date + time for a plain wall-clock datetime (YYYY-MM-DDTHH:mm[:ss]), no timezone. Resolving to an absolute instant is the consumer's job. The optional timeZone prop is a display-only hint, never applied or user-entered.",
+      variant: "card",
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Plain wall-clock" }),
+          /* @__PURE__ */ jsx(DateTimeInput, { idPrefix: "dt", value: dt, onChange: setDt }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: dt || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { children: "With timezone hint" }),
+          /* @__PURE__ */ jsx(
+            DateTimeInput,
+            {
+              idPrefix: "dt-zoned",
+              value: dtZoned,
+              onChange: setDtZoned,
+              timeZone: "Europe/Berlin"
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: dtZoned || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Second granularity + empty" }),
+          /* @__PURE__ */ jsx(
+            DateTimeInput,
+            {
+              idPrefix: "dt-empty",
+              granularity: "second",
+              value: dtEmpty,
+              onChange: setDtEmpty
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-tertiary-foreground", children: [
+            "Value: ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: dtEmpty || "(empty)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Disabled" }),
+          /* @__PURE__ */ jsx(
+            DateTimeInput,
+            {
+              idPrefix: "dt-disabled",
+              value: "2026-01-01T08:00",
+              onChange: () => {
+              },
+              disabled: true
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 function PlayCoreComponents() {
   const [spinnerSize, setSpinnerSize] = useState("md");
   const clipboard = useClipboard({ timeout: 2e3 });
@@ -598,6 +902,10 @@ function PlayCoreComponents() {
           ] })
         }
       ),
+      /* @__PURE__ */ jsx(SelectSection, {}),
+      /* @__PURE__ */ jsx(DateInputSection, {}),
+      /* @__PURE__ */ jsx(TimeInputSection, {}),
+      /* @__PURE__ */ jsx(DateTimeInputSection, {}),
       /* @__PURE__ */ jsx(
         PlaygroundSection,
         {
@@ -982,4 +1290,4 @@ function PlayCoreComponents() {
 export {
   PlayCoreComponents
 };
-//# sourceMappingURL=chunk-Q6NLY2BZ.js.map
+//# sourceMappingURL=chunk-6WI3N7JI.js.map