@object-ui/components 0.3.0 → 0.3.1

package/src/renderers/data-display/statistic.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { StatisticSchema } from '@object-ui/types';
 import { cn } from '../../lib/utils';
@@ -6,66 +14,39 @@ import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
 const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
   return (
     <div className={cn(
-        "group relative flex flex-col p-5 rounded-xl transition-all duration-300 overflow-hidden",
-        "bg-slate-950/40 border border-slate-800/60 backdrop-blur-sm",
-        "hover:bg-slate-900/60 hover:border-cyan-500/50 hover:shadow-[0_0_30px_-10px_rgba(6,182,212,0.3)]", 
+        "group relative flex flex-col p-4 sm:p-5 md:p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
         schema.className
     )}>
-      {/* Decorative scanner line */}
-      <div className="absolute top-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]" />
-      <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 pointer-events-none" />
-
       {/* Label */}
       {schema.label && (
         <div className="flex items-center gap-2 mb-2">
-            <div className="w-1 h-3 bg-cyan-500 rounded-full shadow-[0_0_8px_cyan]" />
-            <p className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-cyan-600/80 group-hover:text-cyan-400 transition-colors">
+            <p className="text-sm font-medium text-muted-foreground">
             {schema.label}
             </p>
         </div>
       )}
 
       {/* Value Area */}
-      <div className="flex items-baseline gap-3 my-1 relative z-10">
-        <h3 className={cn(
-            "text-4xl font-black tracking-tight text-white transition-all duration-300",
-            "drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]",
-            "group-hover:scale-110 group-hover:text-cyan-100 group-hover:drop-shadow-[0_0_15px_rgba(6,182,212,0.6)] group-hover:-translate-y-1"
-        )}>
+      <div className="flex items-baseline gap-2">
+        <h3 className="text-2xl font-bold tracking-tight">
           {schema.value}
         </h3>
+      </div>
         
-        {/* Trend Indicator */}
-        {schema.trend && (
-            <div className={cn(
-                "flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border backdrop-blur-md transition-all",
-                schema.trend === 'up' && "text-emerald-400 border-emerald-500/30 bg-emerald-950/30 shadow-[0_0_10px_-4px_rgba(52,211,153,0.5)]",
-                schema.trend === 'down' && "text-rose-400 border-rose-500/30 bg-rose-950/30 shadow-[0_0_10px_-4px_rgba(251,113,133,0.5)]",
-                schema.trend === 'neutral' && "text-amber-400 border-amber-500/30 bg-amber-950/30 shadow-[0_0_10px_-4px_rgba(251,191,36,0.5)]",
-                "group-hover:scale-105"
-            )}>
-                 {schema.trend === 'up' && <TrendingUp className="mr-1 h-3 w-3" />}
-                 {schema.trend === 'down' && <TrendingDown className="mr-1 h-3 w-3" />}
+      {/* Footer / Trend */}
+      {(schema.trend || schema.description) && (
+            <div className="mt-1 flex items-center text-xs text-muted-foreground">
+                 {schema.trend === 'up' && <TrendingUp className="mr-1 h-3 w-3 text-emerald-500" />}
+                 {schema.trend === 'down' && <TrendingDown className="mr-1 h-3 w-3 text-rose-500" />}
                  {schema.trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
-                 {schema.description && <span className="max-w-[100px] truncate">{schema.description}</span>}
+                 <span className={cn(
+                     schema.trend === 'up' && "text-emerald-500 font-medium",
+                     schema.trend === 'down' && "text-rose-500 font-medium",
+                 )}>
+                    {schema.description}
+                 </span>
             </div>
-        )}
-      </div>
-
-      {/* Footer / Description Text if needed below (optional, mostly handled by trend pill now, but keeping separate if text is long) */}
-      {schema.description && !schema.trend && (
-        <p className="text-xs text-slate-500 font-mono mt-1 group-hover:text-slate-400 transition-colors">
-          {schema.description}
-        </p>
       )}
-      
-      {/* Decorative accent corners */}
-      <div className="absolute right-0 bottom-0 w-8 h-8 opacity-20 group-hover:opacity-100 transition-opacity">
-        <svg viewBox="0 0 24 24" fill="none" className="w-full h-full text-cyan-500" stroke="currentColor" strokeWidth="1">
-            <path d="M22 22L12 22L22 12Z" fill="currentColor" fillOpacity="0.2" />
-            <path d="M22 17L22 22L17 22" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </div>
     </div>
   );
 };

package/src/renderers/data-display/table.tsx

@@ -0,0 +1,68 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { useDataScope } from '@object-ui/react';
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from '../../ui/table';
+import { cn } from '../../lib/utils';
+
+export const SimpleTableRenderer = ({ schema, className, ..._props }: any) => {
+  const data = useDataScope(schema.bind);
+  const columns = schema.props?.columns || [];
+
+  // If we have data but it's not an array, show error. 
+  // If data is undefined, we might just be loading or empty.
+  if (data && !Array.isArray(data)) {
+    return <div className="text-red-500 p-2 border border-red-200 bg-red-50 rounded text-sm">Table data must be an array</div>;
+  }
+  
+  const displayData = Array.isArray(data) ? data : [];
+
+  return (
+    <div className={cn("rounded-md border", className)}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((col: any) => (
+              <TableHead key={col.key}>{col.label}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {displayData.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          ) : (
+            displayData.map((row: any, i: number) => (
+              <TableRow key={row.id || i}>
+                {columns.map((col: any) => (
+                  <TableCell key={col.key}>
+                    {row[col.key]}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+ComponentRegistry.register('table', SimpleTableRenderer);

package/src/renderers/data-display/tree-view.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { TreeViewSchema, TreeNode } from '@object-ui/types';
 import { ChevronRight, ChevronDown, Folder, File, FolderOpen, CircuitBoard } from 'lucide-react';
@@ -6,12 +14,10 @@ import { cn } from '../../lib/utils';
 
 const TreeNodeComponent = ({ 
   node, 
-  onNodeClick,
-  isChild = false
+  onNodeClick
 }: { 
   node: TreeNode; 
   onNodeClick?: (node: TreeNode) => void;
-  isChild?: boolean;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const hasChildren = node.children && node.children.length > 0;
@@ -29,68 +35,56 @@ const TreeNodeComponent = ({
 
   return (
     <div className="relative">
-       {/* Connecting line for siblings (visual aid, tricky to do perfectly without depth context, so we focus on the left border of the container) */}
-       
       <div
         className={cn(
-          'group flex items-center py-1.5 px-2 rounded-sm cursor-pointer transition-all duration-200 border border-transparent',
-          'hover:bg-cyan-950/30 hover:border-cyan-500/20 hover:shadow-[inset_0_0_10px_-5px_cyan]',
-          isOpen && hasChildren && 'bg-slate-900/40' // Active parent state
+          'group flex items-center py-1.5 px-2 rounded-sm cursor-pointer transition-colors',
+          'hover:bg-accent hover:text-accent-foreground',
+          isOpen && hasChildren && 'bg-accent/50' 
         )}
         onClick={handleClick}
       >
-        {/* Indentation adjustment triggered by parent's padding/margin, not calculated prop here to allow CSS lines */}
-        
         {hasChildren ? (
           <button
             onClick={handleToggle}
-            className="mr-2 p-0.5 h-5 w-5 flex items-center justify-center rounded-sm hover:bg-cyan-500/20 text-cyan-600 transition-colors"
+            className="mr-2 p-0.5 h-5 w-5 flex items-center justify-center rounded-sm hover:bg-muted text-muted-foreground transition-colors"
           >
             {isOpen ? (
-              <ChevronDown className="h-4 w-4 drop-shadow-[0_0_5px_cyan]" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
               <ChevronRight className="h-4 w-4" />
             )}
           </button>
         ) : (
           <span className="mr-2 w-5 flex justify-center">
-             <div className="w-1 h-1 rounded-full bg-slate-700/50 group-hover:bg-cyan-500/50" />
+             <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
           </span>
         )}
         
         {node.icon === 'folder' || hasChildren ? (
           isOpen ? 
-            <FolderOpen className="h-4 w-4 mr-2 text-cyan-400 drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]" /> : 
-            <Folder className="h-4 w-4 mr-2 text-cyan-600 group-hover:text-cyan-400 transition-colors" />
+            <FolderOpen className="h-4 w-4 mr-2 text-primary" /> : 
+            <Folder className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
         ) : (
-          <File className="h-4 w-4 mr-2 text-slate-500 group-hover:text-cyan-200 transition-colors" />
+          <File className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
         )}
         
         <span className={cn(
-            "text-sm font-mono tracking-wide transition-colors",
-            isOpen ? "text-cyan-100 font-bold shadow-cyan-500/20" : "text-slate-400 group-hover:text-cyan-300"
+            "text-sm transition-colors",
+            isOpen ? "font-medium text-foreground" : "text-muted-foreground group-hover:text-foreground"
         )}>
             {node.label}
         </span>
       </div>
 
-      {/* Children Container with Circuit Line */}
       {hasChildren && isOpen && (
-        <div className="relative ml-[11px] pl-3 border-l border-cyan-800/40 animate-in slide-in-from-left-2 fade-in duration-200">
-           {/* Decorative little bulb at the junction */}
-           <div className="absolute top-0 -left-[1px] -translate-x-1/2 w-1.5 h-1.5 bg-cyan-700/50 rounded-full" />
-           
+        <div className="relative ml-[11px] pl-3 border-l border-border animate-in slide-in-from-left-2 fade-in duration-200">
           {node.children!.map((child) => (
             <TreeNodeComponent
               key={child.id}
               node={child}
               onNodeClick={onNodeClick}
-              isChild={true}
             />
           ))}
-          
-           {/* Decorative end cap */}
-           <div className="absolute bottom-0 -left-[1px] -translate-x-1/2 w-1 h-1 bg-cyan-800/50 rounded-full" />
         </div>
       )}
     </div>
@@ -107,23 +101,18 @@ ComponentRegistry.register('tree-view',
 
     return (
       <div className={cn(
-          'relative border border-border/60 rounded-lg p-3 bg-card/40 backdrop-blur-md overflow-hidden',
-          'shadow-lg shadow-primary/5',
+          'relative border rounded-lg p-3 bg-card text-card-foreground',
           className
         )} 
         {...props}
       >
-        {/* Background Grid */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border)/0.1)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border)/0.1)_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
-
         {schema.title && (
-          <div className="flex items-center gap-2 mb-3 pb-2 border-b border-primary/20 relative z-10">
-            <CircuitBoard className="w-4 h-4 text-primary" />
-            <h3 className="text-xs font-bold font-mono uppercase tracking-widest text-primary">{schema.title}</h3>
+          <div className="flex items-center gap-2 mb-3 pb-2 border-b">
+            <h3 className="text-sm font-semibold">{schema.title}</h3>
           </div>
         )}
-        <div className="space-y-1 relative z-10">
-          {schema.nodes?.map((node: TreeNode) => (
+        <div className="space-y-1">
+          {(schema.nodes || schema.data)?.map((node: TreeNode) => (
             <TreeNodeComponent
               key={node.id}
               node={node}

package/src/renderers/disclosure/accordion.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { AccordionSchema } from '@object-ui/types';
 import { 

package/src/renderers/disclosure/collapsible.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { CollapsibleSchema } from '@object-ui/types';
 import { 

package/src/renderers/disclosure/index.ts

@@ -1,2 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import './accordion';
 import './collapsible';
+import './toggle-group';

package/src/renderers/disclosure/toggle-group.tsx

@@ -0,0 +1,77 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { ToggleGroupSchema } from '@object-ui/types';
+import { ToggleGroup, ToggleGroupItem } from '../../ui/toggle-group';
+
+ComponentRegistry.register('toggle-group', 
+  ({ schema, ...props }: { schema: ToggleGroupSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...toggleGroupProps
+    } = props;
+    
+    return (
+      <ToggleGroup 
+        type={(schema.selectionType || 'single') as any}
+        variant={schema.variant}
+        size={schema.size}
+        value={schema.value as any}
+        className={schema.className} 
+        {...toggleGroupProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.items?.map((item, idx) => (
+          <ToggleGroupItem key={idx} value={item.value} aria-label={item.label}>
+            {item.label}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    );
+  },
+  {
+    label: 'Toggle Group',
+    inputs: [
+      { 
+        name: 'selectionType', 
+        type: 'enum', 
+        enum: ['single', 'multiple'], 
+        defaultValue: 'single',
+        label: 'Selection Type'
+      },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'outline'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { 
+        name: 'size', 
+        type: 'enum', 
+        enum: ['default', 'sm', 'lg'], 
+        defaultValue: 'default',
+        label: 'Size'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      selectionType: 'single',
+      variant: 'default',
+      size: 'default',
+      items: [
+        { value: 'bold', label: 'Bold' },
+        { value: 'italic', label: 'Italic' },
+        { value: 'underline', label: 'Underline' }
+      ]
+    }
+  }
+);

package/src/renderers/feedback/empty.tsx

@@ -0,0 +1,48 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { EmptySchema } from '@object-ui/types';
+import { InboxIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('empty', 
+  ({ schema, ...props }: { schema: EmptySchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...emptyProps
+    } = props;
+    
+    return (
+      <div 
+        className={cn('flex flex-col items-center justify-center p-8 text-center', schema.className)} 
+        {...emptyProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        <InboxIcon className="h-12 w-12 text-muted-foreground mb-4" />
+        <h3 className="text-lg font-semibold">{schema.title || 'No data'}</h3>
+        {schema.description && (
+          <p className="text-sm text-muted-foreground mt-2">{schema.description}</p>
+        )}
+      </div>
+    );
+  },
+  {
+    label: 'Empty',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title', defaultValue: 'No data' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      title: 'No data'
+    }
+  }
+);

package/src/renderers/feedback/index.ts

@@ -1,4 +1,16 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import './progress';
 import './skeleton';
 import './toaster';
 import './loading';
+import './toast';
+import './spinner';
+import './empty';
+import './sonner';

package/src/renderers/feedback/loading.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { LoadingSchema } from '@object-ui/types';
 import { Spinner } from '../../ui';

package/src/renderers/feedback/progress.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { ProgressSchema } from '@object-ui/types';
 import { Progress } from '../../ui';

package/src/renderers/feedback/skeleton.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { SkeletonSchema } from '@object-ui/types';
 import { Skeleton } from '../../ui';

package/src/renderers/feedback/sonner.tsx

@@ -0,0 +1,55 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { SonnerSchema } from '@object-ui/types';
+import { toast } from 'sonner';
+import { Button } from '../../ui';
+
+ComponentRegistry.register('sonner', 
+  ({ schema, ...props }: { schema: SonnerSchema; [key: string]: any }) => {
+    const showToast = () => {
+      const toastFn = schema.variant === 'success' ? toast.success :
+                      schema.variant === 'error' ? toast.error :
+                      schema.variant === 'warning' ? toast.warning :
+                      schema.variant === 'info' ? toast.info :
+                      toast;
+      
+      toastFn(schema.message || schema.title || 'Notification', {
+        description: schema.description,
+      });
+    };
+    
+    return (
+      <Button onClick={showToast} variant={schema.buttonVariant} className={schema.className} {...props}>
+        {schema.buttonLabel || 'Show Toast'}
+      </Button>
+    );
+  },
+  {
+    label: 'Sonner Toast',
+    inputs: [
+      { name: 'message', type: 'string', label: 'Message' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'success', 'error', 'warning', 'info'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { name: 'buttonLabel', type: 'string', label: 'Button Label' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      message: 'Notification',
+      buttonLabel: 'Show Toast',
+      variant: 'default'
+    }
+  }
+);

package/src/renderers/feedback/spinner.tsx

@@ -0,0 +1,54 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { SpinnerSchema } from '@object-ui/types';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('spinner', 
+  ({ schema, ...props }: { schema: SpinnerSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...spinnerProps
+    } = props;
+    
+    const sizeClasses = {
+      sm: 'h-4 w-4',
+      md: 'h-6 w-6',
+      lg: 'h-8 w-8',
+      xl: 'h-12 w-12'
+    };
+    
+    return (
+      <Loader2 
+        className={cn('animate-spin', sizeClasses[schema.size || 'md'], schema.className)} 
+        {...spinnerProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      />
+    );
+  },
+  {
+    label: 'Spinner',
+    inputs: [
+      { 
+        name: 'size', 
+        type: 'enum', 
+        enum: ['sm', 'md', 'lg', 'xl'], 
+        defaultValue: 'md',
+        label: 'Size'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      size: 'md'
+    }
+  }
+);