@atom-learning/components 6.6.0-beta.3 → 6.6.0-beta.5
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/components/badge/BadgeText.js +1 -2
- package/dist/components/badge/BadgeText.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +1 -1
- package/dist/components/pagination/Pagination.js +3 -3
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlDescription.js +1 -2
- package/dist/components/segmented-control/SegmentedControlDescription.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlHeading.js +1 -2
- package/dist/components/segmented-control/SegmentedControlHeading.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js +6 -3
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/components/tree/TreeText.js +2 -2
- package/dist/components/tree/TreeText.js.map +1 -1
- package/dist/index.cjs.js +14 -14
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/src/responsive-variant-classes.css +1 -1
|
@@ -19,7 +19,7 @@ var ObserveBadgeTextOverflow = ({ elRef }) => {
|
|
|
19
19
|
return null;
|
|
20
20
|
};
|
|
21
21
|
var StyledBadgeText = styled(Text, {
|
|
22
|
-
base: ["py-0.5"],
|
|
22
|
+
base: ["py-0.5", "capsize-none"],
|
|
23
23
|
variants: { overflow: {
|
|
24
24
|
ellipsis: [
|
|
25
25
|
"overflow-x-hidden",
|
|
@@ -39,7 +39,6 @@ var BadgeText = ({ children, ...rest }) => {
|
|
|
39
39
|
const size = React$1.useMemo(() => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]), [badgeSize]);
|
|
40
40
|
const [elRef, setElRef] = useCallbackRefState();
|
|
41
41
|
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, overflow === "ellipsis" && /* @__PURE__ */ React$1.createElement(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ React$1.createElement(StyledBadgeText, {
|
|
42
|
-
noCapsize: true,
|
|
43
42
|
size,
|
|
44
43
|
overflow,
|
|
45
44
|
ref: setElRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n base: ['py-0.5'],\n variants: {\n overflow: {\n ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n wrap: ['whitespace-normal']\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n
|
|
1
|
+
{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n base: ['py-0.5', 'capsize-none'],\n variants: {\n overflow: {\n ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n wrap: ['whitespace-normal']\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n size={size}\n overflow={overflow}\n ref={setElRef}\n {...rest}\n >\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAM,4BAAsE,EAC1E,YACI;CACJ,MAAM,EAAE,qBAAqB,QAAM,WAAW,aAAa;AAE3D,mBAAkB;EAChB,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,gBAAgB;AACd,OAAI,CAAC,OAAO,eAAe,CAAC,OAAO,YAAa;AAChD,sBAAmB,MAAM,cAAc,MAAM,YAAY;;EAE5D,CAAC;AAEF,QAAO;;AAGT,IAAM,kBAAkB,OAAO,MAAM;CACnC,MAAM,CAAC,UAAU,eAAe;CAChC,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;GAAoB;EACrE,MAAM,CAAC,oBAAoB;EAC5B,EACF;CACF,CAAC;AAIF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,aAAa,EACxB,UACA,GAAG,WAC+B;CAElC,MAAM,EAAE,MAAM,WAAW,aAAa,QAAM,WAAW,aAAa;CAEpE,MAAM,OAAO,QAAM,cACX,2BAA2B,YAAY,MAAM,WAAW,GAAG,EACjE,CAAC,UAAU,CACZ;CAED,MAAM,CAAC,OAAO,YAAY,qBAAqB;AAE/C,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,aAAa,cAAc,wBAAA,cAAC,0BAAD,EAAiC,OAAS,CAAA,EACtE,wBAAA,cAAC,iBAAD;EACQ;EACI;EACV,KAAK;EACL,GAAI;EAGY,EADf,SACe,CACjB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { PaginationProps } from './types';
|
|
3
3
|
export declare const Pagination: {
|
|
4
|
-
({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, ...rest }: PaginationProps): React.JSX.Element | null;
|
|
4
|
+
({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, className, ...rest }: PaginationProps): React.JSX.Element | null;
|
|
5
5
|
displayName: string;
|
|
6
6
|
} & {
|
|
7
7
|
Popover: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
|
|
@@ -6,7 +6,7 @@ import { PaginationItems } from "./PaginationItems.js";
|
|
|
6
6
|
import clsx from "clsx";
|
|
7
7
|
import * as React$1 from "react";
|
|
8
8
|
//#region src/components/pagination/Pagination.tsx
|
|
9
|
-
var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, ...rest }) => {
|
|
9
|
+
var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
|
|
10
10
|
if (!pagesCount) return null;
|
|
11
11
|
const paginationProviderProps = {
|
|
12
12
|
onSelectedPageChange,
|
|
@@ -24,8 +24,8 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
|
|
|
24
24
|
...colorScheme,
|
|
25
25
|
asChild: true
|
|
26
26
|
}, /* @__PURE__ */ React$1.createElement("div", {
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
...rest,
|
|
28
|
+
className: clsx("flex", "gap-1", className)
|
|
29
29
|
}, children || /* @__PURE__ */ React$1.createElement(PaginationItems, null))));
|
|
30
30
|
};
|
|
31
31
|
var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n <div className={clsx('flex', 'gap-1',
|
|
1
|
+
{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n className,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n <div {...rest} className={clsx('flex', 'gap-1', className)}>\n {children || <PaginationItems />}\n </div>\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAUA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,UACA,WACA,GAAG,WACkB;AACrB,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,0BAAmD;EACvD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,wBAAA,cAAC,oBAAuB,yBACtB,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,GAAI;EAAa,SAAA;EAI/C,EAHZ,wBAAA,cAAC,OAAD;EAAK,GAAI;EAAM,WAAW,KAAK,QAAQ,SAAS,UAAU;EAEpD,EADH,YAAY,wBAAA,cAAC,iBAAA,KAAkB,CAC5B,CACM,CACK;;AAIzB,IAAa,aAAa,OAAO,OAAO,qBAAqB,EAC3D,SAAS,mBACV,CAAC;AAEF,oBAAoB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(\n Text,\n {\n base: ['font-body', 'text-text-subtle', 'font-normal'],\n variants: {\n size: {\n sm: ['text-xs', 'leading-[1.6]'],\n md: ['text-sm', 'leading-[1.53]'],\n lg: ['text-md', 'leading-normal']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledText {...props} size={size}
|
|
1
|
+
{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(\n Text,\n {\n base: ['font-body', 'text-text-subtle', 'font-normal'],\n variants: {\n size: {\n sm: ['text-xs', 'leading-[1.6]'],\n md: ['text-sm', 'leading-[1.53]'],\n lg: ['text-md', 'leading-normal']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;EAAc;CACtD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,+BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAa;EAAQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n Text,\n {\n base: ['font-body', 'text-text-regular'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]'],\n md: ['text-md', 'leading-normal'],\n lg: ['text-lg', 'leading-[1.52]']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledHeading {...props} size={size}
|
|
1
|
+
{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n Text,\n {\n base: ['font-body', 'text-text-regular'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]'],\n md: ['text-md', 'leading-normal'],\n lg: ['text-lg', 'leading-[1.52]']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,oBAAoB;CACxC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,2BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,eAAD;EAAe,GAAI;EAAa;EAAQ,CAAA"}
|
|
@@ -39,18 +39,21 @@ var StyledItem = styled(Trigger, {
|
|
|
39
39
|
size: {
|
|
40
40
|
sm: [
|
|
41
41
|
"flex-[unset]",
|
|
42
|
+
"gap-3",
|
|
42
43
|
"px-6",
|
|
43
|
-
"py-
|
|
44
|
+
"py-4"
|
|
44
45
|
],
|
|
45
46
|
md: [
|
|
46
47
|
"flex-1",
|
|
48
|
+
"gap-4",
|
|
47
49
|
"px-4",
|
|
48
|
-
"py-
|
|
50
|
+
"py-6"
|
|
49
51
|
],
|
|
50
52
|
lg: [
|
|
51
53
|
"flex-1",
|
|
54
|
+
"gap-4",
|
|
52
55
|
"px-4",
|
|
53
|
-
"py-
|
|
56
|
+
"py-6"
|
|
54
57
|
]
|
|
55
58
|
}
|
|
56
59
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'px-6', 'py-
|
|
1
|
+
{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n }\n },\n defaultVariants: {\n size: 'md',\n theme: 'primary'\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n// console.log({size})\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,wBAAwB;AAEjE,QACE,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EAEzC,EADV,SACU;EAEf;AAEF,qBAAqB,cAAc"}
|
|
@@ -4,9 +4,9 @@ import React from "react";
|
|
|
4
4
|
//#region src/components/tree/TreeText.tsx
|
|
5
5
|
var TreeText = (props) => /* @__PURE__ */ React.createElement(Text, {
|
|
6
6
|
as: "span",
|
|
7
|
+
...props,
|
|
7
8
|
className: clsx("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
|
|
8
|
-
size: "md"
|
|
9
|
-
...props
|
|
9
|
+
size: "md"
|
|
10
10
|
});
|
|
11
11
|
//#endregion
|
|
12
12
|
export { TreeText };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n <Text\n as=\"span\"\n className={clsx(\n 'py-0.5',\n 'whitespace-nowrap',\n 'overflow-x-hidden',\n 'text-ellipsis',\n props.className\n )}\n size=\"md\"\n
|
|
1
|
+
{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n <Text\n as=\"span\"\n {...props}\n className={clsx(\n 'py-0.5',\n 'whitespace-nowrap',\n 'overflow-x-hidden',\n 'text-ellipsis',\n props.className\n )}\n size=\"md\"\n />\n)\n"],"mappings":";;;;AAOA,IAAa,YAAY,UACvB,sBAAA,cAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,KACT,UACA,qBACA,qBACA,iBACA,MAAM,UACP;CACD,MAAK;CACL,CAAA"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -1402,7 +1402,7 @@ var ObserveBadgeTextOverflow = ({ elRef }) => {
|
|
|
1402
1402
|
return null;
|
|
1403
1403
|
};
|
|
1404
1404
|
var StyledBadgeText = styled(Text, {
|
|
1405
|
-
base: ["py-0.5"],
|
|
1405
|
+
base: ["py-0.5", "capsize-none"],
|
|
1406
1406
|
variants: { overflow: {
|
|
1407
1407
|
ellipsis: [
|
|
1408
1408
|
"overflow-x-hidden",
|
|
@@ -1422,7 +1422,6 @@ var BadgeText = ({ children, ...rest }) => {
|
|
|
1422
1422
|
const size = react.useMemo(() => overrideStyledVariantValue(badgeSize, (s) => toTextSize$1[s]), [badgeSize]);
|
|
1423
1423
|
const [elRef, setElRef] = useCallbackRefState();
|
|
1424
1424
|
return /* @__PURE__ */ react.createElement(react.Fragment, null, overflow === "ellipsis" && /* @__PURE__ */ react.createElement(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ react.createElement(StyledBadgeText, {
|
|
1425
|
-
noCapsize: true,
|
|
1426
1425
|
size,
|
|
1427
1426
|
overflow,
|
|
1428
1427
|
ref: setElRef,
|
|
@@ -2423,9 +2422,9 @@ var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ react.createElement(
|
|
|
2423
2422
|
//#region src/components/tree/TreeText.tsx
|
|
2424
2423
|
var TreeText = (props) => /* @__PURE__ */ react.default.createElement(Text, {
|
|
2425
2424
|
as: "span",
|
|
2425
|
+
...props,
|
|
2426
2426
|
className: (0, clsx.default)("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
|
|
2427
|
-
size: "md"
|
|
2428
|
-
...props
|
|
2427
|
+
size: "md"
|
|
2429
2428
|
});
|
|
2430
2429
|
//#endregion
|
|
2431
2430
|
//#region src/components/tree/TreeItemContent.tsx
|
|
@@ -5217,7 +5216,7 @@ var PaginationItems = () => {
|
|
|
5217
5216
|
};
|
|
5218
5217
|
//#endregion
|
|
5219
5218
|
//#region src/components/pagination/Pagination.tsx
|
|
5220
|
-
var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, ...rest }) => {
|
|
5219
|
+
var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
|
|
5221
5220
|
if (!pagesCount) return null;
|
|
5222
5221
|
const paginationProviderProps = {
|
|
5223
5222
|
onSelectedPageChange,
|
|
@@ -5235,8 +5234,8 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
|
|
|
5235
5234
|
...colorScheme,
|
|
5236
5235
|
asChild: true
|
|
5237
5236
|
}, /* @__PURE__ */ react.createElement("div", {
|
|
5238
|
-
|
|
5239
|
-
|
|
5237
|
+
...rest,
|
|
5238
|
+
className: (0, clsx.default)("flex", "gap-1", className)
|
|
5240
5239
|
}, children || /* @__PURE__ */ react.createElement(PaginationItems, null))));
|
|
5241
5240
|
};
|
|
5242
5241
|
var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });
|
|
@@ -9338,8 +9337,7 @@ var SegmentedControlDescription = (props) => {
|
|
|
9338
9337
|
const { size } = react.useContext(SegmentedControlContext);
|
|
9339
9338
|
return /* @__PURE__ */ react.createElement(StyledText, {
|
|
9340
9339
|
...props,
|
|
9341
|
-
size
|
|
9342
|
-
noCapsize: true
|
|
9340
|
+
size
|
|
9343
9341
|
});
|
|
9344
9342
|
};
|
|
9345
9343
|
//#endregion
|
|
@@ -9356,8 +9354,7 @@ var SegmentedControlHeading = (props) => {
|
|
|
9356
9354
|
const { size } = react.useContext(SegmentedControlContext);
|
|
9357
9355
|
return /* @__PURE__ */ react.createElement(StyledHeading, {
|
|
9358
9356
|
...props,
|
|
9359
|
-
size
|
|
9360
|
-
noCapsize: true
|
|
9357
|
+
size
|
|
9361
9358
|
});
|
|
9362
9359
|
};
|
|
9363
9360
|
//#endregion
|
|
@@ -9412,18 +9409,21 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
|
|
|
9412
9409
|
size: {
|
|
9413
9410
|
sm: [
|
|
9414
9411
|
"flex-[unset]",
|
|
9412
|
+
"gap-3",
|
|
9415
9413
|
"px-6",
|
|
9416
|
-
"py-
|
|
9414
|
+
"py-4"
|
|
9417
9415
|
],
|
|
9418
9416
|
md: [
|
|
9419
9417
|
"flex-1",
|
|
9418
|
+
"gap-4",
|
|
9420
9419
|
"px-4",
|
|
9421
|
-
"py-
|
|
9420
|
+
"py-6"
|
|
9422
9421
|
],
|
|
9423
9422
|
lg: [
|
|
9424
9423
|
"flex-1",
|
|
9424
|
+
"gap-4",
|
|
9425
9425
|
"px-4",
|
|
9426
|
-
"py-
|
|
9426
|
+
"py-6"
|
|
9427
9427
|
]
|
|
9428
9428
|
}
|
|
9429
9429
|
},
|