@remember-web/primitive 0.1.2 → 0.1.4
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/primitive/src/Badge/index.d.ts +2 -0
- package/dist/primitive/src/Badge/index.d.ts.map +1 -1
- package/dist/primitive/src/Buttons/Button/Button.stories.d.ts +1 -1
- package/dist/primitive/src/Common/Typography/index.cjs.js.map +1 -1
- package/dist/primitive/src/Common/Typography/index.d.ts.map +1 -1
- package/dist/primitive/src/Common/Typography/index.esm.js.map +1 -1
- package/dist/primitive/src/Common/Typography/styles.cjs.js.map +1 -1
- package/dist/primitive/src/Common/Typography/styles.d.ts.map +1 -1
- package/dist/primitive/src/Common/Typography/styles.esm.js.map +1 -1
- package/dist/primitive/src/Common/index.d.ts +2 -0
- package/dist/primitive/src/Common/index.d.ts.map +1 -1
- package/dist/primitive/src/Control/BaseToggle/index.cjs.js +1 -0
- package/dist/primitive/src/Control/BaseToggle/index.cjs.js.map +1 -1
- package/dist/primitive/src/Control/BaseToggle/index.esm.js +1 -0
- package/dist/primitive/src/Control/BaseToggle/index.esm.js.map +1 -1
- package/dist/primitive/src/Floating/Popover/styles.cjs.js.map +1 -1
- package/dist/primitive/src/Floating/Popover/styles.d.ts.map +1 -1
- package/dist/primitive/src/Floating/Popover/styles.esm.js.map +1 -1
- package/dist/primitive/src/Floating/index.d.ts +3 -0
- package/dist/primitive/src/Floating/index.d.ts.map +1 -1
- package/dist/primitive/src/Inputs/TextInput/TextInput.stories.d.ts +1 -1
- package/dist/primitive/src/index.cjs.js +11 -0
- package/dist/primitive/src/index.cjs.js.map +1 -1
- package/dist/primitive/src/index.esm.js +4 -0
- package/dist/primitive/src/index.esm.js.map +1 -1
- package/package.json +1 -16
- package/src/Badge/Badge.stories.tsx +1 -1
- package/src/Badge/index.ts +3 -0
- package/src/Common/Typography/index.tsx +0 -1
- package/src/Common/Typography/styles.ts +0 -1
- package/src/Common/index.ts +3 -0
- package/src/Floating/Popover/styles.ts +0 -1
- package/src/Floating/index.ts +9 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"}
|
|
1
|
+
{"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"}
|
|
@@ -8,7 +8,7 @@ declare const meta: {
|
|
|
8
8
|
as?: T | null | undefined;
|
|
9
9
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "icon" | keyof import("../../Buttons/Button/types").ButtonStyleProps | "iconPosition"> & import("@remember-web/shared/types").ConvertTransientProps<Partial<import("../../Buttons/Button/types").ButtonStyleProps>> & {
|
|
10
10
|
icon?: import("react").ReactNode;
|
|
11
|
-
iconPosition?: "
|
|
11
|
+
iconPosition?: "right" | "left" | undefined;
|
|
12
12
|
} & {
|
|
13
13
|
ref?: import("react").ComponentPropsWithRef<T>["ref"] | undefined;
|
|
14
14
|
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n CSSProperties,\n ElementType,\n ReactElement,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n CSSProperties,\n ElementType,\n ReactElement,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport { type TypographyStyle } from '@remember-web/mixin';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = <T extends ElementType>(\n {\n variant,\n as,\n color,\n children,\n ellipsis,\n maxWidth,\n ...props\n }: TypographyProps<T>,\n ref: ComponentPropsWithRef<T>['ref']\n) => (\n <StyledTypography\n ref={ref}\n as={as}\n $variant={variant}\n $color={color}\n $ellipsis={ellipsis}\n $maxWidth={maxWidth}\n {...props}\n >\n {children}\n </StyledTypography>\n);\n\ntype TypographyProps<T extends ElementType> = {\n variant: TypographyStyle;\n as?: T;\n color?: string;\n children?: ReactNode;\n ellipsis?: number;\n maxWidth?: CSSProperties['maxWidth'];\n} & ComponentPropsWithoutRef<T>;\n\ntype TypographyComponentWithRef = <T extends ElementType = 'div'>(\n props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }\n) => ReactElement | null;\n\nexport default forwardRef(Typography) as TypographyComponentWithRef;\n"],"names":["props","ref","as","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAeb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Typography/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Typography/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA6B3D,KAAK,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI;IAC5C,OAAO,EAAE,eAAe,CAAC;IACzB,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEhC,KAAK,0BAA0B,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC9D,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KAClE,YAAY,GAAG,IAAI,CAAC;;AAEzB,wBAAoE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n CSSProperties,\n ElementType,\n ReactElement,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n CSSProperties,\n ElementType,\n ReactElement,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport { type TypographyStyle } from '@remember-web/mixin';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = <T extends ElementType>(\n {\n variant,\n as,\n color,\n children,\n ellipsis,\n maxWidth,\n ...props\n }: TypographyProps<T>,\n ref: ComponentPropsWithRef<T>['ref']\n) => (\n <StyledTypography\n ref={ref}\n as={as}\n $variant={variant}\n $color={color}\n $ellipsis={ellipsis}\n $maxWidth={maxWidth}\n {...props}\n >\n {children}\n </StyledTypography>\n);\n\ntype TypographyProps<T extends ElementType> = {\n variant: TypographyStyle;\n as?: T;\n color?: string;\n children?: ReactNode;\n ellipsis?: number;\n maxWidth?: CSSProperties['maxWidth'];\n} & ComponentPropsWithoutRef<T>;\n\ntype TypographyComponentWithRef = <T extends ElementType = 'div'>(\n props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }\n) => ReactElement | null;\n\nexport default forwardRef(Typography) as TypographyComponentWithRef;\n"],"names":["props","ref","as","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAeb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport {\n ellipsis,\n getTypographyStyles,\n type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n $variant: TypographyStyle;\n $color?: string;\n $ellipsis?: number;\n $maxWidth?: CSSProperties['maxWidth'];\n}>`\n ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n getTypographyStyles($variant),\n $ellipsis && ellipsis($ellipsis),\n css({ color: $color, maxWidth: $maxWidth }),\n ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;;;;;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Typography/styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Typography/styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,gBAAgB;cACjB,eAAe;;;gBAGb,aAAa,CAAC,UAAU,CAAC;GAOtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport {\n ellipsis,\n getTypographyStyles,\n type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n $variant: TypographyStyle;\n $color?: string;\n $ellipsis?: number;\n $maxWidth?: CSSProperties['maxWidth'];\n}>`\n ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n getTypographyStyles($variant),\n $ellipsis && ellipsis($ellipsis),\n css({ color: $color, maxWidth: $maxWidth }),\n ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,4BAA4B;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -11,6 +11,7 @@ require('@remember-web/icon');
|
|
|
11
11
|
require('../../Common/Spinner/styles.cjs.js');
|
|
12
12
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
13
|
var index$1 = require('../../Common/Typography/index.cjs.js');
|
|
14
|
+
require('../../Common/Typography/styles.cjs.js');
|
|
14
15
|
var index = require('./ToggleIcon/index.cjs.js');
|
|
15
16
|
var styles = require('./styles.cjs.js');
|
|
16
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={ref}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={ref}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAkBK;;;AAXDA;;;;AAGAC;;;;AAEAC;;;AAGGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
|
|
@@ -9,6 +9,7 @@ import '@remember-web/icon';
|
|
|
9
9
|
import '../../Common/Spinner/styles.esm.js';
|
|
10
10
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
11
11
|
import Typography from '../../Common/Typography/index.esm.js';
|
|
12
|
+
import '../../Common/Typography/styles.esm.js';
|
|
12
13
|
import { ToggleIcon } from './ToggleIcon/index.esm.js';
|
|
13
14
|
import { ToggleRoot, ToggleInput } from './styles.esm.js';
|
|
14
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={ref}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={ref}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAkBK;;;AAXDA;;;;AAGAC;;;;AAEAC;;;AAGGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContent","styled","PopoverContent","_templateObject3","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;;;;;;;;AAIO,IAAMA,UAAU,GAAGC,gBAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,gBAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,uCAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,uBAAM,CAACC,2BAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,uCAAA,2fAQ/CO,iBAAW,EACAC,WAAK,EAUVX,UAAU,EAGVI,WAAW,EAE3B;AAEDE,oBAAoB,CAACM,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Floating/Popover/styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Floating/Popover/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,UAAU,2DAOtB,CAAC;AACF,eAAO,MAAM,WAAW,2DAOvB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;kNAwBhC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContent","styled","PopoverContent","_templateObject3","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;AAIO,IAAMA,UAAU,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,2fAQ/CO,WAAW,EACAC,KAAK,EAUVX,UAAU,EAGVI,WAAW,EAE3B;AAEDE,oBAAoB,CAACM,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
export { default as Tooltip } from './Tooltip';
|
|
2
2
|
export { default as Popover } from './Popover';
|
|
3
3
|
export { default as DropdownMenu } from './DropdownMenu';
|
|
4
|
+
/** GNB에서 의존하기 때문에 export */
|
|
5
|
+
export { StyledPopoverContent } from './Popover/styles';
|
|
6
|
+
export { StyledDropdownMenuContent, StyledDropdownMenuItem, getDropdownMenuItemCss, dropdownMenuItemCSS, } from './DropdownMenu/styles';
|
|
4
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,4BAA4B;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EACL,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,uBAAuB,CAAC"}
|
|
@@ -8,7 +8,7 @@ declare const meta: {
|
|
|
8
8
|
argTypes: {
|
|
9
9
|
type: {
|
|
10
10
|
control: string;
|
|
11
|
-
options: ("number" | "
|
|
11
|
+
options: ("number" | "search" | "text" | "date" | "datetime-local" | "email" | "password" | "tel" | "url")[];
|
|
12
12
|
};
|
|
13
13
|
hasTogglePasswordVisibilityButton: {
|
|
14
14
|
type: "boolean";
|
|
@@ -4,11 +4,13 @@ var index = require('./Avatars/Avatar/index.cjs.js');
|
|
|
4
4
|
var index$1 = require('./Buttons/Button/index.cjs.js');
|
|
5
5
|
var utils = require('./Badge/utils.cjs.js');
|
|
6
6
|
var Badge = require('./Badge/Badge.cjs.js');
|
|
7
|
+
var style = require('./Badge/style.cjs.js');
|
|
7
8
|
var index$3 = require('./Common/Divider/index.cjs.js');
|
|
8
9
|
var index$4 = require('./Common/Flex/index.cjs.js');
|
|
9
10
|
var index$5 = require('./Common/Grid/index.cjs.js');
|
|
10
11
|
var index$6 = require('./Common/Spinner/index.cjs.js');
|
|
11
12
|
var index$2 = require('./Common/Typography/index.cjs.js');
|
|
13
|
+
var styles = require('./Common/Typography/styles.cjs.js');
|
|
12
14
|
var Checkbox = require('./Control/Checkbox.cjs.js');
|
|
13
15
|
var Toggle = require('./Control/Toggle.cjs.js');
|
|
14
16
|
var index$7 = require('./Control/Switch/index.cjs.js');
|
|
@@ -25,6 +27,8 @@ var index$g = require('./Inputs/Select/index.cjs.js');
|
|
|
25
27
|
var index$h = require('./Floating/Tooltip/index.cjs.js');
|
|
26
28
|
var index$i = require('./Floating/Popover/index.cjs.js');
|
|
27
29
|
var index$j = require('./Floating/DropdownMenu/index.cjs.js');
|
|
30
|
+
var styles$1 = require('./Floating/Popover/styles.cjs.js');
|
|
31
|
+
var styles$2 = require('./Floating/DropdownMenu/styles.cjs.js');
|
|
28
32
|
|
|
29
33
|
|
|
30
34
|
|
|
@@ -32,11 +36,13 @@ exports.Avatar = index;
|
|
|
32
36
|
exports.Button = index$1;
|
|
33
37
|
exports.badgePseudo = utils.badgePseudo;
|
|
34
38
|
exports.Badge = Badge.Badge;
|
|
39
|
+
exports.getBadgePseudoCss = style.getBadgePseudoCss;
|
|
35
40
|
exports.Divider = index$3.Divider;
|
|
36
41
|
exports.Flex = index$4.Flex;
|
|
37
42
|
exports.Grid = index$5.Grid;
|
|
38
43
|
exports.Spinner = index$6.Spinner;
|
|
39
44
|
exports.Typography = index$2;
|
|
45
|
+
exports.StyledTypography = styles.StyledTypography;
|
|
40
46
|
exports.Checkbox = Checkbox.Checkbox;
|
|
41
47
|
exports._Checkbox = Checkbox._Checkbox;
|
|
42
48
|
exports.CircleBaseToggle = Toggle.CircleBaseToggle;
|
|
@@ -57,4 +63,9 @@ exports.Select = index$g;
|
|
|
57
63
|
exports.Tooltip = index$h;
|
|
58
64
|
exports.Popover = index$i;
|
|
59
65
|
exports.DropdownMenu = index$j;
|
|
66
|
+
exports.StyledPopoverContent = styles$1.StyledPopoverContent;
|
|
67
|
+
exports.StyledDropdownMenuContent = styles$2.StyledDropdownMenuContent;
|
|
68
|
+
exports.StyledDropdownMenuItem = styles$2.StyledDropdownMenuItem;
|
|
69
|
+
exports.dropdownMenuItemCSS = styles$2.dropdownMenuItemCSS;
|
|
70
|
+
exports.getDropdownMenuItemCss = styles$2.getDropdownMenuItemCss;
|
|
60
71
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,11 +2,13 @@ export { default as Avatar } from './Avatars/Avatar/index.esm.js';
|
|
|
2
2
|
export { default as Button } from './Buttons/Button/index.esm.js';
|
|
3
3
|
export { badgePseudo } from './Badge/utils.esm.js';
|
|
4
4
|
export { Badge } from './Badge/Badge.esm.js';
|
|
5
|
+
export { getBadgePseudoCss } from './Badge/style.esm.js';
|
|
5
6
|
export { Divider } from './Common/Divider/index.esm.js';
|
|
6
7
|
export { Flex } from './Common/Flex/index.esm.js';
|
|
7
8
|
export { Grid } from './Common/Grid/index.esm.js';
|
|
8
9
|
export { Spinner } from './Common/Spinner/index.esm.js';
|
|
9
10
|
export { default as Typography } from './Common/Typography/index.esm.js';
|
|
11
|
+
export { StyledTypography } from './Common/Typography/styles.esm.js';
|
|
10
12
|
export { Checkbox, _Checkbox } from './Control/Checkbox.esm.js';
|
|
11
13
|
export { CircleBaseToggle, Toggle, _Toggle } from './Control/Toggle.esm.js';
|
|
12
14
|
export { Switch } from './Control/Switch/index.esm.js';
|
|
@@ -23,4 +25,6 @@ export { default as Select } from './Inputs/Select/index.esm.js';
|
|
|
23
25
|
export { default as Tooltip } from './Floating/Tooltip/index.esm.js';
|
|
24
26
|
export { default as Popover } from './Floating/Popover/index.esm.js';
|
|
25
27
|
export { default as DropdownMenu } from './Floating/DropdownMenu/index.esm.js';
|
|
28
|
+
export { StyledPopoverContent } from './Floating/Popover/styles.esm.js';
|
|
29
|
+
export { StyledDropdownMenuContent, StyledDropdownMenuItem, dropdownMenuItemCSS, getDropdownMenuItemCss } from './Floating/DropdownMenu/styles.esm.js';
|
|
26
30
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remember-web/primitive",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "RUI Primitive Components",
|
|
5
5
|
"homepage": "https://dramancompany.github.io/rui/",
|
|
6
6
|
"author": "Remember",
|
|
@@ -55,21 +55,7 @@
|
|
|
55
55
|
"@rollup/plugin-babel": "^6.0.4",
|
|
56
56
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
57
57
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
58
|
-
"@storybook/addon-a11y": "^7",
|
|
59
|
-
"@storybook/addon-actions": "^7",
|
|
60
|
-
"@storybook/addon-backgrounds": "^7",
|
|
61
|
-
"@storybook/addon-docs": "^7",
|
|
62
|
-
"@storybook/addon-essentials": "^7",
|
|
63
|
-
"@storybook/addon-interactions": "^7",
|
|
64
|
-
"@storybook/addon-links": "^7",
|
|
65
|
-
"@storybook/addon-measure": "^7",
|
|
66
|
-
"@storybook/addon-outline": "^7",
|
|
67
|
-
"@storybook/addons": "^7",
|
|
68
|
-
"@storybook/client-api": "^7",
|
|
69
|
-
"@storybook/client-logger": "^7",
|
|
70
58
|
"@storybook/react": "^7",
|
|
71
|
-
"@storybook/react-vite": "^7",
|
|
72
|
-
"@storybook/testing-library": "^0.2.2",
|
|
73
59
|
"@types/react": "^18.2.39",
|
|
74
60
|
"@types/react-dom": "^18.2.17",
|
|
75
61
|
"eslint-config-rui": "workspace:*",
|
|
@@ -80,7 +66,6 @@
|
|
|
80
66
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
81
67
|
"rollup-plugin-typescript2": "^0.36.0",
|
|
82
68
|
"rollup-plugin-visualizer": "^5.9.0",
|
|
83
|
-
"storybook": "^7",
|
|
84
69
|
"styled-components": ">=6",
|
|
85
70
|
"tsc-alias": "^1.8.6",
|
|
86
71
|
"tsconfig": "workspace:*",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
+
|
|
3
4
|
import { badgePseudo } from '@/Badge/utils';
|
|
4
5
|
import type { BadgeAttribute } from '@/Badge/types';
|
|
5
|
-
|
|
6
6
|
import { Badge } from '@/Badge/Badge';
|
|
7
7
|
|
|
8
8
|
type Story = StoryObj<typeof Badge>;
|
package/src/Badge/index.ts
CHANGED
package/src/Common/index.ts
CHANGED
package/src/Floating/index.ts
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
1
|
export { default as Tooltip } from './Tooltip';
|
|
2
2
|
export { default as Popover } from './Popover';
|
|
3
3
|
export { default as DropdownMenu } from './DropdownMenu';
|
|
4
|
+
|
|
5
|
+
/** GNB에서 의존하기 때문에 export */
|
|
6
|
+
export { StyledPopoverContent } from './Popover/styles';
|
|
7
|
+
export {
|
|
8
|
+
StyledDropdownMenuContent,
|
|
9
|
+
StyledDropdownMenuItem,
|
|
10
|
+
getDropdownMenuItemCss,
|
|
11
|
+
dropdownMenuItemCSS,
|
|
12
|
+
} from './DropdownMenu/styles';
|