@classic-homes/theme-mcp 0.1.5 → 0.1.6

package/dist/index.js

@@ -2384,7 +2384,7 @@ var component_catalog_default = {
         },
         {
           name: "options",
-          type: "SelectOption[]",
+          type: "ComboboxOption[]",
           default: "Required",
           required: false,
           description: "Array of options"
@@ -2392,6 +2392,7 @@ var component_catalog_default = {
         {
           name: "placeholder",
           type: "string",
+          default: "'Select an option...'",
           required: false,
           description: "Placeholder text"
         },
@@ -2426,7 +2427,19 @@ var component_catalog_default = {
           name: "id",
           type: "string",
           required: false,
-          description: "Element ID"
+          description: "Element ID (auto-generated if empty)"
+        },
+        {
+          name: "label",
+          type: "string",
+          required: false,
+          description: "Label text"
+        },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the input"
         },
         {
           name: "error",
@@ -2459,6 +2472,12 @@ var component_catalog_default = {
           type: "(query: string) => void",
           required: false,
           description: "Callback for search queries"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
         }
       ],
       variants: [],
@@ -2487,11 +2506,11 @@ var component_catalog_default = {
         },
         {
           title: "User Search",
-          code: '<script>\n  let selectedUser = $state(\'\');\n  let users = $state([]);\n  let loading = $state(false);\n\n  async function searchUsers(query: string) {\n    if (!query) {\n      users = [];\n      return;\n    }\n    loading = true;\n    const response = await fetch(`/api/users?search=${query}`);\n    users = await response.json();\n    loading = false;\n  }\n</script>\n\n<Combobox\n  options={users}\n  bind:value={selectedUser}\n  onSearch={searchUsers}\n  {loading}\n  placeholder="Search users..."\n  emptyMessage="No users found"\n/>'
+          code: '<script>\n  let selectedUser = $state(\'\');\n  let users = $state([]);\n  let loading = $state(false);\n\n  async function searchUsers(query: string) {\n    if (!query) {\n      users = [];\n      return;\n    }\n    loading = true;\n    const response = await fetch(`/api/users?search=${query}`);\n    users = await response.json();\n    loading = false;\n  }\n</script>\n\n<Combobox\n  label="User"\n  options={users}\n  bind:value={selectedUser}\n  onSearch={searchUsers}\n  {loading}\n  placeholder="Search users..."\n  emptyMessage="No users found"\n/>'
         },
         {
           title: "Location Autocomplete",
-          code: '<Combobox\n  options={locations}\n  bind:value\n  onSearch={searchLocations}\n  placeholder="Enter city or zip code..."\n  emptyMessage="No locations found"\n/>'
+          code: '<Combobox\n  label="Location"\n  hint="Enter a city name or zip code"\n  options={locations}\n  bind:value\n  onSearch={searchLocations}\n  placeholder="Enter city or zip code..."\n  emptyMessage="No locations found"\n/>'
         }
       ],
       relatedComponents: [
@@ -3696,6 +3715,12 @@ var component_catalog_default = {
           required: false,
           description: "Label text"
         },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the picker"
+        },
         {
           name: "error",
           type: "string",
@@ -6617,7 +6642,7 @@ var component_catalog_default = {
         },
         {
           name: "options",
-          type: "SelectOption[]",
+          type: "MultiSelectOption[]",
           default: "Required",
           required: false,
           description: "Array of options"
@@ -6625,9 +6650,17 @@ var component_catalog_default = {
         {
           name: "placeholder",
           type: "string",
+          default: "'Select options...'",
           required: false,
           description: "Placeholder text"
         },
+        {
+          name: "emptyMessage",
+          type: "string",
+          default: "'No results found.'",
+          required: false,
+          description: "Message when no options match"
+        },
         {
           name: "disabled",
           type: "boolean",
@@ -6643,10 +6676,28 @@ var component_catalog_default = {
           description: "Marks as required"
         },
         {
-          name: "maxItems",
-          type: "number",
+          name: "name",
+          type: "string",
           required: false,
-          description: "Maximum selections allowed"
+          description: "Name attribute for forms"
+        },
+        {
+          name: "id",
+          type: "string",
+          required: false,
+          description: "Element ID (auto-generated if empty)"
+        },
+        {
+          name: "label",
+          type: "string",
+          required: false,
+          description: "Label text"
+        },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the input"
         },
         {
           name: "error",
@@ -6654,11 +6705,43 @@ var component_catalog_default = {
           required: false,
           description: "Error message"
         },
+        {
+          name: "max",
+          type: "number",
+          required: false,
+          description: "Maximum selections allowed"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Shows loading state"
+        },
+        {
+          name: "debounceMs",
+          type: "number",
+          default: "300",
+          required: false,
+          description: "Debounce time for search"
+        },
         {
           name: "onValueChange",
           type: "(value: string[]) => void",
           required: false,
           description: "Callback when value changes"
+        },
+        {
+          name: "onSearch",
+          type: "(query: string) => void",
+          required: false,
+          description: "Callback for search queries"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
         }
       ],
       variants: [],
@@ -6698,11 +6781,17 @@ var component_catalog_default = {
   ];
 </script>
 
-<MultiSelect label="Tags" options={tagOptions} bind:value={tags} placeholder="Add tags..." />`
+<MultiSelect
+  label="Tags"
+  hint="Add relevant tags"
+  options={tagOptions}
+  bind:value={tags}
+  placeholder="Add tags..."
+/>`
         },
         {
           title: "Team Members",
-          code: '<MultiSelect\n  label="Assign to"\n  options={teamMembers}\n  bind:value={assignees}\n  maxItems={5}\n  placeholder="Select team members..."\n/>'
+          code: '<MultiSelect\n  label="Assign to"\n  hint="Select team members to assign this task"\n  options={teamMembers}\n  bind:value={assignees}\n  max={5}\n  placeholder="Select team members..."\n/>'
         }
       ],
       relatedComponents: [
@@ -6847,8 +6936,8 @@ var component_catalog_default = {
       props: [
         {
           name: "value",
-          type: "number",
-          default: "0",
+          type: "number | null",
+          default: "null",
           required: false,
           description: "Current value (bindable)"
         },
@@ -6878,18 +6967,57 @@ var component_catalog_default = {
           required: false,
           description: "Disables the input"
         },
+        {
+          name: "readonly",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Makes input read-only"
+        },
+        {
+          name: "required",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Marks field as required"
+        },
         {
           name: "placeholder",
           type: "string",
           required: false,
           description: "Placeholder text"
         },
+        {
+          name: "name",
+          type: "string",
+          required: false,
+          description: "Name attribute for form submission"
+        },
+        {
+          name: "id",
+          type: "string",
+          required: false,
+          description: "Element ID (auto-generated if empty)"
+        },
+        {
+          name: "showStepper",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show +/- stepper buttons"
+        },
         {
           name: "label",
           type: "string",
           required: false,
           description: "Label text"
         },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the input"
+        },
         {
           name: "error",
           type: "string",
@@ -6898,9 +7026,15 @@ var component_catalog_default = {
         },
         {
           name: "onValueChange",
-          type: "(value: number) => void",
+          type: "(value: number | null) => void",
           required: false,
           description: "Callback when value changes"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
         }
       ],
       variants: [],
@@ -6963,17 +7097,48 @@ var component_catalog_default = {
           description: "Disables the input"
         },
         {
-          name: "error",
+          name: "required",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Marks field as required"
+        },
+        {
+          name: "type",
+          type: "'numeric' | 'alphanumeric'",
+          default: "'numeric'",
+          required: false,
+          description: "Input type"
+        },
+        {
+          name: "name",
           type: "string",
           required: false,
-          description: "Error message"
+          description: "Name attribute for form submission"
         },
         {
-          name: "autoFocus",
-          type: "boolean",
-          default: "false",
+          name: "id",
+          type: "string",
+          required: false,
+          description: "Element ID (auto-generated if empty)"
+        },
+        {
+          name: "label",
+          type: "string",
           required: false,
-          description: "Auto-focus first input"
+          description: "Label text"
+        },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the input"
+        },
+        {
+          name: "error",
+          type: "string",
+          required: false,
+          description: "Error message"
         },
         {
           name: "onComplete",
@@ -6986,9 +7151,24 @@ var component_catalog_default = {
           type: "(value: string) => void",
           required: false,
           description: "Callback when value changes"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "type",
+          values: [
+            "numeric",
+            "alphanumeric"
+          ],
+          default: "numeric"
         }
       ],
-      variants: [],
       slots: [
         {
           name: "children",
@@ -7026,8 +7206,13 @@ var component_catalog_default = {
 </script>
 
 <div class="text-center space-y-4">
-  <p class="text-muted-foreground">Enter the 6-digit code sent to your email</p>
-  <OTPInput bind:value={code} {error} autoFocus onComplete={handleComplete} />
+  <OTPInput
+    label="Verification Code"
+    hint="Enter the 6-digit code sent to your email"
+    bind:value={code}
+    {error}
+    onComplete={handleComplete}
+  />
   {#if verifying}
     <Spinner label="Verifying..." />
   {/if}
@@ -7035,7 +7220,7 @@ var component_catalog_default = {
         },
         {
           title: "Two-Factor Authentication",
-          code: "<OTPInput bind:value={twoFactorCode} length={6} autoFocus onComplete={verify2FA} />"
+          code: '<OTPInput\n  label="Authentication Code"\n  hint="Enter code from your authenticator app"\n  bind:value={twoFactorCode}\n  length={6}\n  onComplete={verify2FA}\n/>'
         }
       ],
       relatedComponents: [
@@ -7729,6 +7914,12 @@ var component_catalog_default = {
           required: false,
           description: "Group label"
         },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the radio group"
+        },
         {
           name: "orientation",
           type: "'horizontal' | 'vertical'",
@@ -7754,7 +7945,7 @@ var component_catalog_default = {
           name: "name",
           type: "string",
           required: false,
-          description: "Name attribute for forms"
+          description: "Name attribute for forms (auto-generated if empty)"
         },
         {
           name: "error",
@@ -7832,6 +8023,7 @@ var component_catalog_default = {
 
 <RadioGroup
   label="Shipping Method"
+  hint="Free shipping on orders over $50"
   name="shipping"
   options={shippingOptions}
   bind:value={shipping}
@@ -7869,6 +8061,7 @@ var component_catalog_default = {
           title: "Survey Scale",
           code: `<RadioGroup
   label="How satisfied are you?"
+  hint="1 = Very Dissatisfied, 5 = Very Satisfied"
   name="satisfaction"
   options={[
     { value: '1', label: 'Very Dissatisfied' },
@@ -8277,13 +8470,19 @@ var component_catalog_default = {
           name: "id",
           type: "string",
           required: false,
-          description: "Element ID for accessibility"
+          description: "Element ID (auto-generated if empty)"
         },
         {
           name: "label",
           type: "string",
           required: false,
-          description: "Optional label displayed above"
+          description: "Label text"
+        },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the select"
         },
         {
           name: "error",
@@ -9005,6 +9204,18 @@ var component_catalog_default = {
           required: false,
           description: "Label text"
         },
+        {
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the slider"
+        },
+        {
+          name: "error",
+          type: "string",
+          required: false,
+          description: "Error message"
+        },
         {
           name: "showValue",
           type: "boolean",
@@ -9071,15 +9282,15 @@ var component_catalog_default = {
         },
         {
           title: "Volume Control",
-          code: '<script>\n  let volume = $state([70]);\n</script>\n\n<Slider\n  label="Volume"\n  bind:value={volume}\n  min={0}\n  max={100}\n  showValue\n  formatValue={(v) => `${v}%`}\n/>'
+          code: '<script>\n  let volume = $state([70]);\n</script>\n\n<Slider\n  label="Volume"\n  hint="Adjust speaker volume"\n  bind:value={volume}\n  min={0}\n  max={100}\n  showValue\n  formatValue={(v) => `${v}%`}\n/>'
         },
         {
           title: "Price Filter",
-          code: '<script>\n  let priceRange = $state([0, 500]);\n</script>\n\n<Slider\n  label="Price Range"\n  bind:value={priceRange}\n  min={0}\n  max={1000}\n  step={10}\n  showValue\n  formatValue={(v) => `$${v}`}\n/>'
+          code: '<script>\n  let priceRange = $state([0, 500]);\n</script>\n\n<Slider\n  label="Price Range"\n  hint="Filter products by price"\n  bind:value={priceRange}\n  min={0}\n  max={1000}\n  step={10}\n  showValue\n  formatValue={(v) => `$${v}`}\n/>'
         },
         {
           title: "Temperature",
-          code: '<script>\n  let temp = $state([72]);\n</script>\n\n<Slider\n  label="Temperature"\n  bind:value={temp}\n  min={60}\n  max={85}\n  showValue\n  formatValue={(v) => `${v}\xB0F`}\n/>'
+          code: '<script>\n  let temp = $state([72]);\n</script>\n\n<Slider\n  label="Temperature"\n  hint="Set thermostat temperature"\n  bind:value={temp}\n  min={60}\n  max={85}\n  showValue\n  formatValue={(v) => `${v}\xB0F`}\n/>'
         },
         {
           title: "Opacity Control",
@@ -9094,6 +9305,7 @@ var component_catalog_default = {
 
 <Slider
   label="Rating"
+  hint="Rate your experience"
   bind:value={rating}
   min={1}
   max={5}