@petrarca/sonnet-playground 0.2.0 → 0.4.0

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

@@ -1 +0,0 @@
-{"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-CYNK2P2Q.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pages/PlayTypography.tsx"],"sourcesContent":["// Typography Playground\n//\n// Living style-guide for the typography system defined in\n// docs/design/typography.md. Every specimen uses the sanctioned\n// classes so it doubles as a visual regression surface.\nimport React from \"react\";\nimport { Separator } from \"@petrarca/sonnet-ui\";\nimport { PlaygroundSection as Section } from \"../PlaygroundSection\";\n\nfunction Specimen({\n  label,\n  className,\n  text,\n}: {\n  label: string;\n  className: string;\n  text?: string;\n}) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <code className=\"text-xs font-mono text-faint-foreground\">{label}</code>\n      <p className={className}>\n        {text ?? \"The quick brown fox jumps over the lazy dog\"}\n      </p>\n    </div>\n  );\n}\n\nfunction ColorSwatch({\n  name,\n  className,\n  cssVar,\n}: {\n  name: string;\n  className: string;\n  cssVar: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className={`${className} text-sm`}>\n        {name}: The quick brown fox jumps over the lazy dog\n      </span>\n      <code className=\"text-xs font-mono text-faint-foreground ml-auto shrink-0\">\n        {cssVar}\n      </code>\n    </div>\n  );\n}\n\nexport default function PlayTypography(): React.ReactElement {\n  return (\n    <div className=\"w-full py-12 px-4 max-w-4xl space-y-12\">\n      {/* ── Page header ──────────────────────────────────────────── */}\n      <div>\n        <h1>Typography</h1>\n        <p className=\"text-base text-muted-foreground mt-1 text-balance\">\n          Living style-guide for the typography system. Every specimen uses the\n          sanctioned classes from{\" \"}\n          <code className=\"text-xs font-mono bg-muted px-1.5 py-0.5 rounded\">\n            docs/design/typography.md\n          </code>\n          .\n        </p>\n      </div>\n\n      <Separator />\n\n      {/* ── 1. Font Families ─────────────────────────────────────── */}\n      <Section\n        title=\"Font Families\"\n        description=\"Inter (sans) for UI, JetBrains Mono (mono) for code and data IDs.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen label=\"font-sans (Inter)\" className=\"font-sans text-base\" />\n          <Specimen\n            label=\"font-mono (JetBrains Mono)\"\n            className=\"font-mono text-base\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 2. Type Scale ────────────────────────────────────────── */}\n      <Section\n        title=\"Type Scale\"\n        description=\"Sanctioned sizes from text-xs (12px) to text-3xl (30px).\"\n      >\n        <div className=\"space-y-4\">\n          <Specimen label=\"text-3xl — 30px\" className=\"text-3xl\" />\n          <Specimen label=\"text-2xl — 24px\" className=\"text-2xl\" />\n          <Specimen label=\"text-xl — 20px\" className=\"text-xl\" />\n          <Specimen label=\"text-lg — 18px\" className=\"text-lg\" />\n          <Specimen label=\"text-base — 16px\" className=\"text-base\" />\n          <Specimen label=\"text-sm — 14px (workhorse)\" className=\"text-sm\" />\n          <Specimen label=\"text-xs — 12px\" className=\"text-xs\" />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 3. Font Weights ──────────────────────────────────────── */}\n      <Section\n        title=\"Font Weights\"\n        description=\"Three sanctioned weights. font-bold (700) and above are prohibited.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen\n            label=\"font-normal (400) — body text, paragraphs\"\n            className=\"text-base font-normal\"\n          />\n          <Specimen\n            label=\"font-medium (500) — labels, buttons, interactive elements\"\n            className=\"text-base font-medium\"\n          />\n          <Specimen\n            label=\"font-semibold (600) — headings, card titles (max weight)\"\n            className=\"text-base font-semibold\"\n          />\n        </div>\n\n        <div className=\"mt-4 p-3 border border-destructive/20 bg-destructive/5 rounded-md\">\n          <p className=\"text-sm text-destructive font-medium\">\n            Prohibited weights\n          </p>\n          <div className=\"flex gap-6 mt-2\">\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-bold (700)\n            </span>\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-extrabold (800)\n            </span>\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-black (900)\n            </span>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 4. Heading Hierarchy ─────────────────────────────────── */}\n      <Section\n        title=\"Heading Hierarchy\"\n        description=\"Named utility classes mapped to HTML heading elements via the base layer.\"\n      >\n        <div className=\"space-y-4 border rounded-md p-6 bg-card\">\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h1 / .heading-page — text-2xl font-semibold tracking-tight\n            </code>\n            <h1>Page Title</h1>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h2 / .heading-section — text-xl font-semibold\n            </code>\n            <h2>Section Heading</h2>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h3 / .heading-sub — text-base font-medium\n            </code>\n            <h3>Subsection Heading</h3>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h4 / .heading-component — text-sm font-medium\n            </code>\n            <h4>Component Heading</h4>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h6 / .heading-compact — text-xs font-medium\n            </code>\n            <h6>Compact Heading</h6>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              .heading-meta — text-xs font-medium font-mono uppercase\n              tracking-wider\n            </code>\n            <div className=\"heading-meta\">Meta Heading</div>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 5. Text Color Hierarchy ──────────────────────────────── */}\n      <Section\n        title=\"Text Color Hierarchy\"\n        description=\"Three semantic tiers. Never use hardcoded grays (text-gray-*, text-slate-*).\"\n      >\n        <div className=\"space-y-3 border rounded-md p-6 bg-card\">\n          <ColorSwatch\n            name=\"foreground\"\n            className=\"text-foreground\"\n            cssVar=\"--foreground\"\n          />\n          <ColorSwatch\n            name=\"muted-foreground\"\n            className=\"text-muted-foreground\"\n            cssVar=\"--muted-foreground\"\n          />\n          <ColorSwatch\n            name=\"faint-foreground\"\n            className=\"text-faint-foreground\"\n            cssVar=\"--faint-foreground\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 6. Line Height & Letter Spacing ──────────────────────── */}\n      <Section\n        title=\"Line Height & Letter Spacing\"\n        description=\"Sanctioned line-height and tracking classes.\"\n      >\n        <div className=\"space-y-4\">\n          <Specimen\n            label=\"leading-none (1.0) — compact labels, card titles\"\n            className=\"text-sm leading-none\"\n          />\n          <Specimen label=\"default — most text\" className=\"text-sm\" />\n          <Specimen\n            label=\"leading-relaxed (1.625) — multi-line descriptions\"\n            className=\"text-sm leading-relaxed\"\n            text=\"This is a longer paragraph to demonstrate relaxed line height. It should feel airy and comfortable to read, especially in descriptions and body content that spans multiple lines.\"\n          />\n          <Specimen\n            label=\"tracking-tight (-0.025em) — headings\"\n            className=\"text-2xl font-semibold tracking-tight\"\n            text=\"Page Title With Tracking\"\n          />\n          <Specimen\n            label=\"tracking-wider (0.05em) — meta headings\"\n            className=\"heading-meta\"\n            text=\"Category Label\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 7. Numeric Typography ────────────────────────────────── */}\n      <Section\n        title=\"Numeric Typography\"\n        description=\"tabular-nums for aligned digits. font-mono for IDs and codes.\"\n      >\n        <div className=\"grid grid-cols-2 gap-6\">\n          <div className=\"space-y-2 border rounded-md p-4 bg-card\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Without tabular-nums\n            </code>\n            <div className=\"space-y-0.5\">\n              <p className=\"text-2xl font-semibold\">1,111</p>\n              <p className=\"text-2xl font-semibold\">8,888</p>\n              <p className=\"text-2xl font-semibold\">42.7%</p>\n            </div>\n          </div>\n          <div className=\"space-y-2 border rounded-md p-4 bg-card\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              With tabular-nums\n            </code>\n            <div className=\"space-y-0.5\">\n              <p className=\"text-2xl font-semibold tabular-nums\">1,111</p>\n              <p className=\"text-2xl font-semibold tabular-nums\">8,888</p>\n              <p className=\"text-2xl font-semibold tabular-nums\">42.7%</p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-4 space-y-2\">\n          <code className=\"text-xs font-mono text-faint-foreground\">\n            font-mono for IDs and codes\n          </code>\n          <div className=\"space-y-1\">\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              ent_a1b2c3d4e5f6\n            </p>\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              sk_live_51O2jK2eZvKYlo2C0\n            </p>\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              sha256:9f86d081884c7d659a2feaa0\n            </p>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 8. Text Overflow ─────────────────────────────────────── */}\n      <Section\n        title=\"Text Overflow Handling\"\n        description=\"Patterns for dynamic content that can exceed its container.\"\n      >\n        <div className=\"space-y-4\">\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              truncate — single-line ellipsis\n            </code>\n            <p className=\"text-sm truncate max-w-xs border rounded px-2 py-1\">\n              This is a very long sidebar item name that will definitely\n              overflow its container and needs to be truncated with an ellipsis\n            </p>\n          </div>\n\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              line-clamp-2 — multi-line clamp\n            </code>\n            <p className=\"text-sm line-clamp-2 max-w-sm border rounded px-2 py-1\">\n              This is a card description that can span multiple lines. It will\n              be clamped to exactly two lines. Any content beyond two lines will\n              be hidden and replaced with an ellipsis. This sentence should be\n              hidden.\n            </p>\n          </div>\n\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              whitespace-nowrap — prevent wrapping (buttons, badges)\n            </code>\n            <span className=\"text-sm whitespace-nowrap border rounded px-2 py-1 inline-block\">\n              Badge text that never wraps\n            </span>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 9. Component Patterns ────────────────────────────────── */}\n      <Section\n        title=\"Component Typography Patterns\"\n        description=\"Standard text treatments for common UI components.\"\n      >\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          {/* Card pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-1.5\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Card\n            </code>\n            <p className=\"text-lg font-semibold leading-none tracking-tight\">\n              Card Title\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Card description with muted foreground color.\n            </p>\n            <p className=\"text-2xl font-semibold tabular-nums mt-2\">$12,345</p>\n            <p className=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </div>\n\n          {/* Dialog pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-1.5\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Dialog\n            </code>\n            <p className=\"text-lg font-semibold leading-none tracking-tight\">\n              Dialog Title\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Dialog description providing context for the action.\n            </p>\n          </div>\n\n          {/* Button / Label pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-3\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Interactive Elements\n            </code>\n            <div className=\"space-y-1\">\n              <p className=\"text-sm font-medium leading-none\">Form Label</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Help text for the field.\n              </p>\n            </div>\n            <div className=\"flex gap-2\">\n              <span className=\"text-sm font-medium bg-primary text-primary-foreground rounded-md px-3 py-1.5\">\n                Button\n              </span>\n              <span className=\"text-xs font-medium bg-secondary text-secondary-foreground rounded-full px-2.5 py-0.5\">\n                Badge\n              </span>\n            </div>\n          </div>\n\n          {/* Table pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-2\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Table\n            </code>\n            <table className=\"w-full text-sm\">\n              <thead>\n                <tr className=\"border-b\">\n                  <th className=\"text-left font-medium text-foreground py-1\">\n                    Name\n                  </th>\n                  <th className=\"text-right font-medium text-foreground py-1\">\n                    Count\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr className=\"border-b\">\n                  <td className=\"py-1\">Entities</td>\n                  <td className=\"text-right tabular-nums\">1,234</td>\n                </tr>\n                <tr className=\"border-b\">\n                  <td className=\"py-1\">Relations</td>\n                  <td className=\"text-right tabular-nums\">567</td>\n                </tr>\n                <tr>\n                  <td className=\"py-1\">Schemas</td>\n                  <td className=\"text-right tabular-nums\">89</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 10. Responsive Typography ────────────────────────────── */}\n      <Section\n        title=\"Responsive Typography\"\n        description=\"Patterns that adapt to viewport size.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen\n            label=\"Responsive heading: text-xl md:text-2xl\"\n            className=\"text-xl md:text-2xl font-semibold tracking-tight\"\n            text=\"This heading scales up on wider viewports\"\n          />\n          <Specimen\n            label=\"Responsive input: text-base md:text-sm (prevents iOS zoom)\"\n            className=\"text-base md:text-sm border rounded px-2 py-1\"\n            text=\"Input text that's 16px on mobile, 14px on desktop\"\n          />\n          <Specimen\n            label=\"text-balance — prevents orphaned words\"\n            className=\"text-2xl font-semibold tracking-tight text-balance max-w-sm\"\n            text=\"This heading uses text-balance for better line breaks\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 11. Font Rendering ───────────────────────────────────── */}\n      <Section\n        title=\"Font Rendering\"\n        description=\"Antialiased rendering is applied globally via the body class.\"\n      >\n        <div className=\"space-y-2 text-sm\">\n          <p>\n            The{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              antialiased\n            </code>{\" \"}\n            class on{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              &lt;body&gt;\n            </code>{\" \"}\n            enables{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              -webkit-font-smoothing: antialiased\n            </code>{\" \"}\n            and{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              -moz-osx-font-smoothing: grayscale\n            </code>\n            .\n          </p>\n          <p className=\"text-muted-foreground\">\n            This makes text render thinner and crisper, matching the look of\n            polished dashboard UIs like Supabase and shadcn/ui.\n          </p>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FTN2A5YL.js

@@ -1,20 +0,0 @@
-// src/PlaygroundSection.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function PlaygroundSection({
-  title,
-  description,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h2", { children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description })
-    ] }),
-    children
-  ] });
-}
-
-export {
-  PlaygroundSection
-};
-//# sourceMappingURL=chunk-FTN2A5YL.js.map

package/dist/chunk-FTN2A5YL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/PlaygroundSection.tsx"],"sourcesContent":["/**\n * Shared section wrapper for playground pages.\n *\n * Provides a consistent titled section with optional description,\n * used across all playground demo pages.\n */\nimport React from \"react\";\n\ninterface PlaygroundSectionProps {\n  title: string;\n  description?: string;\n  children: React.ReactNode;\n}\n\n/** Titled section wrapper used across playground pages. */\nexport function PlaygroundSection({\n  title,\n  description,\n  children,\n}: PlaygroundSectionProps): React.ReactElement {\n  return (\n    <section className=\"space-y-4\">\n      <div>\n        <h2>{title}</h2>\n        {description && (\n          <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n        )}\n      </div>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";AAsBM,SACE,KADF;AAPC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAI,iBAAM;AAAA,MACV,eACC,oBAAC,OAAE,WAAU,sCAAsC,uBAAY;AAAA,OAEnE;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}