@petrarca/sonnet-playground 0.1.2

package/dist/chunk-5V27QDAY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayFormComponents.tsx"],"sourcesContent":["/**\n * Playground page for testing Form components\n * Accessible at /playground/form-components\n *\n * Tests all custom Form wrapper components that provide consistent\n * label, description, and error handling around base UI components.\n */\n\nimport { useState } from \"react\";\nimport { SimpleStack, Card } from \"@petrarca/sonnet-ui\";\nimport {\n  FormInput,\n  FormTextarea,\n  FormNumberInput,\n  FormCheckbox,\n  FormSelect,\n  FormMultiSelect,\n  FormTagsInput,\n} from \"@petrarca/sonnet-forms\";\n\nexport default function PlayFormComponents() {\n  // FormInput states\n  const [textValue, setTextValue] = useState(\"\");\n  const [emailValue, setEmailValue] = useState(\"\");\n  const [passwordValue, setPasswordValue] = useState(\"\");\n  const [urlValue, setUrlValue] = useState(\"\");\n\n  // FormTextarea states\n  const [textareaValue, setTextareaValue] = useState(\"\");\n  const [textareaError, setTextareaError] = useState(\"\");\n\n  // FormNumberInput states\n  const [numberValue, setNumberValue] = useState<number | undefined>(undefined);\n  const [rangeValue, setRangeValue] = useState<number | undefined>(5);\n  const [decimalValue, setDecimalValue] = useState<number | undefined>(\n    undefined,\n  );\n\n  // FormCheckbox states\n  const [checkboxValue, setCheckboxValue] = useState(false);\n  const [checkboxIndeterminate, setCheckboxIndeterminate] = useState<\n    boolean | \"indeterminate\"\n  >(\"indeterminate\");\n\n  // FormSelect states\n  const [selectValue, setSelectValue] = useState(\"\");\n  const [selectRequired, setSelectRequired] = useState(\"\");\n\n  // FormMultiSelect states\n  const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n\n  // FormTagsInput states\n  const [tagsValue, setTagsValue] = useState<string[]>([\"react\", \"typescript\"]);\n\n  // Options for selects\n  const colorOptions = [\n    { label: \"Red\", value: \"red\" },\n    { label: \"Green\", value: \"green\" },\n    { label: \"Blue\", value: \"blue\" },\n    { label: \"Yellow\", value: \"yellow\" },\n    { label: \"Purple\", value: \"purple\" },\n  ];\n\n  const countryOptions = [\n    { label: \"United States\", value: \"us\" },\n    { label: \"Canada\", value: \"ca\" },\n    { label: \"United Kingdom\", value: \"uk\" },\n    { label: \"Germany\", value: \"de\" },\n    { label: \"France\", value: \"fr\" },\n    { label: \"Japan\", value: \"jp\" },\n    { label: \"Australia\", value: \"au\" },\n  ];\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        height: \"100vh\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        overflow: \"hidden\",\n      }}\n    >\n      <div style={{ padding: \"1rem 1rem 0 1rem\" }}>\n        <h1>Form Components Playground</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Test all custom Form wrapper components with labels, descriptions, and\n          error states\n        </p>\n      </div>\n\n      <div style={{ flex: 1, overflow: \"auto\", padding: \"0 1rem 1rem 1rem\" }}>\n        <SimpleStack gap=\"md\" style={{ maxWidth: \"900px\" }}>\n          {/* FormInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <p className=\"text-lg font-semibold\">FormInput</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Text input wrapper with label, description, and error support.\n                Supports all HTML input types.\n              </p>\n\n              <SimpleStack gap=\"xs\">\n                <p className=\"text-sm font-medium\">Basic Text Input:</p>\n                <FormInput\n                  label=\"Username\"\n                  value={textValue}\n                  onChange={(e) => setTextValue(e.target.value)}\n                  placeholder=\"Enter username\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Description:</p>\n                <FormInput\n                  label=\"Full Name\"\n                  description=\"Your first and last name\"\n                  value={textValue}\n                  onChange={(e) => setTextValue(e.target.value)}\n                  placeholder=\"John Doe\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Required Field:</p>\n                <FormInput\n                  label=\"Email\"\n                  required\n                  value={emailValue}\n                  onChange={(e) => setEmailValue(e.target.value)}\n                  placeholder=\"john@example.com\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Error:</p>\n                <FormInput\n                  label=\"Email\"\n                  value={emailValue}\n                  onChange={(e) => setEmailValue(e.target.value)}\n                  error=\"Invalid email format\"\n                  placeholder=\"john@example.com\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Password Input:</p>\n                <FormInput\n                  label=\"Password\"\n                  type=\"password\"\n                  value={passwordValue}\n                  onChange={(e) => setPasswordValue(e.target.value)}\n                  placeholder=\"••••••••\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">URL Input:</p>\n                <FormInput\n                  label=\"Website\"\n                  type=\"url\"\n                  value={urlValue}\n                  onChange={(e) => setUrlValue(e.target.value)}\n                  placeholder=\"https://example.com\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Disabled:</p>\n                <FormInput\n                  label=\"Readonly Field\"\n                  value=\"Cannot edit this\"\n                  onChange={() => {}}\n                  disabled\n                />\n              </SimpleStack>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormInput\n  label=\"Username\"\n  value={textValue}\n  onChange={(e) => setTextValue(e.target.value)}\n  placeholder=\"Enter username\"\n  description=\"Optional description\"\n  error=\"Optional error message\"\n  required={false}\n  disabled={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {textValue || \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormTextarea */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <p className=\"text-lg font-semibold\">FormTextarea</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Multi-line text input with label, description, and error\n                support.\n              </p>\n\n              <SimpleStack gap=\"xs\">\n                <p className=\"text-sm font-medium\">Basic Textarea:</p>\n                <FormTextarea\n                  label=\"Description\"\n                  value={textareaValue}\n                  onChange={(e) => setTextareaValue(e.target.value)}\n                  placeholder=\"Enter a detailed description...\"\n                  rows={4}\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Description:</p>\n                <FormTextarea\n                  label=\"Bio\"\n                  description=\"Tell us about yourself (max 500 characters)\"\n                  value={textareaValue}\n                  onChange={(e) => setTextareaValue(e.target.value)}\n                  placeholder=\"I am a...\"\n                  rows={3}\n                />\n\n                <p className=\"text-sm font-medium mt-2\">\n                  With Error Validation:\n                </p>\n                <FormTextarea\n                  label=\"Comments\"\n                  value={textareaValue}\n                  onChange={(e) => {\n                    setTextareaValue(e.target.value);\n                    setTextareaError(\n                      e.target.value.length > 100\n                        ? \"Maximum 100 characters allowed\"\n                        : \"\",\n                    );\n                  }}\n                  error={textareaError}\n                  placeholder=\"Enter your comments...\"\n                  rows={3}\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Disabled:</p>\n                <FormTextarea\n                  label=\"Readonly Text\"\n                  value=\"This cannot be edited\"\n                  onChange={() => {}}\n                  disabled\n                  rows={2}\n                />\n              </SimpleStack>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormTextarea\n  label=\"Description\"\n  value={textareaValue}\n  onChange={(e) => setTextareaValue(e.target.value)}\n  placeholder=\"Enter text...\"\n  rows={4}\n  description=\"Optional description\"\n  error=\"Optional error message\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {textareaValue || \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormNumberInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <p className=\"text-lg font-semibold\">FormNumberInput</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Number input with min/max validation and step control.\n              </p>\n\n              <SimpleStack gap=\"xs\">\n                <p className=\"text-sm font-medium\">Basic Number Input:</p>\n                <FormNumberInput\n                  label=\"Age\"\n                  value={numberValue}\n                  onChange={setNumberValue}\n                  placeholder=\"Enter age\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Min/Max/Step:</p>\n                <FormNumberInput\n                  label=\"Rating (1-10)\"\n                  value={rangeValue}\n                  onChange={setRangeValue}\n                  min={1}\n                  max={10}\n                  step={1}\n                  description=\"Rate from 1 to 10\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Decimal Numbers:</p>\n                <FormNumberInput\n                  label=\"Price\"\n                  value={decimalValue}\n                  onChange={setDecimalValue}\n                  allowDecimal={true}\n                  step={0.01}\n                  placeholder=\"0.00\"\n                  description=\"Enter price with cents\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Required:</p>\n                <FormNumberInput\n                  label=\"Quantity\"\n                  required\n                  value={numberValue}\n                  onChange={setNumberValue}\n                  min={0}\n                  placeholder=\"0\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Error:</p>\n                <FormNumberInput\n                  label=\"Invalid Input\"\n                  value={numberValue}\n                  onChange={setNumberValue}\n                  error=\"Value must be greater than 0\"\n                />\n              </SimpleStack>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormNumberInput\n  label=\"Age\"\n  value={numberValue}\n  onChange={setNumberValue}\n  min={0}\n  max={120}\n  step={1}\n  allowDecimal={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {numberValue ?? \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormCheckbox */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <p className=\"text-lg font-semibold\">FormCheckbox</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Checkbox with label, description, and indeterminate state\n                support.\n              </p>\n\n              <SimpleStack gap=\"xs\">\n                <p className=\"text-sm font-medium\">Basic Checkbox:</p>\n                <FormCheckbox\n                  label=\"Accept terms and conditions\"\n                  checked={checkboxValue}\n                  onChange={(checked) => setCheckboxValue(checked === true)}\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Description:</p>\n                <FormCheckbox\n                  label=\"Subscribe to newsletter\"\n                  description=\"Receive weekly updates about new features\"\n                  checked={checkboxValue}\n                  onChange={(checked) => setCheckboxValue(checked === true)}\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Required:</p>\n                <FormCheckbox\n                  label=\"I agree to the privacy policy\"\n                  required\n                  checked={checkboxValue}\n                  onChange={(checked) => setCheckboxValue(checked === true)}\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Indeterminate State:</p>\n                <FormCheckbox\n                  label=\"Select all items\"\n                  description=\"Some items are selected\"\n                  checked={checkboxIndeterminate}\n                  onChange={setCheckboxIndeterminate}\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Disabled:</p>\n                <FormCheckbox\n                  label=\"Cannot change this\"\n                  checked={true}\n                  onChange={() => {}}\n                  disabled\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Error:</p>\n                <FormCheckbox\n                  label=\"Required checkbox\"\n                  checked={checkboxValue}\n                  onChange={(checked) => setCheckboxValue(checked === true)}\n                  error=\"You must accept to continue\"\n                />\n              </SimpleStack>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormCheckbox\n  label=\"Accept terms\"\n  checked={checkboxValue}\n  onChange={(checked) => setCheckboxValue(checked === true)}\n  description=\"Optional description\"\n  required={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {String(checkboxValue)}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormSelect */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <p className=\"text-lg font-semibold\">FormSelect</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Searchable single-select dropdown with label and error support.\n              </p>\n\n              <SimpleStack gap=\"xs\">\n                <p className=\"text-sm font-medium\">Basic Select:</p>\n                <FormSelect\n                  label=\"Favorite Color\"\n                  value={selectValue}\n                  onChange={(value) => setSelectValue(value || \"\")}\n                  options={colorOptions}\n                  placeholder=\"Choose a color\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Description:</p>\n                <FormSelect\n                  label=\"Country\"\n                  description=\"Select your country of residence\"\n                  value={selectValue}\n                  onChange={(value) => setSelectValue(value || \"\")}\n                  options={countryOptions}\n                  placeholder=\"Select country\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Required:</p>\n                <FormSelect\n                  label=\"Required Selection\"\n                  required\n                  value={selectRequired}\n                  onChange={(value) => setSelectRequired(value || \"\")}\n                  options={colorOptions}\n                  placeholder=\"Must select one\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Disabled:</p>\n                <FormSelect\n                  label=\"Disabled Select\"\n                  value=\"blue\"\n                  onChange={() => {}}\n                  options={colorOptions}\n                  disabled\n                  placeholder=\"Cannot change\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Error:</p>\n                <FormSelect\n                  label=\"Invalid Selection\"\n                  value={selectValue}\n                  onChange={(value) => setSelectValue(value || \"\")}\n                  options={colorOptions}\n                  error=\"This field is required\"\n                  placeholder=\"Select option\"\n                />\n              </SimpleStack>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormSelect\n  label=\"Country\"\n  value={selectValue}\n  onChange={(value) => setSelectValue(value || '')}\n  options={[\n    { label: 'USA', value: 'us' },\n    { label: 'UK', value: 'uk' }\n  ]}\n  placeholder=\"Select...\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {selectValue || \"(none selected)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormMultiSelect */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <p className=\"text-lg font-semibold\">FormMultiSelect</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Searchable multi-select dropdown with badges.\n              </p>\n\n              <SimpleStack gap=\"xs\">\n                <p className=\"text-sm font-medium\">Basic Multi-Select:</p>\n                <FormMultiSelect\n                  label=\"Favorite Colors\"\n                  value={multiSelectValue}\n                  onChange={setMultiSelectValue}\n                  options={colorOptions}\n                  placeholder=\"Select multiple colors\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Description:</p>\n                <FormMultiSelect\n                  label=\"Visited Countries\"\n                  description=\"Select all countries you've visited\"\n                  value={multiSelectValue}\n                  onChange={setMultiSelectValue}\n                  options={countryOptions}\n                  placeholder=\"Select countries\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Required:</p>\n                <FormMultiSelect\n                  label=\"Skills\"\n                  required\n                  value={multiSelectValue}\n                  onChange={setMultiSelectValue}\n                  options={[\n                    { label: \"JavaScript\", value: \"js\" },\n                    { label: \"TypeScript\", value: \"ts\" },\n                    { label: \"Python\", value: \"py\" },\n                    { label: \"Java\", value: \"java\" },\n                  ]}\n                  placeholder=\"Select at least one skill\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Error:</p>\n                <FormMultiSelect\n                  label=\"Categories\"\n                  value={multiSelectValue}\n                  onChange={setMultiSelectValue}\n                  options={colorOptions}\n                  error=\"Please select at least 2 categories\"\n                  placeholder=\"Select categories\"\n                />\n              </SimpleStack>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormMultiSelect\n  label=\"Skills\"\n  value={multiSelectValue}\n  onChange={setMultiSelectValue}\n  options={skillOptions}\n  placeholder=\"Select skills\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value:{\" \"}\n                {multiSelectValue.length > 0\n                  ? multiSelectValue.join(\", \")\n                  : \"(none selected)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormTagsInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <p className=\"text-lg font-semibold\">FormTagsInput</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Free-text tag input with creation and deletion.\n              </p>\n\n              <SimpleStack gap=\"xs\">\n                <p className=\"text-sm font-medium\">Basic Tags Input:</p>\n                <FormTagsInput\n                  label=\"Technologies\"\n                  value={tagsValue}\n                  onChange={setTagsValue}\n                  placeholder=\"Type and press Enter to add tags\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Description:</p>\n                <FormTagsInput\n                  label=\"Skills\"\n                  description=\"Add your programming skills (press Enter after each)\"\n                  value={tagsValue}\n                  onChange={setTagsValue}\n                  placeholder=\"e.g., React, Node.js\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Required:</p>\n                <FormTagsInput\n                  label=\"Keywords\"\n                  required\n                  value={tagsValue}\n                  onChange={setTagsValue}\n                  placeholder=\"Add at least one keyword\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">With Error:</p>\n                <FormTagsInput\n                  label=\"Tags\"\n                  value={tagsValue}\n                  onChange={setTagsValue}\n                  error=\"Maximum 5 tags allowed\"\n                  placeholder=\"Add tags\"\n                />\n\n                <p className=\"text-sm font-medium mt-2\">Disabled:</p>\n                <FormTagsInput\n                  label=\"Fixed Tags\"\n                  value={[\"readonly\", \"tags\"]}\n                  onChange={() => {}}\n                  disabled\n                  placeholder=\"Cannot edit\"\n                />\n              </SimpleStack>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormTagsInput\n  label=\"Technologies\"\n  value={tagsValue}\n  onChange={setTagsValue}\n  placeholder=\"Type and press Enter\"\n  description=\"Optional description\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current tags:{\" \"}\n                {tagsValue.length > 0 ? tagsValue.join(\", \") : \"(none)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n        </SimpleStack>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-A3IK3CVW.js

@@ -0,0 +1,212 @@
+import {
+  PlaygroundSection
+} from "./chunk-FTN2A5YL.js";
+
+// src/pages/PlayColorPalette.tsx
+import { Separator, Badge } from "@petrarca/sonnet-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Swatch({
+  name,
+  bgClass,
+  tailwind
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: `w-10 h-10 rounded-md shrink-0 ${bgClass}` }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: name }),
+      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: tailwind })
+    ] })
+  ] });
+}
+function PaletteRow({
+  color,
+  label
+}) {
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-faint-foreground", children: label ?? color }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: shades.map((shade) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: `w-10 h-10 rounded-md bg-${color}-${shade}` }),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-faint-foreground", children: shade })
+    ] }, shade)) })
+  ] });
+}
+var BADGE_COLORS = [
+  "teal",
+  "indigo",
+  "blue",
+  "violet",
+  "grape",
+  "cyan",
+  "green",
+  "orange",
+  "yellow",
+  "red",
+  "pink"
+];
+var ICON_COLORS = [
+  { name: "teal", bg: "bg-teal-100", fg: "text-teal-600" },
+  { name: "violet", bg: "bg-violet-100", fg: "text-violet-600" },
+  { name: "indigo", bg: "bg-indigo-100", fg: "text-indigo-600" },
+  { name: "blue", bg: "bg-blue-100", fg: "text-blue-600" },
+  { name: "grape", bg: "bg-purple-100", fg: "text-purple-600" },
+  { name: "amber", bg: "bg-amber-100", fg: "text-amber-600" }
+];
+function PlayColorPalette() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full py-12 px-4 max-w-4xl space-y-12", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Color Palette" }),
+      /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground mt-1 text-balance", children: "Living reference for the color system. Semantic tokens, extended palette, badge colors, icon accents, and usage guidance." })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Semantic Tokens",
+        description: "CSS custom properties from index.css. These adapt to light/dark mode automatically. Never use raw Tailwind colors for surfaces or text.",
+        children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 border rounded-md p-4 bg-card", children: [
+            /* @__PURE__ */ jsx("p", { className: "heading-compact text-muted-foreground", children: "Surfaces" }),
+            /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                name: "background",
+                bgClass: "bg-background border",
+                tailwind: "bg-background"
+              }
+            ),
+            /* @__PURE__ */ jsx(Swatch, { name: "card", bgClass: "bg-card border", tailwind: "bg-card" }),
+            /* @__PURE__ */ jsx(Swatch, { name: "muted", bgClass: "bg-muted", tailwind: "bg-muted" }),
+            /* @__PURE__ */ jsx(Swatch, { name: "accent", bgClass: "bg-accent", tailwind: "bg-accent" }),
+            /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                name: "popover",
+                bgClass: "bg-popover border",
+                tailwind: "bg-popover"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 border rounded-md p-4 bg-card", children: [
+            /* @__PURE__ */ jsx("p", { className: "heading-compact text-muted-foreground", children: "Interactive" }),
+            /* @__PURE__ */ jsx(Swatch, { name: "primary", bgClass: "bg-primary", tailwind: "bg-primary" }),
+            /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                name: "secondary",
+                bgClass: "bg-secondary",
+                tailwind: "bg-secondary"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                name: "destructive",
+                bgClass: "bg-destructive",
+                tailwind: "bg-destructive"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                name: "border",
+                bgClass: "bg-border",
+                tailwind: "border / bg-border"
+              }
+            ),
+            /* @__PURE__ */ jsx(Swatch, { name: "ring", bgClass: "bg-ring", tailwind: "ring / bg-ring" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Extended Palette",
+        description: "Full shade ramps for colors used as accents, badges, and status indicators. Preferred range: 100 background, 600-800 text.",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 border rounded-md p-6 bg-card", children: [
+          /* @__PURE__ */ jsx(PaletteRow, { color: "teal" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "indigo" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "blue" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "violet" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "purple", label: "purple (grape)" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "amber" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "orange" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "cyan" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "green" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "red" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "pink" }),
+          /* @__PURE__ */ jsx(PaletteRow, { color: "yellow" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Badge Colors",
+        description: "All valid badgeColor variants on the Badge component. Note: amber has no badge variant \u2014 use orange for a warm inactive state.",
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 border rounded-md p-6 bg-card", children: BADGE_COLORS.map((color) => /* @__PURE__ */ jsx(Badge, { badgeColor: color, children: color }, color)) })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Icon Accent Colors",
+        description: "The 100/600 bg/text pairings used for card icons and feature indicators. amber is only used as an icon accent, not a badge color.",
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 border rounded-md p-6 bg-card", children: ICON_COLORS.map(({ name, bg, fg }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex items-center justify-center w-12 h-12 rounded-md ${bg} ${fg}`,
+              children: /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: "Aa" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-faint-foreground", children: name })
+        ] }, name)) })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Status Colors",
+        description: "Canonical badge color assignments for organization lifecycle status.",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 border rounded-md p-6 bg-card", children: [
+          /* @__PURE__ */ jsx(Badge, { badgeColor: "teal", children: "active" }),
+          /* @__PURE__ */ jsx(Badge, { badgeColor: "indigo", children: "created" }),
+          /* @__PURE__ */ jsx(Badge, { badgeColor: "orange", children: "inactive" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(PlaygroundSection, { title: "Usage Guidance", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border rounded-md p-4 bg-card space-y-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Use semantic tokens for surfaces and text" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+          "Always use",
+          " ",
+          /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-muted px-1 rounded", children: "bg-background" }),
+          ",",
+          " ",
+          /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-muted px-1 rounded", children: "bg-card" }),
+          ",",
+          " ",
+          /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-muted px-1 rounded", children: "text-foreground" }),
+          ", etc. for layout surfaces and body text. Never use raw Tailwind grays (text-gray-*, bg-slate-*)."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border rounded-md p-4 bg-card space-y-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Use extended palette for accents only" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Badges, status indicators, and icon containers are the only sanctioned uses of raw Tailwind palette colors. Stick to the 100/600-800 range for the muted, autumn-like feel." })
+      ] })
+    ] }) })
+  ] });
+}
+
+export {
+  PlayColorPalette
+};
+//# sourceMappingURL=chunk-A3IK3CVW.js.map

package/dist/chunk-A3IK3CVW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayColorPalette.tsx"],"sourcesContent":["// Color Palette Playground\n//\n// Living reference for the color system. Shows semantic design tokens,\n// the extended badge color palette, and usage guidance.\nimport React from \"react\";\nimport { Separator, Badge } from \"@petrarca/sonnet-ui\";\nimport { PlaygroundSection as Section } from \"../PlaygroundSection\";\n\nfunction Swatch({\n  name,\n  bgClass,\n  tailwind,\n}: {\n  name: string;\n  bgClass: string;\n  tailwind: string;\n}): React.ReactElement {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <div className={`w-10 h-10 rounded-md shrink-0 ${bgClass}`} />\n      <div className=\"min-w-0\">\n        <p className=\"text-sm font-medium\">{name}</p>\n        <code className=\"text-xs font-mono text-faint-foreground\">\n          {tailwind}\n        </code>\n      </div>\n    </div>\n  );\n}\n\nfunction PaletteRow({\n  color,\n  label,\n}: {\n  color: string;\n  label?: string;\n}): React.ReactElement {\n  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n  return (\n    <div className=\"space-y-1.5\">\n      <p className=\"text-xs font-mono text-faint-foreground\">\n        {label ?? color}\n      </p>\n      <div className=\"flex gap-1.5\">\n        {shades.map((shade) => (\n          <div key={shade} className=\"flex flex-col items-center gap-1\">\n            <div className={`w-10 h-10 rounded-md bg-${color}-${shade}`} />\n            <span className=\"text-[10px] font-mono text-faint-foreground\">\n              {shade}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// All valid badgeColor values on the Badge component.\nconst BADGE_COLORS = [\n  \"teal\",\n  \"indigo\",\n  \"blue\",\n  \"violet\",\n  \"grape\",\n  \"cyan\",\n  \"green\",\n  \"orange\",\n  \"yellow\",\n  \"red\",\n  \"pink\",\n] as const;\n\n// Icon accent pairings (bg-*-100 / text-*-600) used on cards and feature indicators.\nconst ICON_COLORS: { name: string; bg: string; fg: string }[] = [\n  { name: \"teal\", bg: \"bg-teal-100\", fg: \"text-teal-600\" },\n  { name: \"violet\", bg: \"bg-violet-100\", fg: \"text-violet-600\" },\n  { name: \"indigo\", bg: \"bg-indigo-100\", fg: \"text-indigo-600\" },\n  { name: \"blue\", bg: \"bg-blue-100\", fg: \"text-blue-600\" },\n  { name: \"grape\", bg: \"bg-purple-100\", fg: \"text-purple-600\" },\n  { name: \"amber\", bg: \"bg-amber-100\", fg: \"text-amber-600\" },\n];\n\n/** Color Palette playground -- living reference for the design system color tokens. */\nexport default function PlayColorPalette(): React.ReactElement {\n  return (\n    <div className=\"w-full py-12 px-4 max-w-4xl space-y-12\">\n      <div>\n        <h1>Color Palette</h1>\n        <p className=\"text-base text-muted-foreground mt-1 text-balance\">\n          Living reference for the color system. Semantic tokens, extended\n          palette, badge colors, icon accents, and usage guidance.\n        </p>\n      </div>\n\n      <Separator />\n\n      {/* Semantic design tokens */}\n      <Section\n        title=\"Semantic Tokens\"\n        description=\"CSS custom properties from index.css. These adapt to light/dark mode automatically. Never use raw Tailwind colors for surfaces or text.\"\n      >\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div className=\"space-y-3 border rounded-md p-4 bg-card\">\n            <p className=\"heading-compact text-muted-foreground\">Surfaces</p>\n            <Swatch\n              name=\"background\"\n              bgClass=\"bg-background border\"\n              tailwind=\"bg-background\"\n            />\n            <Swatch name=\"card\" bgClass=\"bg-card border\" tailwind=\"bg-card\" />\n            <Swatch name=\"muted\" bgClass=\"bg-muted\" tailwind=\"bg-muted\" />\n            <Swatch name=\"accent\" bgClass=\"bg-accent\" tailwind=\"bg-accent\" />\n            <Swatch\n              name=\"popover\"\n              bgClass=\"bg-popover border\"\n              tailwind=\"bg-popover\"\n            />\n          </div>\n          <div className=\"space-y-3 border rounded-md p-4 bg-card\">\n            <p className=\"heading-compact text-muted-foreground\">Interactive</p>\n            <Swatch name=\"primary\" bgClass=\"bg-primary\" tailwind=\"bg-primary\" />\n            <Swatch\n              name=\"secondary\"\n              bgClass=\"bg-secondary\"\n              tailwind=\"bg-secondary\"\n            />\n            <Swatch\n              name=\"destructive\"\n              bgClass=\"bg-destructive\"\n              tailwind=\"bg-destructive\"\n            />\n            <Swatch\n              name=\"border\"\n              bgClass=\"bg-border\"\n              tailwind=\"border / bg-border\"\n            />\n            <Swatch name=\"ring\" bgClass=\"bg-ring\" tailwind=\"ring / bg-ring\" />\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Extended palette */}\n      <Section\n        title=\"Extended Palette\"\n        description=\"Full shade ramps for colors used as accents, badges, and status indicators. Preferred range: 100 background, 600-800 text.\"\n      >\n        <div className=\"space-y-6 border rounded-md p-6 bg-card\">\n          <PaletteRow color=\"teal\" />\n          <PaletteRow color=\"indigo\" />\n          <PaletteRow color=\"blue\" />\n          <PaletteRow color=\"violet\" />\n          <PaletteRow color=\"purple\" label=\"purple (grape)\" />\n          <PaletteRow color=\"amber\" />\n          <PaletteRow color=\"orange\" />\n          <PaletteRow color=\"cyan\" />\n          <PaletteRow color=\"green\" />\n          <PaletteRow color=\"red\" />\n          <PaletteRow color=\"pink\" />\n          <PaletteRow color=\"yellow\" />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Badge colors */}\n      <Section\n        title=\"Badge Colors\"\n        description=\"All valid badgeColor variants on the Badge component. Note: amber has no badge variant — use orange for a warm inactive state.\"\n      >\n        <div className=\"flex flex-wrap gap-2 border rounded-md p-6 bg-card\">\n          {BADGE_COLORS.map((color) => (\n            <Badge key={color} badgeColor={color}>\n              {color}\n            </Badge>\n          ))}\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Icon accent colors */}\n      <Section\n        title=\"Icon Accent Colors\"\n        description=\"The 100/600 bg/text pairings used for card icons and feature indicators. amber is only used as an icon accent, not a badge color.\"\n      >\n        <div className=\"flex flex-wrap gap-4 border rounded-md p-6 bg-card\">\n          {ICON_COLORS.map(({ name, bg, fg }) => (\n            <div key={name} className=\"flex flex-col items-center gap-2\">\n              <div\n                className={`flex items-center justify-center w-12 h-12 rounded-md ${bg} ${fg}`}\n              >\n                <span className=\"text-lg font-semibold\">Aa</span>\n              </div>\n              <span className=\"text-xs font-mono text-faint-foreground\">\n                {name}\n              </span>\n            </div>\n          ))}\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Status mapping */}\n      <Section\n        title=\"Status Colors\"\n        description=\"Canonical badge color assignments for organization lifecycle status.\"\n      >\n        <div className=\"flex gap-3 border rounded-md p-6 bg-card\">\n          <Badge badgeColor=\"teal\">active</Badge>\n          <Badge badgeColor=\"indigo\">created</Badge>\n          <Badge badgeColor=\"orange\">inactive</Badge>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Usage guidance */}\n      <Section title=\"Usage Guidance\">\n        <div className=\"space-y-3 text-sm\">\n          <div className=\"border rounded-md p-4 bg-card space-y-1\">\n            <p className=\"font-medium\">\n              Use semantic tokens for surfaces and text\n            </p>\n            <p className=\"text-muted-foreground\">\n              Always use{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                bg-background\n              </code>\n              ,{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                bg-card\n              </code>\n              ,{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                text-foreground\n              </code>\n              , etc. for layout surfaces and body text. Never use raw Tailwind\n              grays (text-gray-*, bg-slate-*).\n            </p>\n          </div>\n          <div className=\"border rounded-md p-4 bg-card space-y-1\">\n            <p className=\"font-medium\">Use extended palette for accents only</p>\n            <p className=\"text-muted-foreground\">\n              Badges, status indicators, and icon containers are the only\n              sanctioned uses of raw Tailwind palette colors. Stick to the\n              100/600-800 range for the muted, autumn-like feel.\n            </p>\n          </div>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}