@kalink-ui/seedly 0.9.0 → 0.10.0

package/src/components/form-field/form-field-error.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useFormFieldContext } from './form-field-context';
+import { useFormFieldItemContext } from './form-field-item-context';
+import { FormFieldMessage, FormFieldMessageProps } from './form-field-message';
+
+export type FormFieldErrorProps = Omit<FormFieldMessageProps, 'id'>;
+
+export function FormFieldError(props: FormFieldErrorProps) {
+  const { errors, hideErrorMessage } = useFormFieldContext();
+  const { id } = useFormFieldItemContext();
+
+  if (!errors || hideErrorMessage) {
+    return null;
+  }
+
+  return (
+    <FormFieldMessage id={`${id}-error`} error {...props}>
+      {errors}
+    </FormFieldMessage>
+  );
+}

package/src/components/form-field/form-field-item-context.ts

@@ -0,0 +1,6 @@
+'use client';
+
+import { createRequiredContext } from '@kalink-ui/dibbly';
+
+export const [useFormFieldItemContext, FormFieldItemContextProvider] =
+  createRequiredContext<{ id: string }>();

package/src/components/form-field/form-field-item.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { ElementType, useId } from 'react';
+
+import { useFormFieldContext } from './form-field-context';
+import { FormFieldItemContextProvider } from './form-field-item-context';
+import { formFieldStyle } from './form-field.css';
+
+export type FormFieldItemProps<TUse extends ElementType = 'div'> =
+  PolymorphicComponentProps<TUse>;
+
+export function FormFieldItem<TUse extends ElementType = 'div'>(
+  props: FormFieldItemProps<TUse>,
+) {
+  const id = useId();
+  const { errors, disabled } = useFormFieldContext();
+
+  const { use: Comp = 'div', className, children, ...rest } = props;
+
+  return (
+    <FormFieldItemContextProvider value={{ id }}>
+      <Comp className={formFieldStyle({ error: !!errors, disabled })} {...rest}>
+        {children}
+      </Comp>
+    </FormFieldItemContextProvider>
+  );
+}

package/src/components/form-field/form-field-label.tsx

@@ -0,0 +1,27 @@
+import { clsx } from 'clsx';
+
+import { visuallyHidden } from '../../styles';
+import { Label, LabelProps } from '../label';
+
+import { useFormFieldContext } from './form-field-context';
+import { useFormFieldItemContext } from './form-field-item-context';
+
+export function FormFieldLabel({
+  className,
+  children,
+  required,
+  ...props
+}: LabelProps) {
+  const { errors, hideLabel } = useFormFieldContext();
+  const { id } = useFormFieldItemContext();
+
+  return (
+    <Label
+      className={clsx(visuallyHidden({ hidden: hideLabel }), className)}
+      htmlFor={id}
+      error={!!errors}
+      required={required}
+      {...props}
+    >{`${children}${required ? ' *' : ''}`}</Label>
+  );
+}

package/src/components/form-field/form-field-message.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { HTMLAttributes, useEffect } from 'react';
+
+import { useFormFieldContext } from './form-field-context';
+import { formFieldMessageStyle } from './form-field.css';
+
+export type FormFieldMessageProps = HTMLAttributes<HTMLDivElement> & {
+  id: string;
+  error?: boolean;
+};
+
+export function FormFieldMessage({
+  className,
+  children,
+  id,
+  error,
+  ...props
+}: FormFieldMessageProps) {
+  const { registerMessageId, unRegisterMessageId } = useFormFieldContext();
+
+  useEffect(() => {
+    registerMessageId(id);
+
+    return () => unRegisterMessageId(id);
+  }, [id, registerMessageId, unRegisterMessageId]);
+
+  return (
+    <div id={id} className={formFieldMessageStyle} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/form-field/form-field.css.ts

@@ -0,0 +1,97 @@
+import { createGlobalTheme, style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys, typography } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const formFieldVars = createGlobalTheme(':root', {
+  '@layer': components,
+
+  spacing: {
+    vertical: sys.spacing[2],
+  },
+
+  color: {
+    foreground: sys.color.foreground,
+    background: sys.color.background,
+    outline: sys.color.foreground,
+  },
+});
+
+export const formFieldStyle = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: formFieldVars.spacing.vertical,
+
+        width: '100%',
+        maxWidth: '100%',
+
+        color: formFieldVars.color.foreground,
+
+        selectors: {
+          '&:disabled, &:has(:disabled)': {
+            cursor: 'not-allowed',
+
+            vars: {
+              [formFieldVars.color.foreground]:
+                `color(from ${sys.color.foreground} srgb r g b / 0.38)`,
+            },
+          },
+
+          '&[aria-invalid], &:has([aria-invalid])': {
+            vars: {
+              [formFieldVars.color.foreground]: 'red',
+            },
+          },
+        },
+      },
+    },
+  },
+
+  variants: {
+    error: {
+      true: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [formFieldVars.color.foreground]: 'red',
+            },
+          },
+        },
+      },
+    },
+
+    disabled: {
+      true: {
+        '@layer': {
+          [components]: {
+            cursor: 'not-allowed',
+
+            vars: {
+              [formFieldVars.color.foreground]:
+                `color(from ${sys.color.foreground} srgb r g b / ${sys.state.muted.light})`,
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export const formFieldMessageStyle = style([
+  typography.body.small,
+  {
+    '@layer': {
+      [components]: {
+        display: 'block',
+      },
+    },
+  },
+]);
+
+export type FormFieldVariants = NonNullable<
+  RecipeVariants<typeof formFieldStyle>
+>;

package/src/components/form-field/form-field.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useCallback, ReactNode } from 'react';
+
+import { FormFieldContextProvider } from './form-field-context';
+
+export interface FormFieldProps {
+  name: string;
+  label: string;
+  children: ReactNode;
+  errors?: string | null;
+  hideErrorMessage: boolean;
+  hideLabel: boolean;
+  disabled?: boolean;
+}
+
+export function FormField({
+  name,
+  label,
+  children,
+  errors,
+  hideErrorMessage = false,
+  hideLabel = false,
+  disabled,
+}: FormFieldProps) {
+  const [messageIds, setMessageIds] = useState<string[]>([]);
+
+  const registerMessageId = useCallback(
+    (id: string) => setMessageIds((ids) => [...new Set([...ids, id])]),
+    [setMessageIds],
+  );
+
+  const unRegisterMessageId = useCallback(
+    (id: string) =>
+      setMessageIds((ids) => ids.filter((current) => current !== id)),
+    [setMessageIds],
+  );
+
+  return (
+    <FormFieldContextProvider
+      value={{
+        name,
+        registerMessageId,
+        unRegisterMessageId,
+        messageIds,
+        errors,
+        hideErrorMessage,
+        label,
+        disabled,
+        hideLabel,
+      }}
+    >
+      {children}
+    </FormFieldContextProvider>
+  );
+}

package/src/components/form-field/index.ts

@@ -0,0 +1,9 @@
+export { useFormFieldContext } from './form-field-context';
+export { useFormFieldItemContext } from './form-field-item-context';
+export { formFieldStyle } from './form-field.css';
+export { FormFieldControl } from './form-field-control';
+export { FormFieldDescription } from './form-field-description';
+export { FormFieldError } from './form-field-error';
+export { FormField } from './form-field';
+export { FormFieldItem } from './form-field-item';
+export { FormFieldLabel } from './form-field-label';

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,27 @@
-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 './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>
+  );
+}