@saas-ui/react 2.11.2 → 3.0.0-alpha.0

package/src/components/menu.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
+import { forwardRef } from "react"
+import { LuCheck, LuChevronRight } from "react-icons/lu"
+
+interface MenuContentProps extends ChakraMenu.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
+  function MenuContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraMenu.Positioner>
+          <ChakraMenu.Content ref={ref} {...rest} />
+        </ChakraMenu.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const MenuArrow = forwardRef<HTMLDivElement, ChakraMenu.ArrowProps>(
+  function MenuArrow(props, ref) {
+    return (
+      <ChakraMenu.Arrow ref={ref} {...props}>
+        <ChakraMenu.ArrowTip />
+      </ChakraMenu.Arrow>
+    )
+  },
+)
+
+export const MenuCheckboxItem = forwardRef<
+  HTMLDivElement,
+  ChakraMenu.CheckboxItemProps
+>(function MenuCheckboxItem(props, ref) {
+  return (
+    <ChakraMenu.CheckboxItem ref={ref} {...props}>
+      <ChakraMenu.ItemIndicator hidden={false}>
+        <LuCheck />
+      </ChakraMenu.ItemIndicator>
+      {props.children}
+    </ChakraMenu.CheckboxItem>
+  )
+})
+
+export const MenuRadioItem = forwardRef<
+  HTMLDivElement,
+  ChakraMenu.RadioItemProps
+>(function MenuRadioItem(props, ref) {
+  const { children, ...rest } = props
+  return (
+    <ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
+      <AbsoluteCenter axis="horizontal" left="4" asChild>
+        <ChakraMenu.ItemIndicator>
+          <LuCheck />
+        </ChakraMenu.ItemIndicator>
+      </AbsoluteCenter>
+      <ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
+    </ChakraMenu.RadioItem>
+  )
+})
+
+export const MenuItemGroup = forwardRef<
+  HTMLDivElement,
+  ChakraMenu.ItemGroupProps
+>(function MenuItemGroup(props, ref) {
+  const { title, children, ...rest } = props
+  return (
+    <ChakraMenu.ItemGroup ref={ref} {...rest}>
+      {title && (
+        <ChakraMenu.ItemGroupLabel userSelect="none">
+          {title}
+        </ChakraMenu.ItemGroupLabel>
+      )}
+      {children}
+    </ChakraMenu.ItemGroup>
+  )
+})
+
+export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
+  startIcon?: React.ReactNode
+}
+
+export const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(
+  function MenuTriggerItem(props, ref) {
+    const { startIcon, children, ...rest } = props
+    return (
+      <ChakraMenu.TriggerItem ref={ref} {...rest}>
+        {startIcon}
+        {children}
+        <LuChevronRight />
+      </ChakraMenu.TriggerItem>
+    )
+  },
+)
+
+export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
+export const MenuContextTrigger = ChakraMenu.ContextTrigger
+export const MenuRoot = ChakraMenu.Root
+export const MenuSeparator = ChakraMenu.Separator
+
+export const MenuItem = ChakraMenu.Item
+export const MenuItemText = ChakraMenu.ItemText
+export const MenuItemCommand = ChakraMenu.ItemCommand
+export const MenuTrigger = ChakraMenu.Trigger

package/src/components/native-select.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { NativeSelect as Select } from "@chakra-ui/react"
+import { forwardRef, useMemo } from "react"
+
+interface NativeSelectRootProps extends Select.RootProps {
+  icon?: React.ReactNode
+}
+
+export const NativeSelectRoot = forwardRef<
+  HTMLDivElement,
+  NativeSelectRootProps
+>(function NativeSelect(props, ref) {
+  const { icon, children, ...rest } = props
+  return (
+    <Select.Root ref={ref} {...rest}>
+      {children}
+      <Select.Indicator>{icon}</Select.Indicator>
+    </Select.Root>
+  )
+})
+
+interface NativeSelectItem {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+interface NativeSelectField extends Select.FieldProps {
+  items?: Array<string | NativeSelectItem>
+}
+
+export const NativeSelectField = forwardRef<
+  HTMLSelectElement,
+  NativeSelectField
+>(function NativeSelectField(props, ref) {
+  const { items: itemsProp, children, ...rest } = props
+
+  const items = useMemo(
+    () =>
+      itemsProp?.map((item) =>
+        typeof item === "string" ? { label: item, value: item } : item,
+      ),
+    [itemsProp],
+  )
+
+  return (
+    <Select.Field ref={ref} {...rest}>
+      {children}
+      {items?.map((item) => (
+        <option key={item.value} value={item.value} disabled={item.disabled}>
+          {item.label}
+        </option>
+      ))}
+    </Select.Field>
+  )
+})

package/src/components/navbar/index.ts

@@ -0,0 +1 @@
+export * as Navbar from './namespace'

package/src/components/navbar/namespace.ts

@@ -0,0 +1,9 @@
+export {
+  NavbarRoot as Root,
+  NavbarContent as Content,
+  NavbarBrand as Brand,
+  NavbarItem as Item,
+  NavbarLink as Link,
+} from './navbar'
+
+export type { NavbarRootProps as RootProps } from './navbar'

package/src/components/navbar/navbar.recipe.ts

@@ -0,0 +1,109 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+
+export const navbarSlotRecipe = defineSlotRecipe({
+  className: 'sui-navbar',
+  slots: ['root', 'content', 'brand', 'item'],
+  base: {
+    root: {
+      display: 'flex',
+      zIndex: 'layer-3',
+      width: 'full',
+      height: 'auto',
+      alignItems: 'center',
+      justifyContent: 'center',
+      top: 0,
+      insetX: 0,
+      transitionProperty: 'common',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'ease-in-out',
+      _hidden: {
+        transform: 'translateY(-100%)',
+      },
+    },
+    content: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: 'full',
+      height: 'var(--navbar-height)',
+      flexWrap: 'nowrap',
+    },
+    brand: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      height: 'full',
+      bg: 'transparent',
+      textDecoration: 'none',
+      color: 'inherit',
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+    },
+    item: {
+      bg: 'transparent',
+      color: 'currentColor',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textDecoration: 'none',
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      borderRadius: 'md',
+      transitionProperty: 'common',
+      transitionDuration: 'normal',
+      lineHeight: 1,
+      _focusVisible: {
+        outline: 'none',
+        boxShadow: 'outline',
+      },
+      _hover: {
+        bg: 'blackAlpha.100',
+        textDecoration: 'none',
+        _dark: {
+          bg: 'whiteAlpha.200',
+        },
+      },
+      _active: {
+        fontWeight: 'semibold',
+      },
+    },
+  },
+  variants: {
+    variant: {
+      neutral: {
+        root: {
+          bg: 'bg.panel',
+          color: 'fg',
+        },
+      },
+      solid: {
+        root: {
+          bg: 'colorPalette.500',
+          color: 'colorPalette.contrast',
+        },
+      },
+    },
+    size: {
+      md: {
+        root: {
+          fontSize: 'sm',
+        },
+        content: {
+          px: {
+            base: 4,
+            lg: 6,
+          },
+          gap: 4,
+        },
+        item: {
+          px: 3,
+          h: 8,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'neutral',
+    size: 'md',
+  },
+})