paris 0.8.2 → 0.8.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # paris
 
+## 0.8.3
+
+### Patch Changes
+
+- 536f830: TextArea: default `rows` prop to 3
+
 ## 0.8.2
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -126,10 +126,7 @@
     "typescript": "^5.2.2"
   },
   "scripts": {
-    "dev": "next dev",
     "build": "pnpm generate:exports && next build",
-    "start": "next start",
-    "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",
     "create:component": "node ./scripts/createComponent.js",

package/src/stories/accordion/Accordion.tsx

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react';
+import { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { useState } from 'react';
 import clsx from 'clsx';
 import styles from './Accordion.module.scss';
 import { TextWhenString } from '../utility';

package/src/stories/avatar/Avatar.tsx

@@ -1,8 +1,8 @@
 import type {
     ComponentPropsWithoutRef, CSSProperties, FC, ReactNode,
 } from 'react';
-import type { CSSLength } from '@ssh/csstypes';
 import { useMemo } from 'react';
+import type { CSSLength } from '@ssh/csstypes';
 import clsx from 'clsx';
 import styles from './Avatar.module.scss';
 import { pvar } from '../theme';

package/src/stories/button/Button.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import type {
-    CSSProperties,
-    FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode,
+    CSSProperties, FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode,
 } from 'react';
 import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
 import { Button as AriaButton } from '@ariakit/react';

package/src/stories/callout/Callout.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { createElement } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck, faCancel, faWarning } from '@fortawesome/free-solid-svg-icons';
+import { faCancel, faCheck, faWarning } from '@fortawesome/free-solid-svg-icons';
 import { Callout } from './Callout';
 
 const meta: Meta<typeof Callout> = {

package/src/stories/card/Card.tsx

@@ -1,7 +1,6 @@
 import type { FC, HTMLAttributes, ReactNode } from 'react';
 import clsx from 'clsx';
 import styles from './Card.module.scss';
-import { Tilt } from '../tilt';
 
 export type CardProps = {
     /**

package/src/stories/combobox/Combobox.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import type { ReactNode, ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { useId, useState } from 'react';
 import { Combobox as HCombobox, Transition } from '@headlessui/react';
 import clsx from 'clsx';
-import { useId, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import inputStyles from '../input/Input.module.scss';

package/src/stories/dialog/Dialog.tsx

@@ -3,13 +3,12 @@
 import type {
     ComponentPropsWithoutRef, FC, MouseEventHandler, PropsWithChildren, ReactNode,
 } from 'react';
-import { Dialog as HDialog, Transition } from '@headlessui/react';
 import { Fragment, useEffect, useState } from 'react';
+import { Dialog as HDialog, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import styles from './Dialog.module.scss';
 import { Text } from '../text';
 import { Button } from '../button';
-import { pvar } from '../theme';
 import { TextWhenString } from '../utility/TextWhenString';
 import { VisuallyHidden } from '../utility/VisuallyHidden';
 import { RemoveFromDOM } from '../utility/RemoveFromDOM';

package/src/stories/drawer/Drawer.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type { Meta, StoryObj } from '@storybook/react';
-import { memo, useState } from 'react';
+import { useState } from 'react';
 import { Drawer } from './Drawer';
 import { Button } from '../button';
 import { usePagination } from '../pagination';

package/src/stories/drawer/Drawer.tsx

@@ -1,27 +1,20 @@
 'use client';
 
-import {
-    Fragment, useMemo, useState,
-} from 'react';
 import type { ReactNode } from 'react';
+import { Fragment, useMemo, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import type { CSSLength } from '@ssh/csstypes';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faClose, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { Simulate } from 'react-dom/test-utils';
 import styles from './Drawer.module.scss';
 import { Text } from '../text';
 import { VisuallyHidden } from '../utility/VisuallyHidden';
 import { TextWhenString } from '../utility/TextWhenString';
 import { Button } from '../button';
-import { pvar } from '../theme';
 import { RemoveFromDOM } from '../utility/RemoveFromDOM';
 import type { PaginationState } from '../pagination';
 import {
     ChevronLeft, ChevronRight, Close, Icon,
 } from '../icon';
-import { Ellipsis } from '../icon/Ellipsis';
 
 export const DrawerSizePresets = ['content', 'default', 'full'] as const;
 

package/src/stories/field/Field.tsx

@@ -1,8 +1,5 @@
-import {
-    type FC, type PropsWithChildren, type ComponentPropsWithoutRef, cloneElement,
-} from 'react';
+import React, { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
 import clsx from 'clsx';
-import React from 'react';
 import styles from '../input/Input.module.scss';
 import type { TextProps } from '../text';
 import { Text } from '../text';

package/src/stories/input/Input.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import type { ComponentPropsWithoutRef, FC, ForwardedRef } from 'react';
 import { forwardRef, useId } from 'react';
-import type { FC, ComponentPropsWithoutRef, ForwardedRef } from 'react';
 import clsx from 'clsx';
 import styles from './Input.module.scss';
 import type { TextProps } from '../text';

package/src/stories/popover/Popover.tsx

@@ -3,9 +3,9 @@
 import type {
     ComponentPropsWithoutRef, FC, ReactElement, ReactNode,
 } from 'react';
+import { forwardRef, useState } from 'react';
 import type { PopoverProps as RTPopoverProps } from 'react-tiny-popover';
 import { Popover as RTPopover } from 'react-tiny-popover';
-import { forwardRef, useState } from 'react';
 import clsx from 'clsx';
 import styles from './Popover.module.scss';
 import typography from '../text/Typography.module.css';

package/src/stories/select/Select.tsx

@@ -2,16 +2,15 @@
 
 'use client';
 
-import type { ReactNode, ComponentPropsWithoutRef, ForwardedRef } from 'react';
+import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react';
+import { forwardRef, useId } from 'react';
 import { Listbox, RadioGroup, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { forwardRef, useId } from 'react';
 import inputStyles from '../input/Input.module.scss';
 import dropdownStyles from '../utility/Dropdown.module.scss';
 import styles from './Select.module.scss';
-import typography from '../text/Typography.module.css';
 import type { TextProps } from '../text';
 import { Text } from '../text';
 import type { InputProps } from '../input';

package/src/stories/table/Table.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { useId, useMemo } from 'react';
 import clsx from 'clsx';
 import styles from './Table.module.scss';

package/src/stories/tabs/Tabs.tsx

@@ -1,15 +1,14 @@
 'use client';
 
 import type { CSSProperties, FC, ReactNode } from 'react';
-import { Tab } from '@headlessui/react';
 import { useId, useState } from 'react';
+import { Tab } from '@headlessui/react';
 import clsx from 'clsx';
 import type { CSSLength } from '@ssh/csstypes';
 import { motion } from 'framer-motion';
 import styles from './Tabs.module.scss';
 import typography from '../text/Typography.module.css';
 import { easeInOutExpo } from '../utility';
-import { theme } from '../theme';
 
 export type TabsProps = {
     /**

package/src/stories/tag/Tag.tsx

@@ -2,7 +2,6 @@ import type { FC, ReactNode } from 'react';
 import clsx from 'clsx';
 import styles from './Tag.module.scss';
 import typography from '../text/Typography.module.css';
-import { TextWhenString } from '../utility';
 
 export type TagProps = {
     /** The size of the Tag. */

package/src/stories/textarea/TextArea.tsx

@@ -3,7 +3,6 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import type { InputProps } from '../input';
 import styles from '../input/Input.module.scss';
-import { Text } from '../text';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pget, theme } from '../theme';
 import { Field } from '../field';
@@ -31,6 +30,7 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
     endEnhancer,
     disabled,
     overrides,
+    rows = 3,
     ...props
 }) => {
     const textareaID = useId();
@@ -70,6 +70,7 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
                     aria-describedby={`${textareaID}-description`}
                     aria-disabled={disabled}
                     readOnly={disabled}
+                    rows={rows}
                     className={clsx(
                         props.className,
                         styles.input,

package/src/stories/theme/themes.ts

@@ -3,8 +3,8 @@ import type { CSSColor, CSSLength } from '@ssh/csstypes';
 import type { Property } from 'csstype';
 import type { PartialDeep } from 'type-fest';
 import merge from 'ts-deepmerge';
-import { Tokens as T } from './tokens';
 import type { TokensT } from './tokens';
+import { Tokens as T } from './tokens';
 
 export type FontDefinition = {
     fontSize: CSSLength,

package/src/stories/utility/VisuallyHidden.tsx

@@ -1,5 +1,5 @@
-import { memo } from 'react';
 import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
 import { VisuallyHidden as AriaVisuallyHidden } from '@ariakit/react';
 
 /**