mib

irsyadadl · Aug 20, 2024 · af13068 · af13068
1 parent 1efcc6c
commit af13068
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 44 deletions.
diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react';
+import React from 'react'
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field-demo": {

diff --git a/components/ui/field.tsx b/components/ui/field.tsx
@@ -1,24 +1,16 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  FieldError as FieldErrorPrimitive,
-  type FieldErrorProps,
-  Group,
-  type GroupProps,
-  Input as InputPrimitive,
-  type InputProps,
-  Label as LabelPrimitive,
-  type LabelProps,
-  Text,
-  type TextFieldProps as TextFieldPrimitiveProps,
-  type TextProps,
-  type ValidationResult
-} from "react-aria-components"
-import { tv } from "tailwind-variants"
-
-import { cr, ctr } from "./primitive"
+'use client';
+
+import * as React from 'react';
+
+
+
+import { FieldError as FieldErrorPrimitive, type FieldErrorProps, Group, type GroupProps, Input as InputPrimitive, type InputProps, Label as LabelPrimitive, type LabelProps, Text, type TextFieldProps as TextFieldPrimitiveProps, type TextProps, type ValidationResult } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+
+
+import { cr, ctr } from './primitive';
+
 
 // primitive styles
 

diff --git a/components/ui/meter.tsx b/components/ui/meter.tsx
@@ -5,7 +5,7 @@ import type { MeterProps as MeterPrimitiveProps } from "react-aria-components"
 import { Meter as MeterPrimitive } from "react-aria-components"
 
 import { Label } from "./field"
-import { cn, ctr } from "./primitive"
+import { ctr } from "./primitive"
 
 export interface MeterProps extends MeterPrimitiveProps {
   label?: string
@@ -34,21 +34,21 @@ export function Meter({
               {percentage >= 90 ? (
                 <IconTriangleInfo
                   aria-label="Alert"
-                  className="inline-block size-4 animate-in slide-in-from-left align-text-bottom fill-danger/20 mr-1 text-danger"
+                  className="inline-block size-4 animate-in slide-in-from-left align-text-bottom fill-danger/20 text-danger"
                 />
               ) : percentage >= 80 ? (
                 <IconCircleInfo
                   aria-label="Alert"
-                  className="inline-block size-4 animate-in slide-in-from-left align-text-bottom fill-warning/20 mr-1 text-warning"
+                  className="inline-block size-4 animate-in slide-in-from-right align-text-bottom fill-warning/20 text-warning"
                 />
               ) : null}
-              <span className="w-10 bg-red-500 inline-block">{valueText}</span>
+              <span className="inline-flex ml-2 w-8 justify-end">{valueText}</span>
             </span>
           </div>
-          <div className="relative h-2 w-64 overflow-hidden rounded-full bg-secondary outline outline-1 -outline-offset-1 outline-transparent">
+          <div className="relative h-2 min-w-64 w-full overflow-hidden rounded-full bg-secondary outline outline-1 -outline-offset-1 outline-transparent">
             <div
-              className={cn("absolute left-0 top-0 mr-1 h-full rounded-full", getColor(percentage))}
-              style={{ width: percentage + "%" }}
+              className="absolute left-0 top-0 mr-1 h-full rounded-full"
+              style={{ width: percentage + "%", backgroundColor: getColor(percentage) }}
             />
           </div>
         </>

diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
@@ -1,8 +1,5 @@
 "use client"
 
-import { useId } from "react"
-
-import { LayoutGroup, motion } from "framer-motion"
 import {
   Tab as TabPrimitive,
   TabList,
@@ -53,16 +50,13 @@ const tabListStyles = tv({
 })
 
 const List = <T extends object>(props: TabListProps<T>) => {
-  const id = useId()
   return (
-    <LayoutGroup id={id}>
-      <TabList
-        {...props}
-        className={cr(props.className, (className, renderProps) =>
-          tabListStyles({ ...renderProps, className })
-        )}
-      />
-    </LayoutGroup>
+    <TabList
+      {...props}
+      className={cr(props.className, (className, renderProps) =>
+        tabListStyles({ ...renderProps, className })
+      )}
+    />
   )
 }
 
@@ -101,16 +95,14 @@ const Tab = ({ children, ...props }: TabProps) => {
         <>
           {children}
           {isSelected && (
-            <motion.span
+            <span
               className={cn(
                 "absolute rounded bg-fg",
                 // horizontal
                 "group-orientation-horizontal:inset-x-0 group-orientation-horizontal:-bottom-px group-orientation-horizontal:h-0.5 group-orientation-horizontal:w-full",
                 // vertical
                 "group-orientation-vertical:left-0 group-orientation-vertical:h-[calc(100%-10%)] group-orientation-vertical:w-0.5 group-orientation-vertical:transform"
               )}
-              layoutId="current-selected"
-              transition={{ type: "spring", stiffness: 500, damping: 40 }}
             />
           )}
         </>