WIP: removed clsq

Author: shairez

CODING_STANDARDS.md

@@ -104,12 +104,11 @@ return (
 - Use accessibility attributes whenever they are needed.
 - For simple primitive states use signals. For object state, use stores.
 
-## Example of headless button customisation with Tailwind
+## Example of headless button customization with Tailwind
 
 ```tsx
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 import { Button as HeadlessButton, ButtonProps as ButtonHeadlessProps } from '@qwik-ui/headless';
-import { clsq } from '@qwik-ui/shared';
 
 type TailwindButtonProps = { size?: 'sm' | 'md', ... };
 export type ButtonProps = ButtonHeadlessProps & TailwindButtonProps;
@@ -118,7 +117,7 @@ export const Button = component$(
   ({ size = 'md', class: classNames, ...rest }: ButtonProps) => {
     const { sizes, ... } = { sizes: { sm: 'btn-sm', md: 'btn-md', ... } };
     return (
-      <HeadlessButton {...rest} class={clsq('btn', sizes[size], classNames)}>
+      <HeadlessButton {...rest} class={['btn', sizes[size], classNames]}>
         <Slot />
       </HeadlessButton>
     );

packages/kit-headless/src/components/breadcrumb/breadcrumb-item.tsx

@@ -1,6 +1,5 @@
 import { component$, HTMLAttributes, Slot, useStylesScoped$ } from '@builder.io/qwik';
 import styles from './breadcrumb-item.css?inline';
-import { clsq } from '@qwik-ui/shared';
 
 export interface BreadcrumbItemProps extends HTMLAttributes<HTMLElement> {
   divider?: string;
@@ -12,7 +11,7 @@ export const BreadcrumbItem = component$((props: BreadcrumbItemProps) => {
   useStylesScoped$(styles);
 
   return (
-    <div style={clsq(`--breadcrumb-divider: "${props.divider || '/'}"`, style)} {...rest}>
+    <div style={`--breadcrumb-divider: "${props.divider || '/'}" ${style}}`} {...rest}>
       <Slot />
     </div>
   );

packages/kit-headless/src/components/menu/menu.tsx

@@ -1,21 +1,20 @@
 import {
   $,
-  component$,
-  createContextId,
   QRL,
   QwikKeyboardEvent,
   Signal,
   Slot,
-  useVisibleTask$,
+  component$,
+  createContextId,
   useContext,
   useContextProvider,
   useId,
   useOnWindow,
   useSignal,
   useStore,
+  useVisibleTask$,
 } from '@builder.io/qwik';
 import { JSX } from '@builder.io/qwik/jsx-runtime';
-import { clsq } from '@qwik-ui/shared';
 import { Button } from '@qwik-ui/primitives';
 
 interface MenuProps {
@@ -88,10 +87,13 @@ export const Menu = component$((props: MenuProps) => {
   return (
     <div
       id={parentId}
-      class={clsq(props.class, {
-        [CSS_CLASS_NAMES.IS_EXPANDED]: isExpanded.value,
-        [CSS_CLASS_NAMES.IS_HOVERED]: isHovered.value,
-      })}
+      class={[
+        props.class,
+        {
+          [CSS_CLASS_NAMES.IS_EXPANDED]: isExpanded.value,
+          [CSS_CLASS_NAMES.IS_HOVERED]: isHovered.value,
+        },
+      ]}
       onMouseEnter$={() => (isHovered.value = true)}
       onMouseLeave$={() => (isHovered.value = false)}
       onKeyDown$={(event: QwikKeyboardEvent) => {
@@ -161,9 +163,9 @@ export const MenuItem = component$((props: MenuItemProps) => {
         <Button
           tabIndex={-1}
           id={myId}
-          class={clsq({
+          class={{
             [CSS_CLASS_NAMES.IS_FOCUSED]: isFocused,
-          })}
+          }}
           onClick$={props.onClick$}
           disabled={props.disabled || false}
         >

packages/kit-headless/src/components/slider/slider.tsx

@@ -1,12 +1,13 @@
 import {
-  component$,
-  createContextId,
   PropFunction,
+  QwikIntrinsicElements,
   Signal,
   Slot,
-  useVisibleTask$,
+  component$,
+  createContextId,
   useContextProvider,
   useSignal,
+  useVisibleTask$,
 } from '@builder.io/qwik';
 
 export const getPercentage = (value: number, min = 0, max = 100) => {
@@ -23,14 +24,14 @@ interface SliderContextService {
 
 export const sliderContext = createContextId<SliderContextService>('slider');
 
-interface SliderProps {
+export type SliderProps = {
   value: number;
   min: number;
   max: number;
   onChange$?: PropFunction<(value: number) => void>;
   class?: string;
   style?: string;
-}
+} & QwikIntrinsicElements['div'];
 
 export const Slider = component$(
   ({

packages/kit-headless/src/components/spinner/spinner.tsx

@@ -1,5 +1,4 @@
 import { component$, useStylesScoped$ } from '@builder.io/qwik';
-import { clsq } from '@qwik-ui/shared';
 import styles from './spinner.css?inline';
 
 export type SpinnerProps = {
@@ -22,7 +21,7 @@ export const Spinner = component$((props: SpinnerProps) => {
   } = props;
   useStylesScoped$(styles);
   return (
-    <div class={clsq('spinner-container', classNames)} style={style}>
+    <div class={`spinner-container ${classNames}`} style={style}>
       <svg part="base" class="spinner" role="spinner">
         <circle
           class="track"

packages/kit-material/src/components/button/button.tsx

@@ -1,6 +1,4 @@
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
-import { Button as HeadlessButton } from '@qwik-ui/primitives';
-import { clsq } from '@qwik-ui/shared';
 
 export type HTMLButtonProps = QwikIntrinsicElements['button'];
 
@@ -17,9 +15,9 @@ export const Button = component$((props: ButtonProps) => {
   const { class: classNames, disabled, floating, flat, size = 'medium', ...rest } = props;
 
   return (
-    <HeadlessButton
+    <button
       {...rest}
-      class={clsq(
+      class={[
         {
           disabled: disabled,
           'btn-floating': floating,
@@ -29,10 +27,9 @@ export const Button = component$((props: ButtonProps) => {
           btn: size === 'medium',
           'btn-large': size === 'large',
         },
-        classNames,
-      )}
+      ]}
     >
       <Slot />
-    </HeadlessButton>
+    </button>
   );
 });

packages/kit-tailwind/src/components/alert/alert.tsx

@@ -1,6 +1,4 @@
 import { component$, Slot } from '@builder.io/qwik';
-
-import { clsq } from '@qwik-ui/shared';
 import { Button, ButtonProps } from '../button/button';
 import { daisyConfig } from './daisy.config';
 
@@ -35,13 +33,7 @@ export const Alert = component$((props: TailwindAlertProps) => {
   return (
     <div
       {...rest}
-      class={clsq(
-        variants[variant],
-        sizes[size],
-        radius[rounding],
-        'flex gap-4',
-        classNames,
-      )}
+      class={[variants[variant], sizes[size], radius[rounding], 'flex gap-4', classNames]}
     >
       <Slot name="icon" />
       <div class="flex-1">

packages/kit-tailwind/src/components/badge/badge.tsx

@@ -1,6 +1,4 @@
 import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
-import { Badge as HeadlessBadge } from '@qwik-ui/headless';
-import { clsq } from '@qwik-ui/shared';
 
 export interface TailwindBadgeProps extends HTMLAttributes<HTMLElement> {
   variant?: TailwindBadgeVariants;
@@ -48,15 +46,13 @@ export const Badge = component$((props: TailwindBadgeProps) => {
   return (
     <div
       {...rest}
-      class={clsq(
+      class={[
         'badge',
         variants[variant],
         sizes[size],
-        {
-          [options.outline]: outline,
-        },
-        classNames,
-      )}
+        outline ? options.outline : '',
+        `${classNames}`,
+      ]}
     >
       <Slot />
     </div>

packages/kit-tailwind/src/components/breadcrumb/breadcrumb.tsx

@@ -1,14 +1,13 @@
 import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
 import { Breadcrumb as HeadlessBreadcrumb } from '@qwik-ui/headless';
-import { clsq } from '@qwik-ui/shared';
 
 type BreadcrumbProps = HTMLAttributes<HTMLElement>;
 
 export const Breadcrumb = component$((props: BreadcrumbProps) => {
   const { class: classNames, ...rest } = props;
 
   return (
-    <HeadlessBreadcrumb class={clsq('breadcrumbs ', classNames)} {...rest}>
+    <HeadlessBreadcrumb class={`breadcrumbs ${classNames}`} {...rest}>
       <ul>
         <Slot />
       </ul>

packages/kit-tailwind/src/components/button-group/button-group.tsx

@@ -1,13 +1,14 @@
 import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
 import { ButtonGroup as HeadlessButtonGroup } from '@qwik-ui/headless';
-import { clsq } from '@qwik-ui/shared';
 
 export type ButtonGroupProps = HTMLAttributes<HTMLElement>;
 
+// TODO: discuss this
+
 export const ButtonGroup = component$((props: ButtonGroupProps) => {
   const { class: classNames, ...rest } = props;
   return (
-    <HeadlessButtonGroup class={clsq('btn-group', classNames)} {...rest}>
+    <HeadlessButtonGroup class={['btn-group', classNames]} {...rest}>
       <Slot />
     </HeadlessButtonGroup>
   );