Minor fixes

- fix lint and typing errors

.storybook/Story.tsx

@@ -15,21 +15,6 @@ import {
   WithPadding,
 } from '../src/types';
 
-export interface StoryKnownProps
-  extends StyledProps,
-    Pick<WithFlexBox, 'direction'>,
-    Pick<WithPadding, 'padding'>,
-    Pick<WithMargin, 'mx'> {
-  align?: string;
-  children?: ReactNode;
-  display?: string;
-  justify?: string;
-  maxWidth?: number;
-  minHeight?: string;
-  minWidth?: number;
-  style?: CSSProperties;
-}
-
 type StoryProps = Simplify<OmitElementProps<HTMLDivElement, StoryKnownProps>>;
 
 export interface Context {
@@ -46,6 +31,21 @@ export interface Context {
   viewMode: string;
 }
 
+export interface StoryKnownProps
+  extends StyledProps,
+    Pick<WithFlexBox, 'direction'>,
+    Pick<WithPadding, 'padding'>,
+    Pick<WithMargin, 'mx'> {
+  align?: string;
+  children?: ReactNode;
+  display?: string;
+  justify?: string;
+  maxWidth?: number;
+  minHeight?: string;
+  minWidth?: number;
+  style?: CSSProperties;
+}
+
 const StyledStory = styled(
   'div',
   getStyledOptions(),

.storybook/preview.tsx

@@ -9,10 +9,10 @@ import { DocsContainer } from '@storybook/addon-docs';
 import { useGlobals } from '@storybook/preview-api';
 import { GlobalTypes } from '@storybook/types';
 
-import { Context, Story } from './Story';
-
 import { mergeTheme } from '../src';
-import { black, colors as themeColors, darkColor, lightColor, white } from '../src/modules/theme';
+import { black, darkColor, lightColor, colors as themeColors, white } from '../src/modules/theme';
+
+import { Context, Story } from './Story';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

src/components/Accordion/Accordion.tsx

@@ -7,7 +7,6 @@ import { SetRequired } from '@gilbarbara/types';
 import is from 'is-lite';
 
 import { useKeyboardNavigation } from '~/hooks/useKeyboardNavigation';
-
 import { getStyledOptions, getStyles } from '~/modules/system';
 
 import { Divider } from '~/components/Divider/Divider';
@@ -157,4 +156,4 @@ export function Accordion(props: AccordionProps) {
 
 Accordion.displayName = 'Accordion';
 
-export { defaultProps, type AccordionProps } from './useAccordion';
+export { type AccordionProps, defaultProps } from './useAccordion';

src/components/Accordion/AccordionItem.tsx

@@ -6,6 +6,10 @@ import { Text } from '~/components/Text';
 
 import { AccordionItemBaseProps, AccordionItemProps, useAccordionItem } from './useAccordion';
 
+export function AccordionItem(props: AccordionItemProps) {
+  return <AccordionItemBase {...props} />;
+}
+
 export function AccordionItemBase(props: AccordionItemBaseProps) {
   const { componentProps, getDataAttributes } = useAccordionItem(props);
   const { children, compact, headerAlign, hideToggle, subtitle, title, ...rest } = componentProps;
@@ -48,8 +52,4 @@ export function AccordionItemBase(props: AccordionItemBaseProps) {
   );
 }
 
-export function AccordionItem(props: AccordionItemProps) {
-  return <AccordionItemBase {...props} />;
-}
-
 export { type AccordionItemProps } from './useAccordion';

src/components/Accordion/useAccordion.ts

@@ -27,48 +27,6 @@ import {
   WithShadow,
 } from '~/types';
 
-export interface AccordionItemKnownProps
-  extends Omit<
-    CollapseProps,
-    | 'bottomToggle'
-    | 'defaultOpen'
-    | 'hideHeaderToggle'
-    | 'initialHeight'
-    | 'maxHeight'
-    | 'showBottomToggle'
-  > {
-  /**
-   * Make the accordion item compact.
-   */
-  compact?: boolean;
-  /**
-   * Disable the accordion item.
-   * @default false
-   */
-  disabled?: boolean;
-  // indicator	IndicatorProps	The accordion item expanded indicator, usually an arrow icon.
-  /**
-   * Hide the toggle.
-   * @default false
-   */
-  hideToggle?: boolean;
-  /**
-   * The accordion item id.
-   */
-  id: string;
-  /**
-   * The accordion item subtitle.
-   */
-  subtitle?: ReactNode;
-  /**
-   * The accordion item title.
-   */
-  title: ReactNode;
-}
-
-export type AccordionItemBaseProps = Simplify<AccordionItemKnownProps>;
-export type AccordionItemProps = Omit<AccordionItemBaseProps, 'compact' | 'open' | 'onToggle' | ''>;
-
 interface AccordionKnownProps
   extends StyledProps,
     WithColors,
@@ -130,8 +88,50 @@ interface AccordionKnownProps
   variant?: Exclude<Variant, 'solid'> | 'split';
 }
 
+export type AccordionItemBaseProps = Simplify<AccordionItemKnownProps>;
+export type AccordionItemProps = Omit<AccordionItemBaseProps, 'compact' | 'open' | 'onToggle' | ''>;
+
 export type AccordionProps = Simplify<AccordionKnownProps>;
 
+export interface AccordionItemKnownProps
+  extends Omit<
+    CollapseProps,
+    | 'bottomToggle'
+    | 'defaultOpen'
+    | 'hideHeaderToggle'
+    | 'initialHeight'
+    | 'maxHeight'
+    | 'showBottomToggle'
+  > {
+  /**
+   * Make the accordion item compact.
+   */
+  compact?: boolean;
+  /**
+   * Disable the accordion item.
+   * @default false
+   */
+  disabled?: boolean;
+  // indicator	IndicatorProps	The accordion item expanded indicator, usually an arrow icon.
+  /**
+   * Hide the toggle.
+   * @default false
+   */
+  hideToggle?: boolean;
+  /**
+   * The accordion item id.
+   */
+  id: string;
+  /**
+   * The accordion item subtitle.
+   */
+  subtitle?: ReactNode;
+  /**
+   * The accordion item title.
+   */
+  title: ReactNode;
+}
+
 export const defaultProps = {
   compact: false,
   disabled: false,

src/components/Alert/Alert.tsx

@@ -75,4 +75,4 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
 
 Alert.displayName = 'Alert';
 
-export { defaultProps, type AlertProps } from './useAlert';
+export { type AlertProps, defaultProps } from './useAlert';

src/components/Alert/useAlert.ts

@@ -1,7 +1,6 @@
 import { SetRequired, Simplify } from '@gilbarbara/types';
 
 import { useComponentProps } from '~/hooks/useComponentProps';
-
 import { getColorTokens } from '~/modules/colors';
 
 import {
@@ -19,6 +18,8 @@ import {
   WithVariant,
 } from '~/types';
 
+export type AlertProps = Simplify<AlertKnownProps>;
+
 export interface AlertKnownProps
   extends StyledProps,
     WithBorder,
@@ -44,8 +45,6 @@ export interface AlertKnownProps
   type: 'success' | 'warning' | 'error' | 'info' | 'neutral';
 }
 
-export type AlertProps = Simplify<AlertKnownProps>;
-
 export function getColor(type: AlertProps['type'], light?: boolean) {
   const colors = {
     success: light ? 'green.100' : 'green.600',

src/components/Anchor/Anchor.tsx

@@ -65,4 +65,4 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>((props, ref) =>
 
 Anchor.displayName = 'Anchor';
 
-export { defaultProps, type AnchorProps } from './useAnchor';
+export { type AnchorProps, defaultProps } from './useAnchor';

src/components/Anchor/useAnchor.ts

@@ -2,7 +2,6 @@ import { omit } from '@gilbarbara/helpers';
 import { Simplify } from '@gilbarbara/types';
 
 import { useComponentProps } from '~/hooks/useComponentProps';
-
 import { textDefaultOptions } from '~/modules/options';
 
 import {
@@ -20,6 +19,8 @@ import {
   WithTextOptions,
 } from '~/types';
 
+export type AnchorProps = Simplify<OmitElementProps<HTMLAnchorElement, AnchorKnownProps>>;
+
 export interface AnchorKnownProps
   extends StyledProps,
     WithChildren,
@@ -49,8 +50,6 @@ export interface AnchorKnownProps
   href: string;
 }
 
-export type AnchorProps = Simplify<OmitElementProps<HTMLAnchorElement, AnchorKnownProps>>;
-
 export const defaultProps = {
   ...omit(textDefaultOptions, 'size'),
   color: 'primary',

src/components/AspectRatio/AspectRatio.stories.tsx

@@ -3,7 +3,6 @@ import SVG from 'react-inlinesvg';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { grayScale } from '~/modules/theme';
-
 import { hideProps, hideTable, marginProps } from '~/stories/__helpers__';
 import Info from '~/stories/components/Info';
 

src/components/AspectRatio/useAspectRatio.ts

@@ -4,6 +4,8 @@ import { useComponentProps } from '~/hooks/useComponentProps';
 
 import { StyledProps, WithChildren, WithHTMLAttributes, WithMargin } from '~/types';
 
+export type AspectRatioProps = Simplify<AspectRatioKnownProps>;
+
 export interface AspectRatioKnownProps
   extends StyledProps,
     WithChildren,
@@ -13,8 +15,6 @@ export interface AspectRatioKnownProps
   ratio: number;
 }
 
-export type AspectRatioProps = Simplify<AspectRatioKnownProps>;
-
 export function useAspectRatio(props: AspectRatioProps) {
   return useComponentProps(props);
 }

src/components/Avatar/Avatar.stories.tsx

@@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Flex, FlexCenter, Grid, Icon, Paragraph } from '~';
 
 import { avatar, radius } from '~/modules/theme';
-
 import users from '~/stories/__fixtures__/users.json';
 import {
   colorProps,

src/components/Avatar/Avatar.tsx

@@ -116,4 +116,4 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
 
 Avatar.displayName = 'Avatar';
 
-export { defaultProps, type AvatarProps } from './useAvatar';
+export { type AvatarProps, defaultProps } from './useAvatar';

src/components/Avatar/useAvatar.ts

@@ -12,6 +12,8 @@ import {
   WithRadius,
 } from '~/types';
 
+export type AvatarProps = Simplify<AvatarKnownProps>;
+
 export interface AvatarKnownProps
   extends StyledProps,
     WithColorsDefaultBg,
@@ -46,8 +48,6 @@ export interface AvatarKnownProps
   style?: CSSProperties;
 }
 
-export type AvatarProps = Simplify<AvatarKnownProps>;
-
 export const defaultProps = {
   bg: 'primary',
   borderColor: 'primary',

src/components/Badge/Badge.stories.tsx

@@ -76,7 +76,7 @@ export const Colors: Story = {
               {...rest}
               bg={d}
               borderColor={d === 'white' ? 'red' : undefined}
-              color={color ?? (!['yellow', 'white'].includes(d) ? 'white' : undefined)}
+              color={color ?? (!['white', 'yellow'].includes(d) ? 'white' : undefined)}
             >
               <Avatar image={users[index].avatar} name={users[index].name} radius="md" size="md" />
             </Badge>

src/components/Badge/Badge.tsx

@@ -144,4 +144,4 @@ export function Badge(props: BadgeProps) {
 
 Badge.displayName = 'Badge';
 
-export { defaultProps, type BadgeProps } from './useBadge';
+export { type BadgeProps, defaultProps } from './useBadge';

src/components/Badge/useBadge.ts

@@ -14,6 +14,8 @@ import {
   WithRadius,
 } from '~/types';
 
+export type BadgeProps = Simplify<BadgeKnownProps>;
+
 export interface BadgeKnownProps
   extends StyledProps,
     WithChildren,
@@ -68,8 +70,6 @@ export interface BadgeKnownProps
   shape?: 'circle' | 'rectangle';
 }
 
-export type BadgeProps = Simplify<BadgeKnownProps>;
-
 export const defaultProps = {
   bg: 'primary',
   hideBorder: false,

src/components/Box/Box.tsx

@@ -20,4 +20,4 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
 
 Box.displayName = 'Box';
 
-export { defaultProps, type BoxProps } from './useBox';
+export { type BoxProps, defaultProps } from './useBox';

src/components/Box/useBox.ts

@@ -18,6 +18,8 @@ import {
   WithShadow,
 } from '~/types';
 
+export type BoxProps<T = HTMLElement> = Simplify<OmitElementProps<T, BoxKnownProps>>;
+
 export interface BoxKnownProps
   extends StyledProps,
     WithBorder,
@@ -32,8 +34,6 @@ export interface BoxKnownProps
     WithRadius,
     WithShadow {}
 
-export type BoxProps<T = HTMLElement> = Simplify<OmitElementProps<T, BoxKnownProps>>;
-
 export const defaultProps = {
   display: 'block',
 } satisfies Omit<BoxProps, 'children'>;

src/components/Button/Button.stories.tsx

@@ -5,7 +5,6 @@ import { expect, fn, userEvent, waitForElementToBeRemoved, within } from '@story
 import { Flex, Grid, Icon, Spacer } from '~';
 
 import { radius } from '~/modules/theme';
-
 import {
   colorProps,
   COMPONENT_SIZES,

src/components/Button/Button.tsx

@@ -146,4 +146,4 @@ export const Button = forwardRef<HTMLElement, ButtonProps>((props, ref) => {
 
 Button.displayName = 'Button';
 
-export { defaultProps, type ButtonProps } from './useButton';
+export { type ButtonProps, defaultProps } from './useButton';