@kalink-ui/seedly 0.9.0 → 0.11.0

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

@@ -0,0 +1,31 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+import { sys, transition } from '../../styles';
+
+const outlineColor = createVar();
+
+export const commandInputWrapper = style({
+  padding: sys.spacing[2],
+
+  borderBottomWidth: 1,
+  borderBottomStyle: 'solid',
+  borderBottomColor: outlineColor,
+
+  transition: transition(['border-color', 'box-shadow'], {
+    duration: 'short.2',
+  }),
+
+  selectors: {
+    '&:focus, &:focus-within, &:focus-visible': {
+      boxShadow: 'unset',
+
+      vars: {
+        [outlineColor]: sys.color.foreground,
+      },
+    },
+  },
+
+  vars: {
+    [outlineColor]: sys.color.foreground,
+  },
+});

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { mergeRefs } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef, ReactNode, useRef } from 'react';
+
+import { InputWrapper } from '../input/input-wrapper';
+import { input } from '../input/input.css';
+
+import { commandInputWrapper } from './command-input.css';
+
+export type CommandInputProps = ComponentPropsWithRef<
+  typeof CommandPrimitive.Input
+> & {
+  icon?: ReactNode;
+};
+
+export function CommandInput({
+  className,
+  disabled,
+  ref,
+  icon,
+  ...props
+}: CommandInputProps) {
+  const innerRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <InputWrapper
+      inputRef={innerRef}
+      disabled={disabled}
+      variant="bare"
+      className={commandInputWrapper}
+    >
+      {icon}
+      <CommandPrimitive.Input
+        ref={mergeRefs([ref, innerRef])}
+        className={clsx(input, className)}
+        disabled={disabled}
+        {...props}
+      />
+    </InputWrapper>
+  );
+}

package/src/components/command/command-item.css.ts

@@ -0,0 +1,27 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+
+export const commandItem = recipe({
+  base: {
+    cursor: 'pointer',
+
+    color: sys.color.foreground,
+
+    selectors: {
+      '&[data-selected=true]': {
+        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
+        outline: 'none',
+      },
+
+      '&:active': {
+        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.focused} * 100%), transparent)`,
+        outline: 'none',
+      },
+    },
+  },
+});
+
+export type CommandItemVariants = NonNullable<
+  RecipeVariants<typeof commandItem>
+>;

package/src/components/command/command-item.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef, ComponentType } from 'react';
+
+import { Cluster } from '../cluster';
+import { menuItem, menuItemIcon } from '../menu/menu-item.css';
+
+export type CommandItemProps = ComponentPropsWithRef<
+  typeof CommandPrimitive.Item
+> & {
+  inset?: boolean;
+  icon?: ComponentType<{ className?: string }>;
+};
+
+export function CommandItem({
+  className,
+  inset,
+  icon: IconComp,
+  children,
+  ...props
+}: CommandItemProps) {
+  return (
+    <CommandPrimitive.Item
+      className={clsx(menuItem({ inset }), className)}
+      {...props}
+    >
+      <Cluster spacing={2} align="center">
+        {IconComp && <IconComp className={menuItemIcon} />}
+        {children}
+      </Cluster>
+    </CommandPrimitive.Item>
+  );
+}

package/src/components/command/command-list.css.ts

@@ -0,0 +1,14 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys, transition } from '../../styles';
+
+export const commandList = style({
+  width: '100%',
+  maxHeight: 350,
+  overflow: 'auto',
+  paddingInline: sys.spacing[2],
+  paddingBlockEnd: sys.spacing[2],
+
+  overscrollBehavior: 'contain',
+  transition: transition(['height']),
+});

package/src/components/command/command-list.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef } from 'react';
+
+import { commandList } from './command-list.css';
+
+export function CommandList({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      className={clsx(commandList, className)}
+      {...props}
+    />
+  );
+}

package/src/components/command/command-separator.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef } from 'react';
+
+import {
+  MenuSeparatorVariants,
+  menuSeparator,
+} from '../menu/menu-separator.css';
+
+export type CommandSeparatorProps = ComponentPropsWithRef<
+  typeof CommandPrimitive.Separator
+> &
+  MenuSeparatorVariants;
+
+export function CommandSeparator({
+  className,
+  spacing = 4,
+  offset = true,
+  ...props
+}: CommandSeparatorProps) {
+  return (
+    <CommandPrimitive.Separator
+      className={clsx(menuSeparator({ offset, spacing }), className)}
+      {...props}
+    />
+  );
+}

package/src/components/command/command.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef } from 'react';
+
+import { Stack, StackVariants } from '../stack';
+
+export type CommandProps = ComponentPropsWithRef<typeof CommandPrimitive> & {
+  spacing?: StackVariants['spacing'];
+};
+
+export function Command({
+  className,
+  children,
+  spacing = 2,
+  ...props
+}: CommandProps) {
+  return (
+    <CommandPrimitive className={clsx(className)} {...props}>
+      <Stack spacing={spacing}>{children}</Stack>
+    </CommandPrimitive>
+  );
+}

package/src/components/command/index.ts

@@ -0,0 +1,7 @@
+export { Command } from './command';
+export { CommandInput } from './command-input';
+export { CommandList } from './command-list';
+export { CommandEmpty } from './command-empty';
+export { CommandGroup } from './command-group';
+export { CommandItem } from './command-item';
+export { CommandSeparator } from './command-separator';

package/src/components/cover/index.ts

@@ -1,2 +1,2 @@
 export { Cover } from './cover';
-export { coverRecipe, type CoverVariants } from './cover.css';
+export { coverRecipe, minSizeVar, type CoverVariants } from './cover.css';

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