fix: Tracker mobile (#2)

* update tracker onclick

* update order utils

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",
+]