@remember-web/primitive 0.2.7 → 0.2.9

package/dist/src/Paginations/styles.esm.js

@@ -5,13 +5,13 @@ import styled, { css } from 'styled-components';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var PaginationContainer = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ", "\n"])), mobileOnly(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    gap: 8px;\n  "])))));
-var CompactPaginationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", "\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n"])), getTypographyStyles('Body1_M'));
-var CurrentPage = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), getTypographyStyles('Body1_B'));
+var CompactPaginationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", "\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n"])), getTypographyStyles('UIBody3'));
+var CurrentPage = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), getTypographyStyles('SubTitle2'));
 var Pages = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  all: unset;\n  display: inherit;\n  gap: 4px;\n"])));
 var Page = styled.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
 var DefaultButton = styled.button.attrs({
   type: 'button'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ", "\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 4px;\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"])), getTypographyStyles('Body1_M'), contents000, contents000);
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ", "\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 4px;\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"])), getTypographyStyles('UIBody3'), contents000, contents000);
 var ArrowButton = styled(DefaultButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), desktopOnly(css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n    }\n  "])), bg200, bg300)), mobileOnly(css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
 var BaseButton = styled(DefaultButton)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  &:hover,\n  &:focus {\n    border: solid 1px ", ";\n    border-radius: 4px;\n    background-color: ", ";\n  }\n\n  ", "\n"])), contents300, bg100, mobileOnly(css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
 var PageButton = styled(BaseButton)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {

package/dist/src/Paginations/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  desktopOnly,\n  getTypographyStyles,\n  mobileOnly,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('Body1_M')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  desktopOnly,\n  getTypographyStyles,\n  mobileOnly,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('UIBody3')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('SubTitle2')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('UIBody3')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;"}

package/dist/src/index.cjs.js

@@ -31,6 +31,7 @@ var index$j = require('./Floating/Popover/index.cjs.js');
 var index$k = require('./Floating/Tooltip/index.cjs.js');
 var styles$2 = require('./Floating/DropdownMenu/styles.cjs.js');
 var styles$3 = require('./Floating/Popover/styles.cjs.js');
+var index$l = require('./Chips/Chip/index.cjs.js');
 
 
 
@@ -80,4 +81,5 @@ exports.StyledPopoverContent = styles$3.StyledPopoverContent;
 exports.StyledPopoverContentWrapper = styles$3.StyledPopoverContentWrapper;
 exports.showFadeIn = styles$3.showFadeIn;
 exports.showFadeOut = styles$3.showFadeOut;
+exports.Chip = index$l.Chip;
 //# sourceMappingURL=index.cjs.js.map

package/dist/src/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/index.d.ts

@@ -8,4 +8,5 @@ export * from './Modals';
 export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
+export * from './Chips';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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;AAC3B,cAAc,SAAS,CAAC"}

package/dist/src/index.esm.js

@@ -29,4 +29,5 @@ export { default as Popover } from './Floating/Popover/index.esm.js';
 export { default as Tooltip } from './Floating/Tooltip/index.esm.js';
 export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuContentWrapper, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss } from './Floating/DropdownMenu/styles.esm.js';
 export { StyledPopoverContent, StyledPopoverContentWrapper, showFadeIn, showFadeOut } from './Floating/Popover/styles.esm.js';
+export { Chip } from './Chips/Chip/index.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,9 +8,10 @@ export declare const TitleContainer: import("styled-components").IStyledComponen
 export declare const Table: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>;
 export declare const TableHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>;
 export declare const TableBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>;
-export declare const TableColumn: ({ isHeader, align, children, }: {
+export declare const TableColumn: ({ isHeader, align, rowSpan, children, }: {
     isHeader?: boolean;
     align?: TextAlign;
+    rowSpan?: number;
     children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>;

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

@@ -1 +1 @@
-{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../src/stories/common.styles.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,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"}
+{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../src/stories/common.styles.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,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,4CAKrB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CASE,CAAC;AAEJ,eAAO,MAAM,QAAQ,0NAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -41,8 +41,8 @@
     "@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.9",
-    "@remember-web/mixin": "^0.2.4",
+    "@remember-web/icon": "^0.1.12",
+    "@remember-web/mixin": "^0.2.5",
     "@remember-web/shared": "^0.1.1"
   },
   "devDependencies": {

package/src/Badge/style.tsx

@@ -9,8 +9,7 @@ import styled, { css } from 'styled-components';
  * pseudo로 사용시 data-badge-value attribue가 필요합니다.
  */
 export const badgeCss = css`
- ${getTypographyStyles('Subtitle2')}
-
+ ${getTypographyStyles('SubTitle2')}
   display: inline-block;
   box-sizing: border-box;
   line-height: 16px;

package/src/Buttons/Button/const.ts

@@ -6,25 +6,25 @@ import type { ButtonSize, ButtonVariant } from './types';
 
 export const BUTTON_SIZES = {
   small: {
-    typography: 'Body2_M',
+    typography: 'Caption1',
     height: '32px',
     minWidth: '68px',
     padding: '0 16px',
   },
   medium: {
-    typography: 'Body1_M',
+    typography: 'UIBody3',
     height: '36px',
     minWidth: '78px',
     padding: '0 20px',
   },
   large: {
-    typography: 'Headline4_M',
+    typography: 'UIBody2',
     height: '44px',
     minWidth: '108px',
     padding: '0 20px',
   },
   xLarge: {
-    typography: 'Headline4_M',
+    typography: 'UIBody2',
     height: '52px',
     minWidth: '116px',
     padding: '0 24px',

package/src/Chips/Chip/Chip.stories.tsx

@@ -0,0 +1,138 @@
+import {
+  getIconComponentFromName,
+  iconNames,
+  isIconName,
+} from '@/stories/util';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment, createElement } from 'react';
+
+import { Typography } from '@/Common';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from '@/stories/common.styles';
+import { IconArrow2LeftS } from '@remember-web/icon';
+import { Chip } from './';
+import type { ChipSize } from './types';
+
+type Story = StoryObj<typeof Chip>;
+
+const meta = {
+  title: 'Primitive/Chips/Chip',
+  component: Chip,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['filled', 'outline', 'dashedLine'],
+    },
+    size: { control: 'select', options: ['small', 'medium'] },
+    children: { control: 'text' },
+    disabled: { control: 'boolean' },
+    selected: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    onDelete: { action: 'deleted' },
+    leftIcon: { control: 'select', options: ['none', ...iconNames] },
+    deleteIcon: { control: 'select', options: ['none', ...iconNames] },
+  },
+  args: {
+    children: 'Test Chip',
+    onDelete: () => console.log('Delete'),
+    size: 'medium',
+    variant: 'filled',
+    clickable: true,
+    selected: false,
+    disabled: false,
+  },
+} satisfies Meta<typeof Chip>;
+
+export const Default: Story = {
+  render: ({ leftIcon, deleteIcon, selected, clickable, ...args }) => {
+    const leftIconString = String(leftIcon);
+    const leftIconElement =
+      leftIcon && isIconName(leftIconString)
+        ? createElement(getIconComponentFromName(leftIconString))
+        : undefined;
+
+    const rightIconString = String(deleteIcon);
+    const deleteIconElement =
+      rightIconString && isIconName(rightIconString)
+        ? createElement(getIconComponentFromName(rightIconString))
+        : undefined;
+
+    return (
+      <Chip
+        {...args}
+        key={JSON.stringify(args)}
+        leftIcon={leftIconElement}
+        deleteIcon={deleteIconElement}
+        onDelete={args.onDelete || (() => {})}
+      />
+    );
+  },
+};
+
+const variants = ['filled', 'outline', 'dashedLine'] as const;
+const sizes = ['medium', 'small'] as const;
+const states = ['default', 'hover', 'disabled', 'selected'] as const;
+
+export const Overview: Story = {
+  render: () => (
+    <Paper $minWidth={800} $maxWidth={1200}>
+      <Typography variant="Headline">Chip Overview</Typography>
+      <br />
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableColumn isHeader>State</TableColumn>
+            <TableColumn isHeader>Size</TableColumn>
+            {variants.map((variant) => (
+              <TableColumn key={variant} isHeader align="center">
+                {variant.charAt(0).toUpperCase() + variant.slice(1)}
+              </TableColumn>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {states.map((state) => (
+            <Fragment key={state}>
+              {sizes.map((size: ChipSize, index: number) => (
+                <TableRow key={`${state}-${size}`}>
+                  {index === 0 && (
+                    <TableColumn rowSpan={2}>
+                      {state.charAt(0).toUpperCase() + state.slice(1)}
+                    </TableColumn>
+                  )}
+                  <TableColumn>
+                    {size.charAt(0).toUpperCase() + size.slice(1)}
+                  </TableColumn>
+                  {variants.map((variant) => (
+                    <TableColumn key={variant} align="center">
+                      <Chip
+                        size={size}
+                        variant={variant}
+                        clickable={state !== 'disabled' || true}
+                        disabled={state === 'disabled'}
+                        selected={state === 'selected'}
+                        className={state === 'hover' ? 'hover-state' : ''}
+                        onDelete={() => console.log('Delete')}
+                        leftIcon={<IconArrow2LeftS />}
+                      >
+                        칩이름
+                      </Chip>
+                    </TableColumn>
+                  ))}
+                </TableRow>
+              ))}
+            </Fragment>
+          ))}
+        </TableBody>
+      </Table>
+    </Paper>
+  ),
+};
+
+export default meta;

package/src/Chips/Chip/const.ts

@@ -0,0 +1,115 @@
+import {
+  bg100,
+  bg200,
+  bg300,
+  contents100,
+  contents150,
+  contents200,
+  contents300,
+  contents999,
+  primary100,
+} from '@remember-web/mixin';
+import type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';
+
+export const CHIP_SIZE_STYLE = {
+  small: {
+    typography: 'Caption1',
+    padding: '8px 10px',
+    height: '28px',
+  },
+  medium: {
+    typography: 'UIBody3',
+    padding: '8px 12px',
+    height: '30px',
+  },
+} as const satisfies Record<ChipSize, unknown>;
+
+export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
+  filled: {
+    default: {
+      backgroundColor: bg200,
+      color: contents150,
+      leftIconColor: contents150,
+      deleteButtonColor: contents200,
+    },
+    hover: {
+      backgroundColor: bg200,
+      color: contents100,
+      leftIconColor: contents100,
+      deleteButtonColor: contents150,
+    },
+    disabled: {
+      backgroundColor: bg300,
+      color: contents300,
+      leftIconColor: contents300,
+      deleteButtonColor: contents300,
+    },
+    selected: {
+      backgroundColor: primary100,
+      color: contents999,
+      leftIconColor: contents999,
+      deleteButtonColor: contents999,
+    },
+  },
+
+  outline: {
+    default: {
+      backgroundColor: bg100,
+      color: contents150,
+      leftIconColor: contents150,
+      deleteButtonColor: contents200,
+      border: `1px solid ${contents150}`,
+    },
+    hover: {
+      backgroundColor: bg100,
+      color: contents100,
+      leftIconColor: contents100,
+      deleteButtonColor: contents150,
+      border: `1px solid ${contents100}`,
+    },
+    disabled: {
+      backgroundColor: bg100,
+      color: contents200,
+      leftIconColor: contents200,
+      deleteButtonColor: contents200,
+      border: `1px solid ${contents200}`,
+    },
+    selected: {
+      backgroundColor: primary100,
+      color: contents999,
+      leftIconColor: contents999,
+      deleteButtonColor: contents999,
+    },
+  },
+
+  dashedLine: {
+    default: {
+      backgroundColor: bg100,
+      color: contents150,
+      leftIconColor: contents150,
+      deleteButtonColor: contents200,
+      border: `1px dashed ${contents150}`,
+    },
+    hover: {
+      backgroundColor: bg100,
+      color: contents100,
+      leftIconColor: contents100,
+      deleteButtonColor: contents150,
+      border: `1px dashed ${contents100}`,
+    },
+    disabled: {
+      backgroundColor: bg100,
+      color: contents200,
+      leftIconColor: contents200,
+      deleteButtonColor: contents200,
+      border: `1px dashed ${contents200}`,
+    },
+    selected: {
+      backgroundColor: primary100,
+      color: contents999,
+      leftIconColor: contents999,
+      deleteButtonColor: contents999,
+      border: `1px solid ${primary100}`,
+    },
+  },
+} as const satisfies Record<ChipVariant, unknown>;

package/src/Chips/Chip/index.tsx

@@ -0,0 +1,51 @@
+import { IconCloseS } from '@remember-web/icon';
+import { type ForwardedRef, forwardRef } from 'react';
+import type { PolymorphicComponent } from 'styled-components';
+import { ButtonWrapper, StyledChip } from './styles';
+import { ensureValidChipProps } from './typeGuard';
+import type { ChipProps } from './types';
+
+export const Chip = forwardRef(
+  (props: ChipProps, ref: ForwardedRef<HTMLDivElement | null>) => {
+    const {
+      size = 'medium',
+      variant = 'filled',
+      selected = false,
+      clickable = true,
+      ...rest
+    } = props;
+
+    // NOTE: 개발 모드에서만 런타임 체크 수행
+    if (process.env.NODE_ENV === 'development') {
+      ensureValidChipProps(props);
+    }
+
+    return (
+      <StyledChip
+        ref={ref}
+        aria-live="polite"
+        $size={size}
+        $variant={variant}
+        $selected={selected}
+        $clickable={clickable}
+        data-chip-disabled={props.disabled}
+        {...rest}
+      >
+        {props.leftIcon}
+        {props.children}
+        {props.onDelete && (
+          <ButtonWrapper
+            onClick={(e: React.MouseEvent | React.KeyboardEvent) => {
+              e.stopPropagation();
+              e.preventDefault();
+              props.onDelete?.();
+            }}
+            className="delete-button"
+          >
+            {props.deleteIcon || <IconCloseS />}
+          </ButtonWrapper>
+        )}
+      </StyledChip>
+    );
+  }
+) as PolymorphicComponent<'web', ChipProps>;

package/src/Chips/Chip/styles.ts

@@ -0,0 +1,80 @@
+import { getTypographyStyles } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
+import { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';
+import type { ChipState, ChipStyleProps } from './types';
+
+const getVariantStyles = (props: Partial<ChipStyleProps>) => {
+  const { $variant = 'filled', $selected, $clickable } = props;
+  const getStateStyle = (state: ChipState) => css`
+    background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};
+    color: ${CHIP_VARIANT_STYLE[$variant][state].color};
+    border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};
+    --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};
+    --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};
+  `;
+
+  return css`
+    ${getStateStyle('default')};
+
+    ${
+      $clickable &&
+      css`
+      &:hover:not([data-chip-disabled='true']) {
+        ${getStateStyle('hover')}
+      }
+
+      ${$selected ? '&' : '&:active'}:not([data-chip-disabled="true"]) {
+        ${getStateStyle('selected')}
+        ${$variant === 'outline' && 'border: none;'}
+      }
+      `
+    }
+    
+    &[data-chip-disabled='true'] {
+      ${getStateStyle('disabled')}
+      cursor: not-allowed;
+    }
+
+    & svg {
+      color: var(--left-icon-color);
+    }
+
+    .delete-button svg {
+      color: var(--delete-button-color);
+    }
+  `;
+};
+
+export const StyledChip = styled.div<ChipStyleProps>`
+  ${({ $size, $variant, $clickable = false, ...props }) => css`
+    box-sizing: border-box;
+    user-select: none;
+    cursor: ${$clickable ? 'pointer' : 'default'};
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    gap: 4px;
+
+    width: fit-content;
+    border-radius: 50px;
+    text-align: center;
+    transition: all 0.2s ease-in;
+
+    height: ${CHIP_SIZE_STYLE[$size].height};
+    padding: ${CHIP_SIZE_STYLE[$size].padding};
+
+    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}
+
+    ${getVariantStyles({ $variant, $clickable, ...props })}
+  `}
+`;
+
+export const ButtonWrapper = styled.button`
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  `;

package/src/Chips/Chip/typeGuard.ts

@@ -0,0 +1,48 @@
+import type { ChipProps, ChipSize, ChipVariant } from './types';
+
+export function ensureValidChipProps(props: ChipProps): props is ChipProps {
+  if (props.clickable === false && 'selected' in props) {
+    throw new Error(
+      '오류: "clickable"이 false일 때는 "selected" 속성을 사용할 수 없습니다. ' +
+        '선택 가능한 Chip을 만들려면 "clickable"을 true로 설정하세요.'
+    );
+  }
+
+  if (props.onDelete === undefined && 'deleteIcon' in props) {
+    throw new Error(
+      '오류: "onDelete" 함수 없이 "deleteIcon"을 사용할 수 없습니다. ' +
+        '"deleteIcon"을 사용하려면 "onDelete" 함수를 함께 사용해야 합니다.'
+    );
+  }
+
+  if (!props.children) {
+    throw new Error(
+      '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '
+    );
+  }
+
+  if (!props.size) {
+    throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');
+  }
+
+  if (!props.variant) {
+    throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
+  }
+
+  const validSizes: ChipSize[] = ['small', 'medium'];
+  if (props.size && !validSizes.includes(props.size)) {
+    throw new Error(
+      `오류: 올바르지 않은 size 값입니다: "${props.size}". ` +
+        `유효한 size 값은 다음과 같습니다: ${validSizes.join(', ')}.`
+    );
+  }
+
+  const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];
+  if (props.variant && !validVariants.includes(props.variant)) {
+    throw new Error(
+      `오류: 올바르지 않은 variant 값입니다: "${props.variant}". ` +
+        `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`
+    );
+  }
+  return true;
+}

package/src/Chips/Chip/types.ts

@@ -0,0 +1,61 @@
+import type { ComponentProps } from 'react';
+
+// Props types -------------------------------------------------------
+export type ChipSize = 'small' | 'medium';
+
+export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
+
+type ClickableProps =
+  | {
+      clickable?: true;
+      selected?: boolean;
+    }
+  | {
+      clickable: false;
+      selected?: never;
+    };
+
+type DeleteProps =
+  | {
+      onDelete: VoidFunction;
+      deleteIcon?: React.ReactNode;
+    }
+  | {
+      onDelete?: never;
+      deleteIcon?: never;
+    };
+
+type BaseChipProps = {
+  size: ChipSize;
+  variant: ChipVariant;
+  children: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export type ChipProps = BaseChipProps &
+  ClickableProps &
+  DeleteProps &
+  ComponentProps<'div'>;
+
+// Styling types -------------------------------------------------------
+export type ChipState = 'default' | 'hover' | 'disabled' | 'selected';
+
+export type ChipStyleProps = {
+  $size: ChipSize;
+  $variant: ChipVariant;
+  $clickable: boolean;
+  $selected: boolean;
+};
+
+interface ChipStateStyle {
+  backgroundColor: string;
+  color: string;
+  leftIconColor: string;
+  deleteButtonColor: string;
+  border?: string;
+}
+
+type ChipStateStyles = Record<ChipState, ChipStateStyle>;
+
+export type ChipVariantStyleMap = Record<ChipVariant, ChipStateStyles>;

package/src/Chips/index.ts

@@ -0,0 +1 @@
+export * from './Chip';