Dropdown

1{
2  "name": "Dropdown",
3  "description": "Dropdown menu con opciones desplegables.",
4  "component": "Dropdown",
5  "files": [
6    "components/base/data-display/overlays/Dropdown.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "@radix-ui/react-dropdown-menu"
11  ],
12  "props": {
13    "Dropdown": {
14      "open": {
15        "type": "boolean",
16        "required": false,
17        "description": "Controla el estado abierto/cerrado del dropdown."
18      },
19      "defaultOpen": {
20        "type": "boolean",
21        "required": false,
22        "description": "Estado inicial del dropdown."
23      },
24      "onOpenChange": {
25        "type": "(open: boolean) => void",
26        "required": false,
27        "description": "Callback cuando cambia el estado."
28      },
29      "modal": {
30        "type": "boolean",
31        "required": false,
32        "description": "Si bloquea interacción con el resto de la UI."
33      }
34    },
35    "DropdownTrigger": {
36      "asChild": {
37        "type": "boolean",
38        "required": false,
39        "description": "Permite usar un componente custom como trigger."
40      },
41      "disabled": {
42        "type": "boolean",
43        "required": false,
44        "description": "Deshabilita el trigger."
45      }
46    },
47    "DropdownContent": {
48      "align": {
49        "type": "'start' | 'center' | 'end'",
50        "required": false,
51        "default": "center",
52        "description": "Alineación horizontal del contenido."
53      },
54      "side": {
55        "type": "'top' | 'right' | 'bottom' | 'left'",
56        "required": false,
57        "description": "Lado donde se abre el dropdown."
58      },
59      "sideOffset": {
60        "type": "number",
61        "required": false,
62        "default": 4,
63        "description": "Separación respecto al trigger."
64      }
65    },
66    "DropdownItem": {
67      "disabled": {
68        "type": "boolean",
69        "required": false,
70        "description": "Deshabilita la opción."
71      },
72      "inset": {
73        "type": "boolean",
74        "required": false,
75        "description": "Aplica padding extra a la izquierda."
76      },
77      "onSelect": {
78        "type": "(event: Event) => void",
79        "required": false,
80        "description": "Callback al seleccionar."
81      }
82    },
83    "DropdownCheckboxItem": {
84      "checked": {
85        "type": "boolean | 'indeterminate'",
86        "required": false,
87        "description": "Estado del checkbox."
88      },
89      "onCheckedChange": {
90        "type": "(checked: boolean) => void",
91        "required": false,
92        "description": "Callback al cambiar estado."
93      },
94      "disabled": {
95        "type": "boolean",
96        "required": false
97      }
98    },
99    "DropdownRadioGroup": {
100      "value": {
101        "type": "string",
102        "required": false,
103        "description": "Valor seleccionado."
104      },
105      "onValueChange": {
106        "type": "(value: string) => void",
107        "required": false,
108        "description": "Callback al cambiar selección."
109      }
110    },
111    "DropdownRadioItem": {
112      "value": {
113        "type": "string",
114        "required": true,
115        "description": "Valor del item."
116      },
117      "disabled": {
118        "type": "boolean",
119        "required": false
120      }
121    },
122    "DropdownLabel": {
123      "inset": {
124        "type": "boolean",
125        "required": false,
126        "description": "Indentación visual del label."
127      }
128    },
129    "DropdownSeparator": {
130      "decorative": {
131        "type": "boolean",
132        "required": false,
133        "description": "Si es solo visual (no semántico)."
134      }
135    },
136    "DropdownShortcut": {
137      "children": {
138        "type": "ReactNode",
139        "required": true,
140        "description": "Texto del shortcut (ej: ⌘K, Ctrl+S)."
141      }
142    },
143    "DropdownSub": {
144      "open": {
145        "type": "boolean",
146        "required": false
147      },
148      "onOpenChange": {
149        "type": "(open: boolean) => void",
150        "required": false
151      }
152    },
153    "DropdownSubTrigger": {
154      "disabled": {
155        "type": "boolean",
156        "required": false
157      },
158      "inset": {
159        "type": "boolean",
160        "required": false
161      }
162    },
163    "DropdownSubContent": {
164      "sideOffset": {
165        "type": "number",
166        "required": false,
167        "default": 4
168      },
169      "alignOffset": {
170        "type": "number",
171        "required": false
172      }
173    }
174  }
175}