@remember-web/primitive 0.1.18 → 0.1.20

package/src/Control/Checkbox.stories.tsx

@@ -25,7 +25,6 @@ export const Default: Story = {
     indeterminate: false,
   },
   render: ({ ...args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
     return (
       <Checkbox
@@ -51,7 +50,6 @@ export const Check: Story = {
     indeterminate: { table: { disable: true } },
   },
   render: ({ ...args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
     return (
       <Checkbox

package/src/Control/Checkbox.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
 
 import type { BaseToggleProps } from './BaseToggle/types';
 import { CircleBaseToggle } from './Toggle';

package/src/Control/Radio.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Radio } from './Radio';
 import { useState } from 'react';
+import { Radio } from './Radio';
 
 type Story = StoryObj<typeof Radio>;
 

package/src/Control/Radio.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
 
 import type { BaseToggleProps } from './BaseToggle/types';
 import { CircleBaseToggle } from './Toggle';

package/src/Control/Switch/Switch.stories.tsx

@@ -16,7 +16,6 @@ export const Default: Story = {
     checked: false,
   },
   render: ({ onCheckedChange, ...args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
     return (
       <Switch

package/src/Control/Switch/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { SwitchRoot, SwitchThumb, Label } from './styles';
+import { Label, SwitchRoot, SwitchThumb } from './styles';
 import type { SwitchProps } from './types';
 
 export function Switch({ size = 'small', ...props }: SwitchProps) {

package/src/Control/Switch/styles.ts

@@ -1,8 +1,8 @@
 'use client';
 
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import styled, { css } from 'styled-components';
 import { contents300, contents999, secondary100 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 import type { SwitchProps } from './types';
 

package/src/Control/Toggle.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Toggle } from './Toggle';
 
@@ -24,7 +24,6 @@ export const Default: Story = {
     labelPosition: 'right',
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
 
     return (

package/src/Control/Toggle.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { BaseToggle } from './BaseToggle';

package/src/Floating/DropdownMenu/DropdownMenuSection.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
 import type { GetStyledComponentProps } from '@remember-web/shared';
+import type { ReactNode } from 'react';
 
 import {
-  StyledDropdownMenuSectionTitle,
   StyledDropdownMenuSection,
+  StyledDropdownMenuSectionTitle,
 } from '@/Floating/DropdownMenu/styles';
 
 type DropdownMenuSectionProps<As> = GetStyledComponentProps<

package/src/Floating/DropdownMenu/index.tsx

@@ -1,10 +1,10 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';
 import {
   StyledDropdownMenuContent,
   StyledDropdownMenuItem,
 } from '@/Floating/DropdownMenu/styles';
+import type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';
 import Popover from '@/Floating/Popover';
 
 import { DropdownMenuSection } from './DropdownMenuSection';

package/src/Floating/DropdownMenu/styles.tsx

@@ -1,4 +1,3 @@
-import styled, { css } from 'styled-components';
 import {
   bg200,
   contents000,
@@ -7,6 +6,7 @@ import {
   getTypographyStyles,
 } from '@remember-web/mixin';
 import type { ConvertTransientProps } from '@remember-web/shared';
+import styled, { css } from 'styled-components';
 
 import { StyledPopoverContent } from '../Popover/styles';
 

package/src/Floating/Popover/Popover.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Popover from '@/Floating/Popover/index';
 import { Flex } from '@/Common';
+import Popover from '@/Floating/Popover/index';
 
 type Story = StoryObj<typeof Popover>;
 

package/src/Floating/Popover/styles.ts

@@ -1,6 +1,6 @@
-import styled, { keyframes } from 'styled-components';
 import { PopoverContent } from '@radix-ui/react-popover';
 import { bg100, contents000 } from '@remember-web/mixin';
+import styled, { keyframes } from 'styled-components';
 
 export const showFadeIn = keyframes`
     from {

package/src/Floating/Tooltip/Tooltip.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { IconAlarm } from '@remember-web/icon';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '@/Buttons';
 import { Flex } from '@/Common';

package/src/Floating/Tooltip/index.tsx

@@ -1,18 +1,18 @@
 'use client';
 
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { useState, type PropsWithChildren } from 'react';
-import { isSSR } from '@remember-web/shared';
 import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
+import { isSSR } from '@remember-web/shared';
+import { type PropsWithChildren, useState } from 'react';
 
 import { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';
 import {
-  isLargeSizeProps,
-  isStaticTypeProps,
   type TooltipProps,
   type TooltipSize,
   type TooltipType,
+  isLargeSizeProps,
+  isStaticTypeProps,
 } from './types';
 
 const hoverable = isSSR()

package/src/Floating/Tooltip/styles.ts

@@ -1,13 +1,13 @@
 'use client';
 
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import styled, { css, keyframes } from 'styled-components';
 import type { TypographyStyle } from '@remember-web/mixin';
 import {
   contents000,
   contents999,
   getTypographyStyles,
 } from '@remember-web/mixin';
+import styled, { css, keyframes } from 'styled-components';
 
 import type { TooltipSize, TooltipTextAlign } from './types';
 

package/src/Inputs/Select/DesignedSelect/index.tsx

@@ -1,23 +1,23 @@
 'use client';
 
+import { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';
 import type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';
 import {
   Children,
   forwardRef,
   isValidElement,
   useCallback,
+  useId,
   useRef,
   useState,
-  useId,
 } from 'react';
-import { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';
 
 import useMouseEventAway from '@/hooks/useMouseEventAway';
 
-import { focusSibling } from '../utils';
 import { OptionHolder } from '../Option';
 import { SelectContainer } from '../styles';
 import type { OptionElementType, SelectValue } from '../types';
+import { focusSibling } from '../utils';
 import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';
 import {
   SelectDownIcon,

package/src/Inputs/Select/DesignedSelect/styles.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import styled, { css } from 'styled-components';
 import {
   bg100,
   bg200,
@@ -10,6 +9,7 @@ import {
   contents300,
   ellipsis,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 import { SelectContainer } from '../styles';
 import type { ExpandedType } from './types';
@@ -33,7 +33,7 @@ export const StyledSelect = styled.div<{
         border-radius: 4px 4px 0 0;
         border-bottom-color: transparent;
       `,
-    }[expandedDirection ?? 'none'])};
+    })[expandedDirection ?? 'none']};
 
   padding: 10px 36px 10px 12px;
   transition: border-color 0.2s, background-color 0.2s;

package/src/Inputs/Select/NativeSelect/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
+import { IconArrow2Down } from '@remember-web/icon';
 import type { ForwardRefRenderFunction } from 'react';
 import { forwardRef } from 'react';
-import { IconArrow2Down } from '@remember-web/icon';
 
+import { SelectContainer } from '../styles';
 import { SelectDownIcon, StyledSelect } from './styles';
 import type { NativeSelectInternalProps } from './types';
-import { SelectContainer } from '../styles';
 
 const NativeSelect: ForwardRefRenderFunction<
   HTMLSelectElement,

package/src/Inputs/Select/NativeSelect/styles.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import styled, { css } from 'styled-components';
 import {
   bg200,
   bg300,
@@ -9,6 +8,7 @@ import {
   contents300,
   getTypographyStyles,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 export const StyledSelect = styled.select<{
   $width?: number | string;

package/src/Inputs/Select/NativeSelect/types.ts

@@ -1,7 +1,7 @@
 import type { ReactElement, SelectHTMLAttributes } from 'react';
 
-import type { NativeOption } from './Option';
 import type { OptionProps } from '../types';
+import type { NativeOption } from './Option';
 
 type NativeOptionElement = ReactElement<
   OptionProps<string>,

package/src/Inputs/Select/Option/index.tsx

@@ -2,7 +2,6 @@
 
 import type { OptionProps, SelectValue } from '../types';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const OptionHolder = <T extends SelectValue>(props: OptionProps<T>) =>
   null;
 

package/src/Inputs/Select/Select.stories.tsx

@@ -25,7 +25,6 @@ const meta = {
 export const Native: Story = {
   render: (props) => {
     const { ...args } = props as NativeSelectProps<string>;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [value, setValue] = useState<string>();
     return (
       <Select
@@ -57,7 +56,6 @@ export const Native: Story = {
 export const Custom: Story = {
   render: (props) => {
     const { ...args } = props as DesignedSelectProps<string>;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [value, setValue] = useState<string>();
     return (
       <Select

package/src/Inputs/Select/styles.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import styled from 'styled-components';
 import {
   bg200,
   contents000,
@@ -9,6 +8,7 @@ import {
   getTypographyStyles,
   roleRed,
 } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export const SelectContainer = styled.div<{ $width?: number | string }>`
   ${getTypographyStyles('Body1_M')}

package/src/Inputs/TextInput/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { IconHidden, IconVisible } from '@remember-web/icon';
 import type { ForwardRefRenderFunction } from 'react';
 import { forwardRef, useId, useState } from 'react';
-import { IconHidden, IconVisible } from '@remember-web/icon';
 
 import {
   InputContainer,

package/src/Inputs/TextInput/styles.ts

@@ -1,17 +1,17 @@
 'use client';
 
-import styled, { css } from 'styled-components';
 import type { ColorVariable } from '@remember-web/mixin';
 import {
   bg200,
   contents000,
   contents200,
   contents300,
-  roleRed,
   ellipsis,
   getTypographyStyles,
+  roleRed,
 } from '@remember-web/mixin';
 import { formatUnit } from '@remember-web/shared';
+import styled, { css } from 'styled-components';
 
 export const InputWrapper = styled.div<{ $width?: string | number }>`
   ${({ $width }) =>

package/src/Inputs/TextInput/types.ts

@@ -1,5 +1,5 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
 import type { ColorVariable } from '@remember-web/mixin';
+import type { InputHTMLAttributes, ReactNode } from 'react';
 
 type BaseInputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,

package/src/Logos/RememberServiceLogo/index.tsx

@@ -1,7 +1,7 @@
 import type { GetStyledComponentProps } from '@remember-web/shared';
 
-import type { RememberLogoProps } from '@/Logos/types';
 import { Divider } from '@/Common';
+import type { RememberLogoProps } from '@/Logos/types';
 
 import { RememberLogo } from '../RememberLogo';
 import { StyledServiceLogoRoot } from './style';

package/src/Logos/RememberServiceLogo/style.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { contents000, getTypographyStyles } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export const StyledServiceLogoRoot = styled.a<{ $color?: string }>`
   box-sizing: border-box;

package/src/Modals/Dialog/Dialog.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Flex } from '@/Common';
 import { Button } from '@/Buttons';
+import { Flex } from '@/Common';
 
 import { Dialog } from '.';
 

package/src/Modals/Dialog/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';
-import { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';
+import { Close, Portal, Root, Trigger } from '@radix-ui/react-dialog';
 import { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';
 
 import { Flex } from '@/Common/Flex';

package/src/Modals/Dialog/styles.ts

@@ -1,13 +1,13 @@
 'use client';
 
-import styled, { keyframes } from 'styled-components';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import {
-  primary200,
   contents000,
   contents100,
   getTypographyStyles,
+  primary200,
 } from '@remember-web/mixin';
+import styled, { keyframes } from 'styled-components';
 
 export const overlayShow = keyframes`
   0% { opacity: 0; }

package/src/Paginations/CompactPagination/CompactPagination.stories.tsx

@@ -18,7 +18,6 @@ const meta = {
 
 export const Basic: Story = {
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [pageNumber1, setPageNumber1] = useState(1);
 
     return (

package/src/Paginations/Pagination/Pagination.stories.tsx

@@ -20,7 +20,6 @@ const meta = {
 
 export const Basic: Story = {
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [pageNumber1, setPageNumber1] = useState(1);
 
     return (

package/src/Paginations/styles.ts

@@ -1,16 +1,16 @@
 'use client';
 
-import styled, { css } from 'styled-components';
 import {
   bg100,
   bg200,
   bg300,
   contents000,
   contents300,
+  desktopOnly,
   getTypographyStyles,
   mobileOnly,
-  desktopOnly,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 export const PaginationContainer = styled.nav`
   all: unset;

package/src/hooks/useMouseEventAway.ts

@@ -7,7 +7,7 @@ type MouseEventNames = Extract<
 
 export default function useMouseEventAway<
   T extends HTMLElement,
-  E extends MouseEventNames
+  E extends MouseEventNames,
 >(eventName: E, callback: (e: DocumentEventMap[E]) => void) {
   const ref = useRef<T | null>(null);
   const callbackRef = useRef(callback);

package/src/stories/common.styles.tsx

@@ -1,11 +1,11 @@
-import type { ReactNode } from 'react';
-import styled, { css } from 'styled-components';
 import {
   bg100,
   contents000,
   contents100,
   contents300,
 } from '@remember-web/mixin';
+import type { ReactNode } from 'react';
+import styled, { css } from 'styled-components';
 
 type TextAlign = 'left' | 'center' | 'right';