@remember-web/primitive 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -42,7 +42,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.1.6",
+    "@remember-web/icon": "^0.1.9",
     "@remember-web/mixin": "^0.1.14",
     "@remember-web/shared": "^0.1.0"
   },

package/src/Control/BaseToggle/ToggleIcon/index.tsx

@@ -5,6 +5,7 @@ import {
   ControlBookmarkOn,
   ControlCheckOff,
   ControlCheckOn,
+  ControlCheckboxIndeterminate,
   ControlCheckboxOff,
   ControlCheckboxOn,
   ControlFavoriteOff,
@@ -22,11 +23,31 @@ import {
 import type { ToggleStatusType, ToggleVariantType } from '../types';
 
 const ICON_NAME = {
-  check: { on: ControlCheckOn, off: ControlCheckOff },
-  checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },
-  favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },
-  bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },
-  radio: { on: ControlRadioOn, off: ControlRadioOff },
+  check: {
+    on: ControlCheckOn,
+    indeterminate: ControlCheckOn,
+    off: ControlCheckOff,
+  },
+  checkbox: {
+    on: ControlCheckboxOn,
+    indeterminate: ControlCheckboxIndeterminate,
+    off: ControlCheckboxOff,
+  },
+  favorite: {
+    on: ControlFavoriteOn,
+    indeterminate: ControlFavoriteOn,
+    off: ControlFavoriteOff,
+  },
+  bookmark: {
+    on: ControlBookmarkOn,
+    indeterminate: ControlBookmarkOn,
+    off: ControlBookmarkOff,
+  },
+  radio: {
+    on: ControlRadioOn,
+    indeterminate: ControlRadioOn,
+    off: ControlRadioOff,
+  },
 } as const satisfies Record<
   ToggleVariantType,
   Record<ToggleStatusType, WithSvgSizeComponentType>
@@ -44,6 +65,7 @@ export function ToggleIcon({
 } & SvgSizeProps) {
   const iconSize =
     typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;
+
   const Icon = ICON_NAME[variant][status];
 
   return <Icon className={className} size={iconSize} />;

package/src/Control/BaseToggle/index.tsx

@@ -24,6 +24,7 @@ const _BaseToggle: ForwardRefRenderFunction<
     type = 'checkbox',
     onToggle,
     onChange,
+    indeterminate,
     ...props
   },
   ref
@@ -38,7 +39,19 @@ const _BaseToggle: ForwardRefRenderFunction<
   return (
     <ToggleRoot className={className} $gap={labelGap}>
       <ToggleInput
-        ref={ref}
+        ref={(input) => {
+          if (ref) {
+            if (typeof ref === 'function') {
+              ref(input);
+            } else {
+              ref.current = input;
+            }
+          }
+
+          if (input) {
+            input.indeterminate = indeterminate ?? false;
+          }
+        }}
         className={inputClassName}
         type={type}
         {...props}
@@ -54,6 +67,12 @@ const _BaseToggle: ForwardRefRenderFunction<
         status="on"
         variant={variant}
       />
+      <ToggleIcon
+        className="indeterminateIcon"
+        size={size}
+        status="indeterminate"
+        variant={variant}
+      />
       <ToggleIcon
         className="offIcon"
         size={size}

package/src/Control/BaseToggle/styles.ts

@@ -44,6 +44,15 @@ export const ToggleInput = styled.input`
     display: none;
   }
 
+  &:indeterminate ~ svg.offIcon,
+  &:indeterminate ~ svg.onIcon {
+    display: none;
+  }
+
+  &:not(:indeterminate) ~ svg.indeterminateIcon {
+    display: none;
+  }
+
   &:disabled ~ svg {
     filter: grayscale(1) brightness(1.1);
   }

package/src/Control/BaseToggle/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-export type ToggleStatusType = 'on' | 'off';
+export type ToggleStatusType = 'on' | 'off' | 'indeterminate';
 export type ToggleVariantType =
   | 'check'
   | 'checkbox'
@@ -24,6 +24,7 @@ export type BaseToggleProps = {
   onToggle?: (checked: boolean) => void;
   size?: ToggleIconSizeType;
   type?: 'checkbox' | 'radio';
+  indeterminate?: boolean;
 } & Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'type' | `aria-${string}` | 'size'

package/src/Control/Checkbox.stories.tsx

@@ -19,10 +19,10 @@ export const Default: Story = {
     disabled: false,
     required: false,
     checked: false,
-    variant: 'checkbox',
     label: "I'm a Checkbox",
     size: 'medium',
     labelPosition: 'right',
+    indeterminate: false,
   },
   render: ({ ...args }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -30,6 +30,33 @@ export const Default: Story = {
     return (
       <Checkbox
         {...args}
+        variant="checkbox"
+        checked={checked}
+        onToggle={(v) => updateArgs({ checked: v })}
+      />
+    );
+  },
+};
+
+export const Check: Story = {
+  args: {
+    disabled: false,
+    required: false,
+    checked: false,
+    label: "I'm a Check",
+    size: 'medium',
+    labelPosition: 'right',
+  },
+  argTypes: {
+    indeterminate: { table: { disable: true } },
+  },
+  render: ({ ...args }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [{ checked }, updateArgs] = useArgs();
+    return (
+      <Checkbox
+        {...args}
+        variant="check"
         checked={checked}
         onToggle={(v) => updateArgs({ checked: v })}
       />

package/src/Control/Checkbox.tsx

@@ -5,11 +5,17 @@ import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import type { BaseToggleProps } from './BaseToggle/types';
 import { CircleBaseToggle } from './Toggle';
 
+type CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;
+
 export const _Checkbox: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'type'> & {
-    variant?: 'checkbox' | 'check';
-  }
+  | CheckboxProps<{
+      variant: 'checkbox';
+      indeterminate?: boolean;
+    }>
+  | CheckboxProps<{
+      variant: 'check';
+    }>
 > = ({ variant = 'checkbox', ...props }, ref) => (
   <CircleBaseToggle ref={ref} variant={variant} {...props} />
 );

package/src/Control/Radio.tsx

@@ -7,7 +7,7 @@ import { CircleBaseToggle } from './Toggle';
 
 const _Radio: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>
+  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>
 > = ({ ...props }, ref) => (
   <CircleBaseToggle ref={ref} variant="radio" type="radio" {...props} />
 );

package/src/Control/Toggle.tsx

@@ -8,7 +8,7 @@ import type { BaseToggleProps } from './BaseToggle/types';
 
 export const _Toggle: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'type'> & {
+  Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {
     variant: 'bookmark' | 'favorite';
   }
 > = ({ variant, ...props }, ref) => (

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

@@ -1,42 +0,0 @@
-"use client";
-'use strict';
-
-var react = require('react');
-var mixin = require('@remember-web/mixin');
-var icon = require('@remember-web/icon');
-var styles = require('./styles.cjs.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-var Avatar = function Avatar(_ref, ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? mixin.bg200 : _ref$backgroundColor,
-    _ref$border = _ref.border,
-    border = _ref$border === void 0 ? {
-      color: mixin.divider,
-      width: '1px'
-    } : _ref$border,
-    _ref$rounded = _ref.rounded,
-    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
-    imageUrl = _ref.imageUrl,
-    children = _ref.children;
-  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledAvatar, {
-    ref: ref,
-    $size: size,
-    $backgroundColor: backgroundColor,
-    $border: border,
-    $rounded: rounded,
-    children: imageUrl ? /*#__PURE__*/jsxRuntime.jsx("img", {
-      src: imageUrl,
-      loading: "lazy",
-      alt: "avatar"
-    }) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsxRuntime.jsx(icon.IconAvatarEmpty, {
-      size: "100%"
-    })
-  });
-};
-var index = /*#__PURE__*/react.forwardRef(Avatar);
-
-module.exports = index;
-//# sourceMappingURL=index.cjs.js.map

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

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

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

@@ -1,7 +0,0 @@
-import type { ComponentPropsWithoutRef } from 'react';
-import type { ConvertTransientProps } from '@remember-web/shared';
-import type { StyledAvatarProps } from '../../Avatars/Avatar/styles';
-export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> & ComponentPropsWithoutRef<'div'>;
-declare const _default: import("react").ForwardRefExoticComponent<Partial<ConvertTransientProps<StyledAvatarProps>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export default _default;
-//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,40 +0,0 @@
-"use client";
-import { forwardRef } from 'react';
-import { bg200, divider } from '@remember-web/mixin';
-import { IconAvatarEmpty } from '@remember-web/icon';
-import { StyledAvatar } from './styles.esm.js';
-import { jsx } from 'react/jsx-runtime';
-
-var Avatar = function Avatar(_ref, ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? bg200 : _ref$backgroundColor,
-    _ref$border = _ref.border,
-    border = _ref$border === void 0 ? {
-      color: divider,
-      width: '1px'
-    } : _ref$border,
-    _ref$rounded = _ref.rounded,
-    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
-    imageUrl = _ref.imageUrl,
-    children = _ref.children;
-  return /*#__PURE__*/jsx(StyledAvatar, {
-    ref: ref,
-    $size: size,
-    $backgroundColor: backgroundColor,
-    $border: border,
-    $rounded: rounded,
-    children: imageUrl ? /*#__PURE__*/jsx("img", {
-      src: imageUrl,
-      loading: "lazy",
-      alt: "avatar"
-    }) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsx(IconAvatarEmpty, {
-      size: "100%"
-    })
-  });
-};
-var index = /*#__PURE__*/forwardRef(Avatar);
-
-export { index as default };
-//# sourceMappingURL=index.esm.js.map

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

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

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

@@ -1,45 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-var avatarSize = {
-  xxlarge: 64,
-  xlarge: 56,
-  large: 48,
-  medium: 40,
-  small: 32,
-  xsmall: 24,
-  xxsmall: 20
-};
-var StyledAvatar = styled__default.default.div(function (_ref) {
-  var $size = _ref.$size,
-    $border = _ref.$border,
-    $backgroundColor = _ref.$backgroundColor,
-    $rounded = _ref.$rounded;
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: "".concat(avatarSize[$size], "px"),
-    maxWidth: "".concat(avatarSize[$size], "px"),
-    maxHeight: "".concat(avatarSize[$size], "px"),
-    aspectRatio: '1 / 1',
-    boxSizing: 'border-box',
-    border: $border ? "".concat($border.width, " solid ").concat($border.color) : 'none',
-    borderRadius: $rounded ? '50%' : 'none',
-    backgroundColor: $backgroundColor,
-    contain: 'strict',
-    img: {
-      width: '100%',
-      height: '100%'
-    }
-  };
-});
-
-exports.StyledAvatar = StyledAvatar;
-exports.avatarSize = avatarSize;
-//# sourceMappingURL=styles.cjs.js.map

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

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

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

@@ -1,22 +0,0 @@
-import type { CSSProperties } from 'react';
-export declare const avatarSize: {
-    xxlarge: number;
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-    xxsmall: number;
-};
-export interface StyledAvatarProps {
-    $size: keyof typeof avatarSize;
-    $border?: {
-        width?: NonNullable<CSSProperties['borderWidth']>;
-        color?: NonNullable<CSSProperties['borderColor']>;
-    };
-    $rounded?: boolean;
-    $imageUrl?: string;
-    $backgroundColor?: CSSProperties['backgroundColor'];
-}
-export declare const StyledAvatar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAvatarProps>>;
-//# sourceMappingURL=styles.d.ts.map

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

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

package/dist/src/Avatars/Avatar/styles.esm.js

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-var avatarSize = {
-  xxlarge: 64,
-  xlarge: 56,
-  large: 48,
-  medium: 40,
-  small: 32,
-  xsmall: 24,
-  xxsmall: 20
-};
-var StyledAvatar = styled.div(function (_ref) {
-  var $size = _ref.$size,
-    $border = _ref.$border,
-    $backgroundColor = _ref.$backgroundColor,
-    $rounded = _ref.$rounded;
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: "".concat(avatarSize[$size], "px"),
-    maxWidth: "".concat(avatarSize[$size], "px"),
-    maxHeight: "".concat(avatarSize[$size], "px"),
-    aspectRatio: '1 / 1',
-    boxSizing: 'border-box',
-    border: $border ? "".concat($border.width, " solid ").concat($border.color) : 'none',
-    borderRadius: $rounded ? '50%' : 'none',
-    backgroundColor: $backgroundColor,
-    contain: 'strict',
-    img: {
-      width: '100%',
-      height: '100%'
-    }
-  };
-});
-
-export { StyledAvatar, avatarSize };
-//# sourceMappingURL=styles.esm.js.map

package/dist/src/Avatars/Avatar/styles.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nexport const avatarSize = {\n  xxlarge: 64,\n  xlarge: 56,\n  large: 48,\n  medium: 40,\n  small: 32,\n  xsmall: 24,\n  xxsmall: 20,\n};\n\nexport interface StyledAvatarProps {\n  $size: keyof typeof avatarSize;\n  $border?: {\n    width?: NonNullable<CSSProperties['borderWidth']>;\n    color?: NonNullable<CSSProperties['borderColor']>;\n  };\n  $rounded?: boolean;\n  $imageUrl?: string;\n  $backgroundColor?: CSSProperties['backgroundColor'];\n}\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>(\n  ({ $size, $border, $backgroundColor, $rounded }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: `${avatarSize[$size]}px`,\n    maxWidth: `${avatarSize[$size]}px`,\n    maxHeight: `${avatarSize[$size]}px`,\n    aspectRatio: '1 / 1',\n    boxSizing: 'border-box',\n    border: $border ? `${$border.width} solid ${$border.color}` : 'none',\n    borderRadius: $rounded ? '50%' : 'none',\n\n    backgroundColor: $backgroundColor,\n\n    contain: 'strict',\n\n    img: {\n      width: '100%',\n      height: '100%',\n    },\n  })\n);\n"],"names":["avatarSize","xxlarge","xlarge","large","medium","small","xsmall","xxsmall","StyledAvatar","styled","div","_ref","$size","$border","$backgroundColor","$rounded","display","alignItems","justifyContent","width","concat","maxWidth","maxHeight","aspectRatio","boxSizing","border","color","borderRadius","backgroundColor","contain","img","height"],"mappings":";;AAGO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,OAAO,EAAE,EAAA;AACX,EAAC;AAaM,IAAMC,YAAY,GAAGC,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;;;;"}

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

@@ -1,4 +0,0 @@
-export { default as Avatar } from './Avatar';
-/** GNB에서 의존하기 때문에 export */
-export { StyledAvatar } from './Avatar/styles';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Avatars/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,4BAA4B;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/Badge/Badge.cjs.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var style = require('./style.cjs.js');
-var utils = require('./utils.cjs.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function Badge(_ref) {
-  var value = _ref.value;
-  return /*#__PURE__*/jsxRuntime.jsx(style.StyledBadge, {
-    children: utils.getBadgeValue(value)
-  });
-}
-
-exports.Badge = Badge;
-//# sourceMappingURL=Badge.cjs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.cjs.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n  return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;EAC3B,oBAAOC,cAAA,CAACC,iBAAW,EAAA;IAAAC,QAAA,EAAEC,mBAAa,CAACJ,KAAK,CAAA;AAAC,GAAc,CAAC,CAAA;AAC1D;;;;"}

package/dist/src/Badge/Badge.d.ts

@@ -1,6 +0,0 @@
-import type { BadgeValueProps } from '../Badge/types';
-export type BadgeProps = {
-    value: BadgeValueProps;
-};
-export declare function Badge({ value }: BadgeProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,CAAC;AAEpD,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,2CAE1C"}

package/dist/src/Badge/Badge.esm.js

@@ -1,13 +0,0 @@
-import { StyledBadge } from './style.esm.js';
-import { getBadgeValue } from './utils.esm.js';
-import { jsx } from 'react/jsx-runtime';
-
-function Badge(_ref) {
-  var value = _ref.value;
-  return /*#__PURE__*/jsx(StyledBadge, {
-    children: getBadgeValue(value)
-  });
-}
-
-export { Badge };
-//# sourceMappingURL=Badge.esm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.esm.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n  return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;EAC3B,oBAAOC,GAAA,CAACC,WAAW,EAAA;IAAAC,QAAA,EAAEC,aAAa,CAACJ,KAAK,CAAA;AAAC,GAAc,CAAC,CAAA;AAC1D;;;;"}

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

@@ -1,6 +0,0 @@
-export { badgePseudo } from './utils';
-export * from './Badge';
-export * from './types';
-/** GNB에서 의존하기 때문에 export */
-export { getBadgePseudoCss } from './style';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,4BAA4B;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/Badge/style.cjs.js

@@ -1,38 +0,0 @@
-'use strict';
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var styled = require('styled-components');
-var mixin = require('@remember-web/mixin');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-var _templateObject, _templateObject2, _templateObject3;
-
-/**
- * pseudo로 사용시 data-badge-value attribue가 필요합니다.
- */
-var badgeCss = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  display: inline-block;\n  box-sizing: border-box;\n  line-height: 16px;\n  min-height: 8px;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  padding: 1px 4px 0 4px;\n"])), mixin.getTypographyStyles('Subtitle2'), mixin.secondary100, mixin.contents999);
-
-/**
- * @param pseudo - default: 'after'
- * @param top - default: 0
- * @param right - default: 0
- */
-var getBadgePseudoCss = function getBadgePseudoCss() {
-  var pseudo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'after';
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$top = _ref.top,
-    top = _ref$top === void 0 ? 0 : _ref$top,
-    _ref$right = _ref.right,
-    right = _ref$right === void 0 ? 0 : _ref$right;
-  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  &[data-badge-value]::", " {\n    ", ";\n    content: attr(data-badge-value);\n    position: absolute;\n    top: ", ";\n    right: ", ";\n    transform: translate(50%, -50%);\n  }\n"])), pseudo, badgeCss, top, right);
-};
-var StyledBadge = styled__default.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  ", ";\n"])), badgeCss);
-
-exports.StyledBadge = StyledBadge;
-exports.badgeCss = badgeCss;
-exports.getBadgePseudoCss = getBadgePseudoCss;
-//# sourceMappingURL=style.cjs.js.map

package/dist/src/Badge/style.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.cjs.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n  contents999,\n  getTypographyStyles,\n  secondary100,\n} from '@remember-web/mixin';\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;;;;;;"}

package/dist/src/Badge/style.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-/**
- * pseudo로 사용시 data-badge-value attribue가 필요합니다.
- */
-export declare const badgeCss: import("styled-components").RuleSet<object>;
-/**
- * @param pseudo - default: 'after'
- * @param top - default: 0
- * @param right - default: 0
- */
-export declare const getBadgePseudoCss: (pseudo?: 'after' | 'before', { top, right }?: {
-    top?: number | undefined;
-    right?: number | undefined;
-}) => import("styled-components").RuleSet<object>;
-export declare const StyledBadge: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
-//# sourceMappingURL=style.d.ts.map

package/dist/src/Badge/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/Badge/style.tsx"],"names":[],"mappings":";AAOA;;GAEG;AACH,eAAO,MAAM,QAAQ,6CAWpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,YACpB,OAAO,GAAG,QAAQ;;;iDAW3B,CAAC;AAEF,eAAO,MAAM,WAAW,kNAEvB,CAAC"}