From 90364189b865514cc471786d2f91c270517e98fc Mon Sep 17 00:00:00 2001 From: Dan Rukas Date: Fri, 2 Aug 2024 12:35:07 -0400 Subject: [PATCH] feat(ui): Created design and added core components for ui-next (#4324) --- platform/app/cypress.config.ts | 8 +- .../integration/ImageConsistency.spec.js | 2 +- platform/ui-next/package.json | 11 +- platform/ui-next/src/_pages/playground.tsx | 149 ++++++++++- .../BackgroundColorSelect.tsx | 38 +++ .../BackgroundColorSelect/index.tsx | 2 + .../ui-next/src/components/Button/Button.tsx | 6 +- .../src/components/Checkbox/Checkbox.tsx | 26 ++ .../ui-next/src/components/Checkbox/index.tsx | 3 + .../ui-next/src/components/Input/Input.tsx | 24 ++ .../ui-next/src/components/Input/index.tsx | 3 + .../ui-next/src/components/Label/Label.tsx | 23 ++ .../ui-next/src/components/Label/index.tsx | 3 + .../src/components/ScrollArea/ScrollArea.tsx | 44 ++++ .../src/components/ScrollArea/index.tsx | 3 + .../ui-next/src/components/Select/Select.tsx | 150 +++++++++++ .../ui-next/src/components/Select/index.tsx | 25 ++ .../src/components/Separator/Separator.tsx | 24 ++ .../src/components/Separator/index.tsx | 3 + .../ui-next/src/components/Slider/Slider.tsx | 23 ++ .../ui-next/src/components/Slider/index.tsx | 3 + .../ui-next/src/components/Switch/Switch.tsx | 27 ++ .../ui-next/src/components/Switch/index.tsx | 3 + platform/ui-next/src/components/Tabs/Tabs.tsx | 53 ++++ .../ui-next/src/components/Tabs/index.tsx | 3 + .../ui-next/src/components/Toggle/Toggle.tsx | 42 ++++ .../ui-next/src/components/Toggle/index.tsx | 3 + platform/ui-next/src/components/index.ts | 36 ++- platform/ui-next/src/index.ts | 1 + platform/ui-next/src/tailwind.css | 39 ++- platform/ui-next/tailwind.config.js | 25 ++ yarn.lock | 233 ++++++++++++++++-- 32 files changed, 1004 insertions(+), 34 deletions(-) create mode 100644 platform/ui-next/src/components/BackgroundColorSelect/BackgroundColorSelect.tsx create mode 100644 platform/ui-next/src/components/BackgroundColorSelect/index.tsx create mode 100644 platform/ui-next/src/components/Checkbox/Checkbox.tsx create mode 100644 platform/ui-next/src/components/Checkbox/index.tsx create mode 100644 platform/ui-next/src/components/Input/Input.tsx create mode 100644 platform/ui-next/src/components/Input/index.tsx create mode 100644 platform/ui-next/src/components/Label/Label.tsx create mode 100644 platform/ui-next/src/components/Label/index.tsx create mode 100644 platform/ui-next/src/components/ScrollArea/ScrollArea.tsx create mode 100644 platform/ui-next/src/components/ScrollArea/index.tsx create mode 100644 platform/ui-next/src/components/Select/Select.tsx create mode 100644 platform/ui-next/src/components/Select/index.tsx create mode 100644 platform/ui-next/src/components/Separator/Separator.tsx create mode 100644 platform/ui-next/src/components/Separator/index.tsx create mode 100644 platform/ui-next/src/components/Slider/Slider.tsx create mode 100644 platform/ui-next/src/components/Slider/index.tsx create mode 100644 platform/ui-next/src/components/Switch/Switch.tsx create mode 100644 platform/ui-next/src/components/Switch/index.tsx create mode 100644 platform/ui-next/src/components/Tabs/Tabs.tsx create mode 100644 platform/ui-next/src/components/Tabs/index.tsx create mode 100644 platform/ui-next/src/components/Toggle/Toggle.tsx create mode 100644 platform/ui-next/src/components/Toggle/index.tsx diff --git a/platform/app/cypress.config.ts b/platform/app/cypress.config.ts index 648c42889..debb68a6f 100644 --- a/platform/app/cypress.config.ts +++ b/platform/app/cypress.config.ts @@ -25,10 +25,10 @@ export default defineConfig({ baseUrl: 'http://localhost:3000', waitForAnimations: true, chromeWebSecurity: false, - defaultCommandTimeout: 10000, - requestTimeout: 10000, - responseTimeout: 10000, - pageLoadTimeout: 10000, + defaultCommandTimeout: 30000, + requestTimeout: 30000, + responseTimeout: 30000, + pageLoadTimeout: 30000, specPattern: 'cypress/integration/**/*.spec.[jt]s', projectId: '4oe38f', video: true, diff --git a/platform/app/cypress/integration/ImageConsistency.spec.js b/platform/app/cypress/integration/ImageConsistency.spec.js index 52c27b5bf..37a03e547 100644 --- a/platform/app/cypress/integration/ImageConsistency.spec.js +++ b/platform/app/cypress/integration/ImageConsistency.spec.js @@ -22,7 +22,7 @@ const testPixel = (dx, dy, expectedPixel) => { const { viewport } = cornerstone.getEnabledElements()[0]; const imageData = viewport.getImageData(); // cy.log("imageData", imageData); - const origin = viewport.worldToCanvas(imageData.origin); + const origin = viewport.worldToCanvas(imageData?.origin); const orX = origin[0] * devicePixelRatio; const orY = origin[1] * devicePixelRatio; const x = Math.round(orX + dx); diff --git a/platform/ui-next/package.json b/platform/ui-next/package.json index 8830b4eb1..d1e17611d 100644 --- a/platform/ui-next/package.json +++ b/platform/ui-next/package.json @@ -27,10 +27,19 @@ ".": "./src/index.ts" }, "dependencies": { - "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-scroll-area": "^1.1.0", + "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slider": "^1.2.0", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-switch": "^1.1.0", + "@radix-ui/react-tabs": "^1.1.0", + "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", "class-variance-authority": "^0.7.0", "clsx": "*", diff --git a/platform/ui-next/src/_pages/playground.tsx b/platform/ui-next/src/_pages/playground.tsx index 25d56efbd..2c73a4321 100644 --- a/platform/ui-next/src/_pages/playground.tsx +++ b/platform/ui-next/src/_pages/playground.tsx @@ -3,6 +3,29 @@ import { createRoot } from 'react-dom/client'; import '../tailwind.css'; import { Button } from '../components/Button'; +import { Input } from '../components/Input'; +import { Label } from '../components/Label'; +import { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +} from '../components/Select'; +import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/Tabs'; +import { Separator } from '../components/Separator'; +import { Switch } from '../components/Switch'; +import { Checkbox } from '../components/Checkbox'; +import { Toggle, toggleVariants } from '../components/Toggle'; +import { Slider } from '../components/Slider'; +import { ScrollArea, ScrollBar } from '../components/ScrollArea'; + +import { BackgroundColorSelect } from '../components/BackgroundColorSelect'; // import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../components/Tooltip'; // import type { Metadata } from 'next'; @@ -33,10 +56,10 @@ import { Button } from '../components/Button'; export default function Playground() { return ( -
- {/* */} +
+ -

Button default

+

Button default

-

Button small

+

Button small

-

Button large

+

Button large

-

Color swatches

+

Input

+
+
+
+
+ +
+
+ +
+
+
+
+ +

Color swatches

@@ -176,6 +213,106 @@ export default function Playground() {
+ +

Typography

+
+
Standard text size (text-base) 14px
+
Small text size (text-sm) 13px
+
Extra small text size (text-xs) 12px
+
+ +

Typography large

+
+
Large text size (text-lg) 16px
+
Small text size (text-xl) 18px
+
Extra small text size (text-2xl) 20px
+
+ +

Tabs

+
+
+ + + Circle + + Sphere + + Square + + +
+
+ +

Tabs

+
+
+ +
+
+ +

Switch

+
+
+ +
+
+ +

Checkbox

+
+
+
+ +
+ +
+
+
+
+ +

Toggle

+
+
+ Hello +
+
+ +

Slider

+
+
+
+ +
+
+
+ +

Scroll Area

+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + +
+
); } diff --git a/platform/ui-next/src/components/BackgroundColorSelect/BackgroundColorSelect.tsx b/platform/ui-next/src/components/BackgroundColorSelect/BackgroundColorSelect.tsx new file mode 100644 index 000000000..eeb3e94ac --- /dev/null +++ b/platform/ui-next/src/components/BackgroundColorSelect/BackgroundColorSelect.tsx @@ -0,0 +1,38 @@ +'use client'; + +import * as React from 'react'; +import { useState, useEffect } from 'react'; +import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select'; + +const BackgroundColorSelect: React.FC = () => { + const [selectedColor, setSelectedColor] = useState('#050615'); + + useEffect(() => { + const rows = document.querySelectorAll('.row') as NodeListOf; + rows.forEach(row => { + row.style.backgroundColor = selectedColor; + }); + }, [selectedColor]); + + const handleColorChange = (value: string) => { + setSelectedColor(value); + }; + + return ( +
+ +
+ ); +}; + +export default BackgroundColorSelect; diff --git a/platform/ui-next/src/components/BackgroundColorSelect/index.tsx b/platform/ui-next/src/components/BackgroundColorSelect/index.tsx new file mode 100644 index 000000000..a7cebade8 --- /dev/null +++ b/platform/ui-next/src/components/BackgroundColorSelect/index.tsx @@ -0,0 +1,2 @@ +// src/components/BackgroundColorSelect/index.ts +export { default as BackgroundColorSelect } from './BackgroundColorSelect'; diff --git a/platform/ui-next/src/components/Button/Button.tsx b/platform/ui-next/src/components/Button/Button.tsx index eff08ac54..e7668874a 100644 --- a/platform/ui-next/src/components/Button/Button.tsx +++ b/platform/ui-next/src/components/Button/Button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '../../lib/utils'; const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium leading-tight transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', + 'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-normal leading-tight transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { @@ -14,8 +14,8 @@ const buttonVariants = cva( outline: 'border border-input bg-background hover:bg-primary/25 hover:text-accent-foreground', secondary: 'bg-primary/40 text-secondary-foreground hover:bg-primary/60', - ghost: 'text-primary hover:bg-primary/25', - link: 'text-primary underline-offset-4 hover:underline', + ghost: 'font-normal text-primary hover:bg-primary/25', + link: 'font-normal text-primary underline-offset-4 hover:underline', }, size: { default: 'h-7 px-2 py-2', diff --git a/platform/ui-next/src/components/Checkbox/Checkbox.tsx b/platform/ui-next/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 000000000..fd8f299a4 --- /dev/null +++ b/platform/ui-next/src/components/Checkbox/Checkbox.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { CheckIcon } from '@radix-ui/react-icons'; + +import { cn } from '../../lib/utils'; + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)); +Checkbox.displayName = CheckboxPrimitive.Root.displayName; + +export { Checkbox }; diff --git a/platform/ui-next/src/components/Checkbox/index.tsx b/platform/ui-next/src/components/Checkbox/index.tsx new file mode 100644 index 000000000..f4050fc13 --- /dev/null +++ b/platform/ui-next/src/components/Checkbox/index.tsx @@ -0,0 +1,3 @@ +import { Checkbox } from './Checkbox'; + +export { Checkbox }; diff --git a/platform/ui-next/src/components/Input/Input.tsx b/platform/ui-next/src/components/Input/Input.tsx new file mode 100644 index 000000000..9000d2567 --- /dev/null +++ b/platform/ui-next/src/components/Input/Input.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { cn } from '../../lib/utils'; + +export interface InputProps extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ); + } +); +Input.displayName = 'Input'; + +export { Input }; diff --git a/platform/ui-next/src/components/Input/index.tsx b/platform/ui-next/src/components/Input/index.tsx new file mode 100644 index 000000000..6ed9dc0c3 --- /dev/null +++ b/platform/ui-next/src/components/Input/index.tsx @@ -0,0 +1,3 @@ +import { Input } from './Input'; + +export { Input }; diff --git a/platform/ui-next/src/components/Label/Label.tsx b/platform/ui-next/src/components/Label/Label.tsx new file mode 100644 index 000000000..9eb304bbf --- /dev/null +++ b/platform/ui-next/src/components/Label/Label.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import { cva, type VariantProps } from 'class-variance-authority'; + +import { cn } from '../../lib/utils'; + +const labelVariants = cva( + 'text-sm text-foreground font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70' +); + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps +>(({ className, ...props }, ref) => ( + +)); +Label.displayName = LabelPrimitive.Root.displayName; + +export { Label }; diff --git a/platform/ui-next/src/components/Label/index.tsx b/platform/ui-next/src/components/Label/index.tsx new file mode 100644 index 000000000..88d2bb87d --- /dev/null +++ b/platform/ui-next/src/components/Label/index.tsx @@ -0,0 +1,3 @@ +import { Label } from './Label'; + +export { Label }; diff --git a/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx b/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx new file mode 100644 index 000000000..ba9e3bcac --- /dev/null +++ b/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; + +import { cn } from '../../lib/utils'; + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)); +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = 'vertical', ...props }, ref) => ( + + + +)); +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; + +export { ScrollArea, ScrollBar }; diff --git a/platform/ui-next/src/components/ScrollArea/index.tsx b/platform/ui-next/src/components/ScrollArea/index.tsx new file mode 100644 index 000000000..feea3d753 --- /dev/null +++ b/platform/ui-next/src/components/ScrollArea/index.tsx @@ -0,0 +1,3 @@ +import { ScrollArea, ScrollBar } from './ScrollArea'; + +export { ScrollArea, ScrollBar }; diff --git a/platform/ui-next/src/components/Select/Select.tsx b/platform/ui-next/src/components/Select/Select.tsx new file mode 100644 index 000000000..f0178f3fa --- /dev/null +++ b/platform/ui-next/src/components/Select/Select.tsx @@ -0,0 +1,150 @@ +import * as React from 'react'; +import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'; +import * as SelectPrimitive from '@radix-ui/react-select'; + +import { cn } from '../../lib/utils'; + +const Select = SelectPrimitive.Root; + +const SelectGroup = SelectPrimitive.Group; + +const SelectValue = SelectPrimitive.Value; + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1 hover:bg-primary/10 flex h-7 w-full items-center justify-between whitespace-nowrap rounded border bg-transparent px-2 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50', + className + )} + {...props} + > + {children} + + + + +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; + +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName; + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = 'popper', ...props }, ref) => ( + + + + + {children} + + + + +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +}; diff --git a/platform/ui-next/src/components/Select/index.tsx b/platform/ui-next/src/components/Select/index.tsx new file mode 100644 index 000000000..431068e34 --- /dev/null +++ b/platform/ui-next/src/components/Select/index.tsx @@ -0,0 +1,25 @@ +import { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +} from './Select'; + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +}; diff --git a/platform/ui-next/src/components/Separator/Separator.tsx b/platform/ui-next/src/components/Separator/Separator.tsx new file mode 100644 index 000000000..742159b11 --- /dev/null +++ b/platform/ui-next/src/components/Separator/Separator.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import * as SeparatorPrimitive from '@radix-ui/react-separator'; + +import { cn } from '../../lib/utils'; + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => ( + +)); +Separator.displayName = SeparatorPrimitive.Root.displayName; + +export { Separator }; diff --git a/platform/ui-next/src/components/Separator/index.tsx b/platform/ui-next/src/components/Separator/index.tsx new file mode 100644 index 000000000..6c6026407 --- /dev/null +++ b/platform/ui-next/src/components/Separator/index.tsx @@ -0,0 +1,3 @@ +import { Separator } from './Separator'; + +export { Separator }; diff --git a/platform/ui-next/src/components/Slider/Slider.tsx b/platform/ui-next/src/components/Slider/Slider.tsx new file mode 100644 index 000000000..61729d249 --- /dev/null +++ b/platform/ui-next/src/components/Slider/Slider.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import * as SliderPrimitive from '@radix-ui/react-slider'; + +import { cn } from '../../lib/utils'; + +const Slider = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + + +)); +Slider.displayName = SliderPrimitive.Root.displayName; + +export { Slider }; diff --git a/platform/ui-next/src/components/Slider/index.tsx b/platform/ui-next/src/components/Slider/index.tsx new file mode 100644 index 000000000..516db3a01 --- /dev/null +++ b/platform/ui-next/src/components/Slider/index.tsx @@ -0,0 +1,3 @@ +import { Slider } from './Slider'; + +export { Slider }; diff --git a/platform/ui-next/src/components/Switch/Switch.tsx b/platform/ui-next/src/components/Switch/Switch.tsx new file mode 100644 index 000000000..3b78ec998 --- /dev/null +++ b/platform/ui-next/src/components/Switch/Switch.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import * as SwitchPrimitives from '@radix-ui/react-switch'; + +import { cn } from '../../lib/utils'; + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +Switch.displayName = SwitchPrimitives.Root.displayName; + +export { Switch }; diff --git a/platform/ui-next/src/components/Switch/index.tsx b/platform/ui-next/src/components/Switch/index.tsx new file mode 100644 index 000000000..cf36910ad --- /dev/null +++ b/platform/ui-next/src/components/Switch/index.tsx @@ -0,0 +1,3 @@ +import { Switch } from './Switch'; + +export { Switch }; diff --git a/platform/ui-next/src/components/Tabs/Tabs.tsx b/platform/ui-next/src/components/Tabs/Tabs.tsx new file mode 100644 index 000000000..f054032bb --- /dev/null +++ b/platform/ui-next/src/components/Tabs/Tabs.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import * as TabsPrimitive from '@radix-ui/react-tabs'; + +import { cn } from '../../lib/utils'; + +const Tabs = TabsPrimitive.Root; + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsList.displayName = TabsPrimitive.List.displayName; + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsContent.displayName = TabsPrimitive.Content.displayName; + +export { Tabs, TabsList, TabsTrigger, TabsContent }; diff --git a/platform/ui-next/src/components/Tabs/index.tsx b/platform/ui-next/src/components/Tabs/index.tsx new file mode 100644 index 000000000..ee99e18e9 --- /dev/null +++ b/platform/ui-next/src/components/Tabs/index.tsx @@ -0,0 +1,3 @@ +import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs'; + +export { Tabs, TabsList, TabsTrigger, TabsContent }; diff --git a/platform/ui-next/src/components/Toggle/Toggle.tsx b/platform/ui-next/src/components/Toggle/Toggle.tsx new file mode 100644 index 000000000..01a4bfd1b --- /dev/null +++ b/platform/ui-next/src/components/Toggle/Toggle.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import * as TogglePrimitive from '@radix-ui/react-toggle'; +import { cva, type VariantProps } from 'class-variance-authority'; + +import { cn } from '../../lib/utils'; + +const toggleVariants = cva( + 'inline-flex items-center justify-center rounded-md text-primary-foreground/80 font-medium transition-colors hover:bg-primary/20 hover:text-primary-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary/20 data-[state=on]:text-highlight', + { + variants: { + variant: { + default: 'bg-transparent', + outline: + 'border border-input bg-transparent shadow-sm hover:bg-primary/20 hover:text-primary-foreground', + }, + size: { + default: 'h-9 px-3 mx-0.5', + sm: 'h-8 px-2', + lg: 'h-10 px-3', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + } +); + +const Toggle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps +>(({ className, variant, size, ...props }, ref) => ( + +)); + +Toggle.displayName = TogglePrimitive.Root.displayName; + +export { Toggle, toggleVariants }; diff --git a/platform/ui-next/src/components/Toggle/index.tsx b/platform/ui-next/src/components/Toggle/index.tsx new file mode 100644 index 000000000..9fd9a15e8 --- /dev/null +++ b/platform/ui-next/src/components/Toggle/index.tsx @@ -0,0 +1,3 @@ +import { Toggle, toggleVariants } from './Toggle'; + +export { Toggle, toggleVariants }; diff --git a/platform/ui-next/src/components/index.ts b/platform/ui-next/src/components/index.ts index e0c1cbe76..1306c1f74 100644 --- a/platform/ui-next/src/components/index.ts +++ b/platform/ui-next/src/components/index.ts @@ -4,7 +4,39 @@ import Command from './Command'; import Dialog from './Dialog'; import Combobox from './Combobox'; import Popover from './Popover'; -import Calendar from './Calendar'; +import Calendar from './Calendar'; import DatePickerWithRange from './DateRange'; +import { Input } from './Input'; +import { Label } from './Label'; +import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs'; +import { Separator } from './Separator'; +import { Switch } from './Switch'; +import { Checkbox } from './Checkbox'; +import { Toggle, toggleVariants } from './Toggle'; +import { Slider } from './Slider'; +import { ScrollArea, ScrollBar } from './ScrollArea'; -export { Button, buttonVariants, ThemeWrapper, Command, Dialog, Combobox, Popover, Calendar, DatePickerWithRange}; +export { + Button, + buttonVariants, + ThemeWrapper, + Command, + Dialog, + Combobox, + Popover, + Calendar, + DatePickerWithRange, + Input, + Label, + Tabs, + TabsList, + TabsTrigger, + TabsContent, + Separator, + Switch, + Checkbox, + Toggle, + toggleVariants, + Slider, + ScrollArea, +}; diff --git a/platform/ui-next/src/index.ts b/platform/ui-next/src/index.ts index 63fbdcf76..0c140faba 100644 --- a/platform/ui-next/src/index.ts +++ b/platform/ui-next/src/index.ts @@ -10,6 +10,7 @@ import { DatePickerWithRange, } from './components'; import { useNotification, NotificationProvider } from './contextProviders'; +import { Toggle, toggleVariants } from './Toggle'; export { // components diff --git a/platform/ui-next/src/tailwind.css b/platform/ui-next/src/tailwind.css index ebb4afb43..f4a6824a4 100644 --- a/platform/ui-next/src/tailwind.css +++ b/platform/ui-next/src/tailwind.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; @@ -11,15 +13,15 @@ --foreground: 0 0% 98%; --card: 236 62% 5%; --card-foreground: 0 0% 98%; - --popover: 236 62% 5%; + --popover: 219 90% 15%; --popover-foreground: 0 0% 98%; --primary: 214 98% 60%; --primary-foreground: 0 0% 98%; --secondary: 214 66% 48%; --secondary-foreground: 0 0% 98%; --muted: 234 64% 10%; - --muted-foreground: 200 46 65%; - --accent: 214 67% 12%; + --muted-foreground: 200 46% 65%; + --accent: 217 79% 24%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; @@ -187,6 +189,37 @@ */ +/* Updated Playground page styles */ + +@layer base { + html { + font-family: 'Inter', sans-serif; + } + + body { + @apply bg-black; + } +} + +h2.section-header { + @apply py-4 text-2xl font-normal text-white; +} + +h3.section-header { + @apply py-3 text-xl text-white; +} + +.row { + @apply border-border mb-6 flex flex-row flex-wrap rounded-md border py-10; +} + +.example { + @apply flex-initial px-6; +} + +.example2 { + @apply flex-initial px-4; +} /* Additional CSS edits to components */ diff --git a/platform/ui-next/tailwind.config.js b/platform/ui-next/tailwind.config.js index d82d4fbcf..54c59f431 100644 --- a/platform/ui-next/tailwind.config.js +++ b/platform/ui-next/tailwind.config.js @@ -9,6 +9,31 @@ module.exports = { ], prefix: '', theme: { + fontFamily: { + inter: ['Inter', 'sans-serif'], + }, + fontSize: { + xs: '0.75rem', // 12px + sm: '0.8125rem', // 13px + base: '0.875rem', // 14px + lg: '1rem', // 16px + xl: '1.125rem', // 18px + '2xl': '1.25rem', // 20px + '3xl': '1.375rem', // 22px + '4xl': '1.5rem', // 24px + '5xl': '1.875rem', // 30px + }, + fontWeight: { + hairline: '100', + thin: '200', + light: '300', + normal: '400', + medium: '500', + semibold: '600', + bold: '700', + extrabold: '800', + black: '900', + }, extend: { colors: { highlight: 'hsl(var(--highlight))', diff --git a/yarn.lock b/yarn.lock index 966b7a303..43098d8e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3511,6 +3511,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/number@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46" + integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ== + "@radix-ui/primitive@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd" @@ -3538,6 +3543,20 @@ dependencies: "@radix-ui/react-primitive" "2.0.0" +"@radix-ui/react-checkbox@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz#a559c4303957d797acee99914480b755aa1f27d6" + integrity sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-presence" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-use-previous" "1.1.0" + "@radix-ui/react-use-size" "1.1.0" + "@radix-ui/react-collection@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159" @@ -3549,6 +3568,16 @@ "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-slot" "1.0.2" +"@radix-ui/react-collection@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed" + integrity sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-slot" "1.1.0" + "@radix-ui/react-compose-refs@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989" @@ -3573,7 +3602,7 @@ resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8" integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A== -"@radix-ui/react-dialog@1.0.5", "@radix-ui/react-dialog@^1.0.5": +"@radix-ui/react-dialog@1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300" integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q== @@ -3594,6 +3623,26 @@ aria-hidden "^1.1.1" react-remove-scroll "2.5.5" +"@radix-ui/react-dialog@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz#4906507f7b4ad31e22d7dad69d9330c87c431d44" + integrity sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-dismissable-layer" "1.1.0" + "@radix-ui/react-focus-guards" "1.1.0" + "@radix-ui/react-focus-scope" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-portal" "1.1.1" + "@radix-ui/react-presence" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-slot" "1.1.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + aria-hidden "^1.1.1" + react-remove-scroll "2.5.7" + "@radix-ui/react-direction@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b" @@ -3601,6 +3650,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-direction@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc" + integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg== + "@radix-ui/react-dismissable-layer@1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978" @@ -3643,6 +3697,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-focus-guards@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz#8e9abb472a9a394f59a1b45f3dd26cfe3fc6da13" + integrity sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw== + "@radix-ui/react-focus-scope@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz#9c2e8d4ed1189a1d419ee61edd5c1828726472f9" @@ -3663,6 +3722,15 @@ "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-use-callback-ref" "1.0.1" +"@radix-ui/react-focus-scope@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2" + integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-icons@^1.3.0": version "1.3.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69" @@ -3683,6 +3751,13 @@ dependencies: "@radix-ui/react-use-layout-effect" "1.1.0" +"@radix-ui/react-label@^2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.1.0.tgz#3aa2418d70bb242be37c51ff5e51a2adcbc372e3" + integrity sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw== + dependencies: + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-popover@^1.0.7": version "1.0.7" resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c" @@ -3827,6 +3902,36 @@ "@radix-ui/react-use-callback-ref" "1.0.1" "@radix-ui/react-use-controllable-state" "1.0.1" +"@radix-ui/react-roving-focus@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e" + integrity sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-collection" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + +"@radix-ui/react-scroll-area@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz#50b24b0fc9ada151d176395bcf47b2ec68feada5" + integrity sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg== + dependencies: + "@radix-ui/number" "1.1.0" + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-presence" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-select@^1.2.2": version "1.2.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181" @@ -3855,6 +3960,33 @@ aria-hidden "^1.1.1" react-remove-scroll "2.5.5" +"@radix-ui/react-select@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.1.1.tgz#df05cb0b29d3deaef83b505917c4042e0e418a9f" + integrity sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ== + dependencies: + "@radix-ui/number" "1.1.0" + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-collection" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-dismissable-layer" "1.1.0" + "@radix-ui/react-focus-guards" "1.1.0" + "@radix-ui/react-focus-scope" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-popper" "1.2.0" + "@radix-ui/react-portal" "1.1.1" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-slot" "1.1.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-use-previous" "1.1.0" + "@radix-ui/react-visually-hidden" "1.1.0" + aria-hidden "^1.1.1" + react-remove-scroll "2.5.7" + "@radix-ui/react-separator@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa" @@ -3863,6 +3995,30 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" +"@radix-ui/react-separator@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.0.tgz#ee0f4d86003b0e3ea7bc6ccab01ea0adee32663e" + integrity sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA== + dependencies: + "@radix-ui/react-primitive" "2.0.0" + +"@radix-ui/react-slider@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.2.0.tgz#7a4c817d24386b420631a3fdc75563706d743472" + integrity sha512-dAHCDA4/ySXROEPaRtaMV5WHL8+JB/DbtyTbJjYkY0RXmKMO2Ln8DFZhywG5/mVQ4WqHDBc8smc14yPXPqZHYA== + dependencies: + "@radix-ui/number" "1.1.0" + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-collection" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-use-previous" "1.1.0" + "@radix-ui/react-use-size" "1.1.0" + "@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab" @@ -3878,6 +4034,33 @@ dependencies: "@radix-ui/react-compose-refs" "1.1.0" +"@radix-ui/react-switch@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.0.tgz#fcf8e778500f1d60d4b2bec2fc3fad77a7c118e3" + integrity sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-use-previous" "1.1.0" + "@radix-ui/react-use-size" "1.1.0" + +"@radix-ui/react-tabs@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz#0a6db1caed56776a1176aae68532060e301cc1c0" + integrity sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-presence" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-roving-focus" "1.1.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-toggle-group@1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz#f5b5c8c477831b013bec3580c55e20a68179d6ec" @@ -3902,6 +4085,15 @@ "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-use-controllable-state" "1.0.1" +"@radix-ui/react-toggle@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz#1f7697b82917019330a16c6f96f649f46b4606cf" + integrity sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-toolbar@^1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz#3211a105567fa016e89921b5b514877f833de559" @@ -3995,6 +4187,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-previous@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c" + integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og== + "@radix-ui/react-use-rect@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2" @@ -9125,9 +9322,9 @@ dayjs@^1.10.4: integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg== dcmjs@*, dcmjs@>=0.33.0, dcmjs@^0.29.8: - version "0.33.0" - resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.33.0.tgz#e4387056fcd4f5a40be1f76f2441bf0b2b58c514" - integrity sha512-8QfVA+TeuuKoVyhkJo/iCFDnpiNGDDrRQdM/tsi7gm1a/gNt4yYUBXLDho+CmVgvsaKccv7UMZBrGfmVDfNLvg== + version "0.33.1" + resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.33.1.tgz#4297f40667a1ecbc3c5a84f9a207457ab3ae7856" + integrity sha512-/vwOPAX5fOQSwqf8t7bV7sy1h2h+gTWw5t/be8OIY7IwUpuKuKRChZvxINAjNZ9DDWHMB/uSOS7NJceu1YChfQ== dependencies: "@babel/runtime-corejs3" "^7.22.5" adm-zip "^0.5.10" @@ -12611,15 +12808,12 @@ ip-address@^9.0.5: jsbn "1.1.0" sprintf-js "^1.1.3" -ip@^1.1.0: - version "1.1.9" - resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396" - integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ== - -ip@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.1.tgz#e8f3595d33a3ea66490204234b77636965307105" - integrity sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ== +ip@^1.1.0, ip@^2.0.1, "ip@https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz": + version "9.0.5" + resolved "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz#117a960819b08780c3bd1f14ef3c1cc1d3f3ea5a" + dependencies: + jsbn "1.1.0" + sprintf-js "^1.1.3" ipaddr.js@1.9.1: version "1.9.1" @@ -18219,7 +18413,7 @@ react-refresh@^0.14.0, react-refresh@^0.14.2: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9" integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA== -react-remove-scroll-bar@^2.3.3: +react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4: version "2.3.6" resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c" integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g== @@ -18238,6 +18432,17 @@ react-remove-scroll@2.5.5: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-remove-scroll@2.5.7: + version "2.5.7" + resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb" + integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA== + dependencies: + react-remove-scroll-bar "^2.3.4" + react-style-singleton "^2.2.1" + tslib "^2.1.0" + use-callback-ref "^1.3.0" + use-sidecar "^1.1.2" + react-resize-detector@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-10.0.1.tgz#ae9a8c5b6b93c4c11e03b3eb87e57fd7b62f1020"