@flodesk/grain 11.42.1 → 11.43.0

package/es/icons/icon-qr.js

@@ -0,0 +1,18 @@
+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 IconQr = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 32 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M11 6.5A1.5 1.5 0 0 0 9.5 5h-5A1.5 1.5 0 0 0 3 6.5v5A1.5 1.5 0 0 0 4.5 13h5a1.5 1.5 0 0 0 1.5-1.5zM9.5 2A4.5 4.5 0 0 1 14 6.5v5A4.5 4.5 0 0 1 9.5 16h-5A4.5 4.5 0 0 1 0 11.5v-5A4.5 4.5 0 0 1 4.5 2zM18 23v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1m11 1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2m-6 2v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1m-5 7v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1m10 0a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1zM9.5 23a1.5 1.5 0 0 1 1.5 1.5v5A1.5 1.5 0 0 1 9.5 31h-5A1.5 1.5 0 0 1 3 29.5v-5A1.5 1.5 0 0 1 4.5 23zm4.5 1.5A4.5 4.5 0 0 0 9.5 20h-5A4.5 4.5 0 0 0 0 24.5v5A4.5 4.5 0 0 0 4.5 34h5a4.5 4.5 0 0 0 4.5-4.5zm15-18A1.5 1.5 0 0 0 27.5 5h-5A1.5 1.5 0 0 0 21 6.5v5a1.5 1.5 0 0 0 1.5 1.5h5a1.5 1.5 0 0 0 1.5-1.5zM27.5 2A4.5 4.5 0 0 1 32 6.5v5a4.5 4.5 0 0 1-4.5 4.5h-5a4.5 4.5 0 0 1-4.5-4.5v-5A4.5 4.5 0 0 1 22.5 2z",
+  clipRule: "evenodd"
+}));
+
+IconQr.viewBoxWidth = 32;
+export default IconQr;

package/es/icons/index.js

@@ -94,4 +94,5 @@ export { default as IconApple } from './icon-apple';
 export { default as IconBall } from './icon-ball';
 export { default as IconCar } from './icon-car';
 export { default as IconSymbols } from './icon-symbols';
-export { default as IconFlag } from './icon-flag';
+export { default as IconFlag } from './icon-flag';
+export { default as IconQr } from './icon-qr';

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

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { BoxProps } from './box';
 import { DimensionPropType, AlignmentType, DirectionType } from '../shared';
 
-export interface ArrangeProps extends BoxProps {
+export interface ArrangeProps extends Omit<BoxProps, 'rows'> {
   gap?: DimensionPropType;
   columnGap?: DimensionPropType;
   rowGap?: DimensionPropType;

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

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { ColorPropType } from '../shared';
+import { ColorPropType, ComponentBaseProps } from '../shared';
 import { MenuPlacement } from '../foundational/menu';
 
 export interface Autocomplete2Option {
@@ -15,7 +15,7 @@ export interface Autocomplete2Option {
   isDisabled?: boolean;
 }
 
-export interface Autocomplete2Props {
+export interface Autocomplete2Props extends Omit<ComponentBaseProps, 'onChange' | 'label'> {
   children?: React.ReactNode;
   options: Autocomplete2Option[];
   value?: string;

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

@@ -1,4 +1,4 @@
-import type { FC, DOMAttributes, PropsWithChildren, RefAttributes } from 'react';
+import type { FC } from 'react';
 import {
   ColorPropType,
   DimensionPropType,
@@ -10,14 +10,11 @@ import {
   TransitionPropType,
   CursorPropType,
   AlignSelfPropType,
+  ComponentBaseProps,
 } from '../shared';
 import { ShadowTokens } from '../tokens';
 
-export interface BoxProps
-  extends PropsWithChildren,
-    RefAttributes<HTMLDivElement>,
-    Partial<HTMLDivElement>,
-    DOMAttributes<HTMLDivElement> {
+export interface BoxProps extends Omit<ComponentBaseProps, 'height' | 'width'> {
   children?: React.ReactNode;
   color?: ColorPropType;
   colorHover?: ColorPropType;

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

@@ -1,9 +1,10 @@
 import type { FC } from 'react';
+import { ComponentBaseProps } from '../shared';
 
 export type ButtonVariant = 'neutral' | 'accent' | 'danger';
 export type ButtonTag = 'button' | 'a' | 'span';
 
-export interface ButtonProps {
+export interface ButtonProps extends ComponentBaseProps {
   children?: React.ReactNode;
   variant?: ButtonVariant;
   isDisabled?: boolean;
@@ -13,7 +14,9 @@ export interface ButtonProps {
   hasSpinner?: boolean;
   type?: 'button' | 'submit' | 'reset';
   tag?: ButtonTag;
-  onClick?: (_event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>,
+  ) => void;
 }
 
 export const Button: FC<ButtonProps>;

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

@@ -2,7 +2,7 @@ import type { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   id: string;
-  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
   isChecked?: boolean;
   isIndeterminate?: boolean;
@@ -11,7 +11,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
 }
 
 export interface CheckboxBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
   isChecked?: boolean;
   isIndeterminate?: boolean;

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

@@ -1,5 +1,5 @@
-import type { FC, SelectHTMLAttributes } from 'react';
-import { ColorPropType } from '../shared';
+import type { FC } from 'react';
+import { ColorPropType, ComponentBaseProps } from '../shared';
 
 export interface SelectOption {
   value: string;
@@ -7,7 +7,7 @@ export interface SelectOption {
   isDisabled?: boolean;
 }
 
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+export interface SelectProps extends Omit<ComponentBaseProps, 'onChange' | 'label'> {
   children?: React.ReactNode;
   id?: string;
   value?: string;
@@ -22,6 +22,10 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   isDisabled?: boolean;
   isReadOnly?: boolean;
   backgroundColor?: ColorPropType;
+  menuWidth?: string | number;
+  menuMaxHeight?: string | number;
 }
 
-export const Select: FC<SelectProps>;
+export const Select: FC<SelectProps> & {
+  Trigger: React.ComponentType<any>;
+};

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

@@ -8,9 +8,9 @@ export interface SliderProps extends HTMLAttributes<HTMLDivElement> {
   min?: number;
   max?: number;
   step?: number;
-  onChange?: (_value: number) => void;
-  onChangeEnd?: (_value: number) => void;
-  isDisabled?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChangeEnd?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
   label?: React.ReactNode;
   hint?: React.ReactNode;
   hasError?: boolean;

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

@@ -3,8 +3,8 @@ 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;
+  isActive?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
   label?: string;
   hint?: React.ReactNode;

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

@@ -6,7 +6,7 @@ export interface TextareaProps
   children?: React.ReactNode;
   value?: string;
   defaultValue?: string;
-  onChange?: (_event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   placeholder?: string;
   label?: React.ReactNode;
   hint?: React.ReactNode;

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

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

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

@@ -4,9 +4,9 @@ export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputEleme
   id?: string;
   value?: string;
   defaultValue?: string;
-  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
-  onFocus?: (_event: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+  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;

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

@@ -1,10 +1,12 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC } from 'react';
+import { ComponentBaseProps } from '../shared';
 
-export interface TextToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
+export interface TextToggleGroupProps extends ComponentBaseProps {
   children?: React.ReactNode;
+  hasFullWidth?: boolean;
 }
 
-export interface TextToggleProps extends HTMLAttributes<HTMLButtonElement> {
+export interface TextToggleProps extends ComponentBaseProps {
   children?: React.ReactNode;
   isActive?: boolean;
 }

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

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

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
-import { ColorPropType, DimensionPropType } from '../shared';
+import { ColorPropType, ComponentBaseProps, DimensionPropType } from '../shared';
 
-export interface InputFieldProps {
+export interface InputFieldProps extends ComponentBaseProps {
   paddingLeft?: DimensionPropType;
   paddingRight?: DimensionPropType;
   hasError?: boolean;
@@ -10,16 +10,16 @@ export interface InputFieldProps {
   backgroundColor?: ColorPropType;
 }
 
-export interface FieldLabelProps {
+export interface FieldLabelProps extends ComponentBaseProps {
   children?: React.ReactNode;
   htmlFor?: string;
 }
 
-export interface FieldHintProps {
+export interface FieldHintProps extends ComponentBaseProps {
   children?: React.ReactNode;
 }
 
-export interface FieldClearButtonProps {
+export interface FieldClearButtonProps extends ComponentBaseProps {
   onClick?: () => void;
   tag?: 'button' | 'a' | 'span';
 }

package/es/types/shared.d.ts

@@ -21,6 +21,8 @@ import {
   textDisplays,
   textAlignments,
 } from '../types';
+import { AllHTMLAttributes, RefAttributes } from 'react';
+import { SerializedStyles } from '@emotion/react';
 
 export type OverflowPropType = (typeof overflows)[number];
 export type DimensionPropType = number | string | object | keyof SpaceTokens;
@@ -42,3 +44,9 @@ export type TextTransformType = (typeof textTransforms)[number];
 export type TextDisplayType = (typeof textDisplays)[number];
 export type TextAlignType = (typeof textAlignments)[number];
 export type IconSizePropType = number | string | keyof IconTokens;
+
+export interface ComponentBaseProps
+  extends AllHTMLAttributes<HTMLElement>,
+    RefAttributes<HTMLElement> {
+  css?: SerializedStyles | false;
+}

package/es/types/variables/vars.d.ts

@@ -1,4 +1,4 @@
-import { ColorTokens } from '../tokens';
+import { ColorTokens, WeightTokens } from '../tokens';
 
 export interface Texts {
   s: string;
@@ -29,8 +29,8 @@ export interface Spaces {
 }
 
 export interface Weights {
-  normal: string;
-  medium: string;
+  normal: keyof WeightTokens;
+  medium: keyof WeightTokens;
 }
 
 export interface Radii {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.42.1",
+  "version": "11.43.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",
@@ -54,6 +54,8 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^9.3.1",
     "@semantic-release/npm": "^9.0.1",
+    "@types/react": "^16.14.62",
+    "@types/react-dom": "^16.9.25",
     "colord": "^2.9.2",
     "cross-env": "^7.0.3",
     "del-cli": "^4.0.1",