Merge pull request #786 from maiieul/docs-small-fixes

Docs-small-fixes

Author: maiieul

apps/website/src/routes/docs/styled/accordion/index.mdx

@@ -28,11 +28,11 @@ import { cn } from '@qwik-ui/utils';
 
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
-const Root = component$<PropsOf<typeof HeadlessAccordion.Root>>((props) => (
-  <HeadlessAccordion.Root animated {...props}>
-    <Slot />
+const Root = (props: PropsOf<typeof HeadlessAccordion.Root>) => (
+  <HeadlessAccordion.Root {...props} accordionItemComponent={Item}>
+    {props.children}
   </HeadlessAccordion.Root>
-));
+);
 
 const Item = component$<PropsOf<typeof HeadlessAccordion.Item>>((props) => {
   return (
@@ -52,7 +52,7 @@ const Trigger = component$<
       <HeadlessAccordion.Trigger
         {...props}
         class={cn(
-          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-open]>svg]:rotate-180',
           props.class,
         )}
       >
@@ -68,7 +68,7 @@ const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) =>
     <HeadlessAccordion.Content
       {...props}
       class={cn(
-        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        'overflow-hidden text-sm data-[closed]:animate-accordion-up data-[open]:animate-accordion-down',
         props.class,
       )}
     >
@@ -87,24 +87,6 @@ export const Accordion = {
 };
 ```
 
-### 2. Update your 'tailwind.config.cjs'
-
-Add the following animations to your tailwind.config.js file:
-
-```tsx
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  theme: {
-    extend: {
-      animation: {
-        'accordion-down': '0.2s ease-out 0s 1 normal forwards accordion-open',
-        'accordion-up': '0.2s ease-out 0s 1 normal forwards accordion-close',
-      },
-    },
-  },
-};
-```
-
 ## Usage
 
 ```tsx

apps/website/src/routes/docs/styled/button/index.mdx

@@ -16,18 +16,18 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       look: {
         primary:
-          'border-base bg-primary text-primary-foreground shadow-sm transition-all duration-100 hover:bg-primary/90 active:shadow-base active:press',
+          'border-base bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:shadow-base active:press',
         secondary:
-          'border-base bg-secondary text-secondary-foreground shadow-sm transition-all duration-100 hover:bg-secondary/90 active:shadow-base active:press',
+          'border-base bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:shadow-base active:press',
         alert:
-          'border-base bg-alert text-alert-foreground shadow-sm transition-all duration-100 hover:bg-alert/90 active:shadow-base active:press',
+          'border-base bg-alert text-alert-foreground shadow-sm hover:bg-alert/90 active:shadow-base active:press',
         outline:
-          'border bg-background text-foreground shadow-sm transition-all duration-100 hover:bg-accent active:shadow-base active:press',
+          'border bg-background text-foreground shadow-sm hover:bg-accent active:shadow-base active:press',
         ghost: 'text-accent-foreground hover:bg-accent',
         link: 'text-foreground hover:bg-transparent hover:text-foreground/80 hover:underline hover:underline-offset-2',
       },

apps/website/src/routes/docs/styled/checkbox/index.mdx

@@ -25,23 +25,29 @@ qwik-ui add checkbox
 ```
 
 ```tsx
-import { PropsOf, component$ } from '@builder.io/qwik';
+import { $, PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-export const Checkbox = component$<PropsOf<'input'>>(({ name, ...props }) => {
-  return (
-    <input
-      type="checkbox"
-      {...props}
-      class={cn(
-        'peer peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-        props.class,
-      )}
-      name={name}
-      id={name}
-    />
-  );
-});
+export const Checkbox = component$<PropsOf<'input'>>(
+  ({ id, name, ['bind:checked']: checkedSig, checked, onInput$, ...props }) => {
+    const inputId = id || name;
+    return (
+      <input
+        type="checkbox"
+        {...props}
+        // 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$}
+        data-checked={checked || checkedSig?.value || ''}
+        class={cn(
+          'peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )}
+        id={inputId}
+      />
+    );
+  },
+);
 ```
 
 ## Examples

apps/website/src/routes/docs/styled/input/index.mdx

@@ -21,37 +21,34 @@ qwik-ui add input
 ```
 
 ```tsx
-import { component$, type PropsOf } from '@builder.io/qwik';
+import { $, component$, type PropsOf } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
 type InputProps = PropsOf<'input'> & {
   error?: string;
 };
 
 export const Input = component$<InputProps>(
-  ({
-    name,
-    error,
-    'bind:value': valueSig,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    'bind:checked': checkedSig,
-    ...props
-  }) => {
+  ({ name, error, id, ['bind:value']: valueSig, value, onInput$, ...props }) => {
+    const inputId = id || name;
+
     return (
       <>
         <input
           {...props}
-          aria-errormessage={`${name}-error`}
-          aria-invalid={!!error}
-          bind:value={valueSig}
+          aria-errormessage={`${inputId}-error`}
+          aria-invaid={!!error}
+          // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
+          value={valueSig ? valueSig.value : value}
+          onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
           class={cn(
             'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
-          id={name}
+          id={inputId}
         />
         {error && (
-          <div id={`${name}-error`} class="text-destructive mt-1 text-sm">
+          <div id={`${inputId}-error`} class="text-destructive mt-1 text-sm">
             {error}
           </div>
         )}

apps/website/src/routes/docs/styled/popover/index.mdx

@@ -21,7 +21,7 @@ qwik-ui add popover
 ```
 
 ```tsx
-import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { Popover as HeadlessPopover } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
@@ -36,26 +36,13 @@ const Root = component$<PropsOf<typeof HeadlessPopover.Root>>(({ ...props }) =>
 const Trigger = HeadlessPopover.Trigger;
 
 const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) => {
-  useStyles$(`
-    .my-transition {
-      transition: opacity 150ms, display 150ms, overlay 150ms;
-      transition-behavior: allow-discrete;
-    }
-  
-    .popover-showing {
-      opacity: 1;
-    }
-  
-    .popover-closing {
-      opacity: 0;
-    }
-    `);
-
   return (
     <HeadlessPopover.Panel
       {...props}
       class={cn(
-        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md outline-none',
+        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+        'data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in data-[closing]:zoom-out-95 data-[open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
     >

apps/website/src/routes/docs/styled/textarea/index.mdx

@@ -21,27 +21,34 @@ qwik-ui add textarea
 ```
 
 ```tsx
-import { component$, PropsOf } from '@builder.io/qwik';
+import { $, component$, PropsOf } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
 type TextareaProps = PropsOf<'textarea'> & {
   error?: string;
 };
 
-export const Textarea = component$<TextareaProps>(({ name, error, ...props }) => {
-  return (
-    <>
-      <textarea
-        {...props}
-        class={cn(
-          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          props.class,
-        )}
-      />
-      {error && <div id={`${name}-error`}>{error}</div>}
-    </>
-  );
-});
+export const Textarea = component$<TextareaProps>(
+  ({ id, name, error, ['bind:value']: valueSig, value, onInput$, ...props }) => {
+    const textareaId = id || name;
+    return (
+      <>
+        <textarea
+          {...props}
+          // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
+          value={valueSig ? valueSig.value : value}
+          onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
+          class={cn(
+            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            props.class,
+          )}
+          id={textareaId}
+        />
+        {error && <div id={`${textareaId}-error`}>{error}</div>}
+      </>
+    );
+  },
+);
 ```
 
 ## Usage

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

@@ -6,7 +6,7 @@ import { cn } from '@qwik-ui/utils';
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
 const Root = (props: PropsOf<typeof HeadlessAccordion.Root>) => (
-  <HeadlessAccordion.Root {...props} accordionItemComponent={Item} animated>
+  <HeadlessAccordion.Root {...props} accordionItemComponent={Item}>
     {props.children}
   </HeadlessAccordion.Root>
 );

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

@@ -6,12 +6,12 @@ export const Checkbox = component$<PropsOf<'input'>>(
     const inputId = id || name;
     return (
       <input
+        type="checkbox"
+        {...props}
         // 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$}
         data-checked={checked || checkedSig?.value || ''}
-        type="checkbox"
-        {...props}
         class={cn(
           'peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           props.class,