fix: tracker, order utils, table types

README.md

@@ -21,7 +21,7 @@
 
 <br />
 
-![Tremor Banner](public/images/tremor_raw_banner_11.png)
+![Tremor Banner](public/images/tremor-raw-banner.png)
 
 <br />
 

src/components/BarList/BarList.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw BarList [v0.0.0]
+// Tremor Raw BarList [v0.0.1]
 
 import React from "react"
 
@@ -73,7 +73,7 @@ function BarListInner<T>(
               focusRing,
               onValueChange
                 ? [
-                    "!-m-px cursor-pointer",
+                    "!-m-0 cursor-pointer",
                     // hover
                     "hover:bg-gray-50 hover:dark:bg-gray-900",
                   ]
@@ -98,7 +98,7 @@ function BarListInner<T>(
               )}
               style={{ width: `${widths[index]}%` }}
             >
-              <div className={cx("absolute left-2 flex max-w-full")}>
+              <div className={cx("absolute left-2 flex pr-2 max-w-full")}>
                 {item.href ? (
                   <a
                     href={item.href}

src/components/BarList/barlist.stories.tsx

@@ -102,9 +102,15 @@ export const WithOnValueChangeAndHref: Story = {
   },
 }
 
-export const DataSame: Story = {
+export const DataSameWithOnValueChange: Story = {
   args: {
     onValueChange: () => {},
     data: dataSame,
   },
 }
+
+export const DataSame: Story = {
+  args: {
+    data: dataSame,
+  },
+}

src/components/BarList/changelog.md

@@ -1,5 +1,8 @@
 # Tremor Raw BarList Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Improve spacing when bar is a button.
+* Improve padding for long labels.

src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Table [v0.0.0]
+// Tremor Raw Table [v0.0.1]
 
 import React from "react"
 
@@ -27,7 +27,7 @@ TableRoot.displayName = "TableRoot"
 
 const Table = React.forwardRef<
   HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
+  React.TableHTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, forwardedRef) => (
   <table
     ref={forwardedRef}
@@ -55,7 +55,7 @@ TableHead.displayName = "TableHead"
 
 const TableHeaderCell = React.forwardRef<
   HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+  React.ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, forwardedRef) => (
   <th
     ref={forwardedRef}
@@ -112,7 +112,7 @@ TableRow.displayName = "TableRow"
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
-  React.HTMLAttributes<HTMLTableCellElement>
+  React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, forwardedRef) => (
   <td
     ref={forwardedRef}

src/components/Table/changelog.md

@@ -1,5 +1,7 @@
 # Tremor Raw Table Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Improved types of table elements: Table, TableHeaderCell, TableCell

src/components/Toast/Toast.tsx

@@ -116,7 +116,7 @@ const Toast = React.forwardRef<
           // background color
           " bg-white dark:bg-[#090E1A]",
           // border color
-          "border-gray-200 dark:border-gray-900",
+          "border-gray-200 dark:border-gray-800",
           // swipe
           "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
           // transition
@@ -132,7 +132,7 @@ const Toast = React.forwardRef<
             "flex flex-1 items-start gap-3 p-4",
             // border
             !disableDismiss || action
-              ? "border-r border-gray-200 dark:border-gray-900"
+              ? "border-r border-gray-200 dark:border-gray-800"
               : "",
           )}
         >
@@ -176,7 +176,7 @@ const Toast = React.forwardRef<
               >
                 {action.label}
               </ToastPrimitives.Action>
-              <div className="h-px w-full bg-gray-200 dark:bg-gray-900" />
+              <div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
             </>
           )}
           {!disableDismiss && (

src/components/Toast/changelog.md

@@ -1,5 +1,7 @@
 # Tremor Raw Toast Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Improved dark mode visbility

src/components/Tracker/Tracker.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Tracker [v0.0.0]
+// Tremor Raw Tracker [v0.0.1]
 
 import React from "react"
 import * as HoverCardPrimitives from "@radix-ui/react-hover-card"
@@ -18,9 +18,15 @@ const Block = ({
 }: TrackerBlockProps & {
   defaultBackgroundColor?: string
 }) => {
+  const [open, setOpen] = React.useState(false)
   return (
-    <HoverCardPrimitives.Root openDelay={0} closeDelay={0}>
-      <HoverCardPrimitives.Trigger asChild>
+    <HoverCardPrimitives.Root
+      open={open}
+      onOpenChange={setOpen}
+      openDelay={0}
+      closeDelay={0}
+    >
+      <HoverCardPrimitives.Trigger onClick={() => setOpen(true)} asChild>
         <div
           className={cx(
             "h-full w-full rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]",

src/components/Tracker/changelog.md

@@ -1,5 +1,7 @@
 # Tremor Raw Tracker Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Added onClick event to HoverCard to make tracker appear on touch devices. 

src/utils/changelog.md

@@ -1,5 +1,7 @@
 # Tremor Raw utils Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Updated sort order focusInput, focusRing, hasErrorInput

src/utils/focusInput.ts

@@ -1,4 +1,10 @@
-// Tremor Raw focusInput [v0.0.0]
+// Tremor Raw focusInput [v0.0.1]
 
-export const focusInput =
-  "focus:ring-2 focus:ring-blue-200 focus:border-blue-500 focus:dark:ring-blue-700/30 focus:dark:border-blue-700"
+export const focusInput = [
+  // base
+  "focus:ring-2",
+  // ring color
+  "focus:ring-blue-200 focus:dark:ring-blue-700/30",
+  // border color
+  "focus:border-blue-500 focus:dark:border-blue-700",
+]

src/utils/focusRing.ts

@@ -1,10 +1,8 @@
-// Tremor Raw focusRing [v0.0.0]
+// Tremor Raw focusRing [v0.0.1]
 
 export const focusRing = [
   // base
-  "outline outline-blue-500 outline-offset-2 outline-0",
-  // dark
-  "dark:outline-blue-500",
-  // focus-visible
-  "focus-visible:outline-2",
+  "outline outline-offset-2 outline-0 focus-visible:outline-2",
+  // outline color
+  "outline-blue-500 dark:outline-blue-500",
 ]

src/utils/hasErrorInput.ts

@@ -1,4 +1,10 @@
-// Tremor Raw hasErrorInput [v0.0.0]
+// Tremor Raw hasErrorInput [v0.0.1]
 
-export const hasErrorInput =
-  "border-red-500 ring-2 ring-red-200 dark:border-red-700 dark:ring-red-700/30"
+export const hasErrorInput = [
+    // base
+    "ring-2",
+    // border color
+    "border-red-500 dark:border-red-700",
+    // ring color
+    "ring-red-200 dark:ring-red-700/30",
+]