@sanity-labs/ui-poc 0.0.1-alpha.0 → 0.0.1-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity-labs/ui-poc",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.1",
   "description": "Sanity UI POC",
   "keywords": [],
   "homepage": "https://github.com/sanity-labs/ui-poc#readme",
@@ -13,7 +13,9 @@
   },
   "license": "ISC",
   "author": "Sanity",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -55,19 +57,15 @@
     "classnames": "^2.5.1"
   },
   "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@sanity/browserslist-config": "^1.0.5",
     "@sanity/pkg-utils": "^9.2.3",
     "@sanity/prettier-config": "^1.0.6",
     "@sanity/tsconfig": "^1.0.0",
     "@types/postcss-import": "^14.0.3",
     "@types/react": "^19.2.14",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "autoprefixer": "^10.4.27",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.2",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint": "^9.22.0",
     "lint-staged": "^15.5.2",
     "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",

package/src/components/box/Box.tsx

@@ -16,9 +16,10 @@ export interface BoxProps<T extends React.ElementType> extends LayoutProps {
 }
 
 /** @public */
-export function Box<T extends React.ElementType = 'div'>(
-  {display = 'block', ...props}: BoxProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof BoxProps<T>>,
-) {
+export function Box<T extends React.ElementType = 'div'>({
+  display = 'block',
+  ...props
+}: BoxProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof BoxProps<T>>) {
   const {as, children, className, style, ...rest} = getProps({display, ...props}, boxProps)
   const Component = as || 'div'
 

package/src/components/card/card.props.ts

@@ -0,0 +1,21 @@
+import {marginProps} from '../../props/margin'
+import {DENSITY} from '../../types/Density'
+import {DISPLAY_BLOCK} from '../../types/Display'
+import {type PropDef} from '../../types/PropDef'
+
+export const cardProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  display: {
+    type: 'union',
+    className: 'display',
+    values: DISPLAY_BLOCK,
+  },
+  density: {
+    type: 'composite',
+    classNames: ['', 'padding3 radius2', 'padding4 radius3', 'padding5 radius4'],
+    values: DENSITY,
+  },
+  ...marginProps,
+}

package/src/components/divider/Divider.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+/** @public */
+export function Divider() {
+  return (
+    <hr
+      className="sui-Divider sui-border-bottom-none sui-border-left-none sui-border-right-none sui-border-top"
+      data-ui="Divider"
+    />
+  )
+}

package/src/components/flex/Flex.tsx

@@ -9,6 +9,7 @@ import {type Responsive} from '../../types/Responsive'
 import {getProps} from '../../utils/getProps'
 import {flexProps} from './flex.props'
 
+/** @public */
 export interface FlexProps<T extends React.ElementType>
   extends FlexParentProps, GapProps, LayoutProps {
   /** Element to render */
@@ -17,9 +18,11 @@ export interface FlexProps<T extends React.ElementType>
   display?: Responsive<DisplayFlex>
 }
 
-export function Flex<T extends React.ElementType = 'div'>(
-  { display = 'flex', ...props}: FlexProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof FlexProps<T>>,
-) {
+/** @public */
+export function Flex<T extends React.ElementType = 'div'>({
+  display = 'flex',
+  ...props
+}: FlexProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof FlexProps<T>>) {
   const {as, children, className, style, ...rest} = getProps({display, ...props}, flexProps)
   const Component = as || 'div'
 

package/src/components/grid/Grid.tsx

@@ -9,7 +9,8 @@ import {type Responsive} from '../../types/Responsive'
 import {getProps} from '../../utils/getProps'
 import {gridProps} from './grid.props'
 
-export interface FlexProps<T extends React.ElementType>
+/** @public */
+export interface GridProps<T extends React.ElementType>
   extends GridParentProps, GapProps, LayoutProps {
   /** Element to render */
   as?: T
@@ -17,9 +18,11 @@ export interface FlexProps<T extends React.ElementType>
   display?: Responsive<DisplayGrid>
 }
 
-export function Grid<T extends React.ElementType = 'div'>(
-  {display = 'grid', ...props}: FlexProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof FlexProps<T>>,
-) {
+/** @public */
+export function Grid<T extends React.ElementType = 'div'>({
+  display = 'grid',
+  ...props
+}: GridProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof GridProps<T>>) {
   const {as, children, className, style, ...rest} = getProps({display, ...props}, gridProps)
   const Component = as || 'div'
 

package/src/index.ts

@@ -1 +1,5 @@
-export * from './components/Box'
+export * from './components/box/Box'
+export * from './components/divider/Divider'
+export * from './components/flex/Flex'
+export * from './components/grid/Grid'
+export * from './components/text/Text'

package/src/types/Density.ts

@@ -0,0 +1,2 @@
+export const DENSITY = [0, 1, 2, 3] as const
+export type Density = (typeof DENSITY)[number]