daisyui · benjitrosch · Oct 12, 2022 · Oct 11, 2022 · Oct 11, 2022 · Oct 11, 2022
diff --git a/.storybook/story-layout.js b/.storybook/story-layout.js
@@ -55,15 +55,15 @@ const StoryLayout = ({ children, title, description, source }) => {
               className='z-10 -mb-px'
               variant='lifted'
               value={tab}
-              onChange={(t) => setTab(t)}
+              onChange={(tab) => setTab(tab === 'fullWidthClick' ? 'html' : tab)}
             >
               <Tabs.Tab value="preview" className="[--tab-bg:hsl(var(--b2))]">
                 Preview
               </Tabs.Tab> 
               <Tabs.Tab value="html" className={tab === 'html' ? "[--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]" : ""}>
                 HTML
               </Tabs.Tab> 
-              <Tabs.Tab value="html" className="mr-6 flex-1 cursor-default [--tab-border-color:transparent]" /> 
+              <Tabs.Tab value="fullWidthClick" className="mr-6 flex-1 cursor-default [--tab-border-color:transparent]" /> 
             </Tabs>
             <div className='rounded-b-box rounded-tr-box relative overflow-x-auto'>
               {tab === 'preview' ? (

diff --git a/README.md b/README.md
@@ -28,6 +28,8 @@ Install the package with npm or yarn:
 
 ```bash
 npm install react-daisyui
+or
+yarn add react-daisyui
 ```
 
 To prevent TailwindCSS from purging your styles, add the following line to your tailwind.config.js:

diff --git a/src/Alert/Alert.stories.tsx b/src/Alert/Alert.stories.tsx
@@ -27,9 +27,9 @@ Default.args = {
       className="w-6 h-6 mx-2"
     >
       <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
         d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
       ></path>
     </svg>
@@ -49,9 +49,9 @@ export const Colors: Story<AlertProps> = (args) => {
             className="w-6 h-6 mx-2 stroke-current"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
               d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
             ></path>
           </svg>
@@ -70,9 +70,9 @@ export const Colors: Story<AlertProps> = (args) => {
             className="w-6 h-6 mx-2 stroke-current"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
               d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
             ></path>
           </svg>
@@ -91,9 +91,9 @@ export const Colors: Story<AlertProps> = (args) => {
             className="w-6 h-6 mx-2 stroke-current"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
               d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
             ></path>
           </svg>
@@ -112,9 +112,9 @@ export const Colors: Story<AlertProps> = (args) => {
             className="w-6 h-6 mx-2 stroke-current"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
               d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
             ></path>
           </svg>
@@ -133,9 +133,9 @@ export const Colors: Story<AlertProps> = (args) => {
             className="w-6 h-6 mx-2 stroke-current"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
               d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
             ></path>
           </svg>
@@ -161,9 +161,9 @@ export const CustomContents: Story<AlertProps> = ({
           className="w-6 h-6 mx-2 stroke-current"
         >
           <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
             d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
           ></path>
         </svg>

diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx
@@ -9,7 +9,9 @@ export default {
   component: Avatar,
   argTypes: {
     size: {
-      control: { type: 'radio', options: ['lg', 'md', 'sm', 'xs'] },
+      name: 'size',
+      control: { type: 'radio' },
+      options: ['lg', 'md', 'sm', 'xs'],
     },
   },
 } as Meta
@@ -80,14 +82,14 @@ const reactLogoSvg = (
     width="600px"
     height="600px"
     viewBox="0 0 600 600"
-    enable-background="new 0 0 600 600"
+    enableBackground="new 0 0 600 600"
   >
     <g id="Layer_2">
       <path
         fill="none"
         stroke="#E91E63"
-        stroke-width="24"
-        stroke-miterlimit="10"
+        strokeWidth="24"
+        strokeMiterlimit="10"
         d="M371.987,227.641
 		c47.628,47.628,85.039,98.708,106.914,143.552c26.358,54.033,30.096,99.722,11.103,118.714
 		c-19.793,19.793-68.267,15.884-125.731-12.979c-43.445-21.821-92.031-59.119-137.242-104.331
@@ -97,8 +99,8 @@ const reactLogoSvg = (
       <path
         fill="none"
         stroke="#E91E63"
-        stroke-width="24"
-        stroke-miterlimit="10"
+        strokeWidth="24"
+        strokeMiterlimit="10"
         d="M272.931,201.125
 		c65.052-17.465,127.989-24.354,177.767-20.902c59.974,4.16,101.42,23.747,108.385,49.688
 		c7.259,27.033-20.345,67.073-74.054,102.434c-40.608,26.733-97.189,50.188-158.941,66.769
@@ -108,8 +110,8 @@ const reactLogoSvg = (
       <path
         fill="none"
         stroke="#E91E63"
-        stroke-width="24"
-        stroke-miterlimit="10"
+        strokeWidth="24"
+        strokeMiterlimit="10"
         d="M200.469,273.707
 		c17.357-65.081,42.82-123.05,70.671-164.45c33.556-49.882,71.225-76.008,97.178-69.086c27.045,7.212,47.949,51.123,51.76,115.315
 		c2.883,48.533-5.055,109.266-21.531,171.046c-16.892,63.341-40.126,121.389-67.562,162.365

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -87,9 +87,9 @@ export const Icons: Story<ButtonProps> = (args) => {
       stroke="currentColor"
     >
       <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
         d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
       />
     </svg>

diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx
@@ -45,10 +45,10 @@ FormControlAccent.args = { color: 'accent' }
 export const Sizes: Story<CheckboxProps> = (args) => {
   return (
     <div className="flex flex-col items-center float-left gap-2">
-      <Checkbox {...args} checked size="xs" />
-      <Checkbox {...args} checked size="sm" />
-      <Checkbox {...args} checked size="md" />
-      <Checkbox {...args} checked size="lg" />
+      <Checkbox {...args} defaultChecked size="xs" />
+      <Checkbox {...args} defaultChecked size="sm" />
+      <Checkbox {...args} defaultChecked size="md" />
+      <Checkbox {...args} defaultChecked size="lg" />
     </div>
   )
 }

diff --git a/src/Dropdown/Dropdown.stories.tsx b/src/Dropdown/Dropdown.stories.tsx
@@ -81,9 +81,9 @@ export const Helper: Story<DropdownProps> = (args) => {
             className="w-4 h-4 stroke-current"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
               d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
             ></path>
           </svg>

diff --git a/src/Footer/Footer.stories.tsx b/src/Footer/Footer.stories.tsx
@@ -52,8 +52,8 @@ export const WithLogo: Story<FooterProps> = (args) => {
           height="50"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           className="fill-current"
         >
           <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
@@ -98,8 +98,8 @@ export const WithLogoAndLightBackground: Story<FooterProps> = (args) => {
           height="50"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           className="fill-current"
         >
           <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>

diff --git a/src/PhoneMockup/PhoneMockup.stories.tsx b/src/PhoneMockup/PhoneMockup.stories.tsx
@@ -11,7 +11,10 @@ const meta: Meta = {
     controls: { expanded: true },
   },
   argTypes: {
-    color: { control: { type: 'select', options: componentColors } },
+    color: {
+      control: { type: 'select' },
+      options: componentColors,
+    },
   },
 }
 

diff --git a/src/Range/Range.stories.tsx b/src/Range/Range.stories.tsx
@@ -30,10 +30,10 @@ AccentColor.args = { color: 'accent' }
 export const Sizes: Story<RangeProps> = (args) => {
   return (
     <div className="flex flex-col gap-2">
-      <Range {...args} value="40" size="xs" />
-      <Range {...args} value="50" size="sm" />
-      <Range {...args} value="60" size="md" />
-      <Range {...args} value="70" size="lg" />
+      <Range {...args} defaultValue="40" size="xs" />
+      <Range {...args} defaultValue="50" size="sm" />
+      <Range {...args} defaultValue="60" size="md" />
+      <Range {...args} defaultValue="70" size="lg" />
     </div>
   )
 }
diff --git a/src/Textarea/Textarea.stories.tsx b/src/Textarea/Textarea.stories.tsx
@@ -4,10 +4,10 @@ import { Story, Meta } from '@storybook/react'
 import Textarea, { TextareaProps } from '.'
 
 export default {
-  title: 'Data input/TextArea',
+  title: 'Data Input/Textarea',
   component: Textarea,
   args: {
-    placeHolder: 'Bio',
+    placeholder: 'Bio',
     disabled: false,
   },
 } as Meta

diff --git a/src/WindowMockup/WindowMockup.stories.tsx b/src/WindowMockup/WindowMockup.stories.tsx
@@ -11,7 +11,10 @@ const meta: Meta = {
     controls: { expanded: true },
   },
   argTypes: {
-    color: { control: { type: 'select', options: componentColors } },
+    color: {
+      control: { type: 'select' },
+      options: componentColors,
+    },
   },
 }
 

diff --git a/src/WindowMockup/WindowMockup.tsx b/src/WindowMockup/WindowMockup.tsx
@@ -50,8 +50,6 @@ const WindowMockup = forwardRef<HTMLDivElement, WindowMockupProps>(
       className
     )
 
-    console.log('classes', classes)
-
     // If border is true, then we need to add the border-t and padding classes to the children
     // if more than one child is passed in, or the single child is not a valid element, then we need to wrap the child/children in a div
 
@@ -65,12 +63,10 @@ const WindowMockup = forwardRef<HTMLDivElement, WindowMockupProps>(
       'p-4'
     )
 
-    console.log('innerClasses', innerClasses)
-
     // Add the innerClasses to the child element, merging classNames if existing, or wrapping with div and adding innerClasses
     const innerEl =
       firstChild && React.isValidElement(firstChild) ? (
-        React.cloneElement(firstChild, {
+        React.cloneElement(firstChild as React.ReactElement, {
           className: twMerge(innerClasses, firstChild.props.className),
         })
       ) : (