@redsift/ds-mcp-server 12.3.1-muiv6-alpha.2

package/data/docs/components/design-system/NumberField.json

@@ -0,0 +1,594 @@
+{
+  "name": "NumberField",
+  "description": "NumberField allows users to enter and adjust numeric values with increment\nand decrement buttons. Supports keyboard navigation and locale-aware formatting.\n\nSupports controlled (`value`) or uncontrolled (`defaultValue`) modes.",
+  "package": "@redsift/design-system",
+  "filePath": "packages/design-system/src/components/number-field/NumberField.tsx",
+  "props": [
+    {
+      "name": "onFocus",
+      "description": "Handler that is called when the element receives focus.",
+      "type": "(e: FocusEvent<Element, Element>) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onBlur",
+      "description": "Handler that is called when the element loses focus.",
+      "type": "(e: FocusEvent<Element, Element>) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onFocusChange",
+      "description": "Handler that is called when the element's focus status changes.",
+      "type": "(isFocused: boolean) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onKeyDown",
+      "description": "Handler that is called when a key is pressed.",
+      "type": "(e: KeyboardEvent<HTMLElement>) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onKeyUp",
+      "description": "Handler that is called when a key is released.",
+      "type": "(e: KeyboardEvent<HTMLElement>) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "defaultValue",
+      "description": "Default value.\nUsed for uncontrolled version.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onChange",
+      "description": "Method to handle component change.",
+      "type": "(value?: number | undefined, name?: string | undefined, event?: ChangeEvent<HTMLInputElement> | undefined) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "value",
+      "description": "Input value.\nUsed for controlled version.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "placeholder",
+      "description": "Placeholder.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "decrementAriaLabel",
+      "description": "A custom aria-label for the decrement button. If not provided, the localized string \"Decrement\" is used.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "incrementAriaLabel",
+      "description": "A custom aria-label for the increment button. If not provided, the localized string \"Increment\" is used.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "isWheelDisabled",
+      "description": "Enables or disables changing the value with scroll.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "formatOptions",
+      "description": "Formatting options for the value displayed in the number field.\nThis also affects what characters are allowed to be typed by the user.",
+      "type": "NumberFormatOptions",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "minValue",
+      "description": "The smallest value allowed for the input.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "maxValue",
+      "description": "The largest value allowed for the input.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "step",
+      "description": "The amount that the input value changes with each increment or decrement \"tick\".",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "label",
+      "description": "Label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "color",
+      "description": "Color variant.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "autoFocus",
+      "description": "Whether the component can be autofocused.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "forceColor",
+      "description": "Force color even when not focused.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "hasClearButton",
+      "description": "Whether the clear button is displayed or not.",
+      "type": [
+        "false",
+        "true",
+        "Omit<Partial<IconButtonProps>, \"ref\">"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "inputProps",
+      "description": "Custom props to pass to the input element.",
+      "type": "DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "inputRef",
+      "description": "Custom ref object to pass to the input element.",
+      "type": "MutableRefObject<HTMLInputElement>",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "isColored",
+      "description": "@deprecated Whether the component should use the product colors or shades of grey.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "isDisabled",
+      "description": "Whether the component is disabled or not.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "isInvalid",
+      "description": "Whether the component is invalid or not.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "isReadOnly",
+      "description": "Whether the component is read only or not.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "isRequired",
+      "description": "Whether the component is required or not.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "leftIcon",
+      "description": "Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\nCan also be a ReactElement.",
+      "type": "Omit<IconProps, \"ref\">",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "name",
+      "description": "Name to pass to the input element.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onClear",
+      "description": "Method to handle component clear.",
+      "type": "() => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "theme",
+      "description": "Theme.",
+      "type": [
+        "\"light\"",
+        "\"dark\""
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "type",
+      "description": "Input type.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "variant",
+      "description": "TextField variant.",
+      "type": [
+        "\"default\"",
+        "\"underline\""
+      ],
+      "required": false,
+      "defaultValue": "'default'",
+      "category": "props"
+    },
+    {
+      "name": "highlightNonAscii",
+      "description": "Highlight non-ASCII characters in the input. Useful for IDN domain names where\nUnicode lookalike characters can be confusing. Uses an overlay to display\nhighlighted characters while maintaining input functionality.\n\n- `true`: enables both font change and background highlight\n- `{ font?: boolean, background?: boolean | string }`: fine-grained control\n@example // Both font and background (default)\n<TextField highlightNonAscii label=\"Domain\" />\n@example // Background only\n<TextField highlightNonAscii={{ font: false }} label=\"Domain\" />",
+      "type": [
+        "false",
+        "true",
+        "HighlightNonAsciiOptions"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "flex",
+      "description": "When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "flexGrow",
+      "description": "When used in a flex layout, specifies how the element will grow to fit the space available. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow\">MDN</a>.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "flexShrink",
+      "description": "When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink\">MDN</a>.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "flexBasis",
+      "description": "When used in a flex layout, specifies the initial main size of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "alignSelf",
+      "description": "Overrides the alignItems property of a flex or grid container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-self\">MDN</a>.",
+      "type": [
+        "\"center\"",
+        "\"auto\"",
+        "\"normal\"",
+        "\"start\"",
+        "\"end\"",
+        "\"flex-start\"",
+        "\"flex-end\"",
+        "\"self-start\"",
+        "\"self-end\"",
+        "\"baseline\"",
+        "\"stretch\""
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "justifySelf",
+      "description": "Specifies how the element is justified inside a flex or grid container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "order",
+      "description": "The layout order for the element within a flex or grid container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/order\">MDN</a>.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "gridArea",
+      "description": "When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "gridColumn",
+      "description": "When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "gridRow",
+      "description": "When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "gridColumnStart",
+      "description": "When used in a grid layout, specifies the starting column to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "gridColumnEnd",
+      "description": "When used in a grid layout, specifies the ending column to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "gridRowStart",
+      "description": "When used in a grid layout, specifies the starting row to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "gridRowEnd",
+      "description": "When used in a grid layout, specifies the ending row to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "layout"
+    },
+    {
+      "name": "margin",
+      "description": "The margin for all four sides of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "spacing"
+    },
+    {
+      "name": "marginBottom",
+      "description": "The margin for the bottom side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "spacing"
+    },
+    {
+      "name": "marginLeft",
+      "description": "The margin for the left side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "spacing"
+    },
+    {
+      "name": "marginRight",
+      "description": "The margin for the right side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "spacing"
+    },
+    {
+      "name": "marginTop",
+      "description": "The margin for the top side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "spacing"
+    },
+    {
+      "name": "height",
+      "description": "The height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\">MDN</a>.",
+      "type": [
+        "string",
+        "number"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "sizing"
+    },
+    {
+      "name": "maxHeight",
+      "description": "The maximum height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "sizing"
+    },
+    {
+      "name": "maxWidth",
+      "description": "The maximum width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "sizing"
+    },
+    {
+      "name": "minHeight",
+      "description": "The minimum height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "sizing"
+    },
+    {
+      "name": "minWidth",
+      "description": "The minimum width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "sizing"
+    },
+    {
+      "name": "width",
+      "description": "The width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\">MDN</a>.",
+      "type": [
+        "string",
+        "number"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "sizing"
+    },
+    {
+      "name": "position",
+      "description": "Specifies how the element is positioned. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "positioning"
+    },
+    {
+      "name": "top",
+      "description": "The top position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "positioning"
+    },
+    {
+      "name": "bottom",
+      "description": "The bottom position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "positioning"
+    },
+    {
+      "name": "left",
+      "description": "The left position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\">MDN</a>. Consider using start instead for RTL support.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "positioning"
+    },
+    {
+      "name": "right",
+      "description": "The right position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\">MDN</a>. Consider using start instead for RTL support.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "positioning"
+    },
+    {
+      "name": "zIndex",
+      "description": "The stacking order for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/z-index\">MDN</a>.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "positioning"
+    }
+  ],
+  "examples": [],
+  "tags": {}
+}