port shadcn components and install packages

packages/ui/package.json

@@ -31,10 +31,28 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
     "framer-motion": "^11.0.5",
+    "lucide-react": "^0.336.0",
     "tailwind-merge": "^1.14.0"
   }
 }

packages/ui/src/BackgroundBlobs/BackgroundBlobs.stories.js

@@ -0,0 +1,120 @@
+import BackgroundBlobs from '../src/components/art/BackgroundBlobs';
+import '../src/styles/_all.scss';
+
+export default { title: 'Art/Background Blobs' };
+
+export const normal = () => (
+  <div
+    style={{
+      width: '800px',
+      height: '600px',
+      border: '1px solid white',
+      borderRadius: 'var(--nc-border-radius)',
+      overflow: 'hidden',
+      background: 'white',
+    }}
+  >
+    <BackgroundBlobs />
+  </div>
+);
+
+export const fullScreen = () => (
+  <div
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background: 'white',
+    }}
+  >
+    <BackgroundBlobs />
+  </div>
+);
+
+export const small = () => (
+  <div
+    style={{
+      width: '300px',
+      height: '300px',
+      border: '1px solid white',
+      borderRadius: 'var(--nc-border-radius)',
+      overflow: 'hidden',
+      background: 'white',
+    }}
+  >
+    <BackgroundBlobs />
+  </div>
+);
+
+export const customNumbers = () => (
+  <div style={{ display: 'flex' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '1rem',
+        alignItems: 'center',
+      }}
+    >
+      <h4>Loadsa large</h4>
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          border: '1px solid white',
+          borderRadius: 'var(--nc-border-radius)',
+          overflow: 'hidden',
+          background: 'white',
+        }}
+      >
+        <BackgroundBlobs large={7} medium={0} small={0} />
+      </div>
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '1rem',
+        alignItems: 'center',
+      }}
+    >
+      <h4>Twenty Small</h4>
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          border: '1px solid white',
+          borderRadius: 'var(--nc-border-radius)',
+          overflow: 'hidden',
+          background: 'white',
+        }}
+      >
+        <BackgroundBlobs large={0} medium={0} small={20} />
+      </div>
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '1rem',
+        alignItems: 'center',
+      }}
+    >
+      <h4>Medium and Small</h4>
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          border: '1px solid white',
+          borderRadius: 'var(--nc-border-radius)',
+          overflow: 'hidden',
+          background: 'white',
+        }}
+      >
+        <BackgroundBlobs large={0} medium={5} small={5} />
+      </div>
+    </div>
+  </div>
+);