@kalink-ui/seedly 0.8.1 → 0.10.0

package/src/components/heading/heading.css.ts

@@ -1,5 +1,52 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-export const headingRecipe = recipe({});
+import { mapContractVars, sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
-export type HeadingVariants = NonNullable<RecipeVariants<typeof headingRecipe>>;
+export const headingRoot = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  variants: {
+    align: {
+      start: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-start',
+            textAlign: 'start',
+          },
+        },
+      },
+      center: {
+        '@layer': {
+          [components]: {
+            alignItems: 'center',
+            textAlign: 'center',
+          },
+        },
+      },
+      end: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-end',
+            textAlign: 'end',
+          },
+        },
+      },
+    },
+
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
+    })),
+  },
+});
+
+export type HeadingRootVariants = NonNullable<
+  RecipeVariants<typeof headingRoot>
+>;

package/src/components/heading/heading.tsx

@@ -1,83 +1,137 @@
-import { getProp, PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
+import { ElementType, ReactElement, ReactNode } from 'react';
 
-import {
-  typography,
-  Spacing,
-  TypographySize,
-  TypographyVariant,
-} from '../../styles';
+import { Spacing, TypographySize, TypographyVariant } from '../../styles';
 import { ConditionalWrapper } from '../conditional-wrapper';
-import { Stack } from '../stack';
-
-import { headingRecipe } from './heading.css';
-
-type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-type HeadingProps<TUse extends HeadingTypes> =
-  PolymorphicComponentProps<TUse> & {
-    /**
-     * The size of the typography used to render the text.
-     */
-    size?: TypographySize;
-
-    /**
-     * The typography used to render the text.
-     */
-    variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
-
-    /**
-     * The text to render.
-     */
-    children: string;
-
-    /**
-     * If provided, the text will be rendered before the title.
-     */
-    pretitle?: string;
-
-    /**
-     * If provided, the text will be rendered after the title.
-     */
-    subtitle?: string;
-
-    /**
-     * The spacing between the title and the pretitle or subtitle.
-     */
-    spacing?: Spacing;
-  };
-
-export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
-  const {
-    children,
-    className,
-    size = 'medium',
-    use: Comp = 'h1',
-    variant,
-    pretitle,
-    subtitle,
-    spacing,
-    ...rest
-  } = props;
+import { Text, TextProps } from '../text';
 
+import { headingRoot } from './heading.css';
+
+export type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type HeadingProps<TUse extends ElementType = 'h2'> = Omit<
+  TextProps<TUse>,
+  'variant' | 'children' | 'align'
+> & {
+  align?: Extract<
+    Pick<TextProps<TUse>, 'align'>['align'],
+    'start' | 'center' | 'end'
+  >;
+  /**
+   * The typography used to render the text.
+   */
+  variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
+
+  /**
+   * If provided, the text will be rendered before the title.
+   */
+  pretitle?: ReactElement<TextProps<'p'>>;
+
+  /**
+   * If provided, the text will be rendered after the title.
+   */
+  subtitle?: ReactElement<TextProps<'p'>>;
+
+  /**
+   * The spacing between the title and the pretitle or subtitle.
+   */
+  spacing?: Spacing;
+
+  /**
+   * The text to render.
+   */
+  children: ReactNode;
+
+  /**
+   * The class to pass to the root element.
+   */
+  rootClassName?: string;
+};
+
+const headingMapping: Record<
+  HeadingTypes,
+  { variant: TypographyVariant; size: TypographySize }
+> = {
+  h1: { variant: 'display', size: 'large' },
+  h2: { variant: 'display', size: 'medium' },
+  h3: { variant: 'display', size: 'small' },
+  h4: { variant: 'headline', size: 'large' },
+  h5: { variant: 'headline', size: 'medium' },
+  h6: { variant: 'headline', size: 'small' },
+};
+
+export function Heading<TUse extends HeadingTypes>({
+  children,
+  use = 'h2',
+  size,
+  variant,
+  align,
+  spacing,
+  pretitle,
+  subtitle,
+  rootClassName,
+  ref,
+  ...rest
+}: HeadingProps<TUse>) {
   return (
     <ConditionalWrapper
-      use={Stack}
-      spacing={spacing}
+      ref={ref}
+      use={'hgroup'}
       condition={!!pretitle || !!subtitle}
+      className={clsx(headingRoot({ align, spacing }), rootClassName)}
     >
-      {pretitle && <span>{pretitle}</span>}
-      <Comp
-        className={clsx(
-          headingRecipe(),
-          getProp(typography, `${variant}.${size}`),
-          className,
-        )}
+      {pretitle}
+
+      <Text
+        {...(!pretitle && !subtitle && { ref })}
+        use={use}
+        align={align}
+        variant={variant ?? headingMapping[use].variant}
+        size={size ?? headingMapping[use].size}
         {...rest}
       >
         {children}
-      </Comp>
-      {subtitle && <span>{subtitle}</span>}
+      </Text>
+
+      {subtitle}
     </ConditionalWrapper>
   );
 }
+
+type HeadingPretitleProps = Omit<TextProps<'p'>, 'children'> & {
+  children?: string | null;
+};
+
+Heading.Pretitle = function HeadingPretitle({
+  variant = 'title',
+  size = 'medium',
+  children,
+  ...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
+}: HeadingSubtitleProps) {
+  return (
+    children && (
+      <Text use="p" variant={variant} size={size} {...rest}>
+        {children}
+      </Text>
+    )
+  );
+};

package/src/components/heading/index.ts

@@ -1 +1,2 @@
-export { Heading } from './heading';
+export { Heading, type HeadingTypes, type HeadingProps } from './heading';
+export { headingRoot, type HeadingRootVariants } from './heading.css';

package/src/components/index.ts

@@ -1,14 +1,27 @@
-export { Box } from './box';
-export { Button } from './button';
-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 } 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 './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 './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';