@zerodev/react-ui 0.0.1

package/src/components/WrappedPressable/index.tsx

@@ -0,0 +1,46 @@
+import { type ButtonHTMLAttributes, type ReactNode, useState } from 'react'
+
+import { cn } from '../../utils/common'
+import { Wrapper } from '../Wrapper'
+
+export interface WrappedPressableProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+  children: ReactNode
+}
+
+export function WrappedPressable({
+  className,
+  children,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: WrappedPressableProps) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <Wrapper
+      className={cn(
+        'zd:rounded-xl zd:flex zd:items-center zd:justify-center',
+        className,
+      )}
+      variant={isHovered ? 'soft' : 'ghost'}
+    >
+      <button
+        type="button"
+        className="zd:flex zd:flex-row zd:items-center zd:justify-center zd:gap-2 zd:w-full zd:h-full zd:cursor-pointer"
+        onMouseEnter={(e) => {
+          setIsHovered(true)
+          onMouseEnter?.(e)
+        }}
+        onMouseLeave={(e) => {
+          setIsHovered(false)
+          onMouseLeave?.(e)
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    </Wrapper>
+  )
+}

package/src/components/Wrapper/index.tsx

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+
+import { cn } from '../../utils/common'
+
+export type WrapperVariant = 'ghost' | 'soft' | 'solid'
+
+export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: WrapperVariant
+}
+
+function getBackgroundAlpha(variant: WrapperVariant): number {
+  switch (variant) {
+    case 'ghost':
+      return 0.2
+    case 'soft':
+      return 0.5
+    case 'solid':
+      return 0.8
+  }
+}
+
+export function Wrapper({
+  className,
+  children,
+  variant = 'soft',
+  ...rest
+}: PropsWithChildren<WrapperProps>) {
+  const backgroundAlpha = getBackgroundAlpha(variant)
+  const backgroundColor = `rgba(255, 255, 255, ${backgroundAlpha})`
+
+  return (
+    <div
+      className={cn(
+        'zd:overflow-hidden zd:border-offWhite zd:border-[0.3px] zd:backdrop-blur-[15px]',
+        className,
+      )}
+      {...rest}
+      style={{ backgroundColor, ...rest.style }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+/**
+ * @zerodev/react-ui
+ * React UI primitives for ZeroDev
+ */
+
+export { Badge, type BadgeProps } from './components/Badge'
+export { Button, type ButtonProps } from './components/Button'
+export { Callout, type CalloutProps } from './components/Callout'
+export {
+  Icon,
+  type IconName,
+  type IconProps,
+  icons,
+} from './components/Icon'
+export { IconButton, type IconButtonProps } from './components/IconButton'
+export { Input, type InputProps } from './components/Input'
+export {
+  ListItem,
+  type ListItemProps,
+  ListItemSkeleton,
+} from './components/ListItem'
+export { Switch, type SwitchProps } from './components/Switch'
+export { Text, type TextProps } from './components/Text'
+export {
+  WrappedPressable,
+  type WrappedPressableProps,
+} from './components/WrappedPressable'
+export {
+  Wrapper,
+  type WrapperProps,
+  type WrapperVariant,
+} from './components/Wrapper'
+export { cn } from './utils/common'

package/src/svg.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import type { FC, SVGProps } from 'react'
+
+  const ReactComponent: FC<SVGProps<SVGSVGElement>>
+  export default ReactComponent
+}

package/src/utils/common.ts

@@ -0,0 +1,17 @@
+import { type ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const customTwMerge = extendTailwindMerge({
+  prefix: 'zd',
+  extend: {
+    classGroups: {
+      'font-size': [
+        { text: ['h1', 'h2', 'h3', 'body1', 'body2', 'body3', 'body4'] },
+      ],
+    },
+  },
+})
+
+export function cn(...inputs: ClassValue[]) {
+  return customTwMerge(clsx(inputs))
+}

package/tailwind.config.ts

@@ -0,0 +1,58 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      spacing: {
+        13: '52px',
+        4.5: '18px',
+      },
+      colors: {
+        // Design color palette START
+        orange: '#F27B3E',
+        solarOrange: '#E76000',
+        paleOrange: '#FAC8AB',
+        lightOrange: '#FCE8D8',
+        skyBlue: '#45ABFB',
+        greyBrown: '#B78C71',
+        warmGrey: '#E3CFC3',
+        offWhite: '#F7F5F0',
+        greyScale: '#130E0B',
+        positive: '#228300',
+        negative: '#FF4221',
+      },
+      fontSize: {
+        xs: '10px',
+        sm: '12px',
+        base: '14px',
+        lg: '16px',
+        xl: '18px',
+        '2xl': '20px',
+        '3xl': '24px',
+        '4xl': '30px',
+        '5xl': '36px',
+        '6xl': '48px',
+        // Design typography START
+        h1: ['42px', '110%'],
+        h2: ['28px', '110%'],
+        h3: ['18px', '130%'],
+        body1: ['16px', '130%'],
+        body2: ['14px', '130%'],
+        body3: ['12px', '130%'],
+        body4: ['10px', '130%'],
+        // Design typography END
+      },
+      fontFamily: {
+        sans: ['sans-serif'],
+        heading: ['sans-serif'],
+        body: ['sans-serif'],
+        mono: undefined,
+        roboto: ['Roboto', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config