@kalink-ui/seedly 0.9.0 → 0.11.0

package/src/components/frame/frame.css.ts

@@ -3,7 +3,7 @@ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { components } from '../../styles/layers.css';
 
-const ratioVar = createVar();
+export const frameRatioVar = createVar();
 
 const baseFrame = style({
   '@layer': {
@@ -14,7 +14,7 @@ const baseFrame = style({
 
       overflow: 'hidden',
 
-      aspectRatio: ratioVar,
+      aspectRatio: frameRatioVar,
     },
   },
 });
@@ -31,7 +31,7 @@ export const frameRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [ratioVar]: '1 / 1',
+              [frameRatioVar]: '1 / 1',
             },
           },
         },
@@ -40,7 +40,7 @@ export const frameRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [ratioVar]: '3 / 2',
+              [frameRatioVar]: '3 / 2',
             },
           },
         },
@@ -49,7 +49,7 @@ export const frameRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [ratioVar]: '2 / 3',
+              [frameRatioVar]: '2 / 3',
             },
           },
         },
@@ -58,7 +58,7 @@ export const frameRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [ratioVar]: '4 / 3',
+              [frameRatioVar]: '4 / 3',
             },
           },
         },
@@ -67,7 +67,7 @@ export const frameRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [ratioVar]: '16 / 9',
+              [frameRatioVar]: '16 / 9',
             },
           },
         },
@@ -76,7 +76,7 @@ export const frameRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [ratioVar]: '9 / 16',
+              [frameRatioVar]: '9 / 16',
             },
           },
         },

package/src/components/frame/frame.tsx

@@ -12,12 +12,8 @@ type FrameProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
  *
  * https://every-layout.dev/layouts/frame
  */
-export function Frame<TUse extends ElementType>({
-  ratio,
-  className,
-  ...props
-}: FrameProps<TUse>) {
-  const { use: Comp = 'div', ...rest } = props;
+export function Frame<TUse extends ElementType>(props: FrameProps<TUse>) {
+  const { use: Comp = 'div', className, ratio, ...rest } = props;
 
   return <Comp className={clsx(frameRecipe({ ratio }), className)} {...rest} />;
 }

package/src/components/frame/index.ts

@@ -1,2 +1,2 @@
 export { Frame } from './frame';
-export { frameRecipe, type FrameVariants } from './frame.css';
+export { frameRecipe, frameRatioVar, type FrameVariants } from './frame.css';

package/src/components/heading/heading.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { ElementType, ReactElement } from 'react';
+import { ElementType, ReactElement, ReactNode } from 'react';
 
 import { Spacing, TypographySize, TypographyVariant } from '../../styles';
 import { ConditionalWrapper } from '../conditional-wrapper';
@@ -11,8 +11,12 @@ export type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 export type HeadingProps<TUse extends ElementType = 'h2'> = Omit<
   TextProps<TUse>,
-  'variant' | 'children'
+  'variant' | 'children' | 'align'
 > & {
+  align?: Extract<
+    Pick<TextProps<TUse>, 'align'>['align'],
+    'start' | 'center' | 'end'
+  >;
   /**
    * The typography used to render the text.
    */
@@ -36,7 +40,12 @@ export type HeadingProps<TUse extends ElementType = 'h2'> = Omit<
   /**
    * The text to render.
    */
-  children: string;
+  children: ReactNode;
+
+  /**
+   * The class to pass to the root element.
+   */
+  rootClassName?: string;
 };
 
 const headingMapping: Record<
@@ -60,17 +69,21 @@ export function Heading<TUse extends HeadingTypes>({
   spacing,
   pretitle,
   subtitle,
+  rootClassName,
+  ref,
   ...rest
 }: HeadingProps<TUse>) {
   return (
     <ConditionalWrapper
+      ref={ref}
       use={'hgroup'}
       condition={!!pretitle || !!subtitle}
-      className={clsx(headingRoot({ align, spacing }))}
+      className={clsx(headingRoot({ align, spacing }), rootClassName)}
     >
       {pretitle}
 
       <Text
+        {...(!pretitle && !subtitle && { ref })}
         use={use}
         align={align}
         variant={variant ?? headingMapping[use].variant}
@@ -85,18 +98,40 @@ export function Heading<TUse extends HeadingTypes>({
   );
 }
 
+type HeadingPretitleProps = Omit<TextProps<'p'>, 'children'> & {
+  children?: string | null;
+};
+
 Heading.Pretitle = function HeadingPretitle({
   variant = 'title',
   size = 'medium',
+  children,
   ...rest
-}: TextProps<'p'>) {
-  return <Text use="p" variant={variant} size={size} {...rest} />;
+}: HeadingPretitleProps) {
+  return (
+    children && (
+      <Text use="p" variant={variant} size={size} {...rest}>
+        {children}
+      </Text>
+    )
+  );
+};
+
+type HeadingSubtitleProps = Omit<TextProps<'p'>, 'children'> & {
+  children?: string | null;
 };
 
 Heading.Subtitle = function HeadingSubtitle({
   variant = 'title',
   size = 'medium',
+  children,
   ...rest
-}: TextProps<'p'>) {
-  return <Text use="p" variant={variant} size={size} {...rest} />;
+}: HeadingSubtitleProps) {
+  return (
+    children && (
+      <Text use="p" variant={variant} size={size} {...rest}>
+        {children}
+      </Text>
+    )
+  );
 };

package/src/components/index.ts

@@ -1,15 +1,29 @@
-export { Box } from './box';
-export { Button } from './button';
-export { Card } from './card';
-export { Center } from './center';
-export { Cluster } from './cluster';
-export { ConditionalWrapper } from './conditional-wrapper';
-export { Cover } from './cover';
-export { Frame } from './frame';
-export { Grid } from './grid';
-export { Heading } from './heading';
-export { plantSeed, withSeed } from './seed';
-export { Sidebar } from './sidebar';
-export { Stack } from './stack';
-export { Switcher } from './switcher';
-export { Text } from './text';
+export * from './box';
+export * from './button';
+export * from './button-icon';
+export * from './card';
+export * from './center';
+export * from './cluster';
+export * from './command';
+export * from './conditional-wrapper';
+export * from './cover';
+export * from './divider';
+export * from './form-field';
+export * from './frame';
+export * from './grid';
+export * from './heading';
+export * from './input';
+export * from './label';
+export * from './loader';
+export * from './loader-overlay';
+export * from './popover';
+export * from './scroll-area';
+export * from './seed';
+export * from './select';
+export * from './sheet';
+export * from './sidebar';
+export * from './stack';
+export * from './switcher';
+export * from './text';
+export * from './text-field';
+export * from './textarea';

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export { Input, type InputProps } from './input';
+export { inputAppearance, type InputAppearanceVariants } from './input.css';

package/src/components/input/input-wrapper.tsx

@@ -0,0 +1,58 @@
+import { clsx } from 'clsx';
+import {
+  ComponentPropsWithRef,
+  ForwardedRef,
+  MouseEventHandler,
+  ReactNode,
+  RefObject,
+  useCallback,
+} from 'react';
+
+import {
+  inputAppearance,
+  InputAppearanceVariants,
+  inputWrapper,
+} from './input.css';
+
+export type InputWrapperProps = ComponentPropsWithRef<'div'> & {
+  children: ReactNode;
+  className?: string;
+  inputRef: RefObject<HTMLInputElement | null>;
+  disabled?: boolean;
+} & InputAppearanceVariants;
+
+export function InputWrapper({
+  children,
+  className,
+  inputRef,
+  disabled,
+  variant = 'outlined',
+  size = 'md',
+  ref,
+}: InputWrapperProps) {
+  const handleInputFocus = useCallback<MouseEventHandler<HTMLElement>>(
+    (e) => {
+      if (disabled || !inputRef?.current || e.target === inputRef.current) {
+        return;
+      }
+
+      inputRef.current.click();
+      inputRef.current.focus();
+    },
+    [inputRef, disabled],
+  );
+
+  return (
+    <div
+      ref={ref as ForwardedRef<HTMLDivElement>}
+      className={clsx(
+        inputAppearance({ variant, size }),
+        inputWrapper,
+        className,
+      )}
+      onClick={handleInputFocus}
+    >
+      {children}
+    </div>
+  );
+}

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