@flodesk/grain 11.35.1 → 11.35.3

package/es/types/components/checkbox.d.ts

@@ -0,0 +1,23 @@
+import type { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  id: string;
+  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  isIndeterminate?: boolean;
+  label?: string;
+  hint?: React.ReactNode;
+}
+
+export interface CheckboxBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  isIndeterminate?: boolean;
+}
+
+export const Checkbox: FC<CheckboxProps> & {
+  Label: FC<LabelHTMLAttributes<HTMLLabelElement> & { children: React.ReactNode }>;
+  Box: FC<CheckboxBoxProps>;
+};

package/es/types/components/dropdown.d.ts

@@ -0,0 +1,26 @@
+import type { FC, HTMLAttributes } from 'react';
+import { DimensionPropType } from '../shared';
+import { MenuPlacement } from '../foundational/menu';
+
+export interface DropdownOption {
+  type?: 'divider' | 'node';
+  icon?: React.ReactNode;
+  content?: React.ReactNode;
+  variant?: 'neutral' | 'danger';
+  onClick?: () => void;
+  node?: (_props: { requestClose: () => void }) => React.ReactNode;
+}
+
+export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  options: DropdownOption[];
+  menuPlacement?: MenuPlacement;
+  menuWidth?: DimensionPropType;
+  menuZIndex?: number;
+  trigger?: React.ReactNode;
+  hasPortal?: boolean;
+  onOpenChange?: (_isOpen: boolean) => void;
+}
+
+export const Dropdown: FC<DropdownProps> & {
+  Trigger: FC<HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }>;
+};

package/es/types/components/flex.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { BoxProps } from './box';
+import {
+  DirectionType,
+  FlexWrapType,
+  ContentPositionType,
+  AlignmentType,
+  DimensionPropType,
+} from '../shared';
+
+export interface FlexProps extends BoxProps {
+  direction?: DirectionType;
+  wrap?: FlexWrapType;
+  justifyContent?: ContentPositionType;
+  alignItems?: AlignmentType;
+  alignContent?: ContentPositionType;
+  gap?: DimensionPropType;
+  columnGap?: DimensionPropType;
+  rowGap?: DimensionPropType;
+}
+
+export const Flex: FC<FlexProps>;

package/es/types/components/icon-button.d.ts

@@ -0,0 +1,16 @@
+import type { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
+    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  icon?: React.ReactNode;
+  color?: string;
+  variant?: 'neutral' | 'danger';
+  type?: 'button' | 'submit' | 'reset';
+  isActive?: boolean;
+  tag?: 'button' | 'a' | 'span';
+}
+
+export const IconButton: FC<IconButtonProps>;

package/es/types/components/icon-toggle.d.ts

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes } from 'react';
+
+export interface IconToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export interface IconToggleProps extends HTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+}
+
+export const IconToggleGroup: FC<IconToggleGroupProps>;
+export const IconToggle: FC<IconToggleProps>;

package/es/types/components/icon.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+
+export interface IconProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  hasEvenBoundary?: boolean;
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl' | number | string;
+  color?: ColorPropType;
+}
+
+export const Icon: FC<IconProps>;

package/es/types/components/index.d.ts

@@ -0,0 +1,32 @@
+export * from './arrange';
+export * from './autocomplete';
+export * from './autocomplete2';
+export * from './badge';
+export * from './box';
+export * from './button';
+export * from './checkbox';
+export * from './dropdown';
+export * from './flex';
+export * from './icon';
+export * from './icon-button';
+export * from './icon-toggle';
+export * from './link';
+export * from './modal';
+export * from './nav';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './provider';
+export * from './radio';
+export * from './select';
+export * from './slider';
+export * from './spinner';
+export * from './stack';
+export * from './switch';
+export * from './tab';
+export * from './text-button';
+export * from './text-input';
+export * from './text-toggle';
+export * from './textarea';
+export * from './toast';
+export * from './tooltip';

package/es/types/components/link.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children?: React.ReactNode;
+  href?: string;
+  target?: string;
+  variant?: 'neutral' | 'subtle';
+  tag?: 'a' | 'button' | 'span';
+  onClick?: () => void;
+}
+
+export const Link: FC<LinkProps>;

package/es/types/components/modal.d.ts

@@ -0,0 +1,27 @@
+import type { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import { DimensionPropType, RadiusPropType } from '../shared';
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  children?: React.ReactNode;
+  onClose?: () => void;
+  hasCloseButton?: boolean;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  cardPadding?: DimensionPropType;
+  cardMaxWidth?: number | string | 'narrow' | 'medium' | 'wide';
+  cardHeight?: DimensionPropType;
+  cardMaxHeight?: DimensionPropType;
+  cardRadius?: RadiusPropType;
+  cardTop?: DimensionPropType;
+  zIndex?: number;
+  initialFocus?: React.RefObject<HTMLElement>;
+  returnFocus?: React.RefObject<HTMLElement>;
+  closeButtonProps?: Record<string, unknown>;
+  paddingX?: DimensionPropType;
+  disableCloseHandler?: boolean;
+}
+
+export const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>> & {
+  Title: FC<{ children: React.ReactNode } & HTMLAttributes<HTMLDivElement>>;
+};

package/es/types/components/nav.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes, AnchorHTMLAttributes } from 'react';
+import { DirectionType } from '../shared';
+import { BoxProps } from './box';
+
+export interface NavProps extends BoxProps, HTMLAttributes<HTMLElement> {
+  direction?: DirectionType;
+}
+
+export interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  isActive?: boolean;
+  href?: string;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const Nav: FC<NavProps>;
+export const NavItem: FC<NavItemProps>;

package/es/types/components/pagination.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes } from 'react';
+
+export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
+  amount: number;
+  selected: number;
+  onChange: (_page: number) => void;
+}
+
+export const Pagination: FC<PaginationProps>;

package/es/types/components/popover.d.ts

@@ -0,0 +1,18 @@
+import type { FC, HTMLAttributes } from 'react';
+import { DimensionPropType } from '../shared';
+import { MenuPlacement } from '../foundational/menu';
+
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+  padding?: DimensionPropType;
+  width?: DimensionPropType;
+  placement?: MenuPlacement;
+  trigger?: React.ReactNode;
+  zIndex?: number;
+  isOpen?: boolean;
+  onClose: () => void;
+  hasPortal?: boolean;
+  strategy?: 'absolute' | 'fixed';
+  offset?: DimensionPropType;
+}
+
+export const Popover: FC<PopoverProps>;

package/es/types/components/progress.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes } from 'react';
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  max?: number;
+  value: number;
+}
+
+export const Progress: FC<ProgressProps>;

package/es/types/components/provider.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes } from 'react';
+
+export interface ProviderProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  breakpoints?: {
+    tablet?: number;
+    mobile?: number;
+  };
+}
+
+export const GrainProvider: FC<ProviderProps>;

package/es/types/components/radio.d.ts

@@ -0,0 +1,23 @@
+import type { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  id: string;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  name?: string;
+  label?: string;
+  hint?: React.ReactNode;
+  onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export interface RadioBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  name?: string;
+}
+
+export const Radio: FC<RadioProps> & {
+  Label: FC<LabelHTMLAttributes<HTMLLabelElement> & { children: React.ReactNode }>;
+  Box: FC<RadioBoxProps>;
+};

package/es/types/components/select.d.ts

@@ -0,0 +1,26 @@
+import type { FC, SelectHTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  isDisabled?: boolean;
+}
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (_value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  hasError?: boolean;
+  errorMessage?: string;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  backgroundColor?: ColorPropType;
+}
+
+export const Select: FC<SelectProps>;

package/es/types/components/slider.d.ts

@@ -0,0 +1,21 @@
+import type { FC, HTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+
+export interface SliderProps extends HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (_value: number) => void;
+  onChangeEnd?: (_value: number) => void;
+  isDisabled?: boolean;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  hasError?: boolean;
+  errorMessage?: string;
+  trackColor?: ColorPropType;
+  thumbColor?: ColorPropType;
+}
+
+export const Slider: FC<SliderProps>;

package/es/types/components/spinner.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+  color?: ColorPropType;
+  size?: number;
+}
+
+export const Spinner: FC<SpinnerProps>;

package/es/types/components/stack.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes } from 'react';
+import { BoxProps } from './box';
+import { DimensionPropType, AlignmentType } from '../shared';
+
+export interface StackProps extends BoxProps, HTMLAttributes<HTMLDivElement> {
+  gap?: DimensionPropType;
+  alignItems?: AlignmentType;
+}
+
+export const Stack: FC<StackProps>;

package/es/types/components/switch.d.ts

@@ -0,0 +1,12 @@
+import type { FC, InputHTMLAttributes } from 'react';
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  id: string;
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+}
+
+export const Switch: FC<SwitchProps>;

package/es/types/components/tab.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes } from 'react';
+import { DimensionPropType } from '../shared';
+
+export interface TabGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  height?: DimensionPropType;
+  hasFullWidth?: boolean;
+}
+
+export interface TabProps extends HTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  isActive?: boolean;
+  onClick?: () => void;
+}
+
+export const TabGroup: FC<TabGroupProps>;
+export const Tab: FC<TabProps>;

package/es/types/components/text-button.d.ts

@@ -0,0 +1,16 @@
+import type { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
+
+export interface TextButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
+    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+  variant?: 'neutral' | 'danger';
+  isDisabled?: boolean;
+  trimSide?: 'left' | 'right';
+  type?: 'button' | 'submit' | 'reset';
+  tag?: 'button' | 'a' | 'span';
+}
+
+export const TextButton: FC<TextButtonProps>;

package/es/types/components/text-input.d.ts

@@ -0,0 +1,25 @@
+import { ColorPropType } from '../shared';
+
+export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+  placeholder?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  icon?: React.ReactNode;
+  hasError?: boolean;
+  errorMessage?: string;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  backgroundColor?: ColorPropType;
+  onClear?: () => void;
+}
+
+export const TextInput: React.ForwardRefExoticComponent<
+  TextInputProps & React.RefAttributes<HTMLInputElement>
+>;

package/es/types/components/text-toggle.d.ts

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes } from 'react';
+
+export interface TextToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export interface TextToggleProps extends HTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  isActive?: boolean;
+  isDisabled?: boolean;
+}
+
+export const TextToggleGroup: FC<TextToggleGroupProps>;
+export const TextToggle: FC<TextToggleProps>;

package/es/types/components/text.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label';
+  size?: string;
+  weight?: string;
+  color?: ColorPropType;
+  align?: 'left' | 'center' | 'right';
+  display?: 'block' | 'inline-block' | 'inline';
+  transform?: 'capitalize' | 'uppercase' | 'lowercase';
+  trimTop?: boolean;
+  trimBottom?: boolean;
+}
+
+export const Text: FC<TextProps>;

package/es/types/components/textarea.d.ts

@@ -0,0 +1,22 @@
+import type { FC, TextareaHTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+
+export interface TextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  placeholder?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  hasError?: boolean;
+  errorMessage?: string;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  backgroundColor?: ColorPropType;
+  rows?: number;
+  maxLength?: number;
+}
+
+export const Textarea: FC<TextareaProps>;

package/es/types/components/toast.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes } from 'react';
+import { DimensionPropType } from '../shared';
+
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  duration?: number;
+  hasCloseButton?: boolean;
+  variant?: 'neutral' | 'success' | 'warning' | 'danger';
+  position?: 'top' | 'bottom';
+  offset?: DimensionPropType;
+  zIndex?: number;
+}
+
+export const Toast: FC<ToastProps>;

package/es/types/components/tooltip.d.ts

@@ -0,0 +1,19 @@
+import type { FC, HTMLAttributes } from 'react';
+import { MenuPlacement } from '../foundational/menu';
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  placement?: MenuPlacement;
+  content?: React.ReactNode;
+  hasPortal?: boolean;
+  zIndex?: number;
+  placementMethod?: 'static' | 'dynamic';
+  offset?: 'xs' | 's';
+}
+
+export interface TooltipContentProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const Tooltip: FC<TooltipProps> & {
+  Content: FC<TooltipContentProps>;
+};

package/es/types/foundational/field.d.ts

@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+import { ColorPropType, DimensionPropType } from '../shared';
+
+export interface InputFieldProps {
+  paddingLeft?: DimensionPropType;
+  paddingRight?: DimensionPropType;
+  hasError?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  backgroundColor?: ColorPropType;
+}
+
+export interface FieldLabelProps {
+  children?: React.ReactNode;
+  htmlFor?: string;
+}
+
+export interface FieldHintProps {
+  children?: React.ReactNode;
+}
+
+export interface FieldClearButtonProps {
+  onClick?: () => void;
+  tag?: 'button' | 'a' | 'span';
+}
+
+export const InputField: FC<InputFieldProps>;
+export const FieldLabel: FC<FieldLabelProps>;
+export const FieldHint: FC<FieldHintProps>;
+export const FieldClearButton: FC<FieldClearButtonProps>;

package/es/types/foundational/index.d.ts

@@ -0,0 +1,3 @@
+export * from './field';
+export * from './menu';
+export * from './styles';

package/es/types/foundational/menu.d.ts

@@ -0,0 +1,58 @@
+import type { FC } from 'react';
+import { DimensionPropType } from '../shared';
+
+export type MenuPlacement =
+  | 'top'
+  | 'topStart'
+  | 'topEnd'
+  | 'bottom'
+  | 'bottomStart'
+  | 'bottomEnd'
+  | 'right'
+  | 'rightStart'
+  | 'rightEnd'
+  | 'left'
+  | 'leftStart'
+  | 'leftEnd';
+
+export interface MenuPositionConfig {
+  menuWidth?: DimensionPropType;
+  menuPlacement?: MenuPlacement;
+}
+
+export interface MenuCardProps {
+  children?: React.ReactNode;
+  zIndex?: number;
+  maxHeight?: DimensionPropType;
+  maxWidth?: DimensionPropType;
+  isDisabled?: boolean;
+}
+
+export interface MenuItemProps {
+  isSelected?: boolean;
+  isActive?: boolean;
+  isDisabled?: boolean;
+  icon?: React.ReactNode;
+  variant?: 'neutral' | 'danger';
+  hasEllipsis?: boolean;
+  checkVariant?: 'check' | 'none';
+  children?: React.ReactNode;
+  onClick?: () => void;
+}
+
+export interface MenuGroupTitleProps {
+  children?: React.ReactNode;
+  hasDivider?: boolean;
+}
+
+export const MenuCard: FC<MenuCardProps>;
+export const MenuItem: FC<MenuItemProps>;
+export const MenuGroupTitle: FC<MenuGroupTitleProps>;
+export const MenuItemDivider: FC;
+
+export function useMenuPosition(config: MenuPositionConfig): {
+  refs: any;
+  reference: (node: HTMLElement | null) => void;
+  floating: (node: HTMLElement | null) => void;
+  floatingStyles: React.CSSProperties;
+};

package/es/types/foundational/styles.d.ts

@@ -0,0 +1,37 @@
+export const capHeight: string;
+export const lineHeightAndCapHeightOffset: string;
+
+export const componentVars: {
+  strokeSize: string;
+};
+
+export const styles: {
+  buttonReset: string;
+  transitions: string;
+};
+
+export interface ClearButtonStylesConfig {
+  variant?: 'neutral' | 'danger';
+  isActive?: boolean;
+  isDisabled?: boolean;
+}
+
+export interface ClearButtonStyles {
+  box: string;
+  icon: string;
+  text: string;
+}
+
+export function getClearButtonStyles(config: ClearButtonStylesConfig): ClearButtonStyles;
+
+export const placementStyles: {
+  [key: string]: {
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    transform?: string;
+  };
+};
+
+export const capStyles: string;