@remember-web/primitive 0.1.19 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/Avatars/Avatar/index.cjs.js +2 -2
- package/dist/src/Avatars/Avatar/index.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/index.d.ts +1 -1
- package/dist/src/Avatars/Avatar/index.d.ts.map +1 -1
- package/dist/src/Avatars/Avatar/index.esm.js +2 -2
- package/dist/src/Avatars/Avatar/index.esm.js.map +1 -1
- package/dist/src/Avatars/Avatar/styles.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/styles.d.ts.map +1 -1
- package/dist/src/Avatars/Avatar/styles.esm.js.map +1 -1
- package/dist/src/Badge/style.cjs.js +1 -1
- package/dist/src/Badge/style.cjs.js.map +1 -1
- package/dist/src/Badge/style.esm.js +1 -1
- package/dist/src/Badge/style.esm.js.map +1 -1
- package/dist/src/Badge/utils.cjs.js.map +1 -1
- package/dist/src/Badge/utils.d.ts.map +1 -1
- package/dist/src/Badge/utils.esm.js.map +1 -1
- package/dist/src/Buttons/Button/index.cjs.js +3 -2
- package/dist/src/Buttons/Button/index.cjs.js.map +1 -1
- package/dist/src/Buttons/Button/index.d.ts +2 -3
- package/dist/src/Buttons/Button/index.d.ts.map +1 -1
- package/dist/src/Buttons/Button/index.esm.js +3 -2
- package/dist/src/Buttons/Button/index.esm.js.map +1 -1
- package/dist/src/Buttons/Button/styles.cjs.js +1 -1
- package/dist/src/Buttons/Button/styles.cjs.js.map +1 -1
- package/dist/src/Buttons/Button/styles.d.ts.map +1 -1
- package/dist/src/Buttons/Button/styles.esm.js +1 -1
- package/dist/src/Buttons/Button/styles.esm.js.map +1 -1
- package/dist/src/Buttons/index.d.ts +1 -1
- package/dist/src/Buttons/index.d.ts.map +1 -1
- package/dist/src/Common/Divider/index.cjs.js +10 -2
- package/dist/src/Common/Divider/index.cjs.js.map +1 -1
- package/dist/src/Common/Divider/index.d.ts +2 -0
- package/dist/src/Common/Divider/index.d.ts.map +1 -1
- package/dist/src/Common/Divider/index.esm.js +10 -2
- package/dist/src/Common/Divider/index.esm.js.map +1 -1
- package/dist/src/Common/Flex/index.cjs.js +1 -1
- package/dist/src/Common/Flex/index.cjs.js.map +1 -1
- package/dist/src/Common/Flex/index.d.ts +2 -2
- package/dist/src/Common/Flex/index.d.ts.map +1 -1
- package/dist/src/Common/Flex/index.esm.js +1 -1
- package/dist/src/Common/Flex/index.esm.js.map +1 -1
- package/dist/src/Common/Skeleton/index.cjs.js +34 -0
- package/dist/src/Common/Skeleton/index.cjs.js.map +1 -0
- package/dist/src/Common/Skeleton/index.d.ts +5 -0
- package/dist/src/Common/Skeleton/index.d.ts.map +1 -0
- package/dist/src/Common/Skeleton/index.esm.js +27 -0
- package/dist/src/Common/Skeleton/index.esm.js.map +1 -0
- package/dist/src/Common/Skeleton/styles.cjs.js +34 -0
- package/dist/src/Common/Skeleton/styles.cjs.js.map +1 -0
- package/dist/src/Common/Skeleton/styles.d.ts +10 -0
- package/dist/src/Common/Skeleton/styles.d.ts.map +1 -0
- package/dist/src/Common/Skeleton/styles.esm.js +26 -0
- package/dist/src/Common/Skeleton/styles.esm.js.map +1 -0
- package/dist/src/Common/Spinner/styles.cjs.js.map +1 -1
- package/dist/src/Common/Spinner/styles.d.ts.map +1 -1
- package/dist/src/Common/Spinner/styles.esm.js.map +1 -1
- package/dist/src/Common/Spinner/types.d.ts +1 -1
- package/dist/src/Common/Spinner/types.d.ts.map +1 -1
- package/dist/src/Common/Typography/index.cjs.js +1 -1
- package/dist/src/Common/Typography/index.cjs.js.map +1 -1
- package/dist/src/Common/Typography/index.d.ts +3 -3
- package/dist/src/Common/Typography/index.d.ts.map +1 -1
- package/dist/src/Common/Typography/index.esm.js +1 -1
- package/dist/src/Common/Typography/index.esm.js.map +1 -1
- package/dist/src/Common/Typography/styles.cjs.js +1 -1
- package/dist/src/Common/Typography/styles.cjs.js.map +1 -1
- package/dist/src/Common/Typography/styles.d.ts +1 -1
- package/dist/src/Common/Typography/styles.d.ts.map +1 -1
- package/dist/src/Common/Typography/styles.esm.js +1 -1
- package/dist/src/Common/Typography/styles.esm.js.map +1 -1
- package/dist/src/Common/index.d.ts +3 -2
- package/dist/src/Common/index.d.ts.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.d.ts.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/index.cjs.js +2 -1
- package/dist/src/Control/BaseToggle/index.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/index.esm.js +2 -1
- package/dist/src/Control/BaseToggle/index.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/styles.cjs.js +1 -1
- package/dist/src/Control/BaseToggle/styles.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/styles.esm.js +1 -1
- package/dist/src/Control/BaseToggle/styles.esm.js.map +1 -1
- package/dist/src/Control/Checkbox.cjs.js.map +1 -1
- package/dist/src/Control/Checkbox.d.ts.map +1 -1
- package/dist/src/Control/Checkbox.esm.js.map +1 -1
- package/dist/src/Control/Radio.cjs.js.map +1 -1
- package/dist/src/Control/Radio.esm.js.map +1 -1
- package/dist/src/Control/Switch/index.cjs.js.map +1 -1
- package/dist/src/Control/Switch/index.esm.js.map +1 -1
- package/dist/src/Control/Switch/styles.cjs.js +1 -1
- package/dist/src/Control/Switch/styles.cjs.js.map +1 -1
- package/dist/src/Control/Switch/styles.esm.js +1 -1
- package/dist/src/Control/Switch/styles.esm.js.map +1 -1
- package/dist/src/Control/Toggle.cjs.js.map +1 -1
- package/dist/src/Control/Toggle.d.ts.map +1 -1
- package/dist/src/Control/Toggle.esm.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.d.ts +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.d.ts.map +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.esm.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.d.ts.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.esm.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.cjs.js +1 -1
- package/dist/src/Floating/DropdownMenu/styles.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.d.ts.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.esm.js +1 -1
- package/dist/src/Floating/DropdownMenu/styles.esm.js.map +1 -1
- package/dist/src/Floating/Popover/styles.cjs.js +1 -1
- package/dist/src/Floating/Popover/styles.cjs.js.map +1 -1
- package/dist/src/Floating/Popover/styles.esm.js +1 -1
- package/dist/src/Floating/Popover/styles.esm.js.map +1 -1
- package/dist/src/Floating/Tooltip/index.cjs.js +2 -2
- package/dist/src/Floating/Tooltip/index.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/index.d.ts.map +1 -1
- package/dist/src/Floating/Tooltip/index.esm.js +2 -2
- package/dist/src/Floating/Tooltip/index.esm.js.map +1 -1
- package/dist/src/Floating/Tooltip/styles.cjs.js +1 -1
- package/dist/src/Floating/Tooltip/styles.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/styles.esm.js +1 -1
- package/dist/src/Floating/Tooltip/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js +2 -2
- package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.esm.js +2 -2
- package/dist/src/Inputs/Select/DesignedSelect/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js +2 -2
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js +2 -2
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.esm.js +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/types.d.ts +1 -1
- package/dist/src/Inputs/Select/NativeSelect/types.d.ts.map +1 -1
- package/dist/src/Inputs/Select/Option/index.cjs.js +0 -1
- package/dist/src/Inputs/Select/Option/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/Option/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/Option/index.esm.js +0 -1
- package/dist/src/Inputs/Select/Option/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/styles.cjs.js +1 -1
- package/dist/src/Inputs/Select/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/styles.esm.js +1 -1
- package/dist/src/Inputs/Select/styles.esm.js.map +1 -1
- package/dist/src/Inputs/TextInput/index.cjs.js +1 -1
- package/dist/src/Inputs/TextInput/index.cjs.js.map +1 -1
- package/dist/src/Inputs/TextInput/index.esm.js +1 -1
- package/dist/src/Inputs/TextInput/index.esm.js.map +1 -1
- package/dist/src/Inputs/TextInput/styles.cjs.js +1 -1
- package/dist/src/Inputs/TextInput/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/TextInput/styles.esm.js +1 -1
- package/dist/src/Inputs/TextInput/styles.esm.js.map +1 -1
- package/dist/src/Inputs/TextInput/types.d.ts +1 -1
- package/dist/src/Inputs/TextInput/types.d.ts.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.cjs.js +1 -0
- package/dist/src/Logos/RememberServiceLogo/index.cjs.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.d.ts.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.esm.js +1 -0
- package/dist/src/Logos/RememberServiceLogo/index.esm.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.cjs.js +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.cjs.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.esm.js +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.esm.js.map +1 -1
- package/dist/src/Modals/Dialog/index.cjs.js +1 -1
- package/dist/src/Modals/Dialog/index.cjs.js.map +1 -1
- package/dist/src/Modals/Dialog/index.esm.js +1 -1
- package/dist/src/Modals/Dialog/index.esm.js.map +1 -1
- package/dist/src/Modals/Dialog/styles.cjs.js +2 -2
- package/dist/src/Modals/Dialog/styles.cjs.js.map +1 -1
- package/dist/src/Modals/Dialog/styles.d.ts.map +1 -1
- package/dist/src/Modals/Dialog/styles.esm.js +1 -1
- package/dist/src/Modals/Dialog/styles.esm.js.map +1 -1
- package/dist/src/Paginations/CompactPagination/index.cjs.js +1 -1
- package/dist/src/Paginations/CompactPagination/index.cjs.js.map +1 -1
- package/dist/src/Paginations/CompactPagination/index.esm.js +1 -1
- package/dist/src/Paginations/CompactPagination/index.esm.js.map +1 -1
- package/dist/src/Paginations/styles.cjs.js +1 -1
- package/dist/src/Paginations/styles.cjs.js.map +1 -1
- package/dist/src/Paginations/styles.esm.js +1 -1
- package/dist/src/Paginations/styles.esm.js.map +1 -1
- package/dist/src/hooks/useMouseEventAway.cjs.js.map +1 -1
- package/dist/src/hooks/useMouseEventAway.esm.js.map +1 -1
- package/dist/src/index.cjs.js +40 -38
- package/dist/src/index.cjs.js.map +1 -1
- package/dist/src/index.esm.js +4 -3
- package/dist/src/index.esm.js.map +1 -1
- package/dist/src/stories/common.styles.d.ts.map +1 -1
- package/package.json +3 -6
- package/src/Avatars/Avatar/Avatar.stories.tsx +1 -1
- package/src/Avatars/Avatar/index.tsx +3 -3
- package/src/Avatars/Avatar/styles.ts +1 -1
- package/src/Badge/Badge.stories.tsx +2 -2
- package/src/Badge/style.tsx +1 -1
- package/src/Badge/utils.ts +1 -1
- package/src/Buttons/Button/Button.stories.tsx +1 -1
- package/src/Buttons/Button/index.tsx +19 -21
- package/src/Buttons/Button/styles.ts +11 -8
- package/src/Buttons/index.ts +1 -1
- package/src/Common/Divider/Divider.stories.tsx +1 -1
- package/src/Common/Divider/index.tsx +7 -4
- package/src/Common/Flex/index.tsx +17 -10
- package/src/Common/Skeleton/Skeleton.stories.tsx +35 -0
- package/src/Common/Skeleton/index.tsx +25 -0
- package/src/Common/Skeleton/styles.ts +46 -0
- package/src/Common/Spinner/Spinner.stories.tsx +1 -1
- package/src/Common/Spinner/styles.ts +5 -3
- package/src/Common/Spinner/types.ts +1 -1
- package/src/Common/Typography/Typography.stories.tsx +4 -5
- package/src/Common/Typography/index.tsx +8 -10
- package/src/Common/Typography/styles.ts +3 -3
- package/src/Common/index.ts +3 -2
- package/src/Control/BaseToggle/ToggleIcon/index.tsx +1 -1
- package/src/Control/BaseToggle/styles.ts +1 -1
- package/src/Control/Checkbox.stories.tsx +0 -2
- package/src/Control/Checkbox.tsx +1 -1
- package/src/Control/Radio.stories.tsx +1 -1
- package/src/Control/Radio.tsx +1 -1
- package/src/Control/Switch/Switch.stories.tsx +0 -1
- package/src/Control/Switch/index.tsx +1 -1
- package/src/Control/Switch/styles.ts +1 -1
- package/src/Control/Toggle.stories.tsx +1 -2
- package/src/Control/Toggle.tsx +1 -1
- package/src/Floating/DropdownMenu/DropdownMenuSection.tsx +2 -2
- package/src/Floating/DropdownMenu/index.tsx +1 -1
- package/src/Floating/DropdownMenu/styles.tsx +1 -1
- package/src/Floating/Popover/Popover.stories.tsx +1 -1
- package/src/Floating/Popover/styles.ts +1 -1
- package/src/Floating/Tooltip/Tooltip.stories.tsx +1 -1
- package/src/Floating/Tooltip/index.tsx +4 -4
- package/src/Floating/Tooltip/styles.ts +1 -1
- package/src/Inputs/Select/DesignedSelect/index.tsx +3 -3
- package/src/Inputs/Select/DesignedSelect/styles.ts +2 -2
- package/src/Inputs/Select/NativeSelect/index.tsx +2 -2
- package/src/Inputs/Select/NativeSelect/styles.ts +1 -1
- package/src/Inputs/Select/NativeSelect/types.ts +1 -1
- package/src/Inputs/Select/Option/index.tsx +0 -1
- package/src/Inputs/Select/Select.stories.tsx +0 -2
- package/src/Inputs/Select/styles.ts +1 -1
- package/src/Inputs/TextInput/index.tsx +1 -1
- package/src/Inputs/TextInput/styles.ts +2 -2
- package/src/Inputs/TextInput/types.ts +1 -1
- package/src/Logos/RememberServiceLogo/index.tsx +1 -1
- package/src/Logos/RememberServiceLogo/style.ts +1 -1
- package/src/Modals/Dialog/Dialog.stories.tsx +1 -1
- package/src/Modals/Dialog/index.tsx +2 -2
- package/src/Modals/Dialog/styles.ts +2 -2
- package/src/Paginations/CompactPagination/CompactPagination.stories.tsx +0 -1
- package/src/Paginations/CompactPagination/index.tsx +1 -1
- package/src/Paginations/Pagination/Pagination.stories.tsx +0 -1
- package/src/Paginations/styles.ts +2 -2
- package/src/hooks/useMouseEventAway.ts +1 -1
- package/src/stories/common.styles.tsx +2 -2
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var mixin = require('@remember-web/mixin');
|
|
6
4
|
var icon = require('@remember-web/icon');
|
|
5
|
+
var mixin = require('@remember-web/mixin');
|
|
6
|
+
var react = require('react');
|
|
7
7
|
var styles = require('./styles.cjs.js');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\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;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ComponentPropsWithoutRef } from 'react';
|
|
2
1
|
import type { ConvertTransientProps } from '@remember-web/shared';
|
|
2
|
+
import type { ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
import type { StyledAvatarProps } from '../../Avatars/Avatar/styles';
|
|
4
4
|
export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> & ComponentPropsWithoutRef<'div'>;
|
|
5
5
|
declare const _default: import("react").ForwardRefExoticComponent<Partial<ConvertTransientProps<StyledAvatarProps>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAEhF,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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { bg200, divider } from '@remember-web/mixin';
|
|
4
2
|
import { IconAvatarEmpty } from '@remember-web/icon';
|
|
3
|
+
import { bg200, divider } from '@remember-web/mixin';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
5
|
import { StyledAvatar } from './styles.esm.js';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\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;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\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;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\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,MAAM,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;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
4
|
-
var styled = require('styled-components');
|
|
5
4
|
var mixin = require('@remember-web/mixin');
|
|
5
|
+
var styled = require('styled-components');
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.cjs.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"style.cjs.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('Subtitle2')}\n\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;;;;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CACvBC,CAAAA,MAAAA,EAAAA,mHAAAA,EAAAA,cAAAA,EAAAA,uDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAmB,CAAC,WAAW,CAAC,EAMpBC,kBAAY,EACjBC,iBAAW,EAGrB;;AAED;AACA;AACA;AACA;AACA;AACaC,IAAAA,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO,CAAA;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,UAAA,CAAA;AAAA,EAAA,OACjBd,UAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,uCAAA,CACiBK,CAAAA,2BAAAA,EAAAA,UAAAA,EAAAA,6EAAAA,EAAAA,gBAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;AAEYE,IAAAA,WAAW,GAAGC,uBAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,uCAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
3
2
|
import { getTypographyStyles, secondary100, contents999 } from '@remember-web/mixin';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
4
|
|
|
5
5
|
var _templateObject, _templateObject2, _templateObject3;
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.esm.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"style.esm.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('Subtitle2')}\n\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CACvBC,CAAAA,MAAAA,EAAAA,mHAAAA,EAAAA,cAAAA,EAAAA,uDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,mBAAmB,CAAC,WAAW,CAAC,EAMpBC,YAAY,EACjBC,WAAW,EAGrB;;AAED;AACA;AACA;AACA;AACA;AACaC,IAAAA,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO,CAAA;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,UAAA,CAAA;AAAA,EAAA,OACjBd,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,CACiBK,CAAAA,2BAAAA,EAAAA,UAAAA,EAAAA,6EAAAA,EAAAA,gBAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;AAEYE,IAAAA,WAAW,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"utils.cjs.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import { getBadgePseudoCss } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;;;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,uBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/Badge/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/Badge/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,aAAa,UAAW,eAAe,KAAG,MAQtD,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;0BAEA,eAAe;;;CAGtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.esm.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"utils.esm.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import { getBadgePseudoCss } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,iBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;"}
|
|
@@ -8,8 +8,9 @@ require('../../Common/Divider/index.cjs.js');
|
|
|
8
8
|
require('../../Common/Flex/index.cjs.js');
|
|
9
9
|
require('../../Common/Grid/index.cjs.js');
|
|
10
10
|
var index = require('../../Common/Spinner/index.cjs.js');
|
|
11
|
-
require('../../Common/
|
|
11
|
+
require('../../Common/Skeleton/styles.cjs.js');
|
|
12
12
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
+
require('../../Common/Typography/styles.cjs.js');
|
|
13
14
|
var _const = require('./const.cjs.js');
|
|
14
15
|
var styles = require('./styles.cjs.js');
|
|
15
16
|
|
|
@@ -57,5 +58,5 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
|
|
|
57
58
|
}));
|
|
58
59
|
});
|
|
59
60
|
|
|
60
|
-
|
|
61
|
+
exports.Button = Button;
|
|
61
62
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps } from './types';\n\nexport const Button = forwardRef(\n (\n {\n children,\n color,\n size = 'small',\n variant = 'primary',\n layout = 'block',\n isLoading = false,\n filled = variant === 'primary',\n icon,\n iconPosition = 'left',\n ...props\n }: ButtonProps,\n ref: ForwardedRef<HTMLButtonElement | null>\n ) => (\n <StyledButton\n $color={color}\n $size={size}\n $variant={variant}\n $layout={layout}\n $isLoading={isLoading}\n $filled={filled}\n aria-live=\"polite\"\n aria-busy={isLoading}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Spinner size={SPINNER_SIZE_MAP[size]} />\n ) : (\n <>\n {iconPosition === 'left' && icon}\n {children}\n {iconPosition === 'right' && icon}\n </>\n )}\n </StyledButton>\n )\n) as PolymorphicComponent<'web', ButtonProps>;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYN;AAcwC;;;AATzCA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { PolymorphicComponent } from 'styled-components';
|
|
2
2
|
import type { ButtonProps } from './types';
|
|
3
|
-
declare const Button: PolymorphicComponent<"web", ButtonProps>;
|
|
4
|
-
export default Button;
|
|
3
|
+
export declare const Button: PolymorphicComponent<"web", ButtonProps>;
|
|
5
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAM9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,0CAuC0B,CAAC"}
|
|
@@ -6,8 +6,9 @@ import '../../Common/Divider/index.esm.js';
|
|
|
6
6
|
import '../../Common/Flex/index.esm.js';
|
|
7
7
|
import '../../Common/Grid/index.esm.js';
|
|
8
8
|
import { Spinner } from '../../Common/Spinner/index.esm.js';
|
|
9
|
-
import '../../Common/
|
|
9
|
+
import '../../Common/Skeleton/styles.esm.js';
|
|
10
10
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
11
|
+
import '../../Common/Typography/styles.esm.js';
|
|
11
12
|
import { SPINNER_SIZE_MAP } from './const.esm.js';
|
|
12
13
|
import { StyledButton } from './styles.esm.js';
|
|
13
14
|
|
|
@@ -50,5 +51,5 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
50
51
|
}));
|
|
51
52
|
});
|
|
52
53
|
|
|
53
|
-
export { Button
|
|
54
|
+
export { Button };
|
|
54
55
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps } from './types';\n\nexport const Button = forwardRef(\n (\n {\n children,\n color,\n size = 'small',\n variant = 'primary',\n layout = 'block',\n isLoading = false,\n filled = variant === 'primary',\n icon,\n iconPosition = 'left',\n ...props\n }: ButtonProps,\n ref: ForwardedRef<HTMLButtonElement | null>\n ) => (\n <StyledButton\n $color={color}\n $size={size}\n $variant={variant}\n $layout={layout}\n $isLoading={isLoading}\n $filled={filled}\n aria-live=\"polite\"\n aria-busy={isLoading}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Spinner size={SPINNER_SIZE_MAP[size]} />\n ) : (\n <>\n {iconPosition === 'left' && icon}\n {children}\n {iconPosition === 'right' && icon}\n </>\n )}\n </StyledButton>\n )\n) as PolymorphicComponent<'web', ButtonProps>;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYN;AAcwC;;;AATzCA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;;"}
|
|
@@ -22,7 +22,7 @@ var StyledButton = styled__default.default.button(function (_ref) {
|
|
|
22
22
|
$color = _ref.$color,
|
|
23
23
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
24
24
|
return [// 공용 스타일
|
|
25
|
-
styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: 4px;\n\n color: ", ";\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n "])), $layout === 'inline' ? 'inline-flex' : 'flex', _const.ICON_GAP_MAP[$size], mixin.getTypographyStyles(_const.BUTTON_SIZES[$size].typography), $layout === 'fullBlock' &&
|
|
25
|
+
styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: 4px;\n\n color: ", ";\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n "])), $layout === 'inline' ? 'inline-flex' : 'flex', _const.ICON_GAP_MAP[$size], mixin.getTypographyStyles(_const.BUTTON_SIZES[$size].typography), $layout === 'fullBlock' && 'width: 100%;', _const.BUTTON_SIZES[$size].minWidth, _const.BUTTON_SIZES[$size].height, _const.BUTTON_SIZES[$size].padding, (_ref2 = props.$variant.startsWith('outline') ? $color : null) !== null && _ref2 !== void 0 ? _ref2 : _const.BUTTON_COLORS[props.$variant].color, mixin.primary100, mixin.primary200),
|
|
26
26
|
// primary 스타일
|
|
27
27
|
props.$variant === 'primary' && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n &:disabled {\n background-color: ", ";\n }\n &::before {\n background-color: ", ";\n }\n "])), $color !== null && $color !== void 0 ? $color : _const.BUTTON_COLORS[props.$variant].backgroundColor, mixin.disabled, mixin.primary200),
|
|
28
28
|
// outline 스타일
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' &&
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && 'width: 100%;'}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: 4px;\n\n color: ${\n (props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color\n };\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${\n $color ?? BUTTON_COLORS[props.$variant].backgroundColor\n };\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${\n props.$filled ? bg100 : BUTTON_COLORS[props.$variant].backgroundColor\n };\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAcN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAqEA;AACAD;AAaA;;AAeD;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/styles.ts"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/styles.ts"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,YAAY,yOAsGxB,CAAC"}
|
|
@@ -14,7 +14,7 @@ var StyledButton = styled.button(function (_ref) {
|
|
|
14
14
|
$color = _ref.$color,
|
|
15
15
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
16
16
|
return [// 공용 스타일
|
|
17
|
-
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: 4px;\n\n color: ", ";\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n "])), $layout === 'inline' ? 'inline-flex' : 'flex', ICON_GAP_MAP[$size], getTypographyStyles(BUTTON_SIZES[$size].typography), $layout === 'fullBlock' &&
|
|
17
|
+
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: 4px;\n\n color: ", ";\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n "])), $layout === 'inline' ? 'inline-flex' : 'flex', ICON_GAP_MAP[$size], getTypographyStyles(BUTTON_SIZES[$size].typography), $layout === 'fullBlock' && 'width: 100%;', BUTTON_SIZES[$size].minWidth, BUTTON_SIZES[$size].height, BUTTON_SIZES[$size].padding, (_ref2 = props.$variant.startsWith('outline') ? $color : null) !== null && _ref2 !== void 0 ? _ref2 : BUTTON_COLORS[props.$variant].color, primary100, primary200),
|
|
18
18
|
// primary 스타일
|
|
19
19
|
props.$variant === 'primary' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n &:disabled {\n background-color: ", ";\n }\n &::before {\n background-color: ", ";\n }\n "])), $color !== null && $color !== void 0 ? $color : BUTTON_COLORS[props.$variant].backgroundColor, disabled, primary200),
|
|
20
20
|
// outline 스타일
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' &&
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && 'width: 100%;'}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: 4px;\n\n color: ${\n (props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color\n };\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${\n $color ?? BUTTON_COLORS[props.$variant].backgroundColor\n };\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${\n props.$filled ? bg100 : BUTTON_COLORS[props.$variant].backgroundColor\n };\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;AAAa;AAAA;AAcN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAqEA;AACAD;AAaA;;AAeD;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './Button';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Buttons/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Buttons/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
5
|
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
6
6
|
var SeparatorPrimitive = require('@radix-ui/react-separator');
|
|
7
|
-
var styled = require('styled-components');
|
|
8
7
|
var mixin = require('@remember-web/mixin');
|
|
8
|
+
var styled = require('styled-components');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
10
|
|
|
11
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -36,10 +36,18 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
|
36
36
|
var _templateObject;
|
|
37
37
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
38
38
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
39
|
-
var StyledDivider = styled__default.default(SeparatorPrimitive__namespace.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n &[data-orientation='horizontal'] {\n height: 1px;\n width:
|
|
39
|
+
var StyledDivider = styled__default.default(SeparatorPrimitive__namespace.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n &[data-orientation='horizontal'] {\n height: 1px;\n width: ", ";\n }\n &[data-orientation='vertical'] {\n height: ", ";\n width: 1px;\n }\n"])), function (_ref) {
|
|
40
40
|
var _ref$color = _ref.color,
|
|
41
41
|
color = _ref$color === void 0 ? mixin.divider : _ref$color;
|
|
42
42
|
return color;
|
|
43
|
+
}, function (_ref2) {
|
|
44
|
+
var _ref2$$width = _ref2.$width,
|
|
45
|
+
$width = _ref2$$width === void 0 ? '100%' : _ref2$$width;
|
|
46
|
+
return typeof $width === 'number' ? "".concat($width, "px") : $width;
|
|
47
|
+
}, function (_ref3) {
|
|
48
|
+
var _ref3$$height = _ref3.$height,
|
|
49
|
+
$height = _ref3$$height === void 0 ? '100%' : _ref3$$height;
|
|
50
|
+
return typeof $height === 'number' ? "".concat($height, "px") : $height;
|
|
43
51
|
});
|
|
44
52
|
|
|
45
53
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { divider } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n color?: string;\n $width?: string | number;\n $height?: string | number;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n background-color: ${({ color = divider }) => color};\n &[data-orientation='horizontal'] {\n height: 1px;\n width: ${({ $width = '100%' }) =>\n typeof $width === 'number' ? `${$width}px` : $width};\n }\n &[data-orientation='vertical'] {\n height: ${({ $height = '100%' }) =>\n typeof $height === 'number' ? `${$height}px` : $height};\n width: 1px;\n }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color","$width","$height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AACsB;AAAGA;AAAe;AAAY;AAGvC;AAAGC;;AACyC;AAG3C;AAAGC;;AAC2C;;AAK5D;AACA;AACA;AACA;;;AAC4E;;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
2
2
|
export interface DividerProps extends SeparatorPrimitive.SeparatorProps {
|
|
3
3
|
color?: string;
|
|
4
|
+
$width?: string | number;
|
|
5
|
+
$height?: string | number;
|
|
4
6
|
}
|
|
5
7
|
/**
|
|
6
8
|
* @prop {"horizontal" | "vertical"} orientation - default: "horizontal"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Divider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAIhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB,CAAC,cAAc;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Divider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAIhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB,CAAC,cAAc;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAgBD;;;GAGG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,4CAAiC,CAAC"}
|
|
@@ -2,17 +2,25 @@
|
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
4
4
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
5
|
-
import styled from 'styled-components';
|
|
6
5
|
import { divider } from '@remember-web/mixin';
|
|
6
|
+
import styled from 'styled-components';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
var _templateObject;
|
|
10
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
11
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
-
var StyledDivider = styled(SeparatorPrimitive.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n &[data-orientation='horizontal'] {\n height: 1px;\n width:
|
|
12
|
+
var StyledDivider = styled(SeparatorPrimitive.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n &[data-orientation='horizontal'] {\n height: 1px;\n width: ", ";\n }\n &[data-orientation='vertical'] {\n height: ", ";\n width: 1px;\n }\n"])), function (_ref) {
|
|
13
13
|
var _ref$color = _ref.color,
|
|
14
14
|
color = _ref$color === void 0 ? divider : _ref$color;
|
|
15
15
|
return color;
|
|
16
|
+
}, function (_ref2) {
|
|
17
|
+
var _ref2$$width = _ref2.$width,
|
|
18
|
+
$width = _ref2$$width === void 0 ? '100%' : _ref2$$width;
|
|
19
|
+
return typeof $width === 'number' ? "".concat($width, "px") : $width;
|
|
20
|
+
}, function (_ref3) {
|
|
21
|
+
var _ref3$$height = _ref3.$height,
|
|
22
|
+
$height = _ref3$$height === void 0 ? '100%' : _ref3$$height;
|
|
23
|
+
return typeof $height === 'number' ? "".concat($height, "px") : $height;
|
|
16
24
|
});
|
|
17
25
|
|
|
18
26
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { divider } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n color?: string;\n $width?: string | number;\n $height?: string | number;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n background-color: ${({ color = divider }) => color};\n &[data-orientation='horizontal'] {\n height: 1px;\n width: ${({ $width = '100%' }) =>\n typeof $width === 'number' ? `${$width}px` : $width};\n }\n &[data-orientation='vertical'] {\n height: ${({ $height = '100%' }) =>\n typeof $height === 'number' ? `${$height}px` : $height};\n width: 1px;\n }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color","$width","$height"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAYb;AACsB;AAAGA;AAAe;AAAY;AAGvC;AAAGC;;AACyC;AAG3C;AAAGC;;AAC2C;;AAK5D;AACA;AACA;AACA;;;AAC4E;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { CSSProperties, ComponentProps, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nexport interface FlexStyledProps extends ComponentProps<'div'> {\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string | number;\n $width?: string | number;\n $height?: string | number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexStyledProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\n\
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { CSSProperties, ComponentProps, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nexport interface FlexStyledProps extends ComponentProps<'div'> {\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string | number;\n $width?: string | number;\n $height?: string | number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexStyledProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\n\nexport const Flex = forwardRef(\n (\n {\n width,\n height,\n direction,\n gap,\n align,\n justify,\n wrap,\n ...props\n }: FlexProps,\n ref: ForwardedRef<HTMLDivElement | null>\n ) => (\n <StyledFlex\n ref={ref}\n $width={width}\n $height={height}\n $direction={direction}\n $gap={gap}\n $align={align}\n $justify={justify}\n $wrap={wrap}\n {...props}\n />\n )\n) as PolymorphicComponent<'web', FlexProps>;\n\nexport type FlexProps = ConvertTransientProps<FlexStyledProps>;\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","ref"],"mappings":";;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAkBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO;AAYqC;;;;;;;AAFnCC;AAAK;AAKRC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}
|
|
@@ -19,6 +19,6 @@ export interface FlexStyledProps extends ComponentProps<'div'> {
|
|
|
19
19
|
* @prop {CSSProperties['flexDirection']} direction
|
|
20
20
|
* @prop {CSSProperties['flexWrap']} wrap
|
|
21
21
|
*/
|
|
22
|
-
declare const Flex: PolymorphicComponent<"web", ConvertTransientProps<FlexStyledProps>>;
|
|
23
|
-
export
|
|
22
|
+
export declare const Flex: PolymorphicComponent<"web", ConvertTransientProps<FlexStyledProps>>;
|
|
23
|
+
export type FlexProps = ConvertTransientProps<FlexStyledProps>;
|
|
24
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC5D,MAAM,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAyBD;;;;;;;;GAQG;AAEH,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC5D,MAAM,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAyBD;;;;;;;;GAQG;AAEH,eAAO,MAAM,IAAI,qEA0B0B,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { CSSProperties, ComponentProps, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nexport interface FlexStyledProps extends ComponentProps<'div'> {\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string | number;\n $width?: string | number;\n $height?: string | number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexStyledProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\n\
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { CSSProperties, ComponentProps, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nexport interface FlexStyledProps extends ComponentProps<'div'> {\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string | number;\n $width?: string | number;\n $height?: string | number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexStyledProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\n\nexport const Flex = forwardRef(\n (\n {\n width,\n height,\n direction,\n gap,\n align,\n justify,\n wrap,\n ...props\n }: FlexProps,\n ref: ForwardedRef<HTMLDivElement | null>\n ) => (\n <StyledFlex\n ref={ref}\n $width={width}\n $height={height}\n $direction={direction}\n $gap={gap}\n $align={align}\n $justify={justify}\n $wrap={wrap}\n {...props}\n />\n )\n) as PolymorphicComponent<'web', FlexProps>;\n\nexport type FlexProps = ConvertTransientProps<FlexStyledProps>;\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","ref"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAAA;AAkBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO;AAYqC;;;;;;;AAFnCC;AAAK;AAKRC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var styles = require('./styles.cjs.js');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
|
|
11
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
|
|
12
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
|
13
|
+
|
|
14
|
+
var _excluded = ["variant", "width", "height", "animate"];
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
|
+
var Skeleton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
|
|
18
|
+
var variant = _ref.variant,
|
|
19
|
+
width = _ref.width,
|
|
20
|
+
height = _ref.height,
|
|
21
|
+
_ref$animate = _ref.animate,
|
|
22
|
+
animate = _ref$animate === void 0 ? true : _ref$animate,
|
|
23
|
+
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
24
|
+
return /*#__PURE__*/jsxRuntime.jsx(styles.StyledSkeleton, _objectSpread({
|
|
25
|
+
ref: ref,
|
|
26
|
+
$variant: variant,
|
|
27
|
+
$width: width,
|
|
28
|
+
$height: height,
|
|
29
|
+
$animate: animate
|
|
30
|
+
}, props));
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
exports.Skeleton = Skeleton;
|
|
34
|
+
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Skeleton/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { ConvertTransientProps } from '@remember-web/shared';\n\nimport type { StyledSkeletonProps } from '@/Common/Skeleton/styles';\nimport { StyledSkeleton } from '@/Common/Skeleton/styles';\n\ntype SkeletonProps = Partial<ConvertTransientProps<StyledSkeletonProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nexport const Skeleton = forwardRef(function (\n { variant, width, height, animate = true, ...props }: SkeletonProps,\n ref: ForwardedRef<HTMLDivElement | null>\n) {\n return (\n <StyledSkeleton\n ref={ref}\n $variant={variant}\n $width={width}\n $height={height}\n $animate={animate}\n {...props}\n />\n );\n});\n"],"names":["Skeleton","forwardRef","_ref","ref","variant","width","height","_ref$animate","animate","props","_objectWithoutProperties","_excluded","_jsx","StyledSkeleton","_objectSpread","$variant","$width","$height","$animate"],"mappings":";;;;;;;;;;;;;;;;AAUO,IAAMA,QAAQ,gBAAGC,gBAAU,CAAC,UAAAC,IAAA,EAEjCC,GAAwC,EACxC;AAAA,EAAA,IAFEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAAC,YAAA,GAAAL,IAAA,CAAEM,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,YAAA;AAAKE,IAAAA,KAAK,GAAAC,yCAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;AAGlD,EAAA,oBACEC,cAAA,CAACC,qBAAc,EAAAC,aAAA,CAAA;AACbX,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,QAAQ,EAAEX,OAAQ;AAClBY,IAAAA,MAAM,EAAEX,KAAM;AACdY,IAAAA,OAAO,EAAEX,MAAO;AAChBY,IAAAA,QAAQ,EAAEV,OAAAA;GACNC,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC;;;;"}
|