@remember-web/primitive 0.1.9 → 0.1.11

package/dist/src/hooks/useMouseEventAway.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseEventAway.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMouseEventAway.ts"],"names":[],"mappings":";AAEA,KAAK,eAAe,GAAG,OAAO,CAC5B,MAAM,gBAAgB,EACtB,QAAQ,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE,GAAG,QAAQ,MAAM,EAAE,GAAG,OAAO,CACnE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,eAAe,EACzB,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,8CAwBzD"}

package/dist/src/hooks/useMouseEventAway.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseEventAway.esm.js","sources":["../../../src/hooks/useMouseEventAway.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ntype MouseEventNames = Extract<\n  keyof DocumentEventMap,\n  `mouse${string}` | `pointer${string}` | `touch${string}` | 'click'\n>;\n\nexport default function useMouseEventAway<\n  T extends HTMLElement,\n  E extends MouseEventNames\n>(eventName: E, callback: (e: DocumentEventMap[E]) => void) {\n  const ref = useRef<T | null>(null);\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n\n  useEffect(() => {\n    function clickAwayHandler(e: DocumentEventMap[E]) {\n      if (!(e.target instanceof Node)) {\n        return;\n      }\n\n      if (ref.current && !ref.current.contains(e.target)) {\n        callbackRef.current(e);\n      }\n    }\n\n    document.addEventListener(eventName, clickAwayHandler, true);\n\n    return () => {\n      document.removeEventListener(eventName, clickAwayHandler, true);\n    };\n  }, [eventName]);\n\n  return ref;\n}\n"],"names":["useMouseEventAway","eventName","callback","ref","useRef","callbackRef","current","useEffect","clickAwayHandler","e","target","Node","contains","document","addEventListener","removeEventListener"],"mappings":";;AAOe,SAASA,iBAAiBA,CAGvCC,SAAY,EAAEC,QAA0C,EAAE;AAC1D,EAAA,IAAMC,GAAG,GAAGC,MAAM,CAAW,IAAI,CAAC,CAAA;AAClC,EAAA,IAAMC,WAAW,GAAGD,MAAM,CAACF,QAAQ,CAAC,CAAA;EACpCG,WAAW,CAACC,OAAO,GAAGJ,QAAQ,CAAA;AAE9BK,EAAAA,SAAS,CAAC,YAAM;IACd,SAASC,gBAAgBA,CAACC,CAAsB,EAAE;AAChD,MAAA,IAAI,EAAEA,CAAC,CAACC,MAAM,YAAYC,IAAI,CAAC,EAAE;AAC/B,QAAA,OAAA;AACF,OAAA;AAEA,MAAA,IAAIR,GAAG,CAACG,OAAO,IAAI,CAACH,GAAG,CAACG,OAAO,CAACM,QAAQ,CAACH,CAAC,CAACC,MAAM,CAAC,EAAE;AAClDL,QAAAA,WAAW,CAACC,OAAO,CAACG,CAAC,CAAC,CAAA;AACxB,OAAA;AACF,KAAA;IAEAI,QAAQ,CAACC,gBAAgB,CAACb,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;AAE5D,IAAA,OAAO,YAAM;MACXK,QAAQ,CAACE,mBAAmB,CAACd,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;KAChE,CAAA;AACH,GAAC,EAAE,CAACP,SAAS,CAAC,CAAC,CAAA;AAEf,EAAA,OAAOE,GAAG,CAAA;AACZ;;;;"}

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}

package/dist/src/stories/common.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../src/stories/common.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,eAAO,MAAM,KAAK;;;GAmBjB,CAAC;AAEF,eAAO,MAAM,cAAc,gNAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,yNAIjB,CAAC;AAEF,eAAO,MAAM,WAAW,kOAAiB,CAAC;AAE1C,eAAO,MAAM,SAAS,kOAAiB,CAAC;AAkBxC,eAAO,MAAM,WAAW,mCAIrB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAKE,CAAC;AAEJ,eAAO,MAAM,QAAQ,0NAAc,CAAC"}

package/dist/{primitive/src → src}/stories/util.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as Icons from '@remember-web/icon';
 export type IconWithSizeNameType = Extract<keyof typeof Icons, `${string}${'S' | 'M' | 'L'}`>;
-export declare const iconNames: ("none" | IconWithSizeNameType)[];
+export declare const iconNames: (IconWithSizeNameType | "none")[];
 export declare const isIconName: (value: string) => value is IconWithSizeNameType;
 export declare function getIconComponentFromName(iconName: IconWithSizeNameType): import("react").FC<import("react").SVGProps<SVGSVGElement>>;
 //# sourceMappingURL=util.d.ts.map

package/dist/src/stories/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/stories/util.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,OAAO,CACxC,MAAM,OAAO,KAAK,EAClB,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,CAC9B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAGrB,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,MAAM,kCACJ,CAAC;AAErC,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,oBAAoB,+DAEtE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -16,23 +16,22 @@
   "scripts": {
     "build": "rollup -c && yarn fix:dts-alias",
     "fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json",
-    "type-check": "tsc -p ./tsconfig.json",
-    "lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache",
-    "release": "yarn build && npm publish"
+    "type-check": "tsc -p ./tsconfig.cli.json",
+    "lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache"
   },
   "files": [
     "dist",
     "src"
   ],
   "source": "./src/index.ts",
-  "main": "./dist/primitive/src/index.cjs.js",
-  "module": "./dist/primitive/src/index.esm.js",
-  "types": "./dist/primitive/src/index.d.ts",
+  "main": "./dist/src/index.cjs.js",
+  "module": "./dist/src/index.esm.js",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/primitive/src/index.cjs.js",
-      "import": "./dist/primitive/src/index.esm.js",
-      "types": "./dist/primitive/src/index.d.ts"
+      "require": "./dist/src/index.cjs.js",
+      "import": "./dist/src/index.esm.js",
+      "types": "./dist/src/index.d.ts"
     }
   },
   "dependencies": {
@@ -43,8 +42,9 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@remember-web/icon": "^0.1.4",
-    "@remember-web/mixin": "^0.1.9"
+    "@remember-web/icon": "^0.1.6",
+    "@remember-web/mixin": "^0.1.14",
+    "@remember-web/shared": "^0.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -52,7 +52,6 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@remember-web/shared": "workspace:^",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",

package/src/Avatars/Avatar/Avatar.stories.tsx

@@ -8,7 +8,7 @@ import Avatar from '.';
 type Story = StoryObj<typeof Avatar>;
 
 const meta = {
-  title: 'Avatars/Avatar',
+  title: 'Primitive/Avatars/Avatar',
   component: Avatar,
   argTypes: {
     rounded: {

package/src/Avatars/Avatar/index.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';
 import { bg200, divider } from '@remember-web/mixin';
 import { IconAvatarEmpty } from '@remember-web/icon';
-import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+import type { ConvertTransientProps } from '@remember-web/shared';
 
 import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
 import { StyledAvatar } from '@/Avatars/Avatar/styles';

package/src/Badge/Badge.stories.tsx

@@ -8,7 +8,7 @@ import { Badge } from '@/Badge/Badge';
 type Story = StoryObj<typeof Badge>;
 
 const meta = {
-  title: 'Badge/Badge',
+  title: 'Primitive/Badge/Badge',
 } as const;
 
 type Args = {

package/src/Buttons/Button/Button.stories.tsx

@@ -12,7 +12,7 @@ import Button from '.';
 type Story = StoryObj<typeof Button>;
 
 const meta = {
-  title: 'Buttons/Button',
+  title: 'Primitive/Buttons/Button',
   component: Button,
   argTypes: {
     icon: { control: 'select', options: iconNames },

package/src/Buttons/Button/index.tsx

@@ -2,7 +2,7 @@
 
 import type { ElementType, ForwardRefRenderFunction } from 'react';
 import { forwardRef } from 'react';
-import type { As } from '@remember-web/shared/types';
+import type { As } from '@remember-web/shared';
 
 import { Spinner } from '@/Common';
 

package/src/Buttons/Button/types.ts

@@ -1,5 +1,5 @@
 import type { ElementType } from 'react';
-import type { ConvertTransientProps } from '@remember-web/shared/types';
+import type { ConvertTransientProps } from '@remember-web/shared';
 import type { ColorVariable } from '@remember-web/mixin';
 
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xLarge';

package/src/Common/Divider/Divider.stories.tsx

@@ -6,7 +6,7 @@ import { Divider } from './index';
 type Story = StoryObj<typeof Divider>;
 
 const meta = {
-  title: 'Common/Divider',
+  title: 'Primitive/Common/Divider',
   component: Divider,
 } satisfies Meta<typeof Divider>;
 

package/src/Common/Flex/index.tsx

@@ -2,7 +2,7 @@
 
 import type { CSSProperties, ElementType, HTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
-import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+import type { ConvertTransientProps } from '@remember-web/shared';
 
 export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
   as?: ElementType;

package/src/Common/Spinner/Spinner.stories.tsx

@@ -6,7 +6,7 @@ import { Spinner } from './index';
 type Story = StoryObj<typeof Spinner>;
 
 const meta = {
-  title: 'Common/Spinner',
+  title: 'Primitive/Common/Spinner',
   component: Spinner,
   args: {},
 } satisfies Meta<typeof Spinner>;

package/src/Common/Spinner/types.ts

@@ -1,4 +1,4 @@
-import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+import type { ConvertTransientProps } from '@remember-web/shared';
 import type { ColorVariable } from '@remember-web/mixin';
 
 export type SpinnerLayout = 'full' | 'block';

package/src/Common/Typography/Typography.stories.tsx

@@ -18,7 +18,7 @@ import Typography from '.';
 type Story = StoryObj<typeof Typography>;
 
 const meta = {
-  title: 'Typography/Typography',
+  title: 'Primitive/Typography/Typography',
   component: Typography,
 } satisfies Meta<typeof Typography>;
 

package/src/Control/Checkbox.stories.tsx

@@ -6,7 +6,7 @@ import { Checkbox } from './Checkbox';
 type Story = StoryObj<typeof Checkbox>;
 
 const meta = {
-  title: 'Control/Checkbox',
+  title: 'Primitive/Control/Checkbox',
   component: Checkbox,
   argTypes: {
     onToggle: { table: { disable: true } },

package/src/Control/Radio.stories.tsx

@@ -5,7 +5,7 @@ import { Radio } from './Radio';
 type Story = StoryObj<typeof Radio>;
 
 const meta = {
-  title: 'Control/Radio',
+  title: 'Primitive/Control/Radio',
   component: Radio,
   argTypes: {
     inputClassName: { table: { disable: true } },

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

@@ -6,7 +6,7 @@ import { Switch } from '.';
 type Story = StoryObj<typeof Switch>;
 
 const meta = {
-  title: 'Control/Switch',
+  title: 'Primitive/Control/Switch',
   component: Switch,
 } satisfies Meta<typeof Switch>;
 

package/src/Control/Toggle.stories.tsx

@@ -6,7 +6,7 @@ import { Toggle } from './Toggle';
 type Story = StoryObj<typeof Toggle>;
 
 const meta = {
-  title: 'Control/Toggle',
+  title: 'Primitive/Control/Toggle',
   component: Toggle,
   argTypes: {
     onToggle: { table: { disable: true } },

package/src/Floating/DropdownMenu/DropdownMenu.stories.tsx

@@ -11,7 +11,7 @@ import { Button } from '@';
 type Story = StoryObj<typeof DropdownMenu>;
 
 const meta = {
-  title: 'Floating/DropdownMenu',
+  title: 'Primitive/Floating/DropdownMenu',
   component: DropdownMenu,
 } satisfies Meta<typeof DropdownMenu>;
 

package/src/Floating/DropdownMenu/DropdownMenuSection.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
+import type { GetStyledComponentProps } from '@remember-web/shared';
 
 import {
   StyledDropdownMenuSectionTitle,

package/src/Floating/DropdownMenu/styles.tsx

@@ -6,7 +6,7 @@ import {
   divider,
   getTypographyStyles,
 } from '@remember-web/mixin';
-import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+import type { ConvertTransientProps } from '@remember-web/shared';
 
 import { StyledPopoverContent } from '../Popover/styles';
 

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

@@ -7,7 +7,7 @@ import { Flex } from '@/Common';
 type Story = StoryObj<typeof Popover>;
 
 const meta = {
-  title: 'Floating/Popover',
+  title: 'Primitive/Floating/Popover',
   component: Popover,
 } satisfies Meta<typeof Popover>;
 

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

@@ -9,7 +9,7 @@ import Tooltip from '.';
 type Story = StoryObj<typeof Tooltip>;
 
 const meta = {
-  title: 'Floating/Tooltip',
+  title: 'Primitive/Floating/Tooltip',
   component: Tooltip,
   argTypes: {
     content: {

package/src/Floating/Tooltip/index.tsx

@@ -2,7 +2,7 @@
 
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { useState, type PropsWithChildren } from 'react';
-import { isSSR } from '@remember-web/shared/utils/common';
+import { isSSR } from '@remember-web/shared';
 import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
 
@@ -21,7 +21,7 @@ const hoverable = isSSR()
 
 export default function Tooltip<
   Type extends TooltipType = 'hover',
-  Size extends TooltipSize = 'small'
+  Size extends TooltipSize = 'small',
 >({
   children,
   content,
@@ -55,8 +55,8 @@ export default function Tooltip<
   const isOpen = isStaticTypeProps(props)
     ? props.open
     : isHoverType
-    ? undefined
-    : _open;
+      ? undefined
+      : _open;
 
   return (
     <RadixTooltip.Provider>

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

@@ -37,6 +37,7 @@ const DesignedSelect = <Value extends SelectValue>(
     width,
     extendDirection,
     disabled,
+    onClick,
     ...props
   }: DesignedSelectInternalProps<Value>,
   ref?: Ref<HTMLDivElement>
@@ -217,6 +218,7 @@ const DesignedSelect = <Value extends SelectValue>(
     >
       <StyledSelect
         ref={ref}
+        onClick={onClick}
         expandedDirection={expandedDirection}
         isPlaceholder={!selectedOption && !!placeholder}
         onPointerDown={(e) => {

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

@@ -12,7 +12,16 @@ const NativeSelect: ForwardRefRenderFunction<
   HTMLSelectElement,
   NativeSelectInternalProps
 > = (
-  { children, className, width, placeholder, value, disabled, ...props },
+  {
+    children,
+    className,
+    width,
+    placeholder,
+    value,
+    disabled,
+    onClick,
+    ...props
+  },
   ref
 ) => {
   const showPlaceholder = !value && !!placeholder;
@@ -26,6 +35,7 @@ const NativeSelect: ForwardRefRenderFunction<
         ref={ref}
         isPlaceholder={showPlaceholder}
         disabled={disabled}
+        onClick={onClick}
       >
         {!value && (
           <option value="" selected>

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

@@ -8,7 +8,7 @@ import Select from '.';
 type Story = StoryObj<typeof Select>;
 
 const meta = {
-  title: 'Inputs/Select',
+  title: 'Primitive/Inputs/Select',
   component: Select,
   argTypes: {
     label: { type: 'string' },
@@ -18,6 +18,7 @@ const meta = {
     width: { type: 'string' },
     maxHeight: { type: 'string' },
     native: { type: 'boolean' },
+    onClick: { action: 'clicked' },
   },
 } satisfies Meta<typeof Select>;
 
@@ -36,6 +37,7 @@ export const Native: Story = {
         onChange={(tV) => {
           setValue(tV);
         }}
+        onClick={() => console.log('clicked native select')}
       >
         <Select.Option value="1">Option 1</Select.Option>
         <Select.Option value="2">Option 2</Select.Option>
@@ -66,6 +68,7 @@ export const Custom: Story = {
         onChange={(tV) => {
           setValue(tV);
         }}
+        onClick={() => console.log('clicked custom select')}
       >
         <Select.Option value="1">Option 1</Select.Option>
         <Select.Option value="2">Option 2</Select.Option>

package/src/Inputs/Select/index.tsx

@@ -29,6 +29,7 @@ function Select<Value extends SelectValue>(
     placeholder,
     width,
     required,
+    onClick,
   } = props;
 
   if (props.native) {
@@ -43,6 +44,7 @@ function Select<Value extends SelectValue>(
         <NativeSelect
           disabled={disabled}
           className={className}
+          onClick={onClick}
           onChange={(e) => {
             onChange?.(e.target.value as Value, e.target.innerText);
           }}
@@ -72,6 +74,7 @@ function Select<Value extends SelectValue>(
         className={className}
         value={value}
         disabled={disabled}
+        onClick={onClick}
         onChange={(_value, _label) => onChange?.(_value as Value, _label)}
         placeholder={placeholder}
         width={width}

package/src/Inputs/Select/types.ts

@@ -27,6 +27,7 @@ export type SelectBaseProps<Value extends SelectValue> = {
     targetValue: Value,
     targetLabel: ReactNode
   ) => Promise<void> | void;
+  onClick?: React.MouseEventHandler<HTMLElement>;
 };
 
 export type DesignedSelectProps<Value extends SelectValue> =

package/src/Inputs/TextInput/TextInput.stories.tsx

@@ -12,7 +12,7 @@ import TextInput from '.';
 type Story = StoryObj<typeof TextInput>;
 
 const meta = {
-  title: 'Inputs/TextInput',
+  title: 'Primitive/Inputs/TextInput',
   component: TextInput,
   argTypes: {
     type: {

package/src/Inputs/TextInput/styles.ts

@@ -11,7 +11,7 @@ import {
   ellipsis,
   getTypographyStyles,
 } from '@remember-web/mixin';
-import { formatUnit } from '@remember-web/shared/utils/style';
+import { formatUnit } from '@remember-web/shared';
 
 export const InputWrapper = styled.div<{ $width?: string | number }>`
   ${({ $width }) =>
@@ -32,7 +32,9 @@ export const InputContainer = styled.div<{
   padding: 0 12px;
   gap: 8px;
 
-  transition: border-color 0.2s, background-color 0.2s;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
 
   ${({ hasError, disabled }) => [
     hasError

package/src/Logos/RememberLogo/RememberLogo.stories.tsx

@@ -5,7 +5,7 @@ import { RememberLogo } from './index';
 type Story = StoryObj<typeof RememberLogo>;
 
 const meta = {
-  title: 'Logos/RememberLogo',
+  title: 'Primitive/Logos/RememberLogo',
   component: RememberLogo,
   args: {
     color: 'black',

package/src/Logos/RememberMobileLogo/RememberMobileLogo.stories.tsx

@@ -5,7 +5,7 @@ import { RememberMobileLogo } from '.';
 type Story = StoryObj<typeof RememberMobileLogo>;
 
 const meta = {
-  title: 'Logos/RememberMobileLogo',
+  title: 'Primitive/Logos/RememberMobileLogo',
   component: RememberMobileLogo,
   args: {
     color: 'black',

package/src/Logos/RememberServiceLogo/RememberServiceLogo.stories.tsx

@@ -5,7 +5,7 @@ import { RememberServiceLogo } from '.';
 type Story = StoryObj<typeof RememberServiceLogo>;
 
 const meta = {
-  title: 'Logos/RememberServiceLogo',
+  title: 'Primitive/Logos/RememberServiceLogo',
   component: RememberServiceLogo,
   args: {
     label: '채용솔루션',

package/src/Logos/RememberServiceLogo/index.tsx

@@ -1,4 +1,4 @@
-import type { GetStyledComponentProps } from '@remember-web/shared/types';
+import type { GetStyledComponentProps } from '@remember-web/shared';
 
 import type { RememberLogoProps } from '@/Logos/types';
 import { Divider } from '@/Common';

package/src/Logos/RememberSquareLogo/RememberSquareLogo.stories.tsx

@@ -5,7 +5,7 @@ import { RememberSquareLogo } from '.';
 type Story = StoryObj<typeof RememberSquareLogo>;
 
 const meta = {
-  title: 'Logos/RememberSquareLogo',
+  title: 'Primitive/Logos/RememberSquareLogo',
   component: RememberSquareLogo,
   args: {
     color: 'black',

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

@@ -9,7 +9,7 @@ import { Dialog } from '.';
 type Story = StoryObj<typeof Dialog>;
 
 const meta = {
-  title: 'Modals/Dialog',
+  title: 'Primitive/Modals/Dialog',
   component: DialogComponent,
 } satisfies Meta<typeof DialogComponent>;
 

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

@@ -6,7 +6,7 @@ import { CompactPagination } from '.';
 type Story = StoryObj<typeof CompactPagination>;
 
 const meta = {
-  title: 'Common/CompactPagination',
+  title: 'Primitive/Paginations/CompactPagination',
   component: CompactPagination,
   args: {
     totalItemCount: 100,

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

@@ -6,7 +6,7 @@ import { Pagination } from '.';
 type Story = StoryObj<typeof Pagination>;
 
 const meta = {
-  title: 'Common/Pagination',
+  title: 'Primitive/Paginations/Pagination',
   component: Pagination,
   args: {
     totalItemCount: 100,

package/src/Paginations/Pagination/index.tsx

@@ -7,7 +7,7 @@ import {
   IconArrowDoubleRight,
 } from '@remember-web/icon';
 import { contents000, contents300 } from '@remember-web/mixin';
-import { range } from '@remember-web/shared/utils/common';
+import { range } from '@remember-web/shared';
 
 import {
   ArrowButton,

package/dist/primitive/src/Avatars/Avatar/Avatar.stories.d.ts

@@ -1,42 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
-import Avatar from '.';
-type Story = StoryObj<typeof Avatar>;
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Partial<import("@remember-web/shared/types").ConvertTransientProps<import("../../Avatars/Avatar/styles").StyledAvatarProps>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    argTypes: {
-        rounded: {
-            options: boolean[];
-            control: {
-                type: string;
-            };
-        };
-        size: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        imageUrl: {
-            options: (string | undefined)[];
-            control: {
-                type: string;
-            };
-        };
-        children: {
-            options: (string | undefined)[];
-            control: {
-                type: string;
-            };
-        };
-        backgroundColor: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export declare const Default: Story;
-export default meta;
-//# sourceMappingURL=Avatar.stories.d.ts.map

package/dist/primitive/src/Avatars/Avatar/Avatar.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/Avatars/Avatar/Avatar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,MAAM,MAAM,GAAG,CAAC;AAEvB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BqB,CAAC;AAEhC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AACF,eAAe,IAAI,CAAC"}

package/dist/primitive/src/Avatars/Avatar/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';\nimport { bg200, divider } from '@remember-web/mixin';\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => (\n  <StyledAvatar\n    ref={ref}\n    $size={size}\n    $backgroundColor={backgroundColor}\n    $border={border}\n    $rounded={rounded}\n  >\n    {imageUrl ? (\n      <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" />\n    ) : (\n      children ?? <IconAvatarEmpty size=\"100%\" />\n    )}\n  </StyledAvatar>\n);\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","ref","$size","$backgroundColor","$border","$rounded","src","loading","alt"],"mappings":";;;;;;;;;AAcA;AASK;AAPDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAOAC;AACAC;AACAC;AACAC;AACAC;;AAGOC;AAAeC;AAAeC;;AAENZ;;AAC9B;AACY;AAGjB;;"}

package/dist/primitive/src/Avatars/Avatar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;AA4BlC,wBAAkC"}

package/dist/primitive/src/Avatars/Avatar/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';\nimport { bg200, divider } from '@remember-web/mixin';\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => (\n  <StyledAvatar\n    ref={ref}\n    $size={size}\n    $backgroundColor={backgroundColor}\n    $border={border}\n    $rounded={rounded}\n  >\n    {imageUrl ? (\n      <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" />\n    ) : (\n      children ?? <IconAvatarEmpty size=\"100%\" />\n    )}\n  </StyledAvatar>\n);\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","ref","$size","$backgroundColor","$border","$rounded","src","loading","alt"],"mappings":";;;;;;;AAcA;AASK;AAPDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAOAC;AACAC;AACAC;AACAC;AACAC;;AAGOC;AAAeC;AAAeC;;AAENZ;;AAC9B;AACY;AAGjB;;"}

package/dist/primitive/src/Avatars/Avatar/styles.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nexport const avatarSize = {\n  xxlarge: 64,\n  xlarge: 56,\n  large: 48,\n  medium: 40,\n  small: 32,\n  xsmall: 24,\n  xxsmall: 20,\n};\n\nexport interface StyledAvatarProps {\n  $size: keyof typeof avatarSize;\n  $border?: {\n    width?: NonNullable<CSSProperties['borderWidth']>;\n    color?: NonNullable<CSSProperties['borderColor']>;\n  };\n  $rounded?: boolean;\n  $imageUrl?: string;\n  $backgroundColor?: CSSProperties['backgroundColor'];\n}\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>(\n  ({ $size, $border, $backgroundColor, $rounded }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: `${avatarSize[$size]}px`,\n    maxWidth: `${avatarSize[$size]}px`,\n    maxHeight: `${avatarSize[$size]}px`,\n    aspectRatio: '1 / 1',\n    boxSizing: 'border-box',\n    border: $border ? `${$border.width} solid ${$border.color}` : 'none',\n    borderRadius: $rounded ? '50%' : 'none',\n\n    backgroundColor: $backgroundColor,\n\n    contain: 'strict',\n\n    img: {\n      width: '100%',\n      height: '100%',\n    },\n  })\n);\n"],"names":["avatarSize","xxlarge","xlarge","large","medium","small","xsmall","xxsmall","StyledAvatar","styled","div","_ref","$size","$border","$backgroundColor","$rounded","display","alignItems","justifyContent","width","concat","maxWidth","maxHeight","aspectRatio","boxSizing","border","color","borderRadius","backgroundColor","contain","img","height"],"mappings":";;;;;;;;AAGO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,OAAO,EAAE,EAAA;AACX,EAAC;AAaM,IAAMC,YAAY,GAAGC,uBAAM,CAACC,GAAG,CACpC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAAA,OAAQ;AACnDC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,KAAK,KAAAC,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAC/BS,IAAAA,QAAQ,KAAAD,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAClCU,IAAAA,SAAS,KAAAF,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AACnCW,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAE,YAAY;AACvBC,IAAAA,MAAM,EAAEZ,OAAO,GAAAO,EAAAA,CAAAA,MAAA,CAAMP,OAAO,CAACM,KAAK,EAAA,SAAA,CAAA,CAAAC,MAAA,CAAUP,OAAO,CAACa,KAAK,IAAK,MAAM;AACpEC,IAAAA,YAAY,EAAEZ,QAAQ,GAAG,KAAK,GAAG,MAAM;AAEvCa,IAAAA,eAAe,EAAEd,gBAAgB;AAEjCe,IAAAA,OAAO,EAAE,QAAQ;AAEjBC,IAAAA,GAAG,EAAE;AACHX,MAAAA,KAAK,EAAE,MAAM;AACbY,MAAAA,MAAM,EAAE,MAAA;AACV,KAAA;GACD,CAAA;AAAA,CACH;;;;;"}

package/dist/primitive/src/Avatars/Avatar/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Avatars/Avatar/styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;KACnD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,YAAY,8NAsBxB,CAAC"}