@kalink-ui/seedly 0.9.0 → 0.11.0

package/src/components/loader/loader.css.ts

@@ -0,0 +1,109 @@
+import { createVar, keyframes, style } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys, transition } from '../../styles';
+
+export const loader = recipe({
+  variants: {
+    active: {
+      true: {
+        opacity: 1,
+        visibility: 'visible',
+
+        animationPlayState: 'running',
+      },
+      false: {
+        opacity: 0,
+        visibility: 'hidden',
+
+        animationPlayState: 'paused',
+      },
+    },
+  },
+});
+
+const size = createVar();
+const moonSize = createVar();
+
+const loaderAnimation = keyframes({
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const loaderWrapper = recipe({
+  base: {
+    overflow: 'hidden',
+    width: size,
+    height: size,
+
+    animationName: loaderAnimation,
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    animationFillMode: 'forwards',
+
+    transition: transition(['opacity', 'visibility']),
+    pointerEvents: 'none',
+
+    vars: {
+      [moonSize]: calc.divide(size, 7),
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        vars: {
+          [size]: sys.spacing[4],
+        },
+      },
+      md: {
+        vars: {
+          [size]: sys.spacing[5],
+        },
+      },
+      lg: {
+        vars: {
+          [size]: sys.spacing[6],
+        },
+      },
+    },
+  },
+});
+
+export const ellipse = style({
+  width: size,
+  height: size,
+
+  position: 'absolute',
+  insetBlockStart: 0,
+  insetInlineStart: 0,
+
+  borderRadius: '100%',
+  borderWidth: moonSize,
+  borderStyle: 'solid',
+  borderColor: `color-mix(in srgb, ${sys.color.foreground} 30%, transparent)`,
+});
+
+export const moon = style({
+  width: moonSize,
+  height: moonSize,
+
+  position: 'absolute',
+  insetBlockStart: calc.subtract(
+    calc.divide(size, 2),
+    calc.divide(moonSize, 2),
+  ),
+  insetInlineStart: 0,
+
+  backgroundColor: sys.color.foreground,
+
+  borderRadius: '100%',
+});
+
+export type LoaderVariants = NonNullable<RecipeVariants<typeof loader>>;
+export type MoonLoaderVariants = NonNullable<
+  RecipeVariants<typeof loaderWrapper>
+>;

package/src/components/loader/moon-loader.tsx

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { Box, BoxProps } from '../box';
+
+import {
+  ellipse,
+  moon,
+  loaderWrapper,
+  loader,
+  LoaderVariants,
+  MoonLoaderVariants,
+} from './loader.css';
+
+export type LoaderProps<TUse extends ElementType> = BoxProps<TUse> & {
+  forceMount?: boolean;
+  className?: string;
+} & LoaderVariants;
+
+/**
+ * Heavily inspired by https://github.com/davidhu2000/react-spinners/blob/main/src/MoonLoader.tsx
+ */
+export function MoonLoader<TUse extends ElementType>({
+  active,
+  size = 'md',
+  forceMount = false,
+  className,
+  ...props
+}: LoaderProps<TUse> & MoonLoaderVariants) {
+  if (!active && !forceMount) {
+    return null;
+  }
+
+  return (
+    <Box
+      className={clsx(loaderWrapper({ size }), loader({ active }), className)}
+      {...props}
+    >
+      <span className={ellipse} />
+      <span className={moon} />
+    </Box>
+  );
+}

package/src/components/loader-overlay/index.ts

@@ -0,0 +1 @@
+export { LoaderOverlay } from './loader-overlay';

package/src/components/loader-overlay/loader-overlay.css.ts

@@ -0,0 +1,35 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+
+export const loaderOverlay = recipe({
+  base: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    height: '100%',
+    width: '100%',
+
+    zIndex: 1000,
+
+    backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+  },
+
+  variants: {
+    position: {
+      absolute: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+      },
+      relative: {
+        position: 'relative',
+      },
+    },
+  },
+});
+
+export type LoaderOverlayVariants = NonNullable<
+  RecipeVariants<typeof loaderOverlay>
+>;

package/src/components/loader-overlay/loader-overlay.tsx

@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+
+import { Center } from '../center';
+import { MoonLoader } from '../loader';
+import { Stack } from '../stack';
+import { Text } from '../text';
+
+import { loaderOverlay, LoaderOverlayVariants } from './loader-overlay.css';
+
+interface LoaderOverlayProps extends LoaderOverlayVariants {
+  text?: string;
+  className?: string;
+}
+
+export function LoaderOverlay({
+  className,
+  text,
+  position,
+}: LoaderOverlayProps) {
+  return (
+    <div className={clsx(loaderOverlay({ position }), className)}>
+      <Stack use={Center}>
+        <MoonLoader active forceMount />
+        {text && <Text>{text}</Text>}
+      </Stack>
+    </div>
+  );
+}

package/src/components/menu/index.ts

@@ -0,0 +1,2 @@
+export { menuItem, menuItemIcon } from './menu-item.css';
+export { menuSeparator } from './menu-separator.css';

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

@@ -0,0 +1,79 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys, typography } from '../../styles';
+
+export const menuItem = recipe({
+  base: [
+    typography.body.medium,
+    {
+      display: 'flex',
+      alignItems: 'center',
+      gap: sys.spacing[2],
+
+      paddingInline: sys.spacing[2],
+      paddingBlock: sys.spacing[1],
+      width: '100%',
+
+      position: 'relative',
+
+      textAlign: 'start',
+
+      borderRadius: sys.shape.corner.small,
+
+      cursor: 'pointer',
+      userSelect: 'none',
+
+      selectors: {
+        '&[data-disabled="true"], &[aria-disabled="true"]': {
+          pointerEvents: 'none',
+          opacity: 0.5,
+        },
+
+        '&:before': {
+          content: '""',
+
+          width: '100%',
+          height: '100%',
+
+          position: 'absolute',
+          top: 0,
+          left: 0,
+
+          backgroundColor: sys.color.foreground,
+          opacity: 0,
+          borderRadius: 'inherit',
+
+          pointerEvents: 'none',
+        },
+
+        '&:hover::before': {
+          opacity: sys.state.hovered.opacity,
+        },
+
+        '&:is(:focus, :focus-visible, [aria-selected="true"])': {
+          outline: 'none',
+        },
+
+        '&:focus::before, &:focus-visible::before, &[aria-selected="true"]::before':
+          {
+            opacity: sys.state.focused.opacity,
+          },
+      },
+    },
+  ],
+
+  variants: {
+    inset: {
+      true: {
+        paddingInlineStart: sys.spacing[4],
+      },
+    },
+  },
+});
+
+export const menuItemIcon = style({
+  color: sys.color.foreground,
+});
+
+export type MenuItemVariants = NonNullable<RecipeVariants<typeof menuItem>>;

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 { mapContractVars, 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: {
+    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',
+      },
+    },
+
+    elevation: mapContractVars(sys.elevation, (key) => ({
+      boxShadow: sys.elevation[key],
+    })),
+  },
+});
+
+export type PopoverContentVariants = NonNullable<
+  RecipeVariants<typeof popoverContent>
+>;

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

@@ -0,0 +1,82 @@
+'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)',
+  elevation,
+  ...props
+}: PopoverContentProps) {
+  const content = (
+    <Content
+      align={align}
+      className={clsx(
+        popoverContent({ width, scrollable, elevation }),
+        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>
+  );
+}