fix: DropDown asChild, DatePicker scroll styles (#80)

* fix: asChild Dropdown

* Update version name

* fix: date picker overflow styles

* update packages

* fix: versioning

package.json

@@ -48,7 +48,7 @@
     "tailwind-variants": "^0.2.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.7.0",
+    "@chromatic-com/storybook": "^1.8.0",
     "@playwright/test": "^1.46.1",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
@@ -58,7 +58,7 @@
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
     "@types/node": "^22.5.1",
-    "@types/react": "^18.3.4",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.3.0",
     "@typescript-eslint/parser": "^8.3.0",
@@ -74,7 +74,7 @@
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "vite": "^5.4.2",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.0.5"
   }
 }

src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Accordion [v0.0.1]
+// Tremor Accordion [v0.0.1]
 
 import React from "react"
 import * as AccordionPrimitives from "@radix-ui/react-accordion"

src/components/Accordion/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Accordion Changelog
+# Tremor Accordion Changelog
 
 ## 0.0.1
 

src/components/AreaChart/AreaChart.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw AreaChart [v0.3.1]
+// Tremor AreaChart [v0.3.1]
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 "use client"

src/components/AreaChart/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw AreaChart Changelog
+# Tremor AreaChart Changelog
 
 ## 0.3.1
 

src/components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Badge [v0.0.1]
+// Tremor Badge [v0.0.1]
 
 import React from "react"
 import { tv, type VariantProps } from "tailwind-variants"

src/components/Badge/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Badge Changelog
+# Tremor Badge Changelog
 
 ## 0.0.1
 

src/components/BarChart/BarChart.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw BarChart [v0.2.1]
+// Tremor BarChart [v0.2.1]
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 "use client"

src/components/BarChart/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw BarChart Changelog
+# Tremor BarChart Changelog
 
 ## 0.2.1
 

src/components/BarList/BarList.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw BarList [v0.1.1]
+// Tremor BarList [v0.1.1]
 
 import React from "react"
 

src/components/BarList/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw BarList Changelog
+# Tremor BarList Changelog
 
 ## 0.1.1
 

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Button [v0.1.2]
+// Tremor Button [v0.1.2]
 
 import React from "react"
 import { Slot } from "@radix-ui/react-slot"

src/components/Button/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Button Changelog
+# Tremor Button Changelog
 
 ## 0.1.2
 

src/components/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Calendar [v0.0.5]
+// Tremor Calendar [v0.0.5]
 
 "use client"
 

src/components/Calendar/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Calendar Changelog
+# Tremor Calendar Changelog
 
 ## 0.0.5
 

src/components/Callout/Callout.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Callout [v0.0.1]
+// Tremor Callout [v0.0.1]
 
 import React from "react"
 import { tv, type VariantProps } from "tailwind-variants"

src/components/Callout/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Callout Changelog
+# Tremor Callout Changelog
 
 ## 0.0.1
 

src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Card [v0.0.2]
+// Tremor Card [v0.0.2]
 
 import React from "react"
 import { Slot } from "@radix-ui/react-slot"

src/components/Card/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Card Changelog
+# Tremor Card Changelog
 
 ## 0.0.2
 

src/components/CategoryBar/CategoryBar.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw CategoryBar [v0.0.1]
+// Tremor CategoryBar [v0.0.1]
 
 "use client"
 

src/components/CategoryBar/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Category Bar Changelog
+# Tremor Category Bar Changelog
 
 ## 0.0.1
 

src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Checkbox [v0.0.3]
+// Tremor Checkbox [v0.0.3]
 
 import React from "react"
 import * as CheckboxPrimitives from "@radix-ui/react-checkbox"

src/components/Checkbox/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Checkbox Changelog
+# Tremor Checkbox Changelog
 
 ## 0.0.3
 

src/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Date Picker [v1.0.3]
+// Tremor Date Picker [v1.0.4]
 
 "use client"
 
@@ -928,7 +928,7 @@ const RangeDatePicker = ({
       </Trigger>
       <CalendarPopover align={align}>
         <div className="flex">
-          <div className="flex flex-col overflow-x-scroll sm:flex-row sm:items-start">
+          <div className="flex flex-col overflow-x-auto sm:flex-row sm:items-start">
             {presets && presets.length > 0 && (
               <div
                 className={cx(
@@ -946,7 +946,7 @@ const RangeDatePicker = ({
                 </div>
               </div>
             )}
-            <div className="overflow-x-scroll">
+            <div className="overflow-x-auto">
               <CalendarPrimitive
                 mode="range"
                 selected={range}
@@ -959,10 +959,9 @@ const RangeDatePicker = ({
                 enableYearNavigation={enableYearNavigation}
                 locale={locale}
                 initialFocus
-                className="overflow-x-scroll"
                 classNames={{
                   months:
-                    "flex flex-row divide-x divide-gray-200 dark:divide-gray-800 overflow-x-scroll",
+                    "flex flex-row divide-x divide-gray-200 dark:divide-gray-800 overflow-x-auto",
                 }}
                 {...props}
               />

src/components/DatePicker/changelog.md

@@ -1,4 +1,10 @@
-# Tremor Raw Date Picker Changelog
+# Tremor Date Picker Changelog
+
+## 1.0.4
+
+### Changes
+
+- Fix: Overflow styles
 
 ## 1.0.3
 

src/components/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Dialog [v0.0.1]
+// Tremor Dialog [v0.0.1]
 
 import React from "react"
 import * as DialogPrimitives from "@radix-ui/react-dialog"

src/components/Dialog/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Dialog Changelog
+# Tremor Dialog Changelog
 
 ## 0.0.1
 

src/components/Divider/Divider.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Divider [v0.0.2]
+// Tremor Divider [v0.0.2]
 
 import React from "react"
 

src/components/Divider/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Divider Changelog
+# Tremor Divider Changelog
 
 ## 0.0.2
 

src/components/DonutChart/DonutChart.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw DonutChart [v0.0.1]
+// Tremor DonutChart [v0.0.1]
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 "use client"

src/components/DonutChart/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw DonutChart Changelog
+# Tremor DonutChart Changelog
 
 ## 0.0.1
 

src/components/Drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Drawer [v0.0.1]
+// Tremor Drawer [v0.0.1]
 
 import * as React from "react"
 import * as DrawerPrimitives from "@radix-ui/react-dialog"

src/components/Drawer/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Drawer Changelog
+# Tremor Drawer Changelog
 
 ## 0.0.1
 

src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Dropdown Menu [v0.0.1]
+// Tremor Dropdown Menu [v0.0.2]
 
 "use client"
 
@@ -30,7 +30,10 @@ DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup"
 
 const DropdownMenuSubMenuTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitives.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.SubTrigger>
+  Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.SubTrigger>,
+    "asChild"
+  >
 >(({ className, children, ...props }, forwardedRef) => (
   <DropdownMenuPrimitives.SubTrigger
     ref={forwardedRef}
@@ -140,7 +143,10 @@ DropdownMenuContent.displayName = "DropdownMenuContent"
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitives.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.Item> & {
+  Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.Item>,
+    "asChild"
+  > & {
     shortcut?: string
     hint?: string
   }
@@ -184,7 +190,10 @@ DropdownMenuItem.displayName = "DropdownMenuItem"
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitives.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.CheckboxItem> & {
+  Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.CheckboxItem>,
+    "asChild"
+  > & {
     shortcut?: string
     hint?: string
   }
@@ -245,7 +254,10 @@ DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem"
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitives.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.RadioItem> & {
+  Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitives.RadioItem>,
+    "asChild"
+  > & {
     shortcut?: string
     hint?: string
   }

src/components/DropdownMenu/changelog.md

@@ -1,4 +1,10 @@
-# Tremor Raw Dropdown Menu Changelog
+# Tremor Dropdown Menu Changelog
+
+## 0.0.2
+
+### Changes
+
+- Fix: Omit `asChild` in items
 
 ## 0.0.1
 

src/components/DropdownMenu/dropdownmenu.stories.tsx

@@ -15,7 +15,6 @@ import {
   RiSlackLine,
   RiStackLine,
   RiTelegramLine,
-  RiUser2Line,
   RiUserAddLine,
   RiUserSmileLine,
   RiWhatsappLine,
@@ -40,8 +39,6 @@ import {
   DropdownMenuTrigger,
 } from "./DropdownMenu"
 
-RiUser2Line
-
 const meta: Meta<typeof DropdownMenu> = {
   title: "ui/DropdownMenu",
   component: DropdownMenu,

src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Input [v1.0.4]
+// Tremor Input [v1.0.4]
 
 import React from "react"
 import { RiEyeFill, RiEyeOffFill, RiSearchLine } from "@remixicon/react"

src/components/Input/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Input Changelog
+# Tremor Input Changelog
 
 ## 1.0.4
 

src/components/Label/Label.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Label [v0.0.2]
+// Tremor Label [v0.0.2]
 
 import React from "react"
 import * as LabelPrimitives from "@radix-ui/react-label"

src/components/Label/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Label Changelog
+# Tremor Label Changelog
 
 ## 0.0.2
 

src/components/LineChart/LineChart.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw LineChart [v0.3.2]
+// Tremor LineChart [v0.3.2]
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 "use client"

src/components/LineChart/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw LineChart Changelog
+# Tremor LineChart Changelog
 
 ## 0.3.2
 

src/components/Popover/Popover.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Popover [v0.0.3]
+// Tremor Popover [v0.0.3]
 
 import React from "react"
 import * as PopoverPrimitives from "@radix-ui/react-popover"

src/components/Popover/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw Popover Changelog
+# Tremor Popover Changelog
 
 ## 0.0.3
 

src/components/ProgressBar/ProgressBar.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw ProgressBar [v0.0.2]
+// Tremor ProgressBar [v0.0.2]
 
 import React from "react"
 import { tv, type VariantProps } from "tailwind-variants"

src/components/ProgressBar/changelog.md

@@ -1,4 +1,4 @@
-# Tremor Raw ProgressBar Changelog
+# Tremor ProgressBar Changelog
 
 ## 0.0.2