@flodesk/grain 11.36.0 → 11.36.1

package/es/icons/index.js

@@ -84,7 +84,6 @@ export { default as IconContentAlignCenter } from './icon-content-align-center';
 export { default as IconContentAlignBottom } from './icon-content-align-bottom';
 export { default as IconColumnOne } from './icon-column-one';
 export { default as IconColumnTwo } from './icon-column-two';
-export { default as IconBrush } from './icon-brush';
 export { default as IconBolt } from './icon-bolt';
 export { default as IconBoltFilled } from './icon-bolt-filled';
 export { default as IconSquare } from './icon-square';

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

@@ -1,17 +1,17 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC } from 'react';
 import { BoxProps } from './box';
-import { DimensionPropType, AlignmentType, ContentPositionType, DirectionType } from '../shared';
+import { DimensionPropType, AlignmentType, DirectionType } from '../shared';
 
-export interface ArrangeProps extends BoxProps, HTMLAttributes<HTMLDivElement> {
+export interface ArrangeProps extends BoxProps {
   gap?: DimensionPropType;
   columnGap?: DimensionPropType;
   rowGap?: DimensionPropType;
   alignItems?: AlignmentType;
   justifyItems?: AlignmentType;
-  justifyContent?: ContentPositionType;
-  alignContent?: ContentPositionType;
-  columns?: string | number;
-  rows?: string | number;
+  justifyContent?: AlignmentType;
+  alignContent?: AlignmentType;
+  columns?: number | string | object;
+  rows?: number | string | object;
   autoFlow?: DirectionType;
 }
 

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

@@ -12,6 +12,7 @@ export interface AutocompleteOption {
 
 export interface AutocompleteProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  children?: React.ReactNode;
   options: AutocompleteOption[];
   value?: string;
   onChange: (_selectedOption: AutocompleteOption) => void;

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

@@ -16,6 +16,7 @@ export interface Autocomplete2Option {
 }
 
 export interface Autocomplete2Props {
+  children?: React.ReactNode;
   options: Autocomplete2Option[];
   value?: string;
   onChange: (option: Autocomplete2Option) => void;

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

@@ -1,12 +1,12 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC } from 'react';
 import { ColorPropType } from '../shared';
 
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+export interface BadgeProps {
   children?: React.ReactNode;
+  variant?: 'neutral' | 'danger' | 'warning' | 'success';
   color?: ColorPropType;
   backgroundColor?: ColorPropType;
   borderColor?: ColorPropType;
-  variant?: 'neutral' | 'danger' | 'warning' | 'success';
 }
 
 export const Badge: FC<BadgeProps>;

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

@@ -7,6 +7,9 @@ import {
   OverflowPropType,
   BorderWidthType,
   SideType,
+  TransitionPropType,
+  CursorPropType,
+  AlignSelfPropType,
 } from '../shared';
 import { ShadowTokens } from '../tokens';
 
@@ -15,6 +18,7 @@ export interface BoxProps
     RefAttributes<HTMLDivElement>,
     Partial<HTMLDivElement>,
     DOMAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   color?: ColorPropType;
   colorHover?: ColorPropType;
   backgroundColor?: ColorPropType;
@@ -30,8 +34,8 @@ export interface BoxProps
   minHeight?: DimensionPropType;
   maxHeight?: DimensionPropType;
   radius?: RadiusPropType;
-  shadow?: keyof ShadowTokens;
-  shadowHover?: keyof ShadowTokens;
+  shadow?: keyof ShadowTokens | string;
+  shadowHover?: keyof ShadowTokens | string;
   padding?: DimensionPropType;
   paddingTop?: DimensionPropType;
   paddingBottom?: DimensionPropType;
@@ -54,6 +58,17 @@ export interface BoxProps
   overflow?: OverflowPropType;
   overflowX?: OverflowPropType;
   overflowY?: OverflowPropType;
+  transition?: TransitionPropType;
+  transitionHover?: TransitionPropType;
+  cursor?: CursorPropType;
+  opacity?: string;
+  opacityHover?: string;
+  order?: string | number | object;
+  alignSelf?: AlignSelfPropType;
+  flex?: string | object;
+  aspectRatio?: string;
+  zIndex?: number | string;
+  tag?: string;
 }
 
 export const Box: FC<BoxProps>;

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ export * from './autocomplete';
 export * from './autocomplete2';
 export * from './badge';
 export * from './box';
+export * from './text';
 export * from './button';
 export * from './checkbox';
 export * from './dropdown';

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

@@ -2,8 +2,8 @@ import type { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } fro
 import { DimensionPropType, RadiusPropType } from '../shared';
 
 export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
-  isOpen: boolean;
   children?: React.ReactNode;
+  isOpen: boolean;
   onClose?: () => void;
   hasCloseButton?: boolean;
   title?: React.ReactNode;

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

@@ -1,16 +1,23 @@
-import type { FC, HTMLAttributes, AnchorHTMLAttributes } from 'react';
-import { DirectionType } from '../shared';
-import { BoxProps } from './box';
+import type { FC } from 'react';
+import { TextSizePropType, DirectionType } from '../shared';
 
-export interface NavProps extends BoxProps, HTMLAttributes<HTMLElement> {
-  direction?: DirectionType;
+export interface NavItemProps {
+  children?: React.ReactNode;
+  isActive?: boolean;
 }
 
-export interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  isActive?: boolean;
-  href?: string;
-  icon?: React.ReactNode;
+export interface NavProps {
   children?: React.ReactNode;
+  direction?: DirectionType;
+  size?: TextSizePropType;
+  justifyContent?:
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'stretch'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly';
 }
 
 export const Nav: FC<NavProps>;

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

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

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

@@ -3,6 +3,7 @@ import { DimensionPropType } from '../shared';
 import { MenuPlacement } from '../foundational/menu';
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   padding?: DimensionPropType;
   width?: DimensionPropType;
   placement?: MenuPlacement;

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

@@ -1,6 +1,7 @@
 import type { FC, HTMLAttributes } from 'react';
 
 export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   max?: number;
   value: number;
 }

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

@@ -1,6 +1,7 @@
 import type { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  children?: React.ReactNode;
   id: string;
   isDisabled?: boolean;
   isChecked?: boolean;
@@ -10,14 +11,4 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   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>;
-};
+export const Radio: FC<RadioProps>;

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

@@ -3,15 +3,16 @@ import { ColorPropType } from '../shared';
 
 export interface SelectOption {
   value: string;
-  label: string;
+  content?: React.ReactNode | string;
   isDisabled?: boolean;
 }
 
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+  children?: React.ReactNode;
   id?: string;
   value?: string;
   defaultValue?: string;
-  onChange?: (_value: string) => void;
+  onChange?: (option: SelectOption) => void;
   options: SelectOption[];
   placeholder?: string;
   label?: React.ReactNode;

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

@@ -2,6 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { ColorPropType } from '../shared';
 
 export interface SliderProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   value?: number;
   defaultValue?: number;
   min?: number;

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

@@ -2,6 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { ColorPropType } from '../shared';
 
 export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   color?: ColorPropType;
   size?: number;
 }

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

@@ -1,10 +1,14 @@
 import type { FC, HTMLAttributes } from 'react';
 import { BoxProps } from './box';
-import { DimensionPropType, AlignmentType } from '../shared';
+import { DimensionPropType, AlignmentType, DirectionType, FlexWrapType } from '../shared';
 
-export interface StackProps extends BoxProps, HTMLAttributes<HTMLDivElement> {
+export interface StackProps extends BoxProps {
+  children?: React.ReactNode;
   gap?: DimensionPropType;
+  direction?: DirectionType;
+  wrap?: FlexWrapType;
   alignItems?: AlignmentType;
+  justifyContent?: AlignmentType;
 }
 
 export const Stack: FC<StackProps>;

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

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

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

@@ -7,7 +7,7 @@ export interface TabGroupProps extends HTMLAttributes<HTMLDivElement> {
   hasFullWidth?: boolean;
 }
 
-export interface TabProps extends HTMLAttributes<HTMLButtonElement> {
+export interface TabProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   isActive?: boolean;
   onClick?: () => void;

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

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

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

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

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

@@ -18,6 +18,7 @@ export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputEleme
   isReadOnly?: boolean;
   backgroundColor?: ColorPropType;
   onClear?: () => void;
+  children?: React.ReactNode;
 }
 
 export const TextInput: React.ForwardRefExoticComponent<

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

@@ -7,7 +7,6 @@ export interface TextToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
 export interface TextToggleProps extends HTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   isActive?: boolean;
-  isDisabled?: boolean;
 }
 
 export const TextToggleGroup: FC<TextToggleGroupProps>;

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

@@ -1,17 +1,30 @@
 import type { FC, HTMLAttributes } from 'react';
-import { ColorPropType } from '../shared';
+import {
+  ColorPropType,
+  TextSizePropType,
+  TextTransformType,
+  TextDisplayType,
+  TextAlignType,
+  TextWeightPropType,
+} from '../shared';
+import { textTag } from '../../types';
 
-export interface TextProps extends HTMLAttributes<HTMLElement> {
+export interface TextProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label';
-  size?: string;
-  weight?: string;
+  size?: TextSizePropType;
+  weight?: TextWeightPropType;
   color?: ColorPropType;
-  align?: 'left' | 'center' | 'right';
-  display?: 'block' | 'inline-block' | 'inline';
-  transform?: 'capitalize' | 'uppercase' | 'lowercase';
+  tag?: typeof textTag;
+  display?: TextDisplayType;
+  hasEllipsis?: boolean;
+  ellipsisLines?: number;
+  align?: TextAlignType;
+  letterSpacing?: string;
+  textTransform?: TextTransformType;
+  variant?: 'caps';
   trimTop?: boolean;
-  trimBottom?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export const Text: FC<TextProps>;

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

@@ -17,6 +17,7 @@ export interface TextareaProps
   backgroundColor?: ColorPropType;
   rows?: number;
   maxLength?: number;
+  children?: React.ReactNode;
 }
 
 export const Textarea: FC<TextareaProps>;

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

@@ -2,6 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { DimensionPropType } from '../shared';
 
 export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
   title?: React.ReactNode;

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

@@ -8,6 +8,7 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   zIndex?: number;
   placementMethod?: 'static' | 'dynamic';
   offset?: 'xs' | 's';
+  children?: React.ReactNode;
 }
 
 export interface TooltipContentProps extends HTMLAttributes<HTMLDivElement> {

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

@@ -51,7 +51,7 @@ export const MenuGroupTitle: FC<MenuGroupTitleProps>;
 export const MenuItemDivider: FC;
 
 export function useMenuPosition(config: MenuPositionConfig): {
-  refs: any;
+  refs: React.RefObject<HTMLElement>[];
   reference: (node: HTMLElement | null) => void;
   floating: (node: HTMLElement | null) => void;
   floatingStyles: React.CSSProperties;

package/es/types/shared.d.ts

@@ -1,4 +1,12 @@
-import { SpaceTokens, TextTokens, ColorTokens, RadiusTokens } from './tokens';
+import {
+  SpaceTokens,
+  TextTokens,
+  ColorTokens,
+  RadiusTokens,
+  TransitionTokens,
+  IconTokens,
+  WeightTokens,
+} from './tokens';
 import {
   overflows,
   axisAlignments,
@@ -17,8 +25,10 @@ import {
 export type OverflowPropType = (typeof overflows)[number];
 export type DimensionPropType = number | string | object | keyof SpaceTokens;
 export type TextSizePropType = number | string | object | keyof TextTokens;
+export type TextWeightPropType = keyof WeightTokens | string;
 export type ColorPropType = string | keyof ColorTokens;
 export type RadiusPropType = number | string | keyof RadiusTokens;
+export type TransitionPropType = string | keyof TransitionTokens;
 export type AlignmentType = (typeof axisAlignments)[number];
 export type DistributionType = (typeof distributions)[number];
 export type ContentPositionType = AlignmentType | DistributionType;
@@ -31,11 +41,4 @@ export type BorderWidthType = (typeof borderWidths)[number];
 export type TextTransformType = (typeof textTransforms)[number];
 export type TextDisplayType = (typeof textDisplays)[number];
 export type TextAlignType = (typeof textAlignments)[number];
-
-export interface TextTokens {
-  s: string;
-  m: string;
-  l: string;
-  xl: string;
-  xxl: string;
-}
+export type IconSizePropType = number | string | keyof IconTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.36.0",
+  "version": "11.36.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",

package/es/icons/icon-brush.js

@@ -1,17 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import * as React from 'react';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-
-const IconBrush = props => ___EmotionJSX("svg", _extends({
-  viewBox: "0 0 28 36",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), ___EmotionJSX("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M4.5 3C3.67157 3 3 3.67157 3 4.5V16H25V4.5C25 3.67157 24.3284 3 23.5 3H22V12.5C22 13.3284 21.3284 14 20.5 14C19.6716 14 19 13.3284 19 12.5V3H16V8.5C16 9.32843 15.3284 10 14.5 10C13.6716 10 13 9.32843 13 8.5V3H4.5ZM25 19H3V22H7.5C9.98528 22 12 24.0147 12 26.5V30.5V33H16V30.5V26.5C16 24.0147 18.0147 22 20.5 22H25V19ZM0 4.5C0 2.01472 2.01472 0 4.5 0H14.5H20.5H23.5C25.9853 0 28 2.01472 28 4.5V17.5V23.5C28 24.3284 27.3284 25 26.5 25H20.5C19.6716 25 19 25.6716 19 26.5V30.5V34.5C19 35.3284 18.3284 36 17.5 36H10.5C9.67157 36 9 35.3284 9 34.5V30.5V26.5C9 25.6716 8.32843 25 7.5 25H1.5C0.671573 25 0 24.3284 0 23.5V17.5V4.5Z",
-  fill: "currentColor"
-}));
-
-export default IconBrush;