@kalink-ui/seedly 0.9.0 → 0.10.0

package/src/components/input/input.css.ts

@@ -0,0 +1,250 @@
+import { style, globalStyle, createGlobalTheme } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys, transition, typography } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const inputVars = createGlobalTheme(':root', {
+  '@layer': components,
+
+  color: {
+    foreground: 'inherit',
+    background: sys.color.background,
+    outline: sys.color.foreground,
+    error: 'red',
+  },
+
+  spacing: {
+    block: sys.spacing[2],
+    inline: sys.spacing[4],
+  },
+
+  shape: {
+    corner: sys.shape.corner.none,
+  },
+});
+
+export const inputAppearance = recipe({
+  base: [
+    {
+      '@layer': {
+        [components]: {
+          boxSizing: 'border-box',
+          position: 'relative',
+
+          color: inputVars.color.foreground,
+
+          backgroundColor: 'transparent',
+          borderRadius: inputVars.shape.corner,
+
+          cursor: 'inherit',
+
+          transition: transition(
+            ['background-color', 'border-color', 'box-shadow'],
+            {
+              duration: 'short.2',
+            },
+          ),
+
+          selectors: {
+            '&:disabled, &:has(:disabled)': {
+              backgroundColor: `color-mix(in srgb, ${inputVars.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
+
+              vars: {
+                [inputVars.color.foreground]:
+                  `color(from ${sys.color.foreground} srgb r g b / 0.38)`,
+              },
+            },
+
+            '&:focus, &:focus-within, &:focus-visible': {
+              boxShadow: `0 0 0 1px ${inputVars.color.outline} inset`,
+              outline: 'none',
+            },
+
+            '&[aria-invalid], &:has([aria-invalid])': {
+              vars: {
+                [inputVars.color.foreground]: 'red',
+              },
+            },
+          },
+
+          vars: {
+            [inputVars.color.foreground]: sys.color.foreground,
+            [inputVars.color.background]: sys.color.background,
+            [inputVars.color.outline]: inputVars.color.foreground,
+            [inputVars.spacing.block]: sys.spacing[2],
+            [inputVars.spacing.inline]: sys.spacing[4],
+          },
+        },
+      },
+    },
+  ],
+
+  variants: {
+    variant: {
+      outlined: {
+        '@layer': {
+          [components]: {
+            paddingInline: inputVars.spacing.inline,
+            paddingBlock: inputVars.spacing.block,
+
+            borderColor: inputVars.color.outline,
+            borderStyle: 'solid',
+            borderWidth: 1,
+          },
+        },
+      },
+
+      plain: {
+        '@layer': {
+          [components]: {
+            paddingInline: inputVars.spacing.inline,
+            paddingBlock: inputVars.spacing.block,
+
+            backgroundColor: inputVars.color.background,
+            borderRadius: inputVars.shape.corner,
+
+            vars: {
+              [inputVars.color.background]:
+                `color-mix(in srgb, ${inputVars.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
+            },
+          },
+        },
+      },
+
+      bare: {},
+    },
+
+    size: {
+      sm: [
+        typography.body.small,
+        {
+          '@layer': {
+            [components]: {
+              /**
+               * Force the font size to 16px to avoid zooming on mobile
+               */
+              fontSize: `max(16px, ${sys.typography.body.small.size})`,
+
+              vars: {
+                [inputVars.spacing.block]: sys.spacing[1],
+                [inputVars.spacing.inline]: sys.spacing[1],
+              },
+            },
+          },
+        },
+      ],
+
+      md: [
+        typography.body.medium,
+        {
+          '@layer': {
+            [components]: {
+              /**
+               * Force the font size to 16px to avoid zooming on mobile
+               */
+              fontSize: `max(16px, ${sys.typography.body.medium.size})`,
+
+              vars: {
+                [inputVars.spacing.block]: sys.spacing[2],
+                [inputVars.spacing.inline]: sys.spacing[2],
+              },
+            },
+          },
+        },
+      ],
+
+      lg: [
+        typography.body.large,
+        {
+          '@layer': {
+            [components]: {
+              /**
+               * Force the font size to 16px to avoid zooming on mobile
+               */
+              fontSize: `max(16px, ${sys.typography.body.large.size})`,
+
+              vars: {
+                [inputVars.spacing.block]: sys.spacing[3],
+                [inputVars.spacing.inline]: sys.spacing[3],
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+
+  defaultVariants: {
+    variant: 'outlined',
+    size: 'md',
+  },
+});
+
+export const inputWrapper = style({
+  '@layer': {
+    [components]: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: inputVars.spacing.inline,
+
+      width: '100%',
+
+      position: 'relative',
+
+      cursor: 'text',
+
+      selectors: {
+        '&:disabled, &:has(:disabled)': {
+          cursor: 'inherit',
+        },
+      },
+    },
+  },
+});
+
+export const input = style({
+  '@layer': {
+    [components]: {
+      appearance: 'none',
+
+      flexGrow: 1,
+      flexBasis: 1,
+
+      paddingTop: 0,
+      paddingBottom: 0,
+
+      color: 'inherit',
+
+      border: 'none',
+      backgroundColor: 'transparent',
+      cursor: 'inherit',
+    },
+  },
+});
+
+export const inputAddornment = style({
+  '@layer': {
+    [components]: {
+      flexShrink: 0,
+
+      color: 'inherit',
+    },
+  },
+});
+
+globalStyle(
+  `${inputAppearance.classNames.base} input:is(:focus, :focus-visible)`,
+  {
+    '@layer': {
+      [components]: {
+        outline: 'none',
+      },
+    },
+  },
+);
+
+export type InputAppearanceVariants = NonNullable<
+  RecipeVariants<typeof inputAppearance>
+>;

package/src/components/input/input.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { mergeRefs } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef, ReactNode, RefObject, useRef } from 'react';
+
+import { useFormFieldContext } from '../form-field/form-field-context';
+
+import { InputWrapper } from './input-wrapper';
+import { InputAppearanceVariants, input, inputAddornment } from './input.css';
+
+export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  inputRef?: RefObject<HTMLInputElement>;
+} & InputAppearanceVariants;
+
+export function Input({
+  className,
+  type = 'text',
+  startAdornment,
+  endAdornment,
+  disabled,
+  inputRef,
+  children,
+  variant,
+  size,
+  ref,
+  ...props
+}: InputProps) {
+  const innerRef = useRef<HTMLInputElement>(null);
+  const { errors } = useFormFieldContext();
+
+  return (
+    <InputWrapper
+      ref={ref}
+      inputRef={innerRef}
+      disabled={disabled}
+      variant={variant}
+      size={size}
+    >
+      {startAdornment && (
+        <div className={inputAddornment}>{startAdornment}</div>
+      )}
+      <input
+        ref={mergeRefs([inputRef, innerRef])}
+        type={type}
+        className={clsx(input, className)}
+        disabled={disabled}
+        aria-invalid={errors ? 'true' : undefined}
+        {...props}
+      />
+      {endAdornment && <div className={inputAddornment}>{endAdornment}</div>}
+    </InputWrapper>
+  );
+}

package/src/components/label/index.ts

@@ -0,0 +1 @@
+export { Label, type LabelProps } from './label';

package/src/components/label/label.css.ts

@@ -0,0 +1,37 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { typography } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const label = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        cursor: 'default',
+      },
+    },
+  },
+
+  variants: {
+    disabled: {
+      true: {
+        '@layer': {
+          [components]: {
+            cursor: 'not-allowed',
+          },
+        },
+      },
+    },
+    error: {
+      true: {},
+    },
+
+    size: {
+      sm: [typography.label.small],
+      md: [typography.label.medium],
+      lg: [typography.label.large],
+    },
+  },
+});
+
+export type LabelVariants = NonNullable<RecipeVariants<typeof label>>;

package/src/components/label/label.tsx

@@ -0,0 +1,23 @@
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef } from 'react';
+
+import { label, LabelVariants } from './label.css';
+
+export type LabelProps = ComponentPropsWithRef<'label'> & {
+  required?: boolean;
+} & LabelVariants;
+
+export function Label({
+  className,
+  disabled,
+  error,
+  size = 'md',
+  ...props
+}: LabelProps) {
+  return (
+    <label
+      className={clsx(label({ disabled, error, size }), className)}
+      {...props}
+    />
+  );
+}

package/src/components/loader/index.ts

@@ -0,0 +1 @@
+export { MoonLoader } from './moon-loader';

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>>;