@remember-web/primitive 0.4.8 → 0.5.1

package/dist/src/index.cjs.js

@@ -2,86 +2,63 @@
 
 var index = require('./Avatars/Avatar/index.cjs.js');
 var styles = require('./Avatars/Avatar/styles.cjs.js');
-var index$1 = require('./Buttons/Button/index.cjs.js');
 var utils = require('./Badge/utils.cjs.js');
 var Badge = require('./Badge/Badge.cjs.js');
 var style = require('./Badge/style.cjs.js');
-var index$2 = require('./Common/Divider/index.cjs.js');
-var index$3 = require('./Common/Flex/index.cjs.js');
-var index$4 = require('./Common/Grid/index.cjs.js');
-var index$5 = require('./Common/Spinner/index.cjs.js');
-var index$6 = require('./Common/Skeleton/index.cjs.js');
-var index$7 = require('./Common/Typography/index.cjs.js');
+var index$1 = require('./Buttons/Button/index.cjs.js');
+var index$2 = require('./Chips/Chip/index.cjs.js');
+var index$3 = require('./Common/Divider/index.cjs.js');
+var index$4 = require('./Common/Flex/index.cjs.js');
+var index$5 = require('./Common/Grid/index.cjs.js');
+var index$6 = require('./Common/Spinner/index.cjs.js');
+var index$7 = require('./Common/Skeleton/index.cjs.js');
+var index$8 = require('./Common/Typography/index.cjs.js');
 var styles$1 = require('./Common/Typography/styles.cjs.js');
 var Checkbox = require('./Control/Checkbox.cjs.js');
-var Toggle = require('./Control/Toggle.cjs.js');
-var index$8 = require('./Control/Switch/index.cjs.js');
 var Radio = require('./Control/Radio.cjs.js');
-var index$9 = require('./Logos/RememberLogo/index.cjs.js');
-var index$a = require('./Logos/RememberMobileLogo/index.cjs.js');
-var index$b = require('./Logos/RememberSquareLogo/index.cjs.js');
-var index$c = require('./Logos/RememberServiceLogo/index.cjs.js');
-var index$d = require('./Modals/Dialog/index.cjs.js');
-var index$e = require('./Paginations/Pagination/index.cjs.js');
-var index$f = require('./Paginations/CompactPagination/index.cjs.js');
-var index$g = require('./Inputs/TextInput/index.cjs.js');
-var index$h = require('./Inputs/Select/index.cjs.js');
-var index$i = require('./Floating/DropdownMenu/index.cjs.js');
-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');
-var index$m = require('./Labels/Label/index.cjs.js');
+var Toggle = require('./Control/Toggle.cjs.js');
+var index$9 = require('./Inputs/TextInput/index.cjs.js');
+var index$a = require('./Inputs/Select/index.cjs.js');
+var index$b = require('./Labels/Label/index.cjs.js');
+var index$c = require('./Logos/RememberLogo/index.cjs.js');
+var index$d = require('./Logos/RememberMobileLogo/index.cjs.js');
+var index$e = require('./Logos/RememberSquareLogo/index.cjs.js');
+var index$f = require('./Logos/RememberServiceLogo/index.cjs.js');
+var index$g = require('./ModalScreen/index.cjs.js');
+var index$h = require('./Paginations/Pagination/index.cjs.js');
+var index$i = require('./Paginations/CompactPagination/index.cjs.js');
 
 
 
 exports.Avatar = index;
 exports.StyledAvatar = styles.StyledAvatar;
-exports.Button = index$1.Button;
 exports.badgePseudo = utils.badgePseudo;
 exports.Badge = Badge.Badge;
 exports.getBadgePseudoCss = style.getBadgePseudoCss;
-exports.Divider = index$2.Divider;
-exports.Flex = index$3.Flex;
-exports.Grid = index$4.Grid;
-exports.Spinner = index$5.Spinner;
-exports.Skeleton = index$6.Skeleton;
-exports.Typography = index$7.Typography;
+exports.Button = index$1.Button;
+exports.Chip = index$2.Chip;
+exports.Divider = index$3.Divider;
+exports.Flex = index$4.Flex;
+exports.Grid = index$5.Grid;
+exports.Spinner = index$6.Spinner;
+exports.Skeleton = index$7.Skeleton;
+exports.Typography = index$8.Typography;
 exports.StyledTypography = styles$1.StyledTypography;
 exports.Checkbox = Checkbox.Checkbox;
 exports._Checkbox = Checkbox._Checkbox;
+exports.Radio = Radio.Radio;
 exports.CircleBaseToggle = Toggle.CircleBaseToggle;
 exports.Toggle = Toggle.Toggle;
 exports._Toggle = Toggle._Toggle;
-exports.Switch = index$8.Switch;
-exports.Radio = Radio.Radio;
-exports.RememberLogo = index$9.RememberLogo;
-exports.getViewBoxWidth = index$9.getViewBoxWidth;
-exports.RememberMobileLogo = index$a.RememberMobileLogo;
-exports.RememberSquareLogo = index$b.RememberSquareLogo;
-exports.RememberServiceLogo = index$c.RememberServiceLogo;
-exports.Dialog = index$d.Dialog;
-exports.Pagination = index$e.Pagination;
-exports.CompactPagination = index$f.CompactPagination;
-exports.TextInput = index$g;
-exports.Select = index$h;
-exports.DropdownMenu = index$i;
-exports.Popover = index$j;
-exports.Tooltip = index$k;
-exports.DropdownMenuItemDisabledCSS = styles$2.DropdownMenuItemDisabledCSS;
-exports.DropdownMenuItemHoverCSS = styles$2.DropdownMenuItemHoverCSS;
-exports.StyledDropdownMenuContent = styles$2.StyledDropdownMenuContent;
-exports.StyledDropdownMenuContentWrapper = styles$2.StyledDropdownMenuContentWrapper;
-exports.StyledDropdownMenuItem = styles$2.StyledDropdownMenuItem;
-exports.StyledDropdownMenuSection = styles$2.StyledDropdownMenuSection;
-exports.StyledDropdownMenuSectionTitle = styles$2.StyledDropdownMenuSectionTitle;
-exports.dropdownMenuItemCSS = styles$2.dropdownMenuItemCSS;
-exports.getDropdownMenuItemCss = styles$2.getDropdownMenuItemCss;
-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;
-exports.Label = index$m;
+exports.TextInput = index$9;
+exports.Select = index$a;
+exports.Label = index$b;
+exports.RememberLogo = index$c.RememberLogo;
+exports.getViewBoxWidth = index$c.getViewBoxWidth;
+exports.RememberMobileLogo = index$d.RememberMobileLogo;
+exports.RememberSquareLogo = index$e.RememberSquareLogo;
+exports.RememberServiceLogo = index$f.RememberServiceLogo;
+exports.ModalScreen = index$g.ModalScreen;
+exports.Pagination = index$h.Pagination;
+exports.CompactPagination = index$i.CompactPagination;
 //# 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

@@ -1,13 +1,14 @@
 export * from './Avatars';
-export * from './Buttons';
 export * from './Badge';
+export * from './Buttons';
+export * from './Chips';
 export * from './Common';
-export * from './Control';
-export * from './Logos';
-export * from './Modals';
-export * from './Paginations';
+export { _Checkbox, Checkbox } from './Control/Checkbox';
+export { Radio } from './Control/Radio';
+export { _Toggle, CircleBaseToggle, Toggle } from './Control/Toggle';
 export * from './Inputs';
-export * from './Floating';
-export * from './Chips';
 export * from './Labels';
+export * from './Logos';
+export * from './ModalScreen';
+export * from './Paginations';
 //# 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;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACrE,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/src/index.esm.js

@@ -1,9 +1,10 @@
 export { default as Avatar } from './Avatars/Avatar/index.esm.js';
 export { StyledAvatar } from './Avatars/Avatar/styles.esm.js';
-export { Button } from './Buttons/Button/index.esm.js';
 export { badgePseudo } from './Badge/utils.esm.js';
 export { Badge } from './Badge/Badge.esm.js';
 export { getBadgePseudoCss } from './Badge/style.esm.js';
+export { Button } from './Buttons/Button/index.esm.js';
+export { Chip } from './Chips/Chip/index.esm.js';
 export { Divider } from './Common/Divider/index.esm.js';
 export { Flex } from './Common/Flex/index.esm.js';
 export { Grid } from './Common/Grid/index.esm.js';
@@ -12,23 +13,16 @@ export { Skeleton } from './Common/Skeleton/index.esm.js';
 export { Typography } from './Common/Typography/index.esm.js';
 export { StyledTypography } from './Common/Typography/styles.esm.js';
 export { Checkbox, _Checkbox } from './Control/Checkbox.esm.js';
-export { CircleBaseToggle, Toggle, _Toggle } from './Control/Toggle.esm.js';
-export { Switch } from './Control/Switch/index.esm.js';
 export { Radio } from './Control/Radio.esm.js';
+export { CircleBaseToggle, Toggle, _Toggle } from './Control/Toggle.esm.js';
+export { default as TextInput } from './Inputs/TextInput/index.esm.js';
+export { default as Select } from './Inputs/Select/index.esm.js';
+export { default as Label } from './Labels/Label/index.esm.js';
 export { RememberLogo, getViewBoxWidth } from './Logos/RememberLogo/index.esm.js';
 export { RememberMobileLogo } from './Logos/RememberMobileLogo/index.esm.js';
 export { RememberSquareLogo } from './Logos/RememberSquareLogo/index.esm.js';
 export { RememberServiceLogo } from './Logos/RememberServiceLogo/index.esm.js';
-export { Dialog } from './Modals/Dialog/index.esm.js';
+export { ModalScreen } from './ModalScreen/index.esm.js';
 export { Pagination } from './Paginations/Pagination/index.esm.js';
 export { CompactPagination } from './Paginations/CompactPagination/index.esm.js';
-export { default as TextInput } from './Inputs/TextInput/index.esm.js';
-export { default as Select } from './Inputs/Select/index.esm.js';
-export { default as DropdownMenu } from './Floating/DropdownMenu/index.esm.js';
-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';
-export { default as Label } from './Labels/Label/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/radix.cjs.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./Control/Switch/index.cjs.js');
+var index$1 = require('./Floating/DropdownMenu/index.cjs.js');
+var index$2 = require('./Floating/Popover/index.cjs.js');
+var index$3 = require('./Floating/Tooltip/index.cjs.js');
+var styles = require('./Floating/DropdownMenu/styles.cjs.js');
+var styles$1 = require('./Floating/Popover/styles.cjs.js');
+var radix = require('./ModalScreen/radix.cjs.js');
+var index$4 = require('./Modals/Dialog/index.cjs.js');
+
+
+
+exports.Switch = index.Switch;
+exports.DropdownMenu = index$1;
+exports.Popover = index$2;
+exports.Tooltip = index$3;
+exports.DropdownMenuItemDisabledCSS = styles.DropdownMenuItemDisabledCSS;
+exports.DropdownMenuItemHoverCSS = styles.DropdownMenuItemHoverCSS;
+exports.StyledDropdownMenuContent = styles.StyledDropdownMenuContent;
+exports.StyledDropdownMenuContentWrapper = styles.StyledDropdownMenuContentWrapper;
+exports.StyledDropdownMenuItem = styles.StyledDropdownMenuItem;
+exports.StyledDropdownMenuSection = styles.StyledDropdownMenuSection;
+exports.StyledDropdownMenuSectionTitle = styles.StyledDropdownMenuSectionTitle;
+exports.dropdownMenuItemCSS = styles.dropdownMenuItemCSS;
+exports.getDropdownMenuItemCss = styles.getDropdownMenuItemCss;
+exports.StyledPopoverContent = styles$1.StyledPopoverContent;
+exports.StyledPopoverContentWrapper = styles$1.StyledPopoverContentWrapper;
+exports.showFadeIn = styles$1.showFadeIn;
+exports.showFadeOut = styles$1.showFadeOut;
+exports.ModalScreen = radix.ModalScreen;
+exports.Dialog = index$4.Dialog;
+//# sourceMappingURL=radix.cjs.js.map

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

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

package/dist/src/radix.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @remember-web/primitive/radix
+ *
+ * Radix UI에 의존하는 모든 컴포넌트를 한 곳에서 export합니다.
+ * Radix UI를 사용하지 않는 프로젝트는 이 파일을 import하지 않으면 됩니다.
+ *
+ * @example
+ * ```tsx
+ * // Radix 사용 프로젝트
+ * import { Dialog, ModalScreen, Popover, Tooltip, Divider } from '@remember-web/primitive/radix';
+ *
+ * // Native 사용 프로젝트
+ * import { ModalScreen } from '@remember-web/primitive';
+ * ```
+ */
+export * from './Control/Switch';
+export * from './Floating';
+export * from './ModalScreen/radix';
+export * from './Modals/Dialog';
+//# sourceMappingURL=radix.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radix.d.ts","sourceRoot":"","sources":["../../src/radix.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,cAAc,kBAAkB,CAAC;AAEjC,cAAc,YAAY,CAAC;AAE3B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,iBAAiB,CAAC"}

package/dist/src/radix.esm.js

@@ -0,0 +1,9 @@
+export { Switch } from './Control/Switch/index.esm.js';
+export { default as DropdownMenu } from './Floating/DropdownMenu/index.esm.js';
+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 { ModalScreen } from './ModalScreen/radix.esm.js';
+export { Dialog } from './Modals/Dialog/index.esm.js';
+//# sourceMappingURL=radix.esm.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.4.8",
+  "version": "0.5.1",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -31,17 +31,21 @@
       "require": "./dist/src/index.cjs.js",
       "import": "./dist/src/index.esm.js",
       "types": "./dist/src/index.d.ts"
+    },
+    "./radix": {
+      "require": "./dist/src/radix.cjs.js",
+      "import": "./dist/src/radix.esm.js",
+      "types": "./dist/src/radix.d.ts"
     }
   },
   "dependencies": {
     "@babel/runtime": "^7.24.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
-    "@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.4.4",
+    "@remember-web/icon": "^0.5.0",
     "@remember-web/mixin": "^0.4.0",
     "@remember-web/shared": "^0.1.2"
   },

package/src/Common/Divider/index.tsx

@@ -1,16 +1,65 @@
 'use client';
 
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { divider } from '@remember-web/mixin';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-export interface DividerProps extends SeparatorPrimitive.SeparatorProps {
+interface SeparatorProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
+  orientation?: (typeof ORIENTATIONS)[number];
+  /**
+   * Whether or not the component is purely decorative. When true, accessibility-related attributes
+   * are updated so that that the rendered element is removed from the accessibility tree.
+   */
+  decorative?: boolean;
+}
+
+export interface DividerProps extends SeparatorProps {
   color?: string;
   $width?: string | number;
   $height?: string | number;
 }
 
-const StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`
+const DEFAULT_ORIENTATION = 'horizontal';
+const ORIENTATIONS = ['horizontal', 'vertical'] as const;
+
+function isValidOrientation(
+  orientation: any
+): orientation is (typeof ORIENTATIONS)[number] {
+  return ORIENTATIONS.includes(orientation);
+}
+
+const _Separator = forwardRef<React.ComponentRef<'div'>, SeparatorProps>(
+  (props, forwardedRef) => {
+    const {
+      decorative,
+      orientation: orientationProp = DEFAULT_ORIENTATION,
+      ...domProps
+    } = props;
+    const orientation = isValidOrientation(orientationProp)
+      ? orientationProp
+      : DEFAULT_ORIENTATION;
+    // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+    const ariaOrientation =
+      orientation === 'vertical' ? orientation : undefined;
+    const semanticProps = decorative
+      ? { role: 'none' }
+      : { 'aria-orientation': ariaOrientation, role: 'separator' };
+
+    return (
+      <div
+        data-orientation={orientation}
+        {...semanticProps}
+        {...domProps}
+        ref={forwardedRef}
+      />
+    );
+  }
+);
+
+const StyledDivider = styled(_Separator)<DividerProps>`
   background-color: ${({ color = divider }) => color};
   &[data-orientation='horizontal'] {
     height: 1px;