@kalink-ui/seedly 0.8.1 → 0.10.0

package/src/components/card/card.tsx

@@ -0,0 +1,76 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { Box, Cluster, Stack } from '@kalink-ui/seedly';
+import { Spacing } from '@kalink-ui/seedly/styles';
+
+import { BoxProps } from '../box';
+import { ClusterProps } from '../cluster';
+
+import { card, cardBody, cardFooter, cardHeader } from './card.css';
+
+export type CardRootElement = 'article' | 'div';
+
+export type CardProps<TUse extends CardRootElement = 'article'> =
+  BoxProps<TUse> & {
+    verticalSpacing?: Spacing;
+  };
+
+export function Card<TUse extends CardRootElement = 'article'>(
+  props: CardProps<TUse>,
+) {
+  const {
+    use = 'article',
+    variant = 'solid',
+    className,
+    spacing = 4,
+    verticalSpacing,
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <Box
+      use={use as CardProps['use']}
+      variant={variant}
+      spacing={spacing}
+      className={clsx(card, className)}
+      {...rest}
+    >
+      <Stack spacing={verticalSpacing ?? spacing}>{children}</Stack>
+    </Box>
+  );
+}
+
+Card.Header = function CardHeader<TUse extends ElementType = 'header'>(
+  props: PolymorphicComponentProps<TUse>,
+) {
+  const { use: Comp = 'header', className, ...rest } = props;
+
+  return <Comp className={clsx(cardHeader, className)} {...rest} />;
+};
+
+Card.Body = function CardBody<TUse extends ElementType = 'div'>(
+  props: PolymorphicComponentProps<TUse>,
+) {
+  const { use: Comp = 'div', className, ...rest } = props;
+
+  return <Comp className={clsx(cardBody, className)} {...rest} />;
+};
+
+type CardFooterProps<TUse extends ElementType = 'footer'> = ClusterProps<TUse>;
+
+Card.Footer = function CardFooter<TUse extends ElementType = 'footer'>(
+  props: CardFooterProps<TUse>,
+) {
+  const { use = 'footer', className, ...rest } = props;
+
+  return (
+    <Cluster
+      use={use as CardFooterProps['use']}
+      className={clsx(cardFooter, className)}
+      {...rest}
+    />
+  );
+};

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export { Card, type CardProps, type CardRootElement } from './card';

package/src/components/center/center.css.ts

@@ -1,6 +1,6 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars , sys } from '../../styles';
+import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const centerRecipe = recipe({

package/src/components/center/center.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { centerRecipe, CenterVariants } from './center.css';
 
-type CenterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  CenterVariants;
+export type CenterProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & CenterVariants;
 
 /**
  * A custom element for centering a block-level element horizontally,

package/src/components/center/index.ts

@@ -1,2 +1,2 @@
-export { Center } from './center';
+export { Center, type CenterProps } from './center';
 export { centerRecipe, type CenterVariants } from './center.css';

package/src/components/cluster/cluster.css.ts

@@ -1,6 +1,6 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars , sys } from '../../styles';
+import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const clusterRecipe = recipe({
@@ -115,6 +115,23 @@ export const clusterRecipe = recipe({
         },
       },
     },
+
+    direction: {
+      row: {
+        '@layer': {
+          [components]: {
+            flexDirection: 'row',
+          },
+        },
+      },
+      rowReverse: {
+        '@layer': {
+          [components]: {
+            flexDirection: 'row-reverse',
+          },
+        },
+      },
+    },
   },
 });
 

package/src/components/cluster/cluster.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { clusterRecipe, ClusterVariants } from './cluster.css';
 
-type ClusterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  ClusterVariants;
+export type ClusterProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & ClusterVariants;
 
 /**
  * A custom element for grouping items, with control over the margin between them

package/src/components/cluster/index.ts

@@ -1,2 +1,2 @@
-export { Cluster } from './cluster';
+export { Cluster, type ClusterProps } from './cluster';
 export { clusterRecipe, type ClusterVariants } from './cluster.css';

package/src/components/cover/cover.css.ts

@@ -1,7 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys , mapContractVars } from '../../styles';
+import { sys, mapContractVars } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 const spaceVar = createVar();

package/src/components/divider/divider.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+
+export const divider = style({
+  height: 1,
+  width: '100%',
+
+  border: 'none',
+  backgroundColor: sys.color.foreground,
+});

package/src/components/divider/divider.tsx

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+
+import { divider } from './divider.css';
+
+export interface DividerProps {
+  className?: string;
+}
+
+export function Divider({ className }: DividerProps) {
+  return <hr className={clsx(divider, className)} />;
+}

package/src/components/divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './divider';

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

@@ -0,0 +1,18 @@
+'use client';
+
+import { createRequiredContext } from '@kalink-ui/dibbly';
+
+interface FormFieldContext {
+  name: string;
+  registerMessageId: (id: string) => void;
+  unRegisterMessageId: (id: string) => void;
+  messageIds: string[];
+  errors?: string | null;
+  hideErrorMessage: boolean;
+  label: string;
+  disabled?: boolean;
+  hideLabel: boolean;
+}
+
+export const [useFormFieldContext, FormFieldContextProvider] =
+  createRequiredContext<FormFieldContext>();

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

@@ -0,0 +1,34 @@
+'use client';
+
+import {
+  cloneElement,
+  HTMLAttributes,
+  isValidElement,
+  ReactElement,
+} from 'react';
+
+import { useFormFieldContext } from './form-field-context';
+import { useFormFieldItemContext } from './form-field-item-context';
+
+export interface FormFieldControlProps extends HTMLAttributes<HTMLElement> {
+  children: ReactElement;
+}
+
+export function FormFieldControl({
+  children,
+  ...props
+}: FormFieldControlProps) {
+  const { messageIds, errors } = useFormFieldContext();
+  const { id } = useFormFieldItemContext();
+
+  if (!isValidElement(children)) {
+    throw new Error('FormFieldControl must have a valid child');
+  }
+
+  return cloneElement(children, {
+    id,
+    'aria-describedby': messageIds.join(' ') || undefined,
+    'aria-invalid': !!errors || undefined,
+    ...props,
+  });
+}

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { useFormFieldItemContext } from './form-field-item-context';
+import { FormFieldMessage, FormFieldMessageProps } from './form-field-message';
+
+export type FormFieldDescriptionProps = Omit<FormFieldMessageProps, 'id'>;
+
+export function FormFieldDescription(props: FormFieldDescriptionProps) {
+  const { id } = useFormFieldItemContext();
+
+  if (!props.children) {
+    return;
+  }
+
+  return <FormFieldMessage id={`${id}-description`} {...props} />;
+}

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/grid/grid.css.ts

@@ -1,7 +1,7 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys , mapContractVars } from '../../styles';
+import { sys, mapContractVars } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const minSizeVar = createVar();