@dxos/react-ui 0.3.5-next.5910692 → 0.3.5-next.b7dc283

package/src/playground/Surfaces.stories.tsx

@@ -6,18 +6,37 @@ import '@dxosTheme';
 
 import React, { type PropsWithChildren } from 'react';
 
-import { baseSurface, chromeSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import {
+  baseSurface,
+  chromeSurface,
+  groupSurface,
+  mx,
+  surfaceElevation,
+  fixedSurface,
+  fixedBorder,
+  inputSurface,
+} from '@dxos/react-ui-theme';
 
-const Surface = ({ children, level }: PropsWithChildren & { level: 'base' | 'group' | 'chrome' }) => {
+const Surface = ({
+  children,
+  level,
+}: PropsWithChildren & { level: 'base' | 'group' | 'chrome' | 'fixed' | 'input' }) => {
   const surface =
     level === 'chrome'
       ? [chromeSurface, surfaceElevation({ elevation: 'chrome' })]
       : level === 'group'
       ? [groupSurface, surfaceElevation({ elevation: 'group' })]
+      : level === 'input'
+      ? [inputSurface, surfaceElevation({ elevation: 'group' })]
+      : level === 'fixed'
+      ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
       : [baseSurface];
 
   return (
-    <div role='region' className={mx('flex m-8 p-2 w-[320px] h-[160px] rounded-lg', ...surface)}>
+    <div
+      role='region'
+      className={mx('flex justify-center items-center m-8 p-2 w-[320px] h-[160px] rounded-lg', ...surface)}
+    >
       <div>{level}</div>
       {children}
     </div>
@@ -26,11 +45,13 @@ const Surface = ({ children, level }: PropsWithChildren & { level: 'base' | 'gro
 
 const SurfacesStory = () => {
   return (
-    <>
+    <div className='bg-cubes p-10 m-0'>
+      <Surface level='fixed' />
       <Surface level='base' />
       <Surface level='group' />
       <Surface level='chrome' />
-    </>
+      <Surface level='input' />
+    </div>
   );
 };