@qwik-ui/[email protected]

Minor Changes

• tailwind.config.cjs (by @maiieul in #753)

  tailwindcss-animate

  The tailwind config now uses tailwindcss-animate

    plugins: [
      require('tailwindcss-animate'),
      ...
    ],

  Instead of manually defined animations through a custom plugin like

  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.appear': {
          opacity: 1,
        },
        '.disappear': {
          opacity: 0,
        },
      });
    }),
  ];

  New keyframes

  We added

  animation: {
    'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
    'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
  },
  keyframes: {
    'collapsible-down': {
      from: { height: '0' },
      to: { height: 'var(--qwikui-collapsible-content-height)' },
    },
    'collapsible-up': {
      from: { height: 'var(--qwikui-collapsible-content-height)' },
      to: { height: '0' },
    },
  },

  to the tailwind config. You will need those for the styled accordion to be animated.

  Modal refactor

  Modal.Panel

  The Panel now uses tailwindcss-animate and comes built-in with 5 position variant props

  export const panelVariants = cva(
    [
      'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-sm',
      'data-[closing]:duration-300 data-[open]:duration-300 data-[open]:animate-in data-[closing]:animate-out',
      'backdrop:data-[closing]:duration-300 backdrop:data-[open]:duration-300 backdrop:data-[open]:animate-in backdrop:data-[closing]:animate-out backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
    ],
    {
      variants: {
        position: {
          center:
            'max-w-lg rounded-base shadow-lg data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
          top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
          bottom:
            'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
          left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
          right:
            'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
        },
      },
      defaultVariants: {
        position: 'center',
      },
    },
  );
  
  type PanelProps = PropsOf<typeof HeadlessModal.Panel> &
    VariantProps<typeof panelVariants>;
  
  const Panel = component$<PanelProps>(({ position, ...props }) => {
    return (
      <HeadlessModal.Panel
        {...props}
        class={cn(panelVariants({ position }), props.class)}
      >
        <Slot />
      </HeadlessModal.Panel>
    );
  });

  over previous tailwind.config.js home-made plugin

          '.appear': {
            opacity: 1,
          },
          '.disappear': {
            opacity: 0,
          },

  to avoid re-inventing the wheel.

  Modal.Title

  Title now holds text-lg font-semibold classes.

  Modal.Description

  Description now holds text-muted-foreground class.

  Accordion

  We changed the accordion animations. So make sure to update your taiwind config accordingly (explained at the beginning of the changeset!).

Patch Changes

• ✨ new styled select component 🎉 (by @maiieul in #759)

• Styled button now uses transition-all for every variant shared class (by @maiieul in #753)