@czi-sds/mcp 0.3.0 → 0.5.0

package/data/component-props/Panel.json

@@ -1,71 +1,21 @@
 {
   "Panel": {
     "props": {
-      "children": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "The content of the component."
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false,
-        "description": "@ignore"
-      },
-      "onClose": {
-        "type": "\"backdropClick\" | \"escapeKeyDown\"",
-        "isRequired": false,
-        "description": "Callback fired when the component requests to be closed.\nThe `reason` parameter can optionally be used to control the response to `onClose`.\n@param event The event source of the callback.\n@param reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`."
-      },
-      "open": {
+      "isBackdropClickEnabled": {
         "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the component is shown.",
-        "defaultValue": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
         "isRequired": false
       },
-      "onChange": {
-        "type": "FormEventHandler<HTMLDivElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
+      "position": {
+        "type": "\"bottom\" | \"left\" | \"right\"",
         "isRequired": false
       },
       "sdsType": {
         "type": "\"overlay\" | \"basic\"",
-        "isRequired": true,
-        "description": "The type/variant of the component"
-      },
-      "position": {
-        "type": "\"bottom\" | \"left\" | \"right\"",
-        "isRequired": false
+        "isRequired": true
       },
       "width": {
         "type": "\"string\" | \"number\"",
         "isRequired": false
-      },
-      "isBackdropClickEnabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
-      },
-      "HeaderComponent": {
-        "type": "ReactNode",
-        "isRequired": false
-      },
-      "closeButtonOnClick": {
-        "type": "function",
-        "isRequired": false
-      },
-      "CloseButtonComponent": {
-        "type": "ReactNode",
-        "isRequired": false
       }
     }
   }

package/data/component-props/SegmentedControl.json

@@ -4,61 +4,6 @@
       "buttonDefinition": {
         "type": "SingleButtonDefinition[]",
         "isRequired": true
-      },
-      "children": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "The content of the component."
-      },
-      "color": {
-        "type": "\"standard\" | \"primary\" | \"secondary\" | \"error\" | \"info\" | \"success\" | \"warning\"",
-        "isRequired": false,
-        "description": "The color of the button when it is selected.\nIt supports both default and custom theme colors, which can be added as shown in the\n[palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).",
-        "defaultValue": "standard"
-      },
-      "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the component is disabled. This implies that all ToggleButton children will be disabled.",
-        "defaultValue": false
-      },
-      "fullWidth": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the button group will take up the full width of its container.",
-        "defaultValue": false
-      },
-      "onChange": {
-        "type": "function",
-        "isRequired": false,
-        "description": "Callback fired when the value changes.\n@param event The event source of the callback.\n@param value of the selected buttons. When `exclusive` is true\nthis is a single value; when false an array of selected values. If no value\nis selected and `exclusive` is true the value is null; when false an empty array."
-      },
-      "size": {
-        "type": "\"small\" | \"medium\" | \"large\"",
-        "isRequired": false,
-        "description": "The size of the component.",
-        "defaultValue": "medium"
-      },
-      "value": {
-        "type": "any",
-        "isRequired": false,
-        "description": "The currently selected value within the group or an array of selected\nvalues when `exclusive` is false.\n\nThe value must have reference equality with the option in order to be selected."
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
       }
     }
   }

package/data/component-props/TableRow.json

@@ -5,44 +5,16 @@
         "type": "\"false\" | \"true\"",
         "isRequired": false
       },
-      "name": {
-        "type": "string",
-        "isRequired": false
-      },
-      "selected": {
+      "hover": {
         "type": "\"false\" | \"true\"",
         "isRequired": false
       },
-      "value": {
-        "type": "\"string\" | \"number\" | \"readonly string[]\"",
-        "isRequired": false
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLTableRowElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
-      },
-      "tooltipText": {
-        "type": "string",
+      "rowHeight": {
+        "type": "number",
         "isRequired": false
       },
-      "tooltipSubtitle": {
-        "type": "string",
+      "selected": {
+        "type": "\"false\" | \"true\"",
         "isRequired": false
       },
       "shouldShowTooltipOnHover": {
@@ -53,15 +25,15 @@
         "type": "TooltipProps",
         "isRequired": false
       },
-      "rowHeight": {
-        "type": "number",
+      "tooltipSubtitle": {
+        "type": "string",
         "isRequired": false
       },
-      "useDivider": {
-        "type": "\"false\" | \"true\"",
+      "tooltipText": {
+        "type": "string",
         "isRequired": false
       },
-      "hover": {
+      "useDivider": {
         "type": "\"false\" | \"true\"",
         "isRequired": false
       }

package/data/component-props/Tabs.json

@@ -0,0 +1,18 @@
+{
+  "Tabs": {
+    "props": {
+      "items": {
+        "type": "any",
+        "isRequired": false
+      },
+      "sdsSize": {
+        "type": "any",
+        "isRequired": false
+      },
+      "underlined": {
+        "type": "any",
+        "isRequired": false
+      }
+    }
+  }
+}

package/data/component-props/Tag.json

@@ -1,84 +1,38 @@
 {
   "Tag": {
     "props": {
-      "label": {
-        "type": "string",
-        "isRequired": true,
-        "description": "The content of the component."
-      },
       "color": {
         "type": "\"info\" | \"positive\" | \"notice\" | \"negative\" | \"neutral\" | \"beta\" | \"[string, string]\" | \"[string, string, string]\"",
         "isRequired": false
       },
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "children": {
-        "type": "null",
-        "isRequired": false,
-        "description": "This prop isn't supported.\nUse the `component` prop if you need to change the children structure."
-      },
-      "disabled": {
+      "hover": {
         "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false
       },
       "icon": {
         "type": "ReactElement",
         "isRequired": false,
         "description": "Icon element."
       },
-      "size": {
-        "type": "\"small\" | \"medium\"",
-        "isRequired": false,
-        "description": "The size of the component.",
-        "defaultValue": "medium"
-      },
-      "variant": {
-        "type": "\"outlined\" | \"filled\"",
-        "isRequired": false,
-        "description": "The variant to use.",
-        "defaultValue": "filled"
-      },
-      "id": {
+      "label": {
         "type": "string",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLDivElement>",
-        "isRequired": false
+        "isRequired": true,
+        "description": "The content of the component."
       },
       "onClick": {
         "type": "function",
         "isRequired": false
       },
-      "hover": {
-        "type": "\"false\" | \"true\"",
+      "sdsSize": {
+        "type": "\"s\" | \"l\"",
         "isRequired": false
       },
-      "sdsType": {
-        "type": "\"primary\" | \"secondary\"",
-        "isRequired": false,
-        "description": "The type/variant of the component"
-      },
       "sdsStyle": {
         "type": "\"square\" | \"rounded\"",
-        "isRequired": false,
-        "description": "The visual style variant of the component"
-      },
-      "sdsSize": {
-        "type": "\"s\" | \"l\"",
-        "isRequired": false,
-        "description": "The size of the component"
+        "isRequired": false
       },
-      "tagColor": {
-        "type": "\"info\" | \"positive\" | \"notice\" | \"negative\" | \"neutral\" | \"beta\" | \"[string, string]\" | \"[string, string, string]\"",
+      "sdsType": {
+        "type": "\"primary\" | \"secondary\"",
         "isRequired": false
       }
     }

package/data/component-props/TagFilter.json

@@ -5,53 +5,6 @@
         "type": "string",
         "isRequired": true,
         "description": "The content of the component."
-      },
-      "onDelete": {
-        "type": "(event: any) => void",
-        "isRequired": true,
-        "description": "Callback fired when the delete icon is clicked.\nIf set, the delete icon will be shown."
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "children": {
-        "type": "null",
-        "isRequired": false,
-        "description": "This prop isn't supported.\nUse the `component` prop if you need to change the children structure."
-      },
-      "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the component is disabled.",
-        "defaultValue": false
-      },
-      "icon": {
-        "type": "ReactElement",
-        "isRequired": false,
-        "description": "Icon element."
-      },
-      "size": {
-        "type": "\"small\" | \"medium\"",
-        "isRequired": false,
-        "description": "The size of the component.",
-        "defaultValue": "medium"
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLDivElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
       }
     }
   }

package/data/component-props/Tooltip.json

@@ -1,85 +1,36 @@
 {
   "Tooltip": {
     "props": {
-      "title": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed."
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false,
-        "description": "This prop is used to help implement the accessibility logic.\nIf you don't provide this prop. It falls back to a randomly generated id."
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "children": {
-        "type": "ReactElement",
-        "isRequired": true,
-        "description": "Tooltip reference element."
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLDivElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
-      },
       "arrowOffset": {
         "type": "number",
         "isRequired": false
       },
-      "followCursor": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the tooltip follow the cursor over the wrapped element.",
-        "defaultValue": false
-      },
-      "inverted": {
-        "type": "\"false\" | \"true\"",
+      "componentSlot": {
+        "type": "ReactNode",
         "isRequired": false
       },
-      "sdsStyle": {
-        "type": "\"dark\" | \"light\"",
-        "isRequired": false,
-        "description": "The visual style variant of the component"
-      },
       "hasInvertedStyle": {
         "type": "\"false\" | \"true\"",
         "isRequired": false
       },
-      "subtitle": {
-        "type": "ReactNode",
-        "isRequired": false
-      },
-      "width": {
-        "type": "\"default\" | \"wide\"",
-        "isRequired": false
+      "placement": {
+        "type": "complex",
+        "isRequired": false,
+        "description": "Tooltip placement.",
+        "defaultValue": "bottom"
       },
       "textAlign": {
         "type": "\"left\" | \"right\" | \"center\"",
         "isRequired": false
       },
-      "componentSlot": {
+      "title": {
         "type": "ReactNode",
-        "isRequired": false
-      },
-      "onClose": {
-        "type": "(event: Event | SyntheticEvent<Element, Event>) => void",
         "isRequired": false,
-        "description": "Callback fired when the component requests to be closed.\n@param event The event source of the callback."
+        "description": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed."
       },
-      "open": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the component is shown."
+      "width": {
+        "type": "\"default\" | \"wide\"",
+        "isRequired": false
       }
     }
   }

package/data/component-props/TooltipCondensed.json

@@ -0,0 +1,18 @@
+{
+  "TooltipCondensed": {
+    "props": {
+      "hasInvertedStyle": {
+        "type": "any",
+        "isRequired": false
+      },
+      "indicator": {
+        "type": "any",
+        "isRequired": false
+      },
+      "indicatorColor": {
+        "type": "any",
+        "isRequired": false
+      }
+    }
+  }
+}

package/data/component-props/TooltipTable.json

@@ -1,10 +1,6 @@
 {
   "TooltipTable": {
     "props": {
-      "data": {
-        "type": "{ label?: string; dataRows: { label: string; value: string | number; }[]; disabled?: boolean; }[]",
-        "isRequired": false
-      },
       "contentAlert": {
         "type": "\"string\" | \"Element\"",
         "isRequired": false

package/data/resources/figma-rules.md

@@ -0,0 +1,101 @@
+# Figma to Code Translation Rules
+
+These rules guide Claude Code when translating Figma designs to code using the CZI Science Design System (SDS).
+
+## Design Token Priority
+
+### Spacing Values
+
+- **ALWAYS use SDS spacing tokens** instead of hardcoded pixel values
+- Map Figma spacing to SDS Tailwind classes: `p-sds-{size}`, `m-sds-{size}`, `gap-sds-{size}`
+- SDS spacing scale: `xs`, `s`, `m`, `l`, `xl`
+- Examples: `mb-sds-xs`, `px-sds-l`, `gap-sds-xl`
+
+### Color Values
+
+- **Prefer SDS color tokens** over hardcoded hex values from Figma
+- Use SDS semantic color classes: `text-light-sds-color-semantic-base-text-primary`
+- Include dark mode variants: `dark:text-dark-sds-color-semantic-base-text-primary`
+- Only use Figma hex values when no appropriate SDS token exists
+
+### Typography
+
+- **Map Figma text styles to SDS typography classes**
+- Format: `prose-sds-{type}-{size}-{weight}-{variant}`
+- Examples: `prose-sds-header-xl-600-wide`, `prose-sds-body-s-400-wide`
+- Use SDS font families: `font-sds-body`, `font-sds-header`, `font-sds-code`
+- Use SDS font weights: `font-sds-regular`, `font-sds-semibold`
+
+## Component Mapping Rules
+
+### SDS Component Priority
+
+- **Always prefer SDS components** over custom implementations
+- Import from `@czi-sds/components`: `import { Button, Icon, Link } from "@czi-sds/components"`
+- Use SDS-specific props: `sdsStyle`, `sdsType`, `sdsSize`, `sdsIcon`
+
+### Common Figma → SDS Mappings
+
+- **Figma Buttons** → `<Button sdsStyle="square|rounded|minimal" sdsType="primary|secondary">`
+- **Figma Icons** → `<Icon sdsIcon="IconName" sdsSize="xs|s|m|l|xl">`
+- **Figma Input Fields** → `<InputText>`, `<InputSlider>`, `<Autocomplete>`
+- **Figma Cards/Containers** → Use SDS spacing classes with `<div>` elements
+
+### Layout Translation
+
+- **Figma Auto Layout** → Tailwind Flexbox: `flex`, `flex-col`, `items-center`, `justify-between`
+- **Figma Grid** → Tailwind Grid: `grid`, `grid-cols-{n}`, `gap-sds-{size}`
+- **Figma Constraints** → Tailwind responsive utilities: `w-full`, `max-w-{size}`, `mx-auto`
+
+## Implementation Guidelines
+
+### Code Structure
+
+- Follow fractal file structure with colocated components
+- Use TypeScript interfaces for props
+- Implement responsive design with SDS breakpoints: `sm`, `md`, `lg`
+
+### Accessibility
+
+- Include ARIA labels and semantic HTML
+- Use SDS color tokens that meet contrast requirements
+- Follow SDS accessibility patterns for interactive elements
+
+### Best Practices
+
+- Extract repeated spacing patterns into reusable components
+- Use SDS design tokens consistently across related components
+- Document any deviations from SDS patterns with comments explaining why
+- Test components in both light and dark modes
+
+## Examples
+
+### Good - Using SDS Values
+
+```tsx
+import { Button, Icon } from "@czi-sds/components";
+
+<div className="flex items-center gap-sds-m p-sds-l">
+  <Button sdsStyle="square" sdsType="primary" className="font-sds-semibold">
+    Save Changes
+  </Button>
+  <Icon sdsIcon="Save" sdsSize="s" />
+</div>;
+```
+
+### Avoid - Hardcoded Values
+
+```tsx
+// Don't do this
+<div className="flex items-center gap-4 p-6">
+  <button className="bg-blue-500 px-4 py-2 font-bold">Save Changes</button>
+  <svg className="w-4 h-4">...</svg>
+</div>
+```
+
+## Design System Integration
+
+- Always check Zeroheight documentation for component usage guidelines
+- Verify SDS component APIs before implementing
+- Use SDS Storybook for component examples and prop references
+- When in doubt, prefer SDS patterns over custom solutions