thread-ui 0.13.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -7
- package/dist/components/content-display/carousel/carousel-context.d.ts +117 -9
- package/dist/components/content-display/carousel/carousel.d.ts +1 -1
- package/dist/components/content-display/carousel/carousel.js +19 -4
- package/dist/components/content-display/carousel/carousel.js.map +1 -1
- package/dist/components/content-display/carousel/carousel.types.d.ts +10 -9
- package/dist/components/content-display/carousel/components/carousel-controls.js +1 -1
- package/dist/components/content-display/carousel/components/carousel-controls.js.map +1 -1
- package/dist/components/content-display/carousel/components/carousel-header.d.ts +1 -1
- package/dist/components/content-display/carousel/components/carousel-header.js +6 -13
- package/dist/components/content-display/carousel/components/carousel-header.js.map +1 -1
- package/dist/components/content-display/carousel/components/carousel-item.js +1 -5
- package/dist/components/content-display/carousel/components/carousel-item.js.map +1 -1
- package/dist/components/content-display/gallery/components/gallery-content.js +3 -4
- package/dist/components/content-display/gallery/components/gallery-content.js.map +1 -1
- package/dist/components/content-display/gallery/gallery-context.d.ts +117 -9
- package/dist/components/content-display/gallery/gallery.d.ts +1 -1
- package/dist/components/content-display/gallery/gallery.js +2 -1
- package/dist/components/content-display/gallery/gallery.js.map +1 -1
- package/dist/components/content-display/gallery/gallery.types.d.ts +4 -5
- package/dist/components/content-display/lightbox/components/lightbox-title.js +5 -8
- package/dist/components/content-display/lightbox/components/lightbox-title.js.map +1 -1
- package/dist/components/content-display/lightbox/lightbox-context.d.ts +44 -2
- package/dist/components/content-display/lightbox/lightbox.types.d.ts +1 -1
- package/dist/components/layouts/column-layout/column-layout.d.ts +2 -2
- package/dist/components/layouts/column-layout/column-layout.js +6 -6
- package/dist/components/layouts/column-layout/column-layout.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.types.d.ts +4 -7
- package/dist/components/layouts/footer/footer.d.ts +3 -3
- package/dist/components/layouts/footer/footer.js +4 -4
- package/dist/components/layouts/footer/footer.js.map +1 -1
- package/dist/components/layouts/footer/footer.types.d.ts +1 -1
- package/dist/components/layouts/layout-component.types.d.ts +2 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.d.ts +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.js +3 -3
- package/dist/components/layouts/masonry-layout/masonry-layout.js.map +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.types.d.ts +4 -6
- package/dist/components/media-display/info-card/info-card.js +2 -2
- package/dist/components/media-display/info-card/info-card.js.map +1 -1
- package/dist/components/media-display/info-card/info-card.types.d.ts +1 -1
- package/dist/components/typography/heading/heading.js +1 -1
- package/dist/components/typography/heading/heading.js.map +1 -1
- package/dist/components/typography/page-header/page-header.d.ts +3 -3
- package/dist/components/typography/page-header/page-header.js +5 -5
- package/dist/components/typography/page-header/page-header.js.map +1 -1
- package/dist/components/typography/page-header/page-header.types.d.ts +3 -3
- package/dist/components/ui/button/button-recipe.js +11 -10
- package/dist/components/ui/button/button-recipe.js.map +1 -1
- package/dist/components/ui/card/card.d.ts +1 -1
- package/dist/components/ui/card/card.js +14 -9
- package/dist/components/ui/card/card.js.map +1 -1
- package/dist/components/ui/card/card.types.d.ts +2 -0
- package/dist/components/ui/loaders/skeleton-layout/skeleton-layout.types.d.ts +1 -1
- package/dist/components/ui/modal/modal-context.d.ts +2 -2
- package/dist/internal-components/content-header/content-header.d.ts +12 -0
- package/dist/internal-components/content-header/content-header.js +36 -0
- package/dist/internal-components/content-header/content-header.js.map +1 -0
- package/dist/internal-components/content-header/content-header.types.d.ts +32 -0
- package/dist/internal-components/content-header/content-header.types.js +2 -0
- package/dist/internal-components/content-header/content-header.types.js.map +1 -0
- package/dist/internal-components/content-header/index.d.ts +2 -0
- package/dist/internal-components/content-header/index.js +2 -0
- package/dist/internal-components/content-header/index.js.map +1 -0
- package/dist/internal-components/index.d.ts +2 -0
- package/dist/internal-components/index.js +2 -0
- package/dist/internal-components/index.js.map +1 -1
- package/dist/internal-components/modal-primitive/modal-primitive.d.ts +1 -1
- package/dist/internal-components/modal-primitive/modal-primitive.js +3 -2
- package/dist/internal-components/modal-primitive/modal-primitive.js.map +1 -1
- package/dist/internal-components/modal-primitive/modal-primitive.types.d.ts +2 -0
- package/dist/internal-components/surface/index.d.ts +2 -0
- package/dist/internal-components/surface/index.js +2 -0
- package/dist/internal-components/surface/index.js.map +1 -0
- package/dist/internal-components/surface/surface.d.ts +3 -0
- package/dist/internal-components/surface/surface.js +11 -0
- package/dist/internal-components/surface/surface.js.map +1 -0
- package/dist/internal-components/surface/surface.types.d.ts +15 -0
- package/dist/internal-components/surface/surface.types.js +2 -0
- package/dist/internal-components/surface/surface.types.js.map +1 -0
- package/dist/styled-system/recipes/button.js +6 -6
- package/dist/styled-system/tokens/index.js +8 -0
- package/dist/styled-system/tokens/tokens.d.ts +1 -1
- package/dist/styles/panda.css +1 -1
- package/dist/styles/theme.css +6 -0
- package/dist/theme/css-name-configurations/theme-css-names.d.ts +1 -0
- package/dist/theme/css-name-configurations/theme-css-names.js +3 -0
- package/dist/theme/css-name-configurations/theme-css-names.js.map +1 -1
- package/dist/theme/default-theme.js +2 -0
- package/dist/theme/default-theme.js.map +1 -1
- package/dist/theme/theme-surface-system.d.ts +2 -1
- package/dist/theme/theme-surface-system.js.map +1 -1
- package/dist/types/colors/utility-color-options.types.d.ts +1 -1
- package/dist/types/theme/theme.types.d.ts +1 -0
- package/dist/utils/theme-utilities/get-colored-text-color/get-colored-text-color.js +2 -0
- package/dist/utils/theme-utilities/get-colored-text-color/get-colored-text-color.js.map +1 -1
- package/dist/utils/theme-utilities/get-surface-styles/get-surface-styles.d.ts +2 -3
- package/dist/utils/theme-utilities/get-surface-styles/get-surface-styles.js.map +1 -1
- package/dist/utils/theme-utilities/get-text-color-styles/get-text-color-styles.js +1 -0
- package/dist/utils/theme-utilities/get-text-color-styles/get-text-color-styles.js.map +1 -1
- package/dist/utils/theme-utilities/get-utility-size-value/get-utility-size-value.d.ts +1 -1
- package/package.json +1 -1
- package/dist/styled-system/css/conditions..js +0 -36
- package/dist/styled-system/css/conditions.mjs +0 -36
- package/dist/styled-system/css/css..js +0 -45
- package/dist/styled-system/css/css.mjs +0 -45
- package/dist/styled-system/css/cva..js +0 -87
- package/dist/styled-system/css/cva.mjs +0 -87
- package/dist/styled-system/css/cx..js +0 -15
- package/dist/styled-system/css/cx.mjs +0 -15
- package/dist/styled-system/css/index..js +0 -4
- package/dist/styled-system/css/index.mjs +0 -4
- package/dist/styled-system/css/sva..js +0 -46
- package/dist/styled-system/css/sva.mjs +0 -46
- package/dist/styled-system/helpers..js +0 -316
- package/dist/styled-system/helpers.mjs +0 -316
- package/dist/styled-system/patterns/aspect-ratio..js +0 -38
- package/dist/styled-system/patterns/aspect-ratio.mjs +0 -38
- package/dist/styled-system/patterns/bleed..js +0 -24
- package/dist/styled-system/patterns/bleed.mjs +0 -24
- package/dist/styled-system/patterns/box..js +0 -15
- package/dist/styled-system/patterns/box.mjs +0 -15
- package/dist/styled-system/patterns/center..js +0 -21
- package/dist/styled-system/patterns/center.mjs +0 -21
- package/dist/styled-system/patterns/circle..js +0 -25
- package/dist/styled-system/patterns/circle.mjs +0 -25
- package/dist/styled-system/patterns/container..js +0 -22
- package/dist/styled-system/patterns/container.mjs +0 -22
- package/dist/styled-system/patterns/cq..js +0 -21
- package/dist/styled-system/patterns/cq.mjs +0 -21
- package/dist/styled-system/patterns/divider..js +0 -25
- package/dist/styled-system/patterns/divider.mjs +0 -25
- package/dist/styled-system/patterns/flex..js +0 -26
- package/dist/styled-system/patterns/flex.mjs +0 -26
- package/dist/styled-system/patterns/float..js +0 -52
- package/dist/styled-system/patterns/float.mjs +0 -52
- package/dist/styled-system/patterns/grid-item..js +0 -25
- package/dist/styled-system/patterns/grid-item.mjs +0 -25
- package/dist/styled-system/patterns/grid..js +0 -27
- package/dist/styled-system/patterns/grid.mjs +0 -27
- package/dist/styled-system/patterns/hstack..js +0 -24
- package/dist/styled-system/patterns/hstack.mjs +0 -24
- package/dist/styled-system/patterns/index..js +0 -20
- package/dist/styled-system/patterns/index.mjs +0 -20
- package/dist/styled-system/patterns/link-overlay..js +0 -24
- package/dist/styled-system/patterns/link-overlay.mjs +0 -24
- package/dist/styled-system/patterns/spacer..js +0 -21
- package/dist/styled-system/patterns/spacer.mjs +0 -21
- package/dist/styled-system/patterns/square..js +0 -24
- package/dist/styled-system/patterns/square.mjs +0 -24
- package/dist/styled-system/patterns/stack..js +0 -24
- package/dist/styled-system/patterns/stack.mjs +0 -24
- package/dist/styled-system/patterns/visually-hidden..js +0 -18
- package/dist/styled-system/patterns/visually-hidden.mjs +0 -18
- package/dist/styled-system/patterns/vstack..js +0 -24
- package/dist/styled-system/patterns/vstack.mjs +0 -24
- package/dist/styled-system/patterns/wrap..js +0 -25
- package/dist/styled-system/patterns/wrap.mjs +0 -25
- package/dist/styled-system/recipes/button..js +0 -445
- package/dist/styled-system/recipes/button.mjs +0 -445
- package/dist/styled-system/recipes/create-recipe..js +0 -82
- package/dist/styled-system/recipes/create-recipe.mjs +0 -82
- package/dist/styled-system/recipes/index..js +0 -1
- package/dist/styled-system/recipes/index.mjs +0 -1
- package/dist/styled-system/styles.css +0 -1
- package/dist/styled-system/tokens/index..js +0 -2104
- package/dist/styled-system/tokens/index.mjs +0 -2164
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DynamicIconProps } from '../../../internal-components';
|
|
2
2
|
import { ImageProps, SurfaceLayerOptions } from '../../../types';
|
|
3
3
|
export type InfoCardProps = {
|
|
4
|
-
/** Card title displayed in the
|
|
4
|
+
/** Card title displayed in the information bar */
|
|
5
5
|
title: string;
|
|
6
6
|
/** URL the card links to */
|
|
7
7
|
url: string;
|
|
@@ -40,7 +40,7 @@ export const H3 = (props) => renderHeading('h3', 'h3', props);
|
|
|
40
40
|
* @example
|
|
41
41
|
* <Subtitle>Last updated March 2025</Subtitle>
|
|
42
42
|
*/
|
|
43
|
-
export const Subtitle = ({ children, align = 'left', color = 'secondary', truncate = false, fontFamily, indent, }) => {
|
|
43
|
+
export const Subtitle = ({ children, align = 'left', color = 'text-secondary', truncate = false, fontFamily, indent, }) => {
|
|
44
44
|
const resolved = getResolvedTypographyValues({
|
|
45
45
|
role: 'body',
|
|
46
46
|
fontSize: 'body.sm',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../../src/components/typography/heading/heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5F;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,
|
|
1
|
+
{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../../src/components/typography/heading/heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5F;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEtF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,gBAAgB,EACxB,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,MAAM,GACS,EAAE,EAAE;IACnB,MAAM,QAAQ,GAAG,2BAA2B,CAAC;QAC5C,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,SAAS;QACnB,YAAY,EAAE,MAAM;QACpB,UAAU;KACV,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,EAAE,CACnB,mBAAmB,CAAC,QAAQ,CAAC,EAC7B,qBAAqB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,CAAC,EACzE,kBAAkB,CAAC,KAAK,CAAC,CACzB,CAAC;IAEF,OAAO,CACN,eAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YACzE,QAAQ,GACH,CACP,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { PageHeaderProps } from './page-header.types';
|
|
2
2
|
/**
|
|
3
|
-
* Page-level header with a title, optional
|
|
3
|
+
* Page-level header with a title, optional description, and a divider.
|
|
4
4
|
*
|
|
5
5
|
* @example
|
|
6
|
-
* <PageHeader title="Our Team"
|
|
6
|
+
* <PageHeader title="Our Team" description="Meet the people behind the product." center />
|
|
7
7
|
*/
|
|
8
|
-
export declare const PageHeader: ({ title,
|
|
8
|
+
export declare const PageHeader: ({ title, description, center }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { css } from '../../../styled-system/css';
|
|
3
3
|
import { Container, Divider, Subtitle, Title } from '../../../components';
|
|
4
4
|
const styles = {
|
|
5
|
-
|
|
5
|
+
description: css({
|
|
6
6
|
width: { md: '50%' },
|
|
7
7
|
paddingX: { md: '1' },
|
|
8
8
|
marginX: 'auto',
|
|
@@ -14,12 +14,12 @@ const styles = {
|
|
|
14
14
|
}),
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
|
-
* Page-level header with a title, optional
|
|
17
|
+
* Page-level header with a title, optional description, and a divider.
|
|
18
18
|
*
|
|
19
19
|
* @example
|
|
20
|
-
* <PageHeader title="Our Team"
|
|
20
|
+
* <PageHeader title="Our Team" description="Meet the people behind the product." center />
|
|
21
21
|
*/
|
|
22
|
-
export const PageHeader = ({ title,
|
|
23
|
-
return (_jsxs(Container, { children: [_jsx(Title, { align: "center", inline: true, children: title }),
|
|
22
|
+
export const PageHeader = ({ title, description, center }) => {
|
|
23
|
+
return (_jsxs(Container, { children: [_jsx(Title, { align: "center", inline: true, children: title }), description && (_jsx(_Fragment, { children: _jsx("div", { className: styles.description, children: _jsx(Subtitle, { indent: center ? false : true, fontFamily: "heading", align: center ? 'center' : 'left', children: description }) }) })), _jsx(Divider, { marginY: "16px", width: "33%" })] }));
|
|
24
24
|
};
|
|
25
25
|
//# sourceMappingURL=page-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../src/components/typography/page-header/page-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAW,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAEnE,MAAM,MAAM,GAAG;IACd,
|
|
1
|
+
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../src/components/typography/page-header/page-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAW,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAEnE,MAAM,MAAM,GAAG;IACd,WAAW,EAAE,GAAG,CAAC;QAChB,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE;QACpB,QAAQ,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;QACrB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,GAAG;KACZ,CAAC;IACF,MAAM,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,cAAc;QACvB,WAAW,EAAE,GAAG;KAChB,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAmB,EAAE,EAAE;IAC7E,OAAO,CACN,MAAC,SAAS,eACT,KAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAC1B,KAAK,GACC,EACP,WAAW,IAAI,CACf,4BACC,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YACjC,KAAC,QAAQ,IACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAC7B,UAAU,EAAC,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YAEhC,WAAW,GACF,GACN,GACJ,CACH,EACD,KAAC,OAAO,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,IAC3B,CACZ,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export type PageHeaderProps = {
|
|
2
2
|
/** Page heading */
|
|
3
3
|
title: string;
|
|
4
|
-
/** Optional
|
|
5
|
-
|
|
6
|
-
/** Centers the
|
|
4
|
+
/** Optional description rendered below the title */
|
|
5
|
+
description?: string;
|
|
6
|
+
/** Centers the description text @default `false` */
|
|
7
7
|
center?: boolean;
|
|
8
8
|
};
|
|
@@ -110,12 +110,12 @@ export const buttonRecipe = defineRecipe({
|
|
|
110
110
|
},
|
|
111
111
|
neutral: {
|
|
112
112
|
backgroundColor: 'transparent',
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
color: 'text.tertiary',
|
|
114
|
+
borderColor: 'var(--thread-text-tertiary)',
|
|
115
115
|
_hover: {
|
|
116
|
-
backgroundColor: '
|
|
116
|
+
backgroundColor: 'transparent',
|
|
117
117
|
color: 'text.secondary',
|
|
118
|
-
borderColor: 'text
|
|
118
|
+
borderColor: 'var(--thread-text-secondary)',
|
|
119
119
|
},
|
|
120
120
|
},
|
|
121
121
|
},
|
|
@@ -147,7 +147,6 @@ export const buttonRecipe = defineRecipe({
|
|
|
147
147
|
disabled: {
|
|
148
148
|
true: {
|
|
149
149
|
opacity: 0.6,
|
|
150
|
-
cursor: 'not-allowed',
|
|
151
150
|
},
|
|
152
151
|
false: {},
|
|
153
152
|
},
|
|
@@ -272,8 +271,8 @@ export const buttonRecipe = defineRecipe({
|
|
|
272
271
|
css: {
|
|
273
272
|
_hover: {
|
|
274
273
|
backgroundColor: 'transparent',
|
|
275
|
-
color: 'text.
|
|
276
|
-
borderColor: 'text
|
|
274
|
+
color: 'text.tertiary',
|
|
275
|
+
borderColor: 'var(--thread-text-tertiary)',
|
|
277
276
|
},
|
|
278
277
|
},
|
|
279
278
|
},
|
|
@@ -344,8 +343,8 @@ export const buttonRecipe = defineRecipe({
|
|
|
344
343
|
textVariant: true,
|
|
345
344
|
color: 'neutral',
|
|
346
345
|
css: {
|
|
347
|
-
color: 'text.
|
|
348
|
-
_hover: { color: 'text.
|
|
346
|
+
color: 'text.tertiary',
|
|
347
|
+
_hover: { color: 'text.secondary', backgroundColor: 'transparent' },
|
|
349
348
|
},
|
|
350
349
|
},
|
|
351
350
|
{
|
|
@@ -472,7 +471,9 @@ export const buttonRecipe = defineRecipe({
|
|
|
472
471
|
disabled: false,
|
|
473
472
|
textVariant: false,
|
|
474
473
|
color: 'neutral',
|
|
475
|
-
css: {
|
|
474
|
+
css: {
|
|
475
|
+
_hover: { backgroundColor: 'hover', borderColor: 'var(--thread-text-secondary)' },
|
|
476
|
+
},
|
|
476
477
|
},
|
|
477
478
|
],
|
|
478
479
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-recipe.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button-recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC;IACxC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,IAAI;QACjB,UAAU,EAAE,4BAA4B;QACxC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,aAAa;QACrB,UAAU,EAAE,QAAQ;KACpB;IACD,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,OAAO,EAAE;gBACR,eAAe,EAAE,cAAc;gBAC/B,WAAW,EAAE,cAAc;gBAC3B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,cAAc;oBACrB,WAAW,EAAE,cAAc;iBAC3B;aACD;YACD,SAAS,EAAE;gBACV,eAAe,EAAE,gBAAgB;gBACjC,WAAW,EAAE,gBAAgB;gBAC7B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,gBAAgB;oBACvB,WAAW,EAAE,gBAAgB;iBAC7B;aACD;YACD,QAAQ,EAAE;gBACT,eAAe,EAAE,eAAe;gBAChC,WAAW,EAAE,eAAe;gBAC5B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,eAAe;iBAC5B;aACD;YACD,KAAK,EAAE;gBACN,eAAe,EAAE,OAAO;gBACxB,WAAW,EAAE,OAAO;gBACpB,MAAM,EAAE;oBACP,eAAe,EAAE,OAAO;oBACxB,KAAK,EAAE,OAAO;oBACd,WAAW,EAAE,OAAO;iBACpB;aACD;YACD,IAAI,EAAE;gBACL,eAAe,EAAE,WAAW;gBAC5B,WAAW,EAAE,WAAW;gBACxB,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,WAAW;iBACxB;aACD;YACD,OAAO,EAAE;gBACR,eAAe,EAAE,cAAc;gBAC/B,WAAW,EAAE,cAAc;gBAC3B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,cAAc;oBACrB,WAAW,EAAE,cAAc;iBAC3B;aACD;YACD,OAAO,EAAE;gBACR,eAAe,EAAE,cAAc;gBAC/B,WAAW,EAAE,cAAc;gBAC3B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,cAAc;oBACrB,WAAW,EAAE,cAAc;iBAC3B;aACD;YACD,KAAK,EAAE;gBACN,eAAe,EAAE,YAAY;gBAC7B,WAAW,EAAE,YAAY;gBACzB,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,YAAY;oBACnB,WAAW,EAAE,YAAY;iBACzB;aACD;YACD,IAAI,EAAE;gBACL,eAAe,EAAE,WAAW;gBAC5B,WAAW,EAAE,WAAW;gBACxB,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,WAAW;iBACxB;aACD;YACD,IAAI,EAAE;gBACL,eAAe,EAAE,eAAe;gBAChC,KAAK,EAAE,eAAe;gBACtB,WAAW,EAAE,eAAe;gBAC5B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,eAAe;iBAC5B;aACD;YACD,OAAO,EAAE;gBACR,eAAe,EAAE,aAAa;gBAC9B,
|
|
1
|
+
{"version":3,"file":"button-recipe.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button-recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC;IACxC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,IAAI;QACjB,UAAU,EAAE,4BAA4B;QACxC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,aAAa;QACrB,UAAU,EAAE,QAAQ;KACpB;IACD,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,OAAO,EAAE;gBACR,eAAe,EAAE,cAAc;gBAC/B,WAAW,EAAE,cAAc;gBAC3B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,cAAc;oBACrB,WAAW,EAAE,cAAc;iBAC3B;aACD;YACD,SAAS,EAAE;gBACV,eAAe,EAAE,gBAAgB;gBACjC,WAAW,EAAE,gBAAgB;gBAC7B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,gBAAgB;oBACvB,WAAW,EAAE,gBAAgB;iBAC7B;aACD;YACD,QAAQ,EAAE;gBACT,eAAe,EAAE,eAAe;gBAChC,WAAW,EAAE,eAAe;gBAC5B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,eAAe;iBAC5B;aACD;YACD,KAAK,EAAE;gBACN,eAAe,EAAE,OAAO;gBACxB,WAAW,EAAE,OAAO;gBACpB,MAAM,EAAE;oBACP,eAAe,EAAE,OAAO;oBACxB,KAAK,EAAE,OAAO;oBACd,WAAW,EAAE,OAAO;iBACpB;aACD;YACD,IAAI,EAAE;gBACL,eAAe,EAAE,WAAW;gBAC5B,WAAW,EAAE,WAAW;gBACxB,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,WAAW;iBACxB;aACD;YACD,OAAO,EAAE;gBACR,eAAe,EAAE,cAAc;gBAC/B,WAAW,EAAE,cAAc;gBAC3B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,cAAc;oBACrB,WAAW,EAAE,cAAc;iBAC3B;aACD;YACD,OAAO,EAAE;gBACR,eAAe,EAAE,cAAc;gBAC/B,WAAW,EAAE,cAAc;gBAC3B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,cAAc;oBACrB,WAAW,EAAE,cAAc;iBAC3B;aACD;YACD,KAAK,EAAE;gBACN,eAAe,EAAE,YAAY;gBAC7B,WAAW,EAAE,YAAY;gBACzB,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,YAAY;oBACnB,WAAW,EAAE,YAAY;iBACzB;aACD;YACD,IAAI,EAAE;gBACL,eAAe,EAAE,WAAW;gBAC5B,WAAW,EAAE,WAAW;gBACxB,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,WAAW;iBACxB;aACD;YACD,IAAI,EAAE;gBACL,eAAe,EAAE,eAAe;gBAChC,KAAK,EAAE,eAAe;gBACtB,WAAW,EAAE,eAAe;gBAC5B,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,eAAe;iBAC5B;aACD;YACD,OAAO,EAAE;gBACR,eAAe,EAAE,aAAa;gBAC9B,KAAK,EAAE,eAAe;gBACtB,WAAW,EAAE,6BAA6B;gBAC1C,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,gBAAgB;oBACvB,WAAW,EAAE,8BAA8B;iBAC3C;aACD;SACD;QACD,IAAI,EAAE;YACL,EAAE,EAAE;gBACH,GAAG,EAAE,GAAG,EAAE,MAAM;gBAChB,QAAQ,EAAE,QAAQ,EAAE,MAAM;gBAC1B,OAAO,EAAE,GAAG,EAAE,MAAM;aACpB;YACD,EAAE,EAAE;gBACH,GAAG,EAAE,GAAG,EAAE,MAAM;gBAChB,QAAQ,EAAE,MAAM,EAAE,OAAO;gBACzB,OAAO,EAAE,GAAG,EAAE,MAAM;aACpB;YACD,EAAE,EAAE;gBACH,GAAG,EAAE,GAAG,EAAE,OAAO;gBACjB,QAAQ,EAAE,QAAQ,EAAE,OAAO;gBAC3B,OAAO,EAAE,GAAG,EAAE,OAAO;aACrB;SACD;QACD,SAAS,EAAE;YACV,IAAI,EAAE;gBACL,KAAK,EAAE,MAAM;aACb;YACD,KAAK,EAAE;gBACN,KAAK,EAAE,aAAa;aACpB;SACD;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,OAAO,EAAE,GAAG;aACZ;YACD,KAAK,EAAE,EAAE;SACT;QACD,WAAW,EAAE;YACZ,IAAI,EAAE;gBACL,eAAe,EAAE,aAAa;gBAC9B,WAAW,EAAE,aAAa;gBAC1B,MAAM,EAAE;oBACP,cAAc,EAAE,WAAW;iBAC3B;aACD;SACD;QACD,gBAAgB,EAAE;YACjB,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,EAAE;SACT;KACD;IACD,gBAAgB,EAAE;QACjB,uDAAuD;QACvD;YACC,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,cAAc;oBAC/B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,cAAc;iBAC3B;aACD;SACD;QACD;YACC,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,gBAAgB;oBACjC,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,gBAAgB;iBAC7B;aACD;SACD;QACD;YACC,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,eAAe;oBAChC,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,eAAe;iBAC5B;aACD;SACD;QACD;YACC,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,WAAW;oBAC5B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,WAAW;iBACxB;aACD;SACD;QACD;YACC,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,cAAc;oBAC/B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,cAAc;iBAC3B;aACD;SACD;QACD;YACC,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,cAAc;oBAC/B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,cAAc;iBAC3B;aACD;SACD;QACD;YACC,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,YAAY;oBAC7B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,YAAY;iBACzB;aACD;SACD;QACD;YACC,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,WAAW;oBAC5B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,WAAW;iBACxB;aACD;SACD;QACD;YACC,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,eAAe;oBAChC,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,eAAe;iBAC5B;aACD;SACD;QACD;YACC,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,6BAA6B;iBAC1C;aACD;SACD;QACD,uCAAuC;QACvC;YACC,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,eAAe,EAAE,OAAO;oBACxB,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,OAAO;iBACpB;aACD;SACD;QACD;YACC,WAAW,EAAE,IAAI;YACjB,QAAQ,EAAE,IAAI;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,cAAc,EAAE,MAAM;oBACtB,eAAe,EAAE,aAAa;iBAC9B;aACD;SACD;QACD,6EAA6E;QAC7E;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE;SACjE;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,WAAW;YAClB,GAAG,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE;SACrE;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,UAAU;YACjB,GAAG,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE;SACnE;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;SAC3D;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE;SACjE;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE;SACjE;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE;SAC7D;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;SAC3D;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE;gBACJ,KAAK,EAAE,eAAe;gBACtB,MAAM,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE;aACnE;SACD;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;SACnD;QACD;YACC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE;SACnE;QACD,6BAA6B;QAC7B;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,KAAK,EAAE,OAAO;oBACd,eAAe,EAAE,eAAe;oBAChC,WAAW,EAAE,cAAc;iBAC3B;aACD;SACD;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,WAAW;YAClB,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,KAAK,EAAE,OAAO;oBACd,eAAe,EAAE,iBAAiB;oBAClC,WAAW,EAAE,gBAAgB;iBAC7B;aACD;SACD;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,UAAU;YACjB,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,KAAK,EAAE,OAAO;oBACd,eAAe,EAAE,gBAAgB;oBACjC,WAAW,EAAE,eAAe;iBAC5B;aACD;SACD;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE;SAC5E;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,KAAK,EAAE,OAAO;oBACd,eAAe,EAAE,eAAe;oBAChC,WAAW,EAAE,cAAc;iBAC3B;aACD;SACD;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,KAAK,EAAE,OAAO;oBACd,eAAe,EAAE,eAAe;oBAChC,WAAW,EAAE,cAAc;iBAC3B;aACD;SACD;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,OAAO;YACd,GAAG,EAAE;gBACJ,MAAM,EAAE;oBACP,KAAK,EAAE,OAAO;oBACd,eAAe,EAAE,aAAa;oBAC9B,WAAW,EAAE,YAAY;iBACzB;aACD;SACD;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE;gBACJ,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE;aACnF;SACD;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE;SACxE;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE;SAC7E;QACD;YACC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE;gBACJ,MAAM,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,8BAA8B,EAAE;aACjF;SACD;KACD;IACD,eAAe,EAAE;QAChB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;KACf;CACD,CAAC,CAAC"}
|
|
@@ -13,4 +13,4 @@ import { CardProps } from './card.types';
|
|
|
13
13
|
* <div>Custom card</div>
|
|
14
14
|
* </Card>
|
|
15
15
|
*/
|
|
16
|
-
export declare const Card: ({ layer, bg, shadow, structure, children, size, fullWidth, title, }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const Card: ({ layer, bg, shadow, structure, children, size, fullWidth, title, flush, }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cva
|
|
2
|
+
import { cva } from '../../../styled-system/css';
|
|
3
3
|
import { H3 } from '../../../components/typography';
|
|
4
4
|
import { Divider } from '../divider';
|
|
5
|
-
import {
|
|
5
|
+
import { Surface } from '../../../internal-components/surface';
|
|
6
6
|
const styles = {
|
|
7
7
|
cardContainer: cva({
|
|
8
8
|
base: {
|
|
9
9
|
borderStyle: 'solid',
|
|
10
|
-
padding: {
|
|
11
|
-
base: '5',
|
|
12
|
-
},
|
|
13
10
|
transition: 'background-color 0.15s ease, box-shadow 0.15s ease',
|
|
14
11
|
},
|
|
15
12
|
variants: {
|
|
@@ -39,6 +36,15 @@ const styles = {
|
|
|
39
36
|
},
|
|
40
37
|
},
|
|
41
38
|
},
|
|
39
|
+
flush: {
|
|
40
|
+
true: {
|
|
41
|
+
padding: '0',
|
|
42
|
+
overflow: 'hidden',
|
|
43
|
+
},
|
|
44
|
+
false: {
|
|
45
|
+
padding: '5',
|
|
46
|
+
},
|
|
47
|
+
},
|
|
42
48
|
},
|
|
43
49
|
compoundVariants: [
|
|
44
50
|
{
|
|
@@ -52,6 +58,7 @@ const styles = {
|
|
|
52
58
|
defaultVariants: {
|
|
53
59
|
size: 'md',
|
|
54
60
|
fullWidth: false,
|
|
61
|
+
flush: true,
|
|
55
62
|
},
|
|
56
63
|
}),
|
|
57
64
|
title: cva({
|
|
@@ -87,9 +94,7 @@ const styles = {
|
|
|
87
94
|
* <div>Custom card</div>
|
|
88
95
|
* </Card>
|
|
89
96
|
*/
|
|
90
|
-
export const Card = ({ layer = 'surface', bg, shadow, structure, children, size = 'md', fullWidth = false, title, }) => {
|
|
91
|
-
|
|
92
|
-
const layerValues = getResolvedLayerValues({ layer, bg, shadow, structure });
|
|
93
|
-
return (_jsxs("div", { className: cx(styles.cardContainer({ size, fullWidth }), getSurfaceStyles(layerValues)), children: [title && (_jsxs("div", { className: styles.title({ size }), children: [_jsx(H3, { align: title.align, inline: true, children: title.text }), title?.divider && _jsx(Divider, {})] })), _jsx("div", { children: children })] }));
|
|
97
|
+
export const Card = ({ layer = 'surface', bg, shadow, structure, children, size = 'md', fullWidth = false, title, flush = false, }) => {
|
|
98
|
+
return (_jsxs(Surface, { surfaceConfig: { layer, bg, shadow, structure }, className: styles.cardContainer({ size, fullWidth, flush }), children: [title && (_jsxs("div", { className: styles.title({ size }), children: [_jsx(H3, { align: title.align, inline: true, children: title.text }), title?.divider && _jsx(Divider, {})] })), _jsx("div", { children: children })] }));
|
|
94
99
|
};
|
|
95
100
|
//# sourceMappingURL=card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/ui/card/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/ui/card/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,MAAM,GAAG;IACd,aAAa,EAAE,GAAG,CAAC;QAClB,IAAI,EAAE;YACL,WAAW,EAAE,OAAO;YACpB,UAAU,EAAE,oDAAoD;SAChE;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,YAAY,EAAE,IAAI;oBAClB,QAAQ,EAAE,KAAK;iBACf;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,IAAI;iBAClB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,IAAI;iBAClB;aACD;YACD,SAAS,EAAE;gBACV,IAAI,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,MAAM;iBAChB;gBACD,KAAK,EAAE;oBACN,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,OAAO;oBACjB,KAAK,EAAE;wBACN,IAAI,EAAE,MAAM;wBACZ,EAAE,EAAE,KAAK;qBACT;iBACD;aACD;YACD,KAAK,EAAE;gBACN,IAAI,EAAE;oBACL,OAAO,EAAE,GAAG;oBACZ,QAAQ,EAAE,QAAQ;iBAClB;gBACD,KAAK,EAAE;oBACN,OAAO,EAAE,GAAG;iBACZ;aACD;SACD;QACD,gBAAgB,EAAE;YACjB;gBACC,IAAI,EAAE,IAAI;gBACV,SAAS,EAAE,KAAK;gBAChB,GAAG,EAAE;oBACJ,QAAQ,EAAE,KAAK;iBACf;aACD;SACD;QACD,eAAe,EAAE;YAChB,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,KAAK;YAChB,KAAK,EAAE,IAAI;SACX;KACD,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;aACD;SACD;QACD,eAAe,EAAE;YAChB,IAAI,EAAE,IAAI;SACV;KACD,CAAC;CACF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACpB,KAAK,GAAG,SAAS,EACjB,EAAE,EACF,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,KAAK,GAAG,KAAK,GACF,EAAE,EAAE;IACf,OAAO,CACN,MAAC,OAAO,IACP,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC/C,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,aAE1D,KAAK,IAAI,CACT,eAAK,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,aACrC,KAAC,EAAE,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,kBAC5B,KAAK,CAAC,IAAI,GACP,EACJ,KAAK,EAAE,OAAO,IAAI,KAAC,OAAO,KAAG,IACzB,CACN,EACD,wBAAM,QAAQ,GAAO,IACZ,CACV,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -14,6 +14,8 @@ export type CardProps = {
|
|
|
14
14
|
size?: UtilitySizeOptions;
|
|
15
15
|
/** Allow card to fill available width @default false */
|
|
16
16
|
fullWidth?: boolean;
|
|
17
|
+
/** Remove inner padding so content sits flush against the card edges @default false */
|
|
18
|
+
flush?: boolean;
|
|
17
19
|
/** Optional title rendered above the card content */
|
|
18
20
|
title?: {
|
|
19
21
|
/** Title text */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ColumnLayoutProps } from '../../../../components/layouts';
|
|
2
2
|
import { SkeletonLoaderProps } from '../skeleton/skeleton.types';
|
|
3
|
-
export type SkeletonLayoutLoaderProps = Omit<ColumnLayoutProps, 'title' | '
|
|
3
|
+
export type SkeletonLayoutLoaderProps = Omit<ColumnLayoutProps, 'title' | 'subtitle' | 'description' | 'items'> & {
|
|
4
4
|
/** Configuration passed to each individual Skeleton item */
|
|
5
5
|
itemConfig: SkeletonLoaderProps;
|
|
6
6
|
/** Number of rows to render. Total items = `lgcol * rows` @default 3 */
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export declare const ModalProvider: import("react").Provider<{
|
|
2
2
|
title?: import("react").ReactNode;
|
|
3
3
|
children: import("react").ReactNode;
|
|
4
|
-
footer?: import("react").ReactNode;
|
|
5
4
|
size?: never | undefined;
|
|
5
|
+
footer?: import("react").ReactNode;
|
|
6
6
|
onClose: () => void;
|
|
7
7
|
} | undefined>, useModalContext: () => {
|
|
8
8
|
title?: import("react").ReactNode;
|
|
9
9
|
children: import("react").ReactNode;
|
|
10
|
-
footer?: import("react").ReactNode;
|
|
11
10
|
size?: never | undefined;
|
|
11
|
+
footer?: import("react").ReactNode;
|
|
12
12
|
onClose: () => void;
|
|
13
13
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ContentHeaderProps } from './content-header.types';
|
|
2
|
+
/**
|
|
3
|
+
* Internal header component used by content and layout components to
|
|
4
|
+
* render a consistent title region with an optional trailing slot.
|
|
5
|
+
*
|
|
6
|
+
* When `title` is a string it renders as an `H2` with the `subtitle`
|
|
7
|
+
* prop applied. When `title` is a heading element the consumer owns
|
|
8
|
+
* all heading rendering and the `subtitle` prop is ignored.
|
|
9
|
+
*
|
|
10
|
+
* Returns `null` when neither `title` nor `secondaryContent` is provided.
|
|
11
|
+
*/
|
|
12
|
+
export declare const ContentHeader: ({ title, subtitle, secondaryContent, className, description, }: ContentHeaderProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { css } from '../../styled-system/css';
|
|
3
|
+
import { H2, Text } from '../../components';
|
|
4
|
+
const styles = {
|
|
5
|
+
header: css({
|
|
6
|
+
display: 'flex',
|
|
7
|
+
flexDirection: 'row',
|
|
8
|
+
justifyContent: 'space-between',
|
|
9
|
+
alignItems: 'center',
|
|
10
|
+
}),
|
|
11
|
+
secondaryContent: css({
|
|
12
|
+
marginLeft: 'auto',
|
|
13
|
+
}),
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Internal header component used by content and layout components to
|
|
17
|
+
* render a consistent title region with an optional trailing slot.
|
|
18
|
+
*
|
|
19
|
+
* When `title` is a string it renders as an `H2` with the `subtitle`
|
|
20
|
+
* prop applied. When `title` is a heading element the consumer owns
|
|
21
|
+
* all heading rendering and the `subtitle` prop is ignored.
|
|
22
|
+
*
|
|
23
|
+
* Returns `null` when neither `title` nor `secondaryContent` is provided.
|
|
24
|
+
*/
|
|
25
|
+
export const ContentHeader = ({ title, subtitle, secondaryContent, className, description, }) => {
|
|
26
|
+
const titleDisplay = typeof title === 'string' ? (_jsx(H2, { subtitle: subtitle, inline: true, children: title })) : (title);
|
|
27
|
+
if (typeof title !== 'string' && subtitle) {
|
|
28
|
+
console.warn('Thread UI - ContentHeader: `subtitle` prop is ignored when `title` is a ReactElement. ' +
|
|
29
|
+
'Use the `subtitle` prop on your heading component directly.');
|
|
30
|
+
}
|
|
31
|
+
if (!title && !secondaryContent && !description) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
return (_jsxs("div", { className: className, children: [(title || secondaryContent) && (_jsxs("div", { className: styles.header, children: [title && titleDisplay, secondaryContent && (_jsx("div", { className: styles.secondaryContent, children: secondaryContent }))] })), description && _jsx(Text, { children: description })] }));
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=content-header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"content-header.js","sourceRoot":"","sources":["../../../src/internal-components/content-header/content-header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAM,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,GAAG;IACd,MAAM,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,QAAQ;KACpB,CAAC;IACF,gBAAgB,EAAE,GAAG,CAAC;QACrB,UAAU,EAAE,MAAM;KAClB,CAAC;CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,WAAW,GACS,EAAE,EAAE;IACxB,MAAM,YAAY,GACjB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,EAAE,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAC5B,KAAK,GACF,CACL,CAAC,CAAC,CAAC,CACH,KAAK,CACL,CAAC;IAEH,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,EAAE,CAAC;QAC3C,OAAO,CAAC,IAAI,CACX,wFAAwF;YACvF,6DAA6D,CAC9D,CAAC;IACH,CAAC;IAED,IAAI,CAAC,KAAK,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,eAAK,SAAS,EAAE,SAAS,aACvB,CAAC,KAAK,IAAI,gBAAgB,CAAC,IAAI,CAC/B,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC3B,KAAK,IAAI,YAAY,EACrB,gBAAgB,IAAI,CACpB,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,YAAG,gBAAgB,GAAO,CACjE,IACI,CACN,EACA,WAAW,IAAI,KAAC,IAAI,cAAE,WAAW,GAAQ,IACrC,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { Title, H1, H2, H3 } from '../../components/typography';
|
|
3
|
+
import { TypographyHeadingProps } from '../../components/typography/heading/heading.types';
|
|
4
|
+
import { Prettify } from '../../types';
|
|
5
|
+
type HeadingElement = ReactElement<TypographyHeadingProps, typeof Title | typeof H1 | typeof H2 | typeof H3>;
|
|
6
|
+
/** Accepted title values: a plain string or a Thread UI heading element */
|
|
7
|
+
type TitleType = string | HeadingElement;
|
|
8
|
+
/**
|
|
9
|
+
* Title/subtitle pair used by content and layout components.
|
|
10
|
+
*
|
|
11
|
+
* When `title` is a string, the component renders it as an `H2` and
|
|
12
|
+
* applies the `subtitle` prop automatically. When `title` is a heading
|
|
13
|
+
* element, the consumer owns subtitle rendering and the `subtitle` prop
|
|
14
|
+
* is ignored.
|
|
15
|
+
*/
|
|
16
|
+
export interface ContentTitle {
|
|
17
|
+
/** Optional title displayed above the content */
|
|
18
|
+
title?: TitleType;
|
|
19
|
+
/** Optional subtitle, requires `title` to be set as a string */
|
|
20
|
+
subtitle?: string;
|
|
21
|
+
}
|
|
22
|
+
export type ContentHeading = Prettify<ContentTitle & {
|
|
23
|
+
/** Optional heading content */
|
|
24
|
+
description?: string;
|
|
25
|
+
}>;
|
|
26
|
+
export type ContentHeaderProps = Prettify<ContentHeading & {
|
|
27
|
+
/** Optional content rendered on the trailing end of the header */
|
|
28
|
+
secondaryContent?: ReactNode;
|
|
29
|
+
/** Optional Override styles, applied on outer container */
|
|
30
|
+
className?: string;
|
|
31
|
+
}>;
|
|
32
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"content-header.types.js","sourceRoot":"","sources":["../../../src/internal-components/content-header/content-header.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal-components/content-header/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export * from './conditional-wrapper';
|
|
2
|
+
export * from './content-header';
|
|
2
3
|
export * from './dynamic-icon';
|
|
3
4
|
export * from './image';
|
|
4
5
|
export * from './link-wrapper';
|
|
5
6
|
export * from './modal-primitive';
|
|
6
7
|
export * from './optional-icon-button';
|
|
8
|
+
export * from './surface';
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
// Export Internal Components
|
|
2
2
|
export * from './conditional-wrapper';
|
|
3
|
+
export * from './content-header';
|
|
3
4
|
export * from './dynamic-icon';
|
|
4
5
|
export * from './image';
|
|
5
6
|
export * from './link-wrapper';
|
|
6
7
|
export * from './modal-primitive';
|
|
7
8
|
export * from './optional-icon-button';
|
|
9
|
+
export * from './surface';
|
|
8
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/internal-components/index.ts"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/internal-components/index.ts"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ModalPrimitiveProps } from './modal-primitive.types';
|
|
2
|
-
export declare const ModalPrimitive: ({ children, closeOnEsc, closeOnOverlayClick, isOpen, onClose, overlayClassName, portalTarget, preventScroll, }: ModalPrimitiveProps) => import("react").ReactPortal | undefined;
|
|
2
|
+
export declare const ModalPrimitive: ({ children, closeOnEsc, closeOnOverlayClick, dismissRef, isOpen, onClose, overlayClassName, portalTarget, preventScroll, }: ModalPrimitiveProps) => import("react").ReactPortal | undefined;
|
|
@@ -9,8 +9,9 @@ const styles = {
|
|
|
9
9
|
display: 'contents',
|
|
10
10
|
}),
|
|
11
11
|
};
|
|
12
|
-
export const ModalPrimitive = ({ children, closeOnEsc = true, closeOnOverlayClick = true, isOpen, onClose, overlayClassName, portalTarget, preventScroll = true, }) => {
|
|
13
|
-
const
|
|
12
|
+
export const ModalPrimitive = ({ children, closeOnEsc = true, closeOnOverlayClick = true, dismissRef, isOpen, onClose, overlayClassName, portalTarget, preventScroll = true, }) => {
|
|
13
|
+
const internalRef = useRef(null);
|
|
14
|
+
const primitiveRef = dismissRef ?? internalRef;
|
|
14
15
|
useDismiss({
|
|
15
16
|
elementRef: primitiveRef,
|
|
16
17
|
isOpen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-primitive.js","sourceRoot":"","sources":["../../../src/internal-components/modal-primitive/modal-primitive.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,MAAM,MAAM,GAAG;IACd,iBAAiB,EAAE,GAAG,CAAC;QACtB,OAAO,EAAE,UAAU;KACnB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,mBAAmB,GAAG,IAAI,EAC1B,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,GACC,EAAE,EAAE;IACzB,MAAM,
|
|
1
|
+
{"version":3,"file":"modal-primitive.js","sourceRoot":"","sources":["../../../src/internal-components/modal-primitive/modal-primitive.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,MAAM,MAAM,GAAG;IACd,iBAAiB,EAAE,GAAG,CAAC;QACtB,OAAO,EAAE,UAAU;KACnB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EACV,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,GACC,EAAE,EAAE;IACzB,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,UAAU,IAAI,WAAW,CAAC;IAE/C,UAAU,CAAC;QACV,UAAU,EAAE,YAAY;QACxB,MAAM;QACN,OAAO;QACP,cAAc,EAAE,mBAAmB;QACnC,YAAY,EAAE,UAAU;KACxB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,IAAI,aAAa,EAAE,CAAC;YAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzC,CAAC;QACD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,IAAI,MAAM,EAAE,CAAC;QACZ,MAAM,MAAM,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC;QAE7C,OAAO,YAAY,CAClB,cAAK,SAAS,EAAE,gBAAgB,YAC/B,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,GAAG,EAAE,YAAY,YACzD,QAAQ,GACJ,GACD,EACN,MAAM,CACN,CAAC;IACH,CAAC;AACF,CAAC,CAAC"}
|
|
@@ -12,6 +12,8 @@ export type ModalPrimitiveProps = {
|
|
|
12
12
|
closeOnOverlayClick?: boolean;
|
|
13
13
|
/** Close the modal when the Escape key is pressed @default `true` */
|
|
14
14
|
closeOnEsc?: boolean;
|
|
15
|
+
/** Ref for the dismiss boundary. Clicks outside this element trigger close. Defaults to the content wrapper. */
|
|
16
|
+
dismissRef?: React.RefObject<HTMLDivElement | null>;
|
|
15
17
|
/** Prevents body scroll while the modal is open @default `true` */
|
|
16
18
|
preventScroll?: boolean;
|
|
17
19
|
/** DOM element to portal the modal into. Defaults to `document.body` */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal-components/surface/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cx } from '../../styled-system/css';
|
|
3
|
+
import { getResolvedLayerValues, getSurfaceStyles } from '../../utils';
|
|
4
|
+
export const Surface = (props) => {
|
|
5
|
+
const { as, surfaceConfig, className, children, ...rest } = props;
|
|
6
|
+
const { layer = 'surface', bg, shadow, structure } = surfaceConfig ?? {};
|
|
7
|
+
const Component = (as || 'div');
|
|
8
|
+
const layerValues = getResolvedLayerValues({ layer, bg, shadow, structure });
|
|
9
|
+
return (_jsx(Component, { className: cx(getSurfaceStyles(layerValues), className), ...rest, children: children }));
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=surface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../../src/internal-components/surface/surface.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGnE,MAAM,CAAC,MAAM,OAAO,GAAG,CAAgC,KAAsB,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElE,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,IAAI,EAAE,CAAC;IACzE,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,KAAK,CAAgB,CAAC;IAC/C,MAAM,WAAW,GAAG,sBAAsB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAE7E,OAAO,CACN,KAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YAC1E,QAAQ,GACE,CACZ,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ElementType, ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { SurfaceConfigOverrides } from '../../theme/theme-surface-system';
|
|
3
|
+
import { Prettify, SurfaceLayerOptions } from '../../types';
|
|
4
|
+
export type SurfaceInput = Prettify<SurfaceConfigOverrides & {
|
|
5
|
+
layer?: SurfaceLayerOptions | 'none';
|
|
6
|
+
}>;
|
|
7
|
+
type SurfaceOwnProps<T extends ElementType = 'div'> = {
|
|
8
|
+
/** HTML element to render @default 'div' */
|
|
9
|
+
as?: T;
|
|
10
|
+
/** Surface layer configuration */
|
|
11
|
+
surfaceConfig?: SurfaceInput;
|
|
12
|
+
className?: string;
|
|
13
|
+
};
|
|
14
|
+
export type SurfaceProps<T extends ElementType = 'div'> = SurfaceOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SurfaceOwnProps<T>>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface.types.js","sourceRoot":"","sources":["../../../src/internal-components/surface/surface.types.ts"],"names":[],"mappings":""}
|
|
@@ -112,8 +112,8 @@ const buttonFn = /* @__PURE__ */ createRecipe('button', {
|
|
|
112
112
|
"css": {
|
|
113
113
|
"_hover": {
|
|
114
114
|
"backgroundColor": "transparent",
|
|
115
|
-
"color": "text.
|
|
116
|
-
"borderColor": "text
|
|
115
|
+
"color": "text.tertiary",
|
|
116
|
+
"borderColor": "var(--thread-text-tertiary)"
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
},
|
|
@@ -222,9 +222,9 @@ const buttonFn = /* @__PURE__ */ createRecipe('button', {
|
|
|
222
222
|
"textVariant": true,
|
|
223
223
|
"color": "neutral",
|
|
224
224
|
"css": {
|
|
225
|
-
"color": "text.
|
|
225
|
+
"color": "text.tertiary",
|
|
226
226
|
"_hover": {
|
|
227
|
-
"color": "text.
|
|
227
|
+
"color": "text.secondary",
|
|
228
228
|
"backgroundColor": "transparent"
|
|
229
229
|
}
|
|
230
230
|
}
|
|
@@ -383,8 +383,8 @@ const buttonFn = /* @__PURE__ */ createRecipe('button', {
|
|
|
383
383
|
"color": "neutral",
|
|
384
384
|
"css": {
|
|
385
385
|
"_hover": {
|
|
386
|
-
"backgroundColor": "
|
|
387
|
-
"borderColor": "text
|
|
386
|
+
"backgroundColor": "hover",
|
|
387
|
+
"borderColor": "var(--thread-text-secondary)"
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
390
|
}
|
|
@@ -1999,6 +1999,10 @@ const tokens = {
|
|
|
1999
1999
|
"value": "var(--thread-text-secondary)",
|
|
2000
2000
|
"variable": "var(--thread-ui-colors-text-secondary)"
|
|
2001
2001
|
},
|
|
2002
|
+
"colors.text.tertiary": {
|
|
2003
|
+
"value": "var(--thread-text-tertiary)",
|
|
2004
|
+
"variable": "var(--thread-ui-colors-text-tertiary)"
|
|
2005
|
+
},
|
|
2002
2006
|
"colors.text.disabled": {
|
|
2003
2007
|
"value": "var(--thread-text-disabled)",
|
|
2004
2008
|
"variable": "var(--thread-ui-colors-text-disabled)"
|
|
@@ -2263,6 +2267,10 @@ const tokens = {
|
|
|
2263
2267
|
"value": "var(--thread-ui-colors-color-palette-secondary)",
|
|
2264
2268
|
"variable": "var(--thread-ui-colors-color-palette-secondary)"
|
|
2265
2269
|
},
|
|
2270
|
+
"colors.colorPalette.tertiary": {
|
|
2271
|
+
"value": "var(--thread-ui-colors-color-palette-tertiary)",
|
|
2272
|
+
"variable": "var(--thread-ui-colors-color-palette-tertiary)"
|
|
2273
|
+
},
|
|
2266
2274
|
"colors.colorPalette.disabled": {
|
|
2267
2275
|
"value": "var(--thread-ui-colors-color-palette-disabled)",
|
|
2268
2276
|
"variable": "var(--thread-ui-colors-color-palette-disabled)"
|