Merge pull request #790 from maiieul/docs-styled-kit-barrel-file

docs(styled install): add barrel file bonus step

Author: maiieul

apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx

@@ -230,3 +230,32 @@ This might seem like a lot of configuration, but we believe it to be worth it be
 ### Step 4: Find the components you need in the docs and copy/paste them into your project
 
 You will find the components code in their corresponding link in the docs.
+
+### Bonus step: add a barrel file to ~/components/ui
+
+```tsx
+export * from './accordion/accordion';
+export * from './alert/alert';
+export * from './avatar/avatar';
+export * from './badge/badge';
+export * from './breadcrumb/breadcrumb';
+export * from './button/button';
+export * from './card/card';
+export * from './checkbox/checkbox';
+export * from './combobox/combobox';
+export * from './input/input';
+export * from './label/label';
+export * from './modal/modal';
+export * from './popover/popover';
+export * from './progress/progress';
+export * from './radio-group/radio-group';
+export * from './separator/separator';
+export * from './skeleton/skeleton';
+export * from './tabs/tabs';
+export * from './textarea/textarea';
+export * from './select/select';
+```
+
+This way you can now `import { Accordion, Alert, ... } from '~/components/ui';` 👯‍♀️
+
+(**small tip:** you can commment out the components you don't use!)

packages/kit-styled/src/components/checkbox/checkbox.tsx

@@ -1,13 +1,13 @@
 import { $, PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-export const Checkbox = component$<PropsOf<'input'>>(
+export const Checkbox = component$<PropsOf<'input'> & { type?: 'checkbox' }>(
   ({ id, name, ['bind:checked']: checkedSig, checked, onInput$, ...props }) => {
     const inputId = id || name;
     return (
       <input
-        type="checkbox"
         {...props}
+        type="checkbox"
         // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
         checked={checkedSig ? checkedSig.value : checked}
         onInput$={checkedSig ? $((_, el) => (checkedSig.value = el.checked)) : onInput$}