@kalink-ui/seedly 0.9.0 → 0.10.0

package/src/components/menu/menu-separator.css.ts

@@ -0,0 +1,53 @@
+import { createVar } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { mapContractVars, sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+const spaceVar = createVar();
+
+export const menuSeparator = recipe({
+  base: {
+    paddingBlock: spaceVar,
+    marginInline: sys.spacing[2],
+
+    position: 'relative',
+
+    '::after': {
+      content: '""',
+
+      height: '1px',
+      width: '100%',
+
+      position: 'absolute',
+      top: '50%',
+
+      backgroundColor: sys.color.foreground,
+
+      transform: 'translateY(-50%)',
+    },
+  },
+
+  variants: {
+    offset: {
+      true: {
+        marginInline: calc.negate(sys.spacing[2]),
+      },
+    },
+
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      '@layer': {
+        [components]: {
+          vars: {
+            [spaceVar]: sys.spacing[key],
+          },
+        },
+      },
+    })),
+  },
+});
+
+export type MenuSeparatorVariants = NonNullable<
+  RecipeVariants<typeof menuSeparator>
+>;

package/src/components/popover/index.ts

@@ -0,0 +1,3 @@
+export { Popover, PopoverTrigger } from './popover';
+export { PopoverContent } from './popover-content';
+export { popoverContent } from './popover-content.css';

package/src/components/popover/popover-content.css.ts

@@ -0,0 +1,107 @@
+import { createVar, keyframes } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+
+const translateX = createVar();
+const offsetX = createVar();
+const translateY = createVar();
+const offsetY = createVar();
+const scale = createVar();
+
+const enter = keyframes({
+  '100%': {
+    opacity: 1,
+    transform: `translateX(${offsetX}) translateY(${offsetY})`,
+    pointerEvents: 'auto',
+  },
+});
+
+const leave = keyframes({
+  '0%': {
+    opacity: 1,
+    transform: `translateX(${offsetX}) translateY(${offsetY})`,
+    pointerEvents: 'auto',
+  },
+});
+
+export const popoverContent = recipe({
+  base: {
+    padding: sys.spacing[1],
+
+    boxShadow: sys.elevation.high,
+
+    animationDuration: sys.motion.duration.short[2],
+    animationTimingFunction: sys.motion.easing.standard,
+    animationFillMode: 'forwards',
+
+    opacity: 0,
+    transform: `translate3d(${translateX}, ${translateY}, 0) scale3d(${scale}, ${scale}, ${scale})`,
+
+    selectors: {
+      '&[data-state="open"]': {
+        animationName: enter,
+      },
+
+      '&[data-state="closed"]': {
+        animationName: leave,
+      },
+
+      '&[data-side*="top"]': {
+        vars: {
+          [translateY]: sys.spacing[2],
+          [offsetY]: calc.negate(sys.spacing[1]),
+        },
+      },
+
+      '&[data-side*="right"]': {
+        vars: {
+          [translateX]: calc.negate(sys.spacing[1]),
+          [offsetX]: sys.spacing[2],
+        },
+      },
+
+      '&[data-side*="bottom"]': {
+        vars: {
+          [translateY]: calc.negate(sys.spacing[1]),
+          [offsetY]: sys.spacing[2],
+        },
+      },
+
+      '&[data-side*="left"]': {
+        vars: {
+          [translateX]: sys.spacing[3],
+          [offsetY]: calc.negate(sys.spacing[1]),
+        },
+      },
+    },
+
+    vars: {
+      [translateX]: '0',
+      [translateY]: '0',
+      [offsetX]: '0',
+      [offsetY]: '0',
+      [scale]: '0.98',
+      '--popover-trigger-width': 'var(--radix-popover-trigger-width)',
+    },
+  },
+
+  variants: {
+    width: {
+      trigger: {
+        minWidth: 'var(--popover-trigger-width)',
+      },
+    },
+
+    scrollable: {
+      true: {
+        overflow: 'hidden',
+      },
+    },
+  },
+});
+
+export type PopoverContentVariants = NonNullable<
+  RecipeVariants<typeof popoverContent>
+>;

package/src/components/popover/popover-content.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Portal, Content } from '@radix-ui/react-popover';
+import { clsx } from 'clsx';
+import {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ReactNode,
+} from 'react';
+
+import { Box, BoxProps } from '../box';
+import { ScrollArea } from '../scroll-area';
+
+import { popoverContent, PopoverContentVariants } from './popover-content.css';
+
+export type PopoverContentProps = {
+  portaled?: boolean;
+  maxHeight?: string;
+  scrollable?: boolean;
+} & ComponentPropsWithRef<typeof Content> &
+  PopoverContentVariants &
+  ComponentPropsWithoutRef<typeof Portal> &
+  BoxProps<'div'>;
+
+export interface PopoverScrollableProps {
+  scrollable?: boolean;
+  maxHeight?: string;
+  children?: ReactNode;
+}
+
+export function PopoverScrollable({
+  children,
+  scrollable = true,
+  maxHeight,
+}: PopoverScrollableProps) {
+  if (scrollable === false) {
+    return children;
+  }
+
+  return <ScrollArea maxHeight={maxHeight}>{children}</ScrollArea>;
+}
+
+export function PopoverContent({
+  className,
+  align = 'center',
+  container,
+  children,
+  spacing = 4,
+  radius = 'medium',
+  width,
+  portaled = true,
+  scrollable = true,
+  maxHeight = 'var(--radix-popover-content-available-height)',
+  ...props
+}: PopoverContentProps) {
+  const content = (
+    <Content
+      align={align}
+      className={clsx(popoverContent({ width, scrollable }), className)}
+      sideOffset={0}
+      asChild
+      collisionPadding={16}
+      {...props}
+    >
+      <Box spacing={spacing} radius={radius}>
+        <PopoverScrollable scrollable={scrollable} maxHeight={maxHeight}>
+          {children}
+        </PopoverScrollable>
+      </Box>
+    </Content>
+  );
+
+  return portaled === true ? (
+    <Portal container={container}>{content}</Portal>
+  ) : (
+    content
+  );
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { Root, Trigger } from '@radix-ui/react-popover';
+
+export const Popover = Root;
+export const PopoverTrigger = Trigger;

package/src/components/scroll-area/index.ts

@@ -0,0 +1 @@
+export { ScrollArea } from './scroll-area';

package/src/components/scroll-area/scroll-area.css.ts

@@ -0,0 +1,72 @@
+import { createVar, style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys, transition } from '../../styles';
+
+export const viewportMaxHeight = createVar();
+
+export const scrollArea = style({
+  overflow: 'hidden',
+  height: '100%',
+
+  position: 'relative',
+});
+
+export const scrollAreaViewport = style({
+  height: '100%',
+  maxHeight: viewportMaxHeight,
+  width: '100%',
+
+  borderRadius: 'inherit',
+
+  vars: {
+    [viewportMaxHeight]: 'initial',
+  },
+});
+
+export const scrollAreaScrollbar = recipe({
+  base: {
+    display: 'flex',
+
+    padding: 1,
+
+    transition: transition(['color', 'background-color', 'border-color'], {
+      duration: 'medium.2',
+    }),
+    userSelect: 'none',
+  },
+
+  variants: {
+    orientation: {
+      vertical: {
+        height: '100%',
+        width: 10,
+
+        borderInlineStartWidth: 1,
+        borderInlineStartColor: 'transparent',
+      },
+
+      horizontal: {
+        height: 10,
+        width: '100%',
+
+        borderBlockStartWidth: 1,
+        borderBlockStartColor: 'transparent',
+      },
+    },
+  },
+});
+
+export const scrollAreaThumb = style({
+  flexGrow: 1,
+
+  position: 'relative',
+
+  borderRadius: sys.shape.corner.small,
+
+  backgroundColor: sys.color.foreground,
+});
+
+export type ScrollAreaScrollbarVariants = NonNullable<
+  RecipeVariants<typeof scrollAreaScrollbar>
+>;

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Corner, Root, Viewport } from '@radix-ui/react-scroll-area';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { ComponentPropsWithRef } from 'react';
+
+import {
+  scrollArea,
+  scrollAreaViewport,
+  viewportMaxHeight,
+} from './scroll-area.css';
+import { ScrollBar } from './scroll-bar';
+
+export type ScrollAreaProps = ComponentPropsWithRef<typeof Root> & {
+  maxHeight?: string;
+};
+
+export function ScrollArea({
+  ref,
+  className,
+  children,
+  maxHeight = 'initial',
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <Root ref={ref} className={scrollArea} {...props}>
+      <Viewport
+        className={scrollAreaViewport}
+        style={assignInlineVars({
+          [viewportMaxHeight]: maxHeight,
+        })}
+      >
+        {children}
+      </Viewport>
+      <ScrollBar />
+      <Corner />
+    </Root>
+  );
+}

package/src/components/scroll-area/scroll-bar.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import {
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+} from '@radix-ui/react-scroll-area';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef } from 'react';
+
+import {
+  scrollAreaScrollbar,
+  ScrollAreaScrollbarVariants,
+  scrollAreaThumb,
+} from './scroll-area.css';
+
+export type ScrollAreaScrollbarProps = ComponentPropsWithRef<
+  typeof ScrollAreaScrollbar
+> &
+  ScrollAreaScrollbarVariants;
+
+export function ScrollBar({
+  ref,
+  className,
+  orientation = 'vertical',
+  ...props
+}: ScrollAreaScrollbarProps) {
+  return (
+    <ScrollAreaScrollbar
+      ref={ref}
+      orientation={orientation}
+      className={clsx(scrollAreaScrollbar({ orientation }), className)}
+      {...props}
+    >
+      <ScrollAreaThumb className={scrollAreaThumb} />
+    </ScrollAreaScrollbar>
+  );
+}

package/src/components/seed/seed.tsx

@@ -1,6 +1,6 @@
 import { type PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
-import { ComponentType, type ElementType } from 'react';
+import { type ElementType } from 'react';
 
 import {
   extractSprinklesProps,
@@ -19,10 +19,10 @@ export type SeedProps<
   TSprinklesFn extends SprinklesFnBase,
 > = PolymorphicComponentProps<TUse> & GetSprinkles<TSprinklesFn>;
 
-export type CreateSeedParams<SprinklesFn> = {
+export interface CreateSeedParams<SprinklesFn> {
   sprinkles: SprinklesFn;
   defaultClassName?: string;
-};
+}
 
 export function plantSeed<SprinklesFn extends SprinklesFnBase>({
   sprinkles,
@@ -57,7 +57,7 @@ export function withSeed<SprinklesFn extends SprinklesFnBase>({
   defaultClassName,
 }: CreateSeedParams<SprinklesFn>) {
   return function wrapWithSprinkles<TProps, TUse extends ElementType>(
-    WrappedComponent: ComponentType<PolymorphicComponentProps<TUse> & TProps>,
+    WrappedComponent: ElementType<PolymorphicComponentProps<TUse> & TProps>,
   ) {
     const ComponentWithSeed = (
       props: SeedProps<TUse, SprinklesFn> & TProps,

package/src/components/select/index.ts

@@ -0,0 +1,5 @@
+export { SelectContent } from './select-content';
+export { Select } from './select';
+export { SelectItem } from './select-item';
+export { SelectRoot } from './select-root';
+export { SelectTrigger } from './select-trigger';

package/src/components/select/select-content.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const selectContent = style({
+  '@layer': {
+    [components]: {
+      backgroundColor: sys.color.background,
+    },
+  },
+});
+
+export const selectContentViewport = style({
+  '@layer': {
+    [components]: {
+      height: 'auto',
+      maxHeight: 'var(--radix-select-content-available-height)',
+      minWidth: 'var(--radix-select-trigger-width)',
+    },
+  },
+});

package/src/components/select/select-content.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Portal, Content, Viewport } from '@radix-ui/react-select';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { popoverContent } from '../popover';
+import { ScrollArea } from '../scroll-area';
+
+import { SelectProps } from './select';
+import { selectContent, selectContentViewport } from './select-content.css';
+
+export type SelectContentProps = ComponentPropsWithRef<typeof Content> & {
+  container?: SelectProps['container'];
+};
+
+export interface SelectContentPortalProps {
+  children: ReactNode;
+  container?: SelectProps['container'];
+}
+
+const SelectContentPortal = ({
+  children,
+  container,
+}: SelectContentPortalProps) => {
+  if (container === false) {
+    return children;
+  }
+
+  return <Portal container={container}>{children}</Portal>;
+};
+
+export function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  container,
+  ...props
+}: SelectContentProps) {
+  return (
+    <SelectContentPortal container={container}>
+      <Content position={position} asChild {...props}>
+        <div className={clsx(selectContent, popoverContent())}>
+          <Viewport className={selectContentViewport}>
+            <ScrollArea maxHeight="16rem">{children}</ScrollArea>
+          </Viewport>
+        </div>
+      </Content>
+    </SelectContentPortal>
+  );
+}

package/src/components/select/select-item.css.ts

@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const selectItemIndicator = style({
+  '@layer': {
+    [components]: {
+      position: 'absolute',
+      top: '50%',
+      insetInlineStart: sys.spacing[2],
+
+      transform: 'translateY(-50%) translateX(-50%)',
+
+      '::before': {
+        content: '\u2022',
+
+        display: 'inline-block',
+
+        fontSize: '1em',
+      },
+    },
+  },
+});

package/src/components/select/select-item.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Item, ItemIndicator, ItemText } from '@radix-ui/react-select';
+import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import { menuItem } from '../menu';
+
+import { selectItemIndicator } from './select-item.css';
+
+export type SelectItemProps = ComponentPropsWithoutRef<typeof Item> & {
+  indicator?: ReactNode;
+};
+
+export function SelectItem({ children, indicator, ...props }: SelectItemProps) {
+  return (
+    <Item className={clsx(menuItem({ inset: true }))} {...props}>
+      <ItemIndicator asChild>
+        {indicator || <div className={selectItemIndicator} />}
+      </ItemIndicator>
+      <ItemText>{children}</ItemText>
+    </Item>
+  );
+}

package/src/components/select/select-root.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { Root } from '@radix-ui/react-select';
+import { ComponentPropsWithRef } from 'react';
+
+import { useFormFieldContext } from '../form-field';
+
+export type SelectRootProps = ComponentPropsWithRef<typeof Root>;
+
+export function SelectRoot(props: SelectRootProps) {
+  const { name } = useFormFieldContext();
+
+  return <Root name={name} {...props} />;
+}

package/src/components/select/select-trigger.css.ts

@@ -0,0 +1,75 @@
+import { style } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { sys, transition } from '../../styles';
+import { components } from '../../styles/layers.css';
+import { inputAppearance } from '../input/input.css';
+
+export const selectTrigger = style([
+  inputAppearance(),
+  {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        alignItems: 'stretch',
+        gap: sys.spacing[4],
+        justifyContent: 'flex-start',
+
+        ':before': {
+          content: '\x00',
+          width: 0,
+          overflow: 'hidden',
+          marginInlineEnd: calc.negate(sys.spacing[4]),
+        },
+      },
+    },
+  },
+]);
+
+export const openIndicator = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        aspectRatio: '1 / 1',
+        marginInlineStart: 'auto',
+
+        transition: transition(['transform'], {
+          duration: 'short.2',
+          easing: 'standard',
+        }),
+
+        selectors: {
+          '[data-state="open"] &': {
+            transform: 'rotate(180deg)',
+          },
+        },
+      },
+    },
+  },
+
+  variants: {
+    fallback: {
+      true: {
+        '@layer': {
+          [components]: {
+            '::after': {
+              content: '""',
+              display: 'block',
+
+              height: 12,
+              width: 12,
+
+              borderTop: `2px solid currentcolor`,
+              borderRight: `2px solid currentcolor`,
+              transform: 'rotate(135deg) translateX(-25%) translateY(25%)',
+            },
+          },
+        },
+      },
+    },
+  },
+});