quickit-ui 0.1.14 → 0.1.17

package/README.md

@@ -49,6 +49,74 @@ export default function App() {
 }
 ```
 
+También puedes controlar el focus ring globalmente desde el provider:
+
+```jsx
+<QuickitProvider
+  theme="dark"
+  focusRing={{ disabledComponents: ["input", "textarea"] }}
+>
+  <App />
+</QuickitProvider>
+```
+
+Reglas:
+
+- por defecto Quickit mantiene focus visible accesible en componentes interactivos
+- `focusRing={false}` lo desactiva en toda la librería
+- `focusRing={{ disabledComponents: [...] }}` lo desactiva solo en componentes específicos
+
+Si necesitas leer esa decisión desde tu app o desde wrappers propios:
+
+```jsx
+import { useQuickitFocusRing } from "quickit-ui";
+
+function Toolbar() {
+  const buttonFocusRing = useQuickitFocusRing("button");
+  const linkFocusRing = useQuickitFocusRing("link");
+  const checkboxFocusRing = useQuickitFocusRing("checkbox");
+  const radioFocusRing = useQuickitFocusRing("radio");
+
+  return (
+    <div>
+      <span>button focus: {String(buttonFocusRing)}</span>
+      <span>link focus: {String(linkFocusRing)}</span>
+      <span>checkbox focus: {String(checkboxFocusRing)}</span>
+      <span>radio focus: {String(radioFocusRing)}</span>
+    </div>
+  );
+}
+```
+
+Caso real:
+
+```jsx
+import {
+  Button,
+  Checkbox,
+  Link,
+  QuickitProvider,
+  Radio,
+} from "quickit-ui";
+
+export function LoginOptions() {
+  return (
+    <QuickitProvider
+      focusRing={{ disabledComponents: ["link", "checkbox", "radio"] }}
+    >
+      <div className="flex flex-wrap items-center gap-4">
+        <Link href="#">Ver términos</Link>
+        <Checkbox label="Recordarme" defaultChecked />
+        <Radio name="login-mode" label="Modo manual" defaultChecked />
+        <Button color="neutral" variant="outline">
+          Continuar
+        </Button>
+      </div>
+    </QuickitProvider>
+  );
+}
+```
+
 ## Colores semánticos
 
 La API pública soporta:
@@ -140,6 +208,28 @@ export function Actions() {
 }
 ```
 
+Notas rápidas de `Button`:
+
+- `shape="square"` y `shape="circle"` están pensados para icon buttons.
+- `shape="square"` y `shape="circle"` salen con `activeMotion` desactivado por defecto.
+- Si quieres esa animación en un icon button, usa `activeMotion={true}`.
+
+```jsx
+<Button shape="square" variant="outline" color="neutral" aria-label="Buscar">
+  <SearchIcon />
+</Button>
+
+<Button
+  shape="square"
+  variant="outline"
+  color="neutral"
+  activeMotion
+  aria-label="Buscar con motion"
+>
+  <SearchIcon />
+</Button>
+```
+
 ### Formularios
 
 ```jsx
@@ -175,6 +265,26 @@ export function ContactForm() {
         <FormDescription>Selecciona el motivo de tu consulta.</FormDescription>
       </FormControl>
 
+      <FormControl>
+        <Label htmlFor="password">Contraseña</Label>
+        <Input
+          id="password"
+          type="password"
+          color="brand"
+          placeholder="••••••••"
+        />
+      </FormControl>
+
+      <FormControl>
+        <Label htmlFor="search">Buscar componente</Label>
+        <Input
+          id="search"
+          type="search"
+          color="neutral"
+          defaultValue="Modal"
+        />
+      </FormControl>
+
       <FormControl invalid>
         <Label htmlFor="message">Mensaje</Label>
         <Textarea id="message" color="danger" placeholder="Escribe tu mensaje" />