@gram-ai/elements 1.27.4 → 1.27.6

package/src/components/ui/charts.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
   AreaChart,
   BarChart,
@@ -7,79 +7,79 @@ import {
   DonutChart,
   RadarChart,
   ScatterChart,
-} from '@/plugins/chart/ui'
+} from "@/plugins/chart/ui";
 
 // Wrapper component to render different chart types
 const ChartWrapper = ({ children }: { children: React.ReactNode }) => (
   <div className="w-full">{children}</div>
-)
+);
 
 const meta: Meta = {
-  title: 'Components/Charts',
+  title: "Components/Charts",
   parameters: {
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
   decorators: [
     (Story) => (
-      <div className="bg-background text-foreground min-h-screen p-6">
+      <div className="min-h-screen bg-background p-6 text-foreground">
         <div className="max-w-2xl">
           <Story />
         </div>
       </div>
     ),
   ],
-}
+};
 
-export default meta
+export default meta;
 
 // Sample data for time series charts
 const timeSeriesData = [
-  { label: 'Jan', value: 4000, revenue: 2400, profit: 1200 },
-  { label: 'Feb', value: 3000, revenue: 1398, profit: 900 },
-  { label: 'Mar', value: 2000, revenue: 9800, profit: 2100 },
-  { label: 'Apr', value: 2780, revenue: 3908, profit: 1500 },
-  { label: 'May', value: 1890, revenue: 4800, profit: 1800 },
-  { label: 'Jun', value: 2390, revenue: 3800, profit: 1400 },
-  { label: 'Jul', value: 3490, revenue: 4300, profit: 2000 },
-]
+  { label: "Jan", value: 4000, revenue: 2400, profit: 1200 },
+  { label: "Feb", value: 3000, revenue: 1398, profit: 900 },
+  { label: "Mar", value: 2000, revenue: 9800, profit: 2100 },
+  { label: "Apr", value: 2780, revenue: 3908, profit: 1500 },
+  { label: "May", value: 1890, revenue: 4800, profit: 1800 },
+  { label: "Jun", value: 2390, revenue: 3800, profit: 1400 },
+  { label: "Jul", value: 3490, revenue: 4300, profit: 2000 },
+];
 
 // Sample data for category charts
 const categoryData = [
-  { label: 'Electronics', value: 4500 },
-  { label: 'Clothing', value: 3200 },
-  { label: 'Home & Garden', value: 2800 },
-  { label: 'Sports', value: 2100 },
-  { label: 'Books', value: 1500 },
-]
+  { label: "Electronics", value: 4500 },
+  { label: "Clothing", value: 3200 },
+  { label: "Home & Garden", value: 2800 },
+  { label: "Sports", value: 2100 },
+  { label: "Books", value: 1500 },
+];
 
 // Sample data for pie/donut charts
 const pieData = [
-  { label: 'Desktop', value: 45 },
-  { label: 'Mobile', value: 35 },
-  { label: 'Tablet', value: 15 },
-  { label: 'Other', value: 5 },
-]
+  { label: "Desktop", value: 45 },
+  { label: "Mobile", value: 35 },
+  { label: "Tablet", value: 15 },
+  { label: "Other", value: 5 },
+];
 
 // Sample data for radar chart
 const radarData = [
-  { label: 'Speed', value: 85 },
-  { label: 'Reliability', value: 90 },
-  { label: 'Comfort', value: 78 },
-  { label: 'Safety', value: 95 },
-  { label: 'Efficiency', value: 82 },
-]
+  { label: "Speed", value: 85 },
+  { label: "Reliability", value: 90 },
+  { label: "Comfort", value: 78 },
+  { label: "Safety", value: 95 },
+  { label: "Efficiency", value: 82 },
+];
 
 // Sample data for scatter chart
 const scatterData = [
-  { x: 10, y: 30, label: 'A' },
-  { x: 40, y: 50, label: 'B' },
-  { x: 20, y: 80, label: 'C' },
-  { x: 60, y: 40, label: 'D' },
-  { x: 80, y: 90, label: 'E' },
-  { x: 30, y: 60, label: 'F' },
-  { x: 50, y: 20, label: 'G' },
-  { x: 70, y: 70, label: 'H' },
-]
+  { x: 10, y: 30, label: "A" },
+  { x: 40, y: 50, label: "B" },
+  { x: 20, y: 80, label: "C" },
+  { x: 60, y: 40, label: "D" },
+  { x: 80, y: 90, label: "E" },
+  { x: 30, y: 60, label: "F" },
+  { x: 50, y: 20, label: "G" },
+  { x: 70, y: 70, label: "H" },
+];
 
 /**
  * Area chart showing trends over time with filled areas.
@@ -90,13 +90,13 @@ export const Area: StoryObj = {
       <AreaChart
         title="Revenue Over Time"
         data={timeSeriesData}
-        series={['value', 'revenue']}
+        series={["value", "revenue"]}
         showGrid
         showLegend
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Stacked area chart comparing multiple data series.
@@ -107,14 +107,14 @@ export const AreaStacked: StoryObj = {
       <AreaChart
         title="Stacked Revenue Breakdown"
         data={timeSeriesData}
-        series={['revenue', 'profit']}
+        series={["revenue", "profit"]}
         stacked
         showGrid
         showLegend
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Vertical bar chart for comparing categories.
@@ -130,7 +130,7 @@ export const Bar: StoryObj = {
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Horizontal bar chart layout.
@@ -146,7 +146,7 @@ export const BarHorizontal: StoryObj = {
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Line chart for tracking trends over time.
@@ -157,14 +157,14 @@ export const Line: StoryObj = {
       <LineChart
         title="Monthly Performance"
         data={timeSeriesData}
-        series={['value', 'revenue']}
+        series={["value", "revenue"]}
         showGrid
         showLegend
         showDots
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Curved line chart with smooth interpolation.
@@ -175,14 +175,14 @@ export const LineCurved: StoryObj = {
       <LineChart
         title="Smooth Trend Line"
         data={timeSeriesData}
-        series={['value']}
+        series={["value"]}
         showGrid
         curved
         showDots
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Pie chart showing proportional data.
@@ -198,7 +198,7 @@ export const Pie: StoryObj = {
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Donut chart with center label.
@@ -215,7 +215,7 @@ export const Donut: StoryObj = {
       />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Radar chart for multi-dimensional comparison.
@@ -226,7 +226,7 @@ export const Radar: StoryObj = {
       <RadarChart title="Product Metrics" data={radarData} showLegend />
     </ChartWrapper>
   ),
-}
+};
 
 /**
  * Scatter chart for showing correlation between variables.
@@ -243,4 +243,4 @@ export const Scatter: StoryObj = {
       />
     </ChartWrapper>
   ),
-}
+};

package/src/components/ui/collapsible.tsx

@@ -1,9 +1,9 @@
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 function Collapsible({
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 function CollapsibleTrigger({
@@ -14,7 +14,7 @@ function CollapsibleTrigger({
       data-slot="collapsible-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function CollapsibleContent({
@@ -25,7 +25,7 @@ function CollapsibleContent({
       data-slot="collapsible-content"
       {...props}
     />
-  )
+  );
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/ui/dialog.tsx

@@ -1,40 +1,40 @@
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from 'lucide-react'
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
-import { usePortalContainer } from '@/hooks/usePortalContainer'
+import { cn } from "@/lib/utils";
+import { usePortalContainer } from "@/hooks/usePortalContainer";
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   container,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  const portalContainer = usePortalContainer()
+  const portalContainer = usePortalContainer();
   return (
     <DialogPrimitive.Portal
       data-slot="dialog-portal"
       container={container ?? portalContainer}
       {...props}
     />
-  )
+  );
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -45,12 +45,12 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -59,7 +59,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -67,8 +67,8 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          className
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className,
         )}
         {...props}
       >
@@ -76,7 +76,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -84,30 +84,30 @@ function DialogContent({
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        className
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogTitle({
@@ -117,10 +117,10 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -130,10 +130,10 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -147,4 +147,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};