@lobehub/ui 6.0.0-beta.9 → 6.0.1
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 +3 -3
- package/es/Accordion/style.d.mts +1 -1
- package/es/CodeDiff/DiffPanel.mjs +2 -2
- package/es/CodeDiff/DiffPanel.mjs.map +1 -1
- package/es/Drawer/atoms.mjs +2 -1
- package/es/Drawer/atoms.mjs.map +1 -1
- package/es/Drawer/style.mjs.map +1 -1
- package/es/DropdownMenu/atoms.mjs +2 -1
- package/es/DropdownMenu/atoms.mjs.map +1 -1
- package/es/FloatingPanel/style.mjs +3 -2
- package/es/FloatingPanel/style.mjs.map +1 -1
- package/es/Form/Form.mjs +6 -2
- package/es/Form/Form.mjs.map +1 -1
- package/es/Form/style.mjs +3 -3
- package/es/Form/style.mjs.map +1 -1
- package/es/Form/type.d.mts +7 -0
- package/es/Modal/atoms.mjs +2 -1
- package/es/Modal/atoms.mjs.map +1 -1
- package/es/Popover/PopoverInGroup.mjs +2 -1
- package/es/Popover/PopoverInGroup.mjs.map +1 -1
- package/es/Popover/atoms.mjs +2 -1
- package/es/Popover/atoms.mjs.map +1 -1
- package/es/Popover/style.mjs +1 -1
- package/es/Popover/style.mjs.map +1 -1
- package/es/ProTable/hooks/useFetchData.mjs +1 -1
- package/es/ProTable/hooks/useFetchData.mjs.map +1 -1
- package/es/ProTable/parts/FieldControl.mjs +28 -11
- package/es/ProTable/parts/FieldControl.mjs.map +1 -1
- package/es/ProTable/style.mjs +9 -0
- package/es/ProTable/style.mjs.map +1 -1
- package/es/ProTable/type.d.mts +5 -2
- package/es/Segmented/Segmented.mjs +2 -1
- package/es/Segmented/Segmented.mjs.map +1 -1
- package/es/Segmented/type.d.mts +7 -0
- package/es/Select/atoms.mjs +2 -1
- package/es/Select/atoms.mjs.map +1 -1
- package/es/Switch/Switch.mjs +8 -1
- package/es/Switch/Switch.mjs.map +1 -1
- package/es/Switch/atoms.d.mts +7 -1
- package/es/Switch/atoms.mjs +20 -4
- package/es/Switch/atoms.mjs.map +1 -1
- package/es/Switch/style.mjs +33 -2
- package/es/Switch/style.mjs.map +1 -1
- package/es/Table/Table.mjs +14 -5
- package/es/Table/Table.mjs.map +1 -1
- package/es/Table/render/FixedFrost.mjs +11 -2
- package/es/Table/render/FixedFrost.mjs.map +1 -1
- package/es/Table/style.mjs +4 -0
- package/es/Table/style.mjs.map +1 -1
- package/es/Toast/dodge.mjs +0 -1
- package/es/Toast/dodge.mjs.map +1 -1
- package/es/Toast/dodge.stylex.mjs +1 -4
- package/es/Toast/dodge.stylex.mjs.map +1 -1
- package/es/Toast/style.mjs +1 -1
- package/es/Toast/style.mjs.map +1 -1
- package/es/Tooltip/TooltipInGroup.mjs +2 -1
- package/es/Tooltip/TooltipInGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipStandalone.mjs +2 -1
- package/es/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/Tooltip/style.mjs +2 -2
- package/es/Tooltip/style.mjs.map +1 -1
- package/es/color/index.d.mts +2 -1
- package/es/color/index.mjs +2 -1
- package/es/color/status/error.mjs +67 -0
- package/es/color/status/error.mjs.map +1 -0
- package/es/color/status/index.d.mts +11 -0
- package/es/color/status/index.mjs +15 -0
- package/es/color/status/index.mjs.map +1 -0
- package/es/color/status/info.mjs +67 -0
- package/es/color/status/info.mjs.map +1 -0
- package/es/color/status/success.mjs +67 -0
- package/es/color/status/success.mjs.map +1 -0
- package/es/color/status/warning.mjs +67 -0
- package/es/color/status/warning.mjs.map +1 -0
- package/es/hooks/useNativeButton.mjs +1 -0
- package/es/hooks/useNativeButton.mjs.map +1 -1
- package/es/index.d.mts +4 -2
- package/es/index.mjs +4 -2
- package/es/style.css +114 -23
- package/es/styles/index.d.mts +4 -2
- package/es/styles/index.mjs +4 -2
- package/es/styles/stylex/cssVar.stylex.mjs +3 -0
- package/es/styles/stylex/cssVar.stylex.mjs.map +1 -1
- package/es/styles/theme/createLobeToken.d.mts +11 -7
- package/es/styles/theme/createLobeToken.mjs +3 -2
- package/es/styles/theme/createLobeToken.mjs.map +1 -1
- package/es/styles/theme/customNeutral.d.mts +28 -0
- package/es/styles/theme/customNeutral.mjs +84 -0
- package/es/styles/theme/customNeutral.mjs.map +1 -0
- package/es/styles/theme/customPalette.d.mts +6 -0
- package/es/styles/theme/customPalette.mjs +32 -0
- package/es/styles/theme/customPalette.mjs.map +1 -0
- package/es/styles/theme/customPrimary.mjs +52 -17
- package/es/styles/theme/customPrimary.mjs.map +1 -1
- package/es/styles/theme/scope.d.mts +7 -5
- package/es/styles/theme/scope.mjs +105 -22
- package/es/styles/theme/scope.mjs.map +1 -1
- package/es/styles/theme/themeCss.d.mts +3 -0
- package/es/styles/theme/themeCss.mjs +46 -1
- package/es/styles/theme/themeCss.mjs.map +1 -1
- package/es/styles/theme/token/legacy.mjs +12 -12
- package/es/styles/theme/token/legacy.mjs.map +1 -1
- package/es/styles/theme/token/neutral.mjs +13 -7
- package/es/styles/theme/token/neutral.mjs.map +1 -1
- package/es/styles/theme/token/neutralText.d.mts +4 -0
- package/es/styles/theme/token/neutralText.mjs +91 -0
- package/es/styles/theme/token/neutralText.mjs.map +1 -0
- package/es/styles/theme/token/palette.mjs +16 -41
- package/es/styles/theme/token/palette.mjs.map +1 -1
- package/es/styles/theme/token/static.mjs +3 -0
- package/es/styles/theme/token/static.mjs.map +1 -1
- package/es/theme.css +293 -290
- package/es/utils/getElementRef.mjs +17 -0
- package/es/utils/getElementRef.mjs.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/Table/render/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS } from '../constants';\nimport { styles } from '../style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n end: number;\n fill: boolean;\n height: number;\n host: HTMLElement;\n start: number;\n width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\nconst measureSides = (rows: Element[]) => {\n let start = 0;\n let end = 0;\n for (const row of rows) {\n for (const cell of Array.from(row.children) as HTMLElement[]) {\n if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n start = Math.max(\n start,\n px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n );\n } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n }\n }\n }\n return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n const rails: Rail[] = [];\n const own = (el: Element) => el.closest(p) === table;\n const hosts = table.querySelectorAll<HTMLElement>(\n `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n );\n\n for (const host of Array.from(hosts)) {\n if (!own(host)) continue;\n // A sticky header is one element and blurs itself in CSS.\n if (host.closest(`${p}-sticky-holder`)) continue;\n\n if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter(\n (el) => own(el) && !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n );\n const { start, end } = measureSides(rows.slice(0, 3));\n if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n continue;\n }\n\n const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n if (!tableEl) continue;\n const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n .slice(0, 6);\n const { start, end } = measureSides(rows);\n if (!start && !end) continue;\n rails.push({\n end,\n fill: false,\n height: tableEl.offsetHeight,\n host,\n start,\n width: tableEl.offsetWidth,\n });\n }\n return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n a.length === b.length &&\n a.every(\n (rail, i) =>\n rail.host === b[i].host &&\n rail.start === b[i].start &&\n rail.end === b[i].end &&\n rail.width === b[i].width &&\n rail.height === b[i].height,\n );\n\n// A per-cell backdrop-filter blurs each box on its own and shows seams at every row, so\n// each scroll host gets one rail holding a sticky pane per fixed side instead.\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n const [rails, setRails] = useState<Rail[]>([]);\n\n // Passive effect: the root ref belongs to an ancestor and is attached after this\n // child's layout effects, so a layout effect would see it as null on mount.\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n let frame = 0;\n\n const update = () => {\n frame = 0;\n const table = root.querySelector<HTMLElement>(p);\n const next = table ? collectRails(table) : [];\n for (const rail of next) {\n if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n rail.host.style.position = 'relative';\n }\n }\n setRails((prev) => (sameRails(prev, next) ? prev : next));\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n\n update();\n // Consumers render Table in jsdom without a ResizeObserver polyfill.\n const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n resize?.observe(root);\n const mutation = new MutationObserver((records) => {\n if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n schedule();\n });\n mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n return () => {\n if (frame) cancelAnimationFrame(frame);\n resize?.disconnect();\n mutation.disconnect();\n };\n }, [rootRef]);\n\n return (\n <>\n {rails.map((rail, i) =>\n createPortal(\n <div\n aria-hidden\n data-table-frost=\"\"\n {...stylex.props(styles.frostRail)}\n style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n >\n {rail.start > 0 && (\n <div {...stylex.props(styles.frostStart)} style={{ width: rail.start }} />\n )}\n {rail.end > 0 && <div {...stylex.props(styles.frostEnd)} style={{ width: rail.end }} />}\n </div>,\n rail.host,\n `frost-${i}`,\n ),\n )}\n </>\n );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/Table/render/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS } from '../constants';\nimport { styles } from '../style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n end: number;\n fill: boolean;\n height: number;\n host: HTMLElement;\n start: number;\n width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\nconst measureSides = (rows: Element[]) => {\n let start = 0;\n let end = 0;\n for (const row of rows) {\n for (const cell of Array.from(row.children) as HTMLElement[]) {\n if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n start = Math.max(\n start,\n px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n );\n } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n }\n }\n }\n return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n const rails: Rail[] = [];\n const own = (el: Element) => el.closest(p) === table;\n const ownMatch = (selector: string) =>\n Array.from(table.querySelectorAll(selector)).some((el) => own(el));\n\n // Empty / skeleton body: the placeholder row spans every column, so there is nothing fixed\n // in the body and nothing scrolled under the fixed side; a rail would only blur the\n // skeleton and its row dividers.\n if (ownMatch(`${p}-placeholder`) || ownMatch('[data-table-skeleton]')) return rails;\n\n // useScrollSync flags the table with `*-shadow-show` exactly while content sits under a\n // fixed side; at rest the transparent fixed cells cover nothing.\n const showStart = table.classList.contains(`${PREFIX_CLS}-fix-start-shadow-show`);\n const showEnd = table.classList.contains(`${PREFIX_CLS}-fix-end-shadow-show`);\n if (!showStart && !showEnd) return rails;\n const hosts = table.querySelectorAll<HTMLElement>(\n `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n );\n\n for (const host of Array.from(hosts)) {\n if (!own(host)) continue;\n // A sticky header is one element and blurs itself in CSS.\n if (host.closest(`${p}-sticky-holder`)) continue;\n\n if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter(\n (el) => own(el) && !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n );\n const measured = measureSides(rows.slice(0, 3));\n const start = showStart ? measured.start : 0;\n const end = showEnd ? measured.end : 0;\n if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n continue;\n }\n\n const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n if (!tableEl) continue;\n const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n .slice(0, 6);\n const measured = measureSides(rows);\n const start = showStart ? measured.start : 0;\n const end = showEnd ? measured.end : 0;\n if (!start && !end) continue;\n rails.push({\n end,\n fill: false,\n height: tableEl.offsetHeight,\n host,\n start,\n width: tableEl.offsetWidth,\n });\n }\n return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n a.length === b.length &&\n a.every(\n (rail, i) =>\n rail.host === b[i].host &&\n rail.start === b[i].start &&\n rail.end === b[i].end &&\n rail.width === b[i].width &&\n rail.height === b[i].height,\n );\n\n// A per-cell backdrop-filter blurs each box on its own and shows seams at every row, so\n// each scroll host gets one rail holding a sticky pane per fixed side instead. A side is only\n// frosted while content is scrolled under it and never over an empty / skeleton body, so row\n// dividers stay continuous through fixed columns.\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n const [rails, setRails] = useState<Rail[]>([]);\n\n // Passive effect: the root ref belongs to an ancestor and is attached after this\n // child's layout effects, so a layout effect would see it as null on mount.\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n let frame = 0;\n\n const update = () => {\n frame = 0;\n const table = root.querySelector<HTMLElement>(p);\n const next = table ? collectRails(table) : [];\n for (const rail of next) {\n if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n rail.host.style.position = 'relative';\n }\n }\n setRails((prev) => (sameRails(prev, next) ? prev : next));\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n\n update();\n // Consumers render Table in jsdom without a ResizeObserver polyfill.\n const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n resize?.observe(root);\n const mutation = new MutationObserver((records) => {\n if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n schedule();\n });\n mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n return () => {\n if (frame) cancelAnimationFrame(frame);\n resize?.disconnect();\n mutation.disconnect();\n };\n }, [rootRef]);\n\n return (\n <>\n {rails.map((rail, i) =>\n createPortal(\n <div\n aria-hidden\n data-table-frost=\"\"\n {...stylex.props(styles.frostRail)}\n style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n >\n {rail.start > 0 && (\n <div {...stylex.props(styles.frostStart)} style={{ width: rail.start }} />\n )}\n {rail.end > 0 && <div {...stylex.props(styles.frostEnd)} style={{ width: rail.end }} />}\n </div>,\n rail.host,\n `frost-${i}`,\n ),\n )}\n </>\n );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}
|
package/es/Table/style.mjs
CHANGED
|
@@ -96,6 +96,8 @@ const styles = {
|
|
|
96
96
|
frostEnd: {
|
|
97
97
|
kUk6DE: "lb1okw0bk",
|
|
98
98
|
k6WDB: "lb1jh03n0",
|
|
99
|
+
kT0f0o: "lb1b5hgzv",
|
|
100
|
+
kfmiAY: "lb13toaxh",
|
|
99
101
|
kt4wiu: "lbtijo5x",
|
|
100
102
|
keTefX: "lbvc5jky",
|
|
101
103
|
kVAEAm: "lb7wzq59",
|
|
@@ -114,6 +116,8 @@ const styles = {
|
|
|
114
116
|
frostStart: {
|
|
115
117
|
kUk6DE: "lb1okw0bk",
|
|
116
118
|
k6WDB: "lb1jh03n0",
|
|
119
|
+
kVL7Gh: "lb1k65923",
|
|
120
|
+
krdFHd: "lb1jyebuh",
|
|
117
121
|
kLqNvP: "lb1o0tod",
|
|
118
122
|
kVAEAm: "lb7wzq59",
|
|
119
123
|
kZKoxP: "lb5yr21d",
|
package/es/Table/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Table/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n columnTitle: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n wordBreak: 'keep-all',\n minWidth: 0,\n },\n filterActive: {\n color: { 'default': cssVar.colorPrimary, ':hover': cssVar.colorPrimary },\n },\n filterButton: {\n flex: 'none',\n marginBlock: -4,\n },\n filterButtons: {\n gap: 8,\n paddingBlock: 7,\n paddingInline: 8,\n alignItems: 'center',\n borderBlockStartColor: cssVar.colorSplit,\n borderBlockStartStyle: 'solid',\n borderBlockStartWidth: 1,\n display: 'flex',\n justifyContent: 'space-between',\n },\n filterCheckAll: {\n paddingInline: 4,\n marginBlockEnd: 4,\n },\n filterDropdown: {\n display: 'flex',\n flexDirection: 'column',\n minWidth: 120,\n },\n filterEmpty: {\n paddingBlock: 16,\n paddingInline: 0,\n },\n filterGroup: {\n display: 'flex',\n flexDirection: 'column',\n },\n filterGroupTitle: {\n paddingBlock: 5,\n paddingInline: 8,\n color: cssVar.colorTextDescription,\n fontSize: 12,\n },\n filterItem: {\n borderRadius: cssVar.borderRadiusSM,\n paddingBlock: 5,\n paddingInline: 8,\n alignItems: 'center',\n backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n display: 'flex',\n whiteSpace: 'nowrap',\n },\n filterMenu: {\n padding: 4,\n overflow: 'auto',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 264,\n },\n filterPopup: {\n padding: 0,\n overflow: 'hidden',\n },\n filterSearch: {\n padding: 8,\n borderBlockEndColor: cssVar.colorSplit,\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: 1,\n },\n filterTree: {\n padding: 8,\n overflow: 'auto',\n maxHeight: 264,\n },\n frostEnd: {\n flex: 'none',\n backdropFilter: 'blur(16px)',\n insetInlineEnd: 0,\n marginInlineStart: 'auto',\n position: 'sticky',\n height: '100%',\n },\n // z-index 1: above scrolling cells (z auto), below fixed cells (z >= 2).\n frostRail: {\n display: 'flex',\n insetBlockStart: 0,\n insetInlineStart: 0,\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n },\n frostStart: {\n flex: 'none',\n backdropFilter: 'blur(16px)',\n insetInlineStart: 0,\n position: 'sticky',\n height: '100%',\n },\n headerInner: {\n gap: 6,\n alignItems: 'center',\n display: 'inline-flex',\n verticalAlign: 'middle',\n maxWidth: '100%',\n minWidth: 0,\n },\n loading: {\n inset: 0,\n gap: 8,\n alignItems: 'center',\n backgroundColor: `color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent)`,\n color: cssVar.colorTextSecondary,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n position: 'absolute',\n },\n pagination: {\n marginBlock: 16,\n display: 'flex',\n },\n paginationCenter: {\n justifyContent: 'center',\n },\n paginationEnd: {\n justifyContent: 'flex-end',\n },\n paginationStart: {\n justifyContent: 'flex-start',\n },\n paginationTop: {\n marginBlockEnd: '16px',\n marginBlockStart: '0',\n },\n root: {\n minWidth: 0,\n },\n selection: {\n display: 'inline-flex',\n flexDirection: 'column',\n position: 'relative',\n verticalAlign: 'middle',\n },\n selectionExtra: {\n alignItems: 'center',\n display: 'flex',\n insetBlockStart: 0,\n marginInlineStart: '100%',\n paddingInlineStart: 2,\n position: 'absolute',\n zIndex: 1,\n height: '100%',\n },\n selectionRadioGroup: {\n display: 'inline-flex',\n verticalAlign: 'middle',\n },\n selectionTrigger: {\n flex: 'none',\n marginBlock: -4,\n },\n skeleton: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'start',\n minWidth: 0,\n width: '100%',\n },\n skeletonCell: {\n paddingBlock: 'var(--lobe-table-padding-block)',\n paddingInline: 'var(--lobe-table-padding-inline)',\n alignItems: 'center',\n display: 'flex',\n minWidth: 0,\n },\n skeletonRow: {\n alignItems: 'stretch',\n borderBlockEndColor: `var(--lobe-fill-border, ${cssVar.colorFill})`,\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: { 'default': 1, ':last-child': 0 },\n display: 'grid',\n minWidth: 0,\n width: '100%',\n },\n sortButton: {\n gap: 4,\n alignItems: 'center',\n display: 'inline-flex',\n maxWidth: '100%',\n minWidth: 0,\n },\n sortCaret: {\n flex: 'none',\n marginBlock: -4,\n },\n sortTitle: {\n cursor: 'pointer',\n minWidth: 0,\n },\n spinContainer: {\n position: 'relative',\n },\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Table/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n columnTitle: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n wordBreak: 'keep-all',\n minWidth: 0,\n },\n filterActive: {\n color: { 'default': cssVar.colorPrimary, ':hover': cssVar.colorPrimary },\n },\n filterButton: {\n flex: 'none',\n marginBlock: -4,\n },\n filterButtons: {\n gap: 8,\n paddingBlock: 7,\n paddingInline: 8,\n alignItems: 'center',\n borderBlockStartColor: cssVar.colorSplit,\n borderBlockStartStyle: 'solid',\n borderBlockStartWidth: 1,\n display: 'flex',\n justifyContent: 'space-between',\n },\n filterCheckAll: {\n paddingInline: 4,\n marginBlockEnd: 4,\n },\n filterDropdown: {\n display: 'flex',\n flexDirection: 'column',\n minWidth: 120,\n },\n filterEmpty: {\n paddingBlock: 16,\n paddingInline: 0,\n },\n filterGroup: {\n display: 'flex',\n flexDirection: 'column',\n },\n filterGroupTitle: {\n paddingBlock: 5,\n paddingInline: 8,\n color: cssVar.colorTextDescription,\n fontSize: 12,\n },\n filterItem: {\n borderRadius: cssVar.borderRadiusSM,\n paddingBlock: 5,\n paddingInline: 8,\n alignItems: 'center',\n backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n display: 'flex',\n whiteSpace: 'nowrap',\n },\n filterMenu: {\n padding: 4,\n overflow: 'auto',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 264,\n },\n filterPopup: {\n padding: 0,\n overflow: 'hidden',\n },\n filterSearch: {\n padding: 8,\n borderBlockEndColor: cssVar.colorSplit,\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: 1,\n },\n filterTree: {\n padding: 8,\n overflow: 'auto',\n maxHeight: 264,\n },\n frostEnd: {\n flex: 'none',\n backdropFilter: 'blur(16px)',\n borderEndEndRadius: 'var(--lobe-table-radius-bottom, 0)',\n borderStartEndRadius: 'var(--lobe-table-radius-top, 0)',\n insetInlineEnd: 0,\n marginInlineStart: 'auto',\n position: 'sticky',\n height: '100%',\n },\n // z-index 1: above scrolling cells (z auto), below fixed cells (z >= 2).\n frostRail: {\n display: 'flex',\n insetBlockStart: 0,\n insetInlineStart: 0,\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n },\n frostStart: {\n flex: 'none',\n backdropFilter: 'blur(16px)',\n borderEndStartRadius: 'var(--lobe-table-radius-bottom, 0)',\n borderStartStartRadius: 'var(--lobe-table-radius-top, 0)',\n insetInlineStart: 0,\n position: 'sticky',\n height: '100%',\n },\n headerInner: {\n gap: 6,\n alignItems: 'center',\n display: 'inline-flex',\n verticalAlign: 'middle',\n maxWidth: '100%',\n minWidth: 0,\n },\n loading: {\n inset: 0,\n gap: 8,\n alignItems: 'center',\n backgroundColor: `color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent)`,\n color: cssVar.colorTextSecondary,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n position: 'absolute',\n },\n pagination: {\n marginBlock: 16,\n display: 'flex',\n },\n paginationCenter: {\n justifyContent: 'center',\n },\n paginationEnd: {\n justifyContent: 'flex-end',\n },\n paginationStart: {\n justifyContent: 'flex-start',\n },\n paginationTop: {\n marginBlockEnd: '16px',\n marginBlockStart: '0',\n },\n root: {\n minWidth: 0,\n },\n selection: {\n display: 'inline-flex',\n flexDirection: 'column',\n position: 'relative',\n verticalAlign: 'middle',\n },\n selectionExtra: {\n alignItems: 'center',\n display: 'flex',\n insetBlockStart: 0,\n marginInlineStart: '100%',\n paddingInlineStart: 2,\n position: 'absolute',\n zIndex: 1,\n height: '100%',\n },\n selectionRadioGroup: {\n display: 'inline-flex',\n verticalAlign: 'middle',\n },\n selectionTrigger: {\n flex: 'none',\n marginBlock: -4,\n },\n skeleton: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'start',\n minWidth: 0,\n width: '100%',\n },\n skeletonCell: {\n paddingBlock: 'var(--lobe-table-padding-block)',\n paddingInline: 'var(--lobe-table-padding-inline)',\n alignItems: 'center',\n display: 'flex',\n minWidth: 0,\n },\n skeletonRow: {\n alignItems: 'stretch',\n borderBlockEndColor: `var(--lobe-fill-border, ${cssVar.colorFill})`,\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: { 'default': 1, ':last-child': 0 },\n display: 'grid',\n minWidth: 0,\n width: '100%',\n },\n sortButton: {\n gap: 4,\n alignItems: 'center',\n display: 'inline-flex',\n maxWidth: '100%',\n minWidth: 0,\n },\n sortCaret: {\n flex: 'none',\n marginBlock: -4,\n },\n sortTitle: {\n cursor: 'pointer',\n minWidth: 0,\n },\n spinContainer: {\n position: 'relative',\n },\n});\n"],"mappings":"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"}
|
package/es/Toast/dodge.mjs
CHANGED
package/es/Toast/dodge.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dodge.mjs","names":[],"sources":["../../src/Toast/dodge.ts"],"sourcesContent":["import { toastDodge } from './dodge.stylex';\n\nexport const TOAST_WIDTH = 360;\nexport const TOAST_MIN_WIDTH = 260;\nexport const TOAST_EDGE = 16;\nexport const TOAST_ROW_HEIGHT = 88;\nexport const TOAST_DODGE_GUTTER = 12;\n\nexport const TOAST_DODGE_DURATION = toastDodge.duration;\
|
|
1
|
+
{"version":3,"file":"dodge.mjs","names":[],"sources":["../../src/Toast/dodge.ts"],"sourcesContent":["import { toastDodge } from './dodge.stylex';\n\nexport const TOAST_WIDTH = 360;\nexport const TOAST_MIN_WIDTH = 260;\nexport const TOAST_EDGE = 16;\nexport const TOAST_ROW_HEIGHT = 88;\nexport const TOAST_DODGE_GUTTER = 12;\n\nexport const TOAST_DODGE_DURATION = toastDodge.duration;\n\nexport const TOAST_SHIFT_X_VAR = '--toast-shift-x';\nexport const TOAST_SHIFT_Y_VAR = '--toast-shift-y';\nexport const TOAST_WIDTH_VAR = '--toast-width';\nexport const PANEL_RESERVE_VAR = '--floating-panel-reserve-block-end';\nexport const PANEL_ALIGN_INLINE_VAR = '--floating-panel-reserve-inline-end';\n\nexport interface ToastDodgeInput {\n panelHeight: number;\n panelOffsetX: number;\n panelOffsetY: number;\n panelWidth: number;\n viewportHeight: number;\n viewportWidth: number;\n}\n\nexport type ToastDodgeMode = 'left' | 'reserve' | 'shrink' | 'up';\n\nexport interface ToastDodgeResult {\n alignInline: number;\n mode: ToastDodgeMode;\n reserve: number;\n shiftX: number;\n shiftY: number;\n width: number;\n}\n\nexport const resolveToastDodge = ({\n panelHeight,\n panelOffsetX,\n panelOffsetY,\n panelWidth,\n viewportHeight,\n viewportWidth,\n}: ToastDodgeInput): ToastDodgeResult => {\n const shiftX = Math.max(0, panelWidth + panelOffsetX + TOAST_DODGE_GUTTER - TOAST_EDGE);\n const shiftY = Math.max(0, panelHeight + panelOffsetY + TOAST_DODGE_GUTTER - TOAST_EDGE);\n const lane = viewportWidth - shiftX - TOAST_EDGE * 2;\n const headroom = viewportHeight - shiftY - TOAST_EDGE * 2;\n\n // The panel sits closer to the edge than the toast does, so the pair reads as\n // misaligned until the panel is pushed out to the toast's inset. Which axis\n // needs it follows which edge the two end up sharing.\n const alignBlock = Math.max(0, TOAST_EDGE - panelOffsetY);\n const alignInline = Math.max(0, TOAST_EDGE - panelOffsetX);\n\n if (lane >= TOAST_WIDTH) {\n return {\n alignInline: 0,\n mode: 'left',\n reserve: alignBlock,\n shiftX,\n shiftY: 0,\n width: TOAST_WIDTH,\n };\n }\n\n if (headroom >= TOAST_ROW_HEIGHT) {\n return { alignInline, mode: 'up', reserve: 0, shiftX: 0, shiftY, width: TOAST_WIDTH };\n }\n\n if (lane >= TOAST_MIN_WIDTH) {\n return { alignInline: 0, mode: 'shrink', reserve: alignBlock, shiftX, shiftY: 0, width: lane };\n }\n\n // ponytail: the reserve budget is one toast row, not the live stack height —\n // measuring the stack would feed panel resizes back into the measurement.\n // A taller stack overflows upward here; per-stack reserve if that shows up.\n return {\n alignInline,\n mode: 'reserve',\n reserve: Math.max(0, TOAST_EDGE + TOAST_ROW_HEIGHT + TOAST_DODGE_GUTTER - panelOffsetY),\n shiftX: 0,\n shiftY: 0,\n width: TOAST_WIDTH,\n };\n};\n"],"mappings":";AAQoC,WAAW;AAE/C,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AACjC,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,yBAAyB;AAsBtC,MAAa,qBAAqB,EAChC,aACA,cACA,cACA,YACA,gBACA,oBACuC;CACvC,MAAM,SAAS,KAAK,IAAI,GAAG,aAAa,eAAA,KAAA,EAA8C;CACtF,MAAM,SAAS,KAAK,IAAI,GAAG,cAAc,eAAA,KAAA,EAA8C;CACvF,MAAM,OAAO,gBAAgB,SAAS;CACtC,MAAM,WAAW,iBAAiB,SAAS;CAK3C,MAAM,aAAa,KAAK,IAAI,GAAA,KAAgB,YAAY;CACxD,MAAM,cAAc,KAAK,IAAI,GAAA,KAAgB,YAAY;CAEzD,IAAI,QAAA,KACF,OAAO;EACL,aAAa;EACb,MAAM;EACN,SAAS;EACT;EACA,QAAQ;EACR,OAAA;CACF;CAGF,IAAI,YAAA,IACF,OAAO;EAAE;EAAa,MAAM;EAAM,SAAS;EAAG,QAAQ;EAAG;EAAQ,OAAA;CAAmB;CAGtF,IAAI,QAAA,KACF,OAAO;EAAE,aAAa;EAAG,MAAM;EAAU,SAAS;EAAY;EAAQ,QAAQ;EAAG,OAAO;CAAK;CAM/F,OAAO;EACL;EACA,MAAM;EACN,SAAS,KAAK,IAAI,GAAG,MAAqD,YAAY;EACtF,QAAQ;EACR,QAAQ;EACR,OAAA;CACF;AACF"}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
//#region src/Toast/dodge.stylex.ts
|
|
2
|
-
const toastDodge = {
|
|
3
|
-
duration: "608ms",
|
|
4
|
-
ease: "linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)"
|
|
5
|
-
};
|
|
2
|
+
const toastDodge = { duration: "608ms" };
|
|
6
3
|
//#endregion
|
|
7
4
|
export { toastDodge };
|
|
8
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dodge.stylex.mjs","names":[],"sources":["../../src/Toast/dodge.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\n//
|
|
1
|
+
{"version":3,"file":"dodge.stylex.mjs","names":[],"sources":["../../src/Toast/dodge.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\n// Paired with motionSpringSnappy: the duration is that spring's settle time —\n// change them together, not independently.\nexport const toastDodge = stylex.defineConsts({\n duration: '608ms',\n});\n"],"mappings":";AAIA,MAAa,aAAa,EACxB,UAAU,QACZ"}
|
package/es/Toast/style.mjs
CHANGED
package/es/Toast/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { toastDodge } from './dodge.stylex';\n\nconst focusVisible = ':focus-visible:not([data-lobe-focus-ring=\"managed\"])';\nconst forcedColors = '@media (forced-colors: active)';\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst hover = ':hover:not(:active)';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst expanded = ':is([data-expanded]):not([data-starting-style], [data-ending-style])';\nconst swiping = ':is([data-swiping])';\nconst viewportOffsetX = 'var(--toast-viewport-offset-x, 16px)';\nconst viewportOffsetY = 'var(--toast-viewport-offset-y, 16px)';\n\nexport const styles = stylex.create({\n action: {\n borderColor: 'currentcolor',\n borderRadius: cssVar.borderRadiusSM,\n borderStyle: 'none',\n borderWidth: 'medium',\n paddingInline: 12,\n transition: 'background 0.2s, color 0.2s',\n alignItems: 'center',\n cursor: 'pointer',\n display: 'inline-flex',\n flexShrink: 0,\n fontSize: 12,\n fontWeight: 500,\n justifyContent: 'center',\n lineHeight: 1,\n height: 28,\n },\n\n actionDanger: {\n '--lobe-focus-ring-color': cssVar.colorError,\n 'backgroundColor': {\n 'default': cssVar.colorError,\n [hover]: cssVar.colorErrorHover,\n ':active': cssVar.colorErrorActive,\n },\n 'color': cssVar.colorBgLayout,\n 'outlineColor': {\n default: null,\n [focusVisible]: `color-mix(in srgb, ${cssVar.colorError} 90%, transparent)`,\n [forcedColors]: { default: null, [focusVisible]: 'CanvasText' },\n },\n },\n\n actionGhost: {\n borderColor: {\n 'default': cssVar.colorBorder,\n [hover]: cssVar.colorPrimary,\n ':active': cssVar.colorPrimaryActive,\n },\n borderStyle: 'solid',\n borderWidth: 1,\n backgroundColor: 'transparent',\n color: {\n 'default': cssVar.colorText,\n [hover]: cssVar.colorPrimary,\n ':active': cssVar.colorPrimaryActive,\n },\n },\n\n actionPrimary: {\n backgroundColor: {\n 'default': cssVar.colorPrimary,\n [hover]: cssVar.colorPrimaryHover,\n ':active': cssVar.colorPrimaryActive,\n },\n color: cssVar.colorBgLayout,\n },\n\n actionSecondary: {\n backgroundColor: {\n 'default': cssVar.colorFillSecondary,\n [hover]: cssVar.colorFillTertiary,\n ':active': cssVar.colorFill,\n },\n color: cssVar.colorText,\n },\n\n actionText: {\n backgroundColor: {\n 'default': 'transparent',\n [hover]: cssVar.colorFillTertiary,\n ':active': cssVar.colorFillSecondary,\n },\n color: cssVar.colorPrimary,\n },\n\n actions: {\n gap: 8,\n alignItems: 'center',\n alignSelf: 'flex-end',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 0,\n justifyContent: 'flex-end',\n marginBlockStart: 8,\n },\n\n close: {\n padding: 0,\n borderColor: 'currentcolor',\n borderRadius: cssVar.borderRadiusSM,\n borderStyle: 'none',\n borderWidth: 'medium',\n transition: 'all 0.2s',\n alignItems: 'center',\n backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillSecondary },\n color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n marginInlineStart: 'auto',\n height: 20,\n width: 20,\n },\n\n content: {\n overflow: 'hidden',\n transition: 'opacity 0.2s',\n opacity: {\n 'default': null,\n ':is([data-behind]):not([data-expanded])': 0,\n ':is([data-expanded])': 1,\n },\n pointerEvents: {\n 'default': null,\n ':is([data-behind]):not([data-expanded])': 'none',\n ':is([data-expanded])': 'auto',\n },\n },\n\n contentArea: {\n flex: '1',\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n },\n\n description: {\n margin: 0,\n color: cssVar.colorTextSecondary,\n fontSize: 13,\n lineHeight: 1.5,\n },\n\n descriptionStandalone: {\n color: cssVar.colorText,\n },\n\n icon: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n },\n\n root: {\n '--toast-collapsed-height': 'var(--toast-frontmost-height, var(--toast-height))',\n '--toast-gap': '12px',\n '--toast-peek': '12px',\n '--toast-scale': 'calc(1 - var(--toast-index) * 0.05)',\n '--toast-shrink': 'calc(1 - var(--toast-scale))',\n 'borderRadius': `var(--toast-border-radius, ${cssVar.borderRadiusLG})`,\n 'insetInline': 0,\n 'paddingBlock': 12,\n 'paddingInline': 16,\n 'backgroundClip': 'padding-box',\n 'backgroundColor': cssVar.colorBgElevated,\n 'boxShadow': `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n 'boxSizing': 'border-box',\n 'color': cssVar.colorText,\n 'cursor': 'default',\n 'opacity': {\n 'default': null,\n ':is([data-limited], [data-starting-style], [data-ending-style])': 0,\n },\n 'position': 'absolute',\n 'transitionDuration': { default: '0.4s, 0.4s, 0.15s', [swiping]: '0s' },\n 'transitionProperty': { default: 'transform, opacity, height', [swiping]: 'none' },\n 'transitionTimingFunction': {\n default: 'cubic-bezier(0.22, 1, 0.36, 1), ease, ease',\n [swiping]: 'ease',\n },\n 'userSelect': 'none',\n // eslint-disable-next-line @stylexjs/valid-styles -- the rule only allows numeric z-index; calc() is valid CSS\n 'zIndex': 'calc(1000 - var(--toast-index))',\n 'height': {\n 'default': 'var(--toast-collapsed-height)',\n ':is([data-expanded])': 'var(--toast-height)',\n },\n 'width': '100%',\n },\n\n rootBottom: {\n 'insetBlock': 'auto 0',\n 'transform': {\n default:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n [expanded]:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1)) scale(1)',\n [startingOrEnding]: 'translateY(150%)',\n },\n 'transformOrigin': 'bottom center',\n '::after': {\n insetInline: 0,\n content: \"''\",\n insetBlockStart: '100%',\n position: 'absolute',\n height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n },\n },\n\n rootTop: {\n 'insetBlock': '0 auto',\n 'transform': {\n default:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n [expanded]:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))) scale(1)',\n [startingOrEnding]: 'translateY(-150%)',\n },\n 'transformOrigin': 'top center',\n '::after': {\n insetInline: 0,\n content: \"''\",\n insetBlockEnd: '100%',\n position: 'absolute',\n height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n },\n },\n\n title: {\n margin: 0,\n color: cssVar.colorText,\n fontSize: 14,\n fontWeight: 500,\n lineHeight: 1.5,\n },\n\n titleRow: {\n gap: 8,\n alignItems: 'flex-start',\n display: 'flex',\n },\n\n toastBody: {\n gap: 12,\n alignItems: 'flex-start',\n display: 'flex',\n },\n\n viewport: {\n outline: '0',\n position: 'fixed',\n zIndex: 100_000,\n maxWidth: `calc(100vw - ${viewportOffsetX} * 2)`,\n width: {\n 'default': 'var(--toast-width, 360px)',\n '@media (width <= 480px)': `calc(100vw - ${viewportOffsetX} * 2)`,\n },\n },\n\n viewportBottom: {\n insetBlockEnd: viewportOffsetY,\n insetInlineStart: '50%',\n transform: 'translateX(-50%)',\n },\n\n viewportBottomLeft: {\n insetBlockEnd: viewportOffsetY,\n insetInlineStart: viewportOffsetX,\n },\n\n viewportBottomRight: {\n insetBlockEnd: viewportOffsetY,\n insetInlineEnd: viewportOffsetX,\n transform:\n 'translate(calc(-1 * var(--toast-shift-x, 0px)), calc(-1 * var(--toast-shift-y, 0px)))',\n transitionDuration: { default: toastDodge.duration, [reducedMotion]: '0s' },\n transitionProperty: { default: 'transform', [reducedMotion]: 'none' },\n transitionTimingFunction: { default: toastDodge.ease, [reducedMotion]: 'ease' },\n },\n\n viewportTop: {\n insetBlockStart: viewportOffsetY,\n insetInlineStart: '50%',\n transform: 'translateX(-50%)',\n },\n\n viewportTopLeft: {\n insetBlockStart: viewportOffsetY,\n insetInlineStart: viewportOffsetX,\n },\n\n viewportTopRight: {\n insetBlockStart: viewportOffsetY,\n insetInlineEnd: viewportOffsetX,\n },\n});\n\nexport const viewportPositionStyles = {\n 'bottom': styles.viewportBottom,\n 'bottom-left': styles.viewportBottomLeft,\n 'bottom-right': styles.viewportBottomRight,\n 'top': styles.viewportTop,\n 'top-left': styles.viewportTopLeft,\n 'top-right': styles.viewportTopRight,\n};\n\nexport const rootPositionStyles = {\n 'bottom': styles.rootBottom,\n 'bottom-left': styles.rootBottom,\n 'bottom-right': styles.rootBottom,\n 'top': styles.rootTop,\n 'top-left': styles.rootTop,\n 'top-right': styles.rootTop,\n};\n\nexport const actionVariantStyles = {\n danger: styles.actionDanger,\n ghost: styles.actionGhost,\n primary: styles.actionPrimary,\n secondary: styles.actionSecondary,\n text: styles.actionText,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { toastDodge } from './dodge.stylex';\n\nconst focusVisible = ':focus-visible:not([data-lobe-focus-ring=\"managed\"])';\nconst forcedColors = '@media (forced-colors: active)';\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst hover = ':hover:not(:active)';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst expanded = ':is([data-expanded]):not([data-starting-style], [data-ending-style])';\nconst swiping = ':is([data-swiping])';\nconst viewportOffsetX = 'var(--toast-viewport-offset-x, 16px)';\nconst viewportOffsetY = 'var(--toast-viewport-offset-y, 16px)';\n\nexport const styles = stylex.create({\n action: {\n borderColor: 'currentcolor',\n borderRadius: cssVar.borderRadiusSM,\n borderStyle: 'none',\n borderWidth: 'medium',\n paddingInline: 12,\n transition: 'background 0.2s, color 0.2s',\n alignItems: 'center',\n cursor: 'pointer',\n display: 'inline-flex',\n flexShrink: 0,\n fontSize: 12,\n fontWeight: 500,\n justifyContent: 'center',\n lineHeight: 1,\n height: 28,\n },\n\n actionDanger: {\n '--lobe-focus-ring-color': cssVar.colorError,\n 'backgroundColor': {\n 'default': cssVar.colorError,\n [hover]: cssVar.colorErrorHover,\n ':active': cssVar.colorErrorActive,\n },\n 'color': cssVar.colorBgLayout,\n 'outlineColor': {\n default: null,\n [focusVisible]: `color-mix(in srgb, ${cssVar.colorError} 90%, transparent)`,\n [forcedColors]: { default: null, [focusVisible]: 'CanvasText' },\n },\n },\n\n actionGhost: {\n borderColor: {\n 'default': cssVar.colorBorder,\n [hover]: cssVar.colorPrimary,\n ':active': cssVar.colorPrimaryActive,\n },\n borderStyle: 'solid',\n borderWidth: 1,\n backgroundColor: 'transparent',\n color: {\n 'default': cssVar.colorText,\n [hover]: cssVar.colorPrimary,\n ':active': cssVar.colorPrimaryActive,\n },\n },\n\n actionPrimary: {\n backgroundColor: {\n 'default': cssVar.colorPrimary,\n [hover]: cssVar.colorPrimaryHover,\n ':active': cssVar.colorPrimaryActive,\n },\n color: cssVar.colorBgLayout,\n },\n\n actionSecondary: {\n backgroundColor: {\n 'default': cssVar.colorFillSecondary,\n [hover]: cssVar.colorFillTertiary,\n ':active': cssVar.colorFill,\n },\n color: cssVar.colorText,\n },\n\n actionText: {\n backgroundColor: {\n 'default': 'transparent',\n [hover]: cssVar.colorFillTertiary,\n ':active': cssVar.colorFillSecondary,\n },\n color: cssVar.colorPrimary,\n },\n\n actions: {\n gap: 8,\n alignItems: 'center',\n alignSelf: 'flex-end',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 0,\n justifyContent: 'flex-end',\n marginBlockStart: 8,\n },\n\n close: {\n padding: 0,\n borderColor: 'currentcolor',\n borderRadius: cssVar.borderRadiusSM,\n borderStyle: 'none',\n borderWidth: 'medium',\n transition: 'all 0.2s',\n alignItems: 'center',\n backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillSecondary },\n color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n marginInlineStart: 'auto',\n height: 20,\n width: 20,\n },\n\n content: {\n overflow: 'hidden',\n transition: 'opacity 0.2s',\n opacity: {\n 'default': null,\n ':is([data-behind]):not([data-expanded])': 0,\n ':is([data-expanded])': 1,\n },\n pointerEvents: {\n 'default': null,\n ':is([data-behind]):not([data-expanded])': 'none',\n ':is([data-expanded])': 'auto',\n },\n },\n\n contentArea: {\n flex: '1',\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n },\n\n description: {\n margin: 0,\n color: cssVar.colorTextSecondary,\n fontSize: 13,\n lineHeight: 1.5,\n },\n\n descriptionStandalone: {\n color: cssVar.colorText,\n },\n\n icon: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n },\n\n root: {\n '--toast-collapsed-height': 'var(--toast-frontmost-height, var(--toast-height))',\n '--toast-gap': '12px',\n '--toast-peek': '12px',\n '--toast-scale': 'calc(1 - var(--toast-index) * 0.05)',\n '--toast-shrink': 'calc(1 - var(--toast-scale))',\n 'borderRadius': `var(--toast-border-radius, ${cssVar.borderRadiusLG})`,\n 'insetInline': 0,\n 'paddingBlock': 12,\n 'paddingInline': 16,\n 'backgroundClip': 'padding-box',\n 'backgroundColor': cssVar.colorBgElevated,\n 'boxShadow': `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n 'boxSizing': 'border-box',\n 'color': cssVar.colorText,\n 'cursor': 'default',\n 'opacity': {\n 'default': null,\n ':is([data-limited], [data-starting-style], [data-ending-style])': 0,\n },\n 'position': 'absolute',\n 'transitionDuration': { default: '0.4s, 0.4s, 0.15s', [swiping]: '0s' },\n 'transitionProperty': { default: 'transform, opacity, height', [swiping]: 'none' },\n 'transitionTimingFunction': {\n default: 'cubic-bezier(0.22, 1, 0.36, 1), ease, ease',\n [swiping]: 'ease',\n },\n 'userSelect': 'none',\n // eslint-disable-next-line @stylexjs/valid-styles -- the rule only allows numeric z-index; calc() is valid CSS\n 'zIndex': 'calc(1000 - var(--toast-index))',\n 'height': {\n 'default': 'var(--toast-collapsed-height)',\n ':is([data-expanded])': 'var(--toast-height)',\n },\n 'width': '100%',\n },\n\n rootBottom: {\n 'insetBlock': 'auto 0',\n 'transform': {\n default:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n [expanded]:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1)) scale(1)',\n [startingOrEnding]: 'translateY(150%)',\n },\n 'transformOrigin': 'bottom center',\n '::after': {\n insetInline: 0,\n content: \"''\",\n insetBlockStart: '100%',\n position: 'absolute',\n height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n },\n },\n\n rootTop: {\n 'insetBlock': '0 auto',\n 'transform': {\n default:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n [expanded]:\n 'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))) scale(1)',\n [startingOrEnding]: 'translateY(-150%)',\n },\n 'transformOrigin': 'top center',\n '::after': {\n insetInline: 0,\n content: \"''\",\n insetBlockEnd: '100%',\n position: 'absolute',\n height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n },\n },\n\n title: {\n margin: 0,\n color: cssVar.colorText,\n fontSize: 14,\n fontWeight: 500,\n lineHeight: 1.5,\n },\n\n titleRow: {\n gap: 8,\n alignItems: 'flex-start',\n display: 'flex',\n },\n\n toastBody: {\n gap: 12,\n alignItems: 'flex-start',\n display: 'flex',\n },\n\n viewport: {\n outline: '0',\n position: 'fixed',\n zIndex: 100_000,\n maxWidth: `calc(100vw - ${viewportOffsetX} * 2)`,\n width: {\n 'default': 'var(--toast-width, 360px)',\n '@media (width <= 480px)': `calc(100vw - ${viewportOffsetX} * 2)`,\n },\n },\n\n viewportBottom: {\n insetBlockEnd: viewportOffsetY,\n insetInlineStart: '50%',\n transform: 'translateX(-50%)',\n },\n\n viewportBottomLeft: {\n insetBlockEnd: viewportOffsetY,\n insetInlineStart: viewportOffsetX,\n },\n\n viewportBottomRight: {\n insetBlockEnd: viewportOffsetY,\n insetInlineEnd: viewportOffsetX,\n transform:\n 'translate(calc(-1 * var(--toast-shift-x, 0px)), calc(-1 * var(--toast-shift-y, 0px)))',\n transitionDuration: { default: toastDodge.duration, [reducedMotion]: '0s' },\n transitionProperty: { default: 'transform', [reducedMotion]: 'none' },\n transitionTimingFunction: { default: cssVar.motionSpringSnappy, [reducedMotion]: 'ease' },\n },\n\n viewportTop: {\n insetBlockStart: viewportOffsetY,\n insetInlineStart: '50%',\n transform: 'translateX(-50%)',\n },\n\n viewportTopLeft: {\n insetBlockStart: viewportOffsetY,\n insetInlineStart: viewportOffsetX,\n },\n\n viewportTopRight: {\n insetBlockStart: viewportOffsetY,\n insetInlineEnd: viewportOffsetX,\n },\n});\n\nexport const viewportPositionStyles = {\n 'bottom': styles.viewportBottom,\n 'bottom-left': styles.viewportBottomLeft,\n 'bottom-right': styles.viewportBottomRight,\n 'top': styles.viewportTop,\n 'top-left': styles.viewportTopLeft,\n 'top-right': styles.viewportTopRight,\n};\n\nexport const rootPositionStyles = {\n 'bottom': styles.rootBottom,\n 'bottom-left': styles.rootBottom,\n 'bottom-right': styles.rootBottom,\n 'top': styles.rootTop,\n 'top-left': styles.rootTop,\n 'top-right': styles.rootTop,\n};\n\nexport const actionVariantStyles = {\n danger: styles.actionDanger,\n ghost: styles.actionGhost,\n primary: styles.actionPrimary,\n secondary: styles.actionSecondary,\n text: styles.actionText,\n};\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { TooltipGroupHandleContext } from "./groupContext.mjs";
|
|
3
3
|
import { useNativeButton } from "../hooks/useNativeButton.mjs";
|
|
4
|
+
import { getElementRef } from "../utils/getElementRef.mjs";
|
|
4
5
|
import { mergeRefs } from "../utils/mergeRefs.mjs";
|
|
5
6
|
import { useMergedTooltipProps } from "./useMergedTooltipProps.mjs";
|
|
6
7
|
import { cloneElement, isValidElement, use, useCallback, useMemo } from "react";
|
|
@@ -89,7 +90,7 @@ const TooltipInGroup = ({ children, ref: refProp, arrow, className, classNames,
|
|
|
89
90
|
...mergedProps,
|
|
90
91
|
id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,
|
|
91
92
|
ref: mergeRefs([
|
|
92
|
-
childElement
|
|
93
|
+
getElementRef(childElement),
|
|
93
94
|
renderProps.ref,
|
|
94
95
|
refProp
|
|
95
96
|
])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipInGroup.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cloneElement, type FC, isValidElement, use, useCallback, useMemo } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { TooltipGroupHandleContext } from './groupContext';\nimport { type TooltipProps } from './type';\nimport { useMergedTooltipProps } from './useMergedTooltipProps';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\nexport const TooltipInGroup: FC<TooltipProps> = ({\n children,\n ref: refProp,\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabled: disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n standalone: _standalone,\n styles,\n title,\n triggerProps: triggerPropsProp,\n zIndex,\n ...restProps\n}) => {\n const tooltipProps = useMemo(\n () => ({\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabled: disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n styles,\n title,\n triggerProps: triggerPropsProp,\n zIndex,\n }),\n [\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n styles,\n title,\n triggerPropsProp,\n zIndex,\n ],\n );\n\n const group = use(TooltipGroupHandleContext);\n const item = useMergedTooltipProps(tooltipProps);\n\n const resolvedOpenDelay = useMemo(() => {\n if (item.openDelay !== undefined) return item.openDelay;\n if (item.mouseEnterDelay !== undefined) return item.mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [item.mouseEnterDelay, item.openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (item.closeDelay !== undefined) return item.closeDelay;\n if (item.mouseLeaveDelay !== undefined) return item.mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [item.closeDelay, item.mouseLeaveDelay]);\n\n const disabled = Boolean(item.disabled);\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const childElement = isValidElement(children) ? children : null;\n const popupTriggerId =\n childElement &&\n (childElement as any).props['aria-haspopup'] !== undefined &&\n (childElement as any).props.id !== undefined\n ? (childElement as any).props.id\n : undefined;\n\n const renderTrigger = useCallback(\n (renderProps: unknown) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return renderProps as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...triggerRest } = renderProps as any;\n return triggerRest;\n })();\n\n const childProps = (childElement as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(childElement as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([(childElement
|
|
1
|
+
{"version":3,"file":"TooltipInGroup.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cloneElement, type FC, isValidElement, use, useCallback, useMemo } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { TooltipGroupHandleContext } from './groupContext';\nimport { type TooltipProps } from './type';\nimport { useMergedTooltipProps } from './useMergedTooltipProps';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\nexport const TooltipInGroup: FC<TooltipProps> = ({\n children,\n ref: refProp,\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabled: disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n standalone: _standalone,\n styles,\n title,\n triggerProps: triggerPropsProp,\n zIndex,\n ...restProps\n}) => {\n const tooltipProps = useMemo(\n () => ({\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabled: disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n styles,\n title,\n triggerProps: triggerPropsProp,\n zIndex,\n }),\n [\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n styles,\n title,\n triggerPropsProp,\n zIndex,\n ],\n );\n\n const group = use(TooltipGroupHandleContext);\n const item = useMergedTooltipProps(tooltipProps);\n\n const resolvedOpenDelay = useMemo(() => {\n if (item.openDelay !== undefined) return item.openDelay;\n if (item.mouseEnterDelay !== undefined) return item.mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [item.mouseEnterDelay, item.openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (item.closeDelay !== undefined) return item.closeDelay;\n if (item.mouseLeaveDelay !== undefined) return item.mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [item.closeDelay, item.mouseLeaveDelay]);\n\n const disabled = Boolean(item.disabled);\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const childElement = isValidElement(children) ? children : null;\n const popupTriggerId =\n childElement &&\n (childElement as any).props['aria-haspopup'] !== undefined &&\n (childElement as any).props.id !== undefined\n ? (childElement as any).props.id\n : undefined;\n\n const renderTrigger = useCallback(\n (renderProps: unknown) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return renderProps as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...triggerRest } = renderProps as any;\n return triggerRest;\n })();\n\n const childProps = (childElement as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(childElement as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([getElementRef(childElement), (renderProps as any).ref, refProp]),\n });\n },\n [childElement, isNativeButtonTriggerElement, refProp, restProps],\n );\n\n // Don't render trigger behavior if no content\n\n if (item.title == null && !item.hotkey) {\n return children as any;\n }\n\n const triggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...item.triggerProps,\n id: popupTriggerId ?? item.triggerProps?.id,\n payload: item,\n };\n\n if (childElement) {\n return (\n <BaseTooltip.Trigger handle={group ?? undefined} {...triggerProps} render={renderTrigger} />\n );\n }\n\n return (\n <BaseTooltip.Trigger handle={group ?? undefined} {...triggerProps} ref={refProp}>\n {children}\n </BaseTooltip.Trigger>\n );\n};\n\nTooltipInGroup.displayName = 'TooltipInGroup';\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAE5B,MAAa,kBAAoC,EAC/C,UACA,KAAK,SACL,OACA,WACA,YACA,YACA,aACA,UAAU,cACV,mBACA,QACA,aACA,iBACA,iBACA,cACA,MACA,WACA,WACA,gBACA,YACA,aACA,iBACA,YAAY,aACZ,QACA,OACA,cAAc,kBACd,QACA,GAAG,gBACC;CACJ,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,YAAY;CAE/C,MAAM,oBAAoB,cAAc;EACtC,IAAI,KAAK,cAAc,KAAA,GAAW,OAAO,KAAK;EAC9C,IAAI,KAAK,oBAAoB,KAAA,GAAW,OAAO,KAAK,kBAAkB;EACtE,OAAO;CACT,GAAG,CAAC,KAAK,iBAAiB,KAAK,SAAS,CAAC;CAEzC,MAAM,qBAAqB,cAAc;EACvC,IAAI,KAAK,eAAe,KAAA,GAAW,OAAO,KAAK;EAC/C,IAAI,KAAK,oBAAoB,KAAA,GAAW,OAAO,KAAK,kBAAkB;EACtE,OAAO;CACT,GAAG,CAAC,KAAK,YAAY,KAAK,eAAe,CAAC;CAE1C,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,iCAAiC,gBAAgB,EACvD,SACF,CAAC;CAED,MAAM,eAAe,eAAe,QAAQ,IAAI,WAAW;CAC3D,MAAM,iBACJ,gBACC,aAAqB,MAAM,qBAAqB,KAAA,KAChD,aAAqB,MAAM,OAAO,KAAA,IAC9B,aAAqB,MAAM,KAC5B,KAAA;CAEN,MAAM,gBAAgB,aACnB,gBAAyB;EAGxB,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,gBAAgB;GAClD,OAAO;EACT,EAAA,CAAG;EAEH,MAAM,aAAc,aAAqB;EACzC,MAAM,cAAc,WAAW,WAAW,YAAY,aAAa;EACnE,MAAM,+BACJ,WAAW,qBAAqB,KAAA,KAAa,WAAW,OAAO,KAAA;EAEjE,OAAO,aAAa,cAAqB;GACvC,GAAG;GACH,IAAI,+BAA+B,WAAW,KAAK,YAAY;GAC/D,KAAK,UAAU;IAAC,cAAc,YAAY;IAAI,YAAoB;IAAK;GAAO,CAAC;EACjF,CAAC;CACH,GACA;EAAC;EAAc;EAA8B;EAAS;CAAS,CACjE;CAIA,IAAI,KAAK,SAAS,QAAQ,CAAC,KAAK,QAC9B,OAAO;CAGT,MAAM,eAAe;EACnB,YAAY;EACZ,OAAO;EACP;EACA,GAAG,KAAK;EACR,IAAI,kBAAkB,KAAK,cAAc;EACzC,SAAS;CACX;CAEA,IAAI,cACF,OACE,oBAACA,QAAY,SAAb;EAAqB,QAAQ,SAAS,KAAA;EAAW,GAAI;EAAc,QAAQ;CAAgB,CAAA;CAI/F,OACE,oBAACA,QAAY,SAAb;EAAqB,QAAQ,SAAS,KAAA;EAAW,GAAI;EAAc,KAAK;EACrE;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
|
|
3
3
|
import { styleProps } from "../styles/stylex/props.mjs";
|
|
4
4
|
import { useNativeButton } from "../hooks/useNativeButton.mjs";
|
|
5
|
+
import { getElementRef } from "../utils/getElementRef.mjs";
|
|
5
6
|
import { mergeRefs } from "../utils/mergeRefs.mjs";
|
|
6
7
|
import { useFloatingLayer } from "../hooks/useFloatingLayer.mjs";
|
|
7
8
|
import { useIsClient } from "../hooks/useIsClient.mjs";
|
|
@@ -98,7 +99,7 @@ const TooltipStandalone = memo(({ children, title, arrow = false, className, cla
|
|
|
98
99
|
...mergedProps,
|
|
99
100
|
id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,
|
|
100
101
|
ref: mergeRefs([
|
|
101
|
-
children
|
|
102
|
+
getElementRef(children),
|
|
102
103
|
props.ref,
|
|
103
104
|
refProp,
|
|
104
105
|
triggerCallbackRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipStandalone.mjs","names":["clsx","BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n isValidElement,\n memo,\n type Ref,\n useCallback,\n useMemo,\n useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n ({\n children,\n title,\n arrow = false,\n className,\n classNames,\n closeDelay,\n defaultOpen = false,\n disabled = false,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n popupContainer,\n styles: customStylesProp,\n zIndex,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n portalProps,\n standalone: _standalone,\n ...restProps\n }) => {\n const isClient = useIsClient();\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n if (node) setTriggerNode(node);\n }, []);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n if (disabled && nextOpen) return;\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [disabled, onOpenChange, open],\n );\n\n const resolvedOpenDelay = useMemo(() => {\n if (openDelay !== undefined) return openDelay;\n if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [mouseEnterDelay, openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (closeDelay !== undefined) return closeDelay;\n if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [closeDelay, mouseLeaveDelay]);\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const slots = useMemo(() => {\n const customStyles = typeof customStylesProp === 'function' ? undefined : customStylesProp;\n return {\n arrow: styleProps(styles.arrow, classNames?.arrow, customStyles?.arrow),\n popup: styleProps(styles.popup, clsx(className, classNames?.root, classNames?.container), {\n ...customStyles?.root,\n ...customStyles?.container,\n }),\n positioner: styleProps(styles.positioner, undefined, { zIndex: zIndex ?? 114_514 }),\n viewport: styleProps(\n styles.viewport,\n clsx('lobe-tooltip-viewport', classNames?.content),\n customStyles?.content,\n ),\n };\n }, [\n className,\n classNames?.arrow,\n classNames?.container,\n classNames?.content,\n classNames?.root,\n customStylesProp,\n zIndex,\n ]);\n\n const triggerElement = useMemo(() => {\n const popupTriggerId =\n isValidElement(children) &&\n (children as any).props['aria-haspopup'] !== undefined &&\n (children as any).props.id !== undefined\n ? (children as any).props.id\n : undefined;\n\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...triggerProps,\n id: popupTriggerId ?? triggerProps?.id,\n };\n\n if (isValidElement(children)) {\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n render={(props) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...triggerRest } = props as any;\n return triggerRest;\n })();\n\n const childProps = (children as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(children as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([\n (children as any).ref,\n (props as any).ref,\n refProp,\n triggerCallbackRef,\n ]),\n });\n }}\n />\n );\n }\n\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n ref={mergeRefs([refProp, triggerCallbackRef]) as Ref<HTMLButtonElement>}\n >\n {children}\n </BaseTooltip.Trigger>\n );\n }, [\n children,\n disabled,\n isNativeButtonTriggerElement,\n refProp,\n resolvedCloseDelay,\n resolvedOpenDelay,\n restProps,\n triggerCallbackRef,\n triggerProps,\n ]);\n\n const customContainer = useMemo(() => {\n if (popupContainer) return popupContainer;\n if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n return getPopupContainer(triggerNode);\n }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n const popup = useMemo(\n () => (\n <BaseTooltip.Positioner\n align={placementConfig.align}\n data-placement={placement}\n side={placementConfig.side}\n sideOffset={baseSideOffset}\n {...slots.positioner}\n {...positionerProps}\n collisionPadding={positionerProps?.collisionPadding ?? getFloatingCollisionPadding()}\n >\n <BaseTooltip.Popup {...slots.popup} {...popupProps}>\n {arrow && <BaseTooltip.Arrow {...slots.arrow}>{TooltipArrowIcon}</BaseTooltip.Arrow>}\n <BaseTooltip.Viewport {...slots.viewport}>\n <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n </BaseTooltip.Viewport>\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n ),\n [\n arrow,\n baseSideOffset,\n hotkey,\n hotkeyProps,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n slots,\n title,\n ],\n );\n\n if (title == null && !hotkey) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <BaseTooltip.Root\n defaultOpen={defaultOpen}\n disabled={disabled}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {resolvedPortalContainer ? (\n <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </BaseTooltip.Portal>\n ) : null}\n </BaseTooltip.Root>\n );\n },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TooltipStandalone.mjs","names":["clsx","BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n isValidElement,\n memo,\n type Ref,\n useCallback,\n useMemo,\n useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n ({\n children,\n title,\n arrow = false,\n className,\n classNames,\n closeDelay,\n defaultOpen = false,\n disabled = false,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n popupContainer,\n styles: customStylesProp,\n zIndex,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n portalProps,\n standalone: _standalone,\n ...restProps\n }) => {\n const isClient = useIsClient();\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n if (node) setTriggerNode(node);\n }, []);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n if (disabled && nextOpen) return;\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [disabled, onOpenChange, open],\n );\n\n const resolvedOpenDelay = useMemo(() => {\n if (openDelay !== undefined) return openDelay;\n if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [mouseEnterDelay, openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (closeDelay !== undefined) return closeDelay;\n if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [closeDelay, mouseLeaveDelay]);\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const slots = useMemo(() => {\n const customStyles = typeof customStylesProp === 'function' ? undefined : customStylesProp;\n return {\n arrow: styleProps(styles.arrow, classNames?.arrow, customStyles?.arrow),\n popup: styleProps(styles.popup, clsx(className, classNames?.root, classNames?.container), {\n ...customStyles?.root,\n ...customStyles?.container,\n }),\n positioner: styleProps(styles.positioner, undefined, { zIndex: zIndex ?? 114_514 }),\n viewport: styleProps(\n styles.viewport,\n clsx('lobe-tooltip-viewport', classNames?.content),\n customStyles?.content,\n ),\n };\n }, [\n className,\n classNames?.arrow,\n classNames?.container,\n classNames?.content,\n classNames?.root,\n customStylesProp,\n zIndex,\n ]);\n\n const triggerElement = useMemo(() => {\n const popupTriggerId =\n isValidElement(children) &&\n (children as any).props['aria-haspopup'] !== undefined &&\n (children as any).props.id !== undefined\n ? (children as any).props.id\n : undefined;\n\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...triggerProps,\n id: popupTriggerId ?? triggerProps?.id,\n };\n\n if (isValidElement(children)) {\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n render={(props) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...triggerRest } = props as any;\n return triggerRest;\n })();\n\n const childProps = (children as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(children as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([\n getElementRef(children),\n (props as any).ref,\n refProp,\n triggerCallbackRef,\n ]),\n });\n }}\n />\n );\n }\n\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n ref={mergeRefs([refProp, triggerCallbackRef]) as Ref<HTMLButtonElement>}\n >\n {children}\n </BaseTooltip.Trigger>\n );\n }, [\n children,\n disabled,\n isNativeButtonTriggerElement,\n refProp,\n resolvedCloseDelay,\n resolvedOpenDelay,\n restProps,\n triggerCallbackRef,\n triggerProps,\n ]);\n\n const customContainer = useMemo(() => {\n if (popupContainer) return popupContainer;\n if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n return getPopupContainer(triggerNode);\n }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n const popup = useMemo(\n () => (\n <BaseTooltip.Positioner\n align={placementConfig.align}\n data-placement={placement}\n side={placementConfig.side}\n sideOffset={baseSideOffset}\n {...slots.positioner}\n {...positionerProps}\n collisionPadding={positionerProps?.collisionPadding ?? getFloatingCollisionPadding()}\n >\n <BaseTooltip.Popup {...slots.popup} {...popupProps}>\n {arrow && <BaseTooltip.Arrow {...slots.arrow}>{TooltipArrowIcon}</BaseTooltip.Arrow>}\n <BaseTooltip.Viewport {...slots.viewport}>\n <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n </BaseTooltip.Viewport>\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n ),\n [\n arrow,\n baseSideOffset,\n hotkey,\n hotkeyProps,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n slots,\n title,\n ],\n );\n\n if (title == null && !hotkey) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <BaseTooltip.Root\n defaultOpen={defaultOpen}\n disabled={disabled}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {resolvedPortalContainer ? (\n <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </BaseTooltip.Portal>\n ) : null}\n </BaseTooltip.Root>\n );\n },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}
|
package/es/Tooltip/style.mjs
CHANGED
|
@@ -54,13 +54,13 @@ const styles = {
|
|
|
54
54
|
"--lobe-tooltip-animation-duration": "lbabgygf lb1fy5egn",
|
|
55
55
|
"--lobe-tooltip-animation-duration-exit": "lb17zxa9l lb15570jz",
|
|
56
56
|
"--lobe-tooltip-animation-ease-in": "lb1czz40j",
|
|
57
|
-
"--lobe-tooltip-animation-ease-out": "
|
|
57
|
+
"--lobe-tooltip-animation-ease-out": "lb19w7cha",
|
|
58
58
|
"--lobe-tooltip-animation-scale": "lb1ezh9a6",
|
|
59
59
|
"--lobe-tooltip-animation-translate": "lb1xzhb9q",
|
|
60
60
|
"--lobe-tooltip-fade-duration": "lbytl4um lb1ae5iqf",
|
|
61
61
|
"--lobe-tooltip-fade-ease": "lb1epvlm",
|
|
62
62
|
"--lobe-tooltip-layout-duration": "lb1rnv61f lb3dl09s",
|
|
63
|
-
"--lobe-tooltip-layout-ease": "
|
|
63
|
+
"--lobe-tooltip-layout-ease": "lbm88wyt",
|
|
64
64
|
"--lobe-tooltip-translate-x": "lb1x6gem7 lbjzfilc lb19p6rg0",
|
|
65
65
|
"--lobe-tooltip-translate-y": "lb1ppaw8e lb1e6wdka lb1rub6d4 lbuhc4zl",
|
|
66
66
|
kfzvcC: "lb1tblq73",
|
package/es/Tooltip/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instant = ':is([data-instant])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst popupLayoutTiming =\n ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nconst springEnter =\n 'linear(0, 0.041, 0.14, 0.268, 0.407, 0.541, 0.662, 0.765, 0.849, 0.915, 0.964, 0.998, 1.02, 1.032, 1.038, 1.039, 1.036, 1.032, 1.027, 1.022, 1.016, 1.012, 1.008, 1.005, 1.003)';\nconst springGlide =\n 'linear(0, 0.041, 0.14, 0.268, 0.407, 0.541, 0.661, 0.765, 0.849, 0.915, 0.964, 0.998, 1.02, 1.032, 1.038, 1.039, 1.036, 1.032, 1.027, 1.022, 1.016, 1.012, 1.008, 1.005, 1.003)';\n\nexport const styles = stylex.create({\n arrow: {\n '--lobe-tooltip-arrow-offset-block': '4px',\n '--lobe-tooltip-arrow-offset-inline': '6px',\n 'transition':\n 'inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease), inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease)',\n 'display': 'flex',\n 'insetBlockEnd': {\n 'default': null,\n \":is([data-side='top'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n },\n 'insetBlockStart': {\n 'default': null,\n \":is([data-side='bottom'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n },\n 'insetInlineEnd': {\n 'default': null,\n \":is([data-side='left'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n },\n 'insetInlineStart': {\n 'default': null,\n \":is([data-side='right'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n },\n 'pointerEvents': 'none',\n 'position': 'absolute',\n 'transform': {\n 'default': null,\n \":is([data-side='left'])\": 'rotate(90deg)',\n \":is([data-side='right'])\": 'rotate(-90deg)',\n \":is([data-side='top'])\": 'rotate(180deg)',\n },\n 'transformOrigin': 'center',\n 'height': 4,\n 'width': 8,\n },\n arrowStroke: {\n stroke: cssVar.colorBorderSecondary,\n },\n arrowSvg: {\n fill: cssVar.colorBgElevated,\n display: 'block',\n height: '100%',\n width: '100%',\n },\n\n popup: {\n borderRadius: cssVar.borderRadiusSM,\n backgroundColor: cssVar.colorBgElevated,\n boxShadow: `${cssVar.boxShadowTertiary}, var(--lobe-ring)`,\n boxSizing: 'border-box',\n color: cssVar.colorTextLabel,\n fontSize: cssVar.fontSizeSM,\n lineHeight: 1.2,\n opacity: { default: null, [startingOrEnding]: 0 },\n position: 'relative',\n transform: {\n default: null,\n [startingOrEnding]:\n 'translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0) scale(var(--lobe-tooltip-animation-scale))',\n },\n transformOrigin: 'var(--transform-origin)',\n /* `transition: none` is spelled out as longhands because StyleX layers longhands above\n shorthands. StyleX does not keep condition order, so the old cascade\n (layout < repop < ending-style < instant) is encoded with :not() guards. */\n transitionDuration: {\n default: 'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration)',\n [instant]: '0s',\n [popupEndingTiming]: 'var(--lobe-tooltip-animation-duration-exit)',\n [popupLayoutTiming]:\n 'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration), var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration)',\n [popupRepopTiming]: '0s',\n },\n transitionProperty: {\n default: 'opacity, transform',\n [instantOrRepop]: 'none',\n [popupLayoutProperty]: 'opacity, transform, width, height',\n },\n /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n as a dropped frame. The spring stays on transform only. */\n transitionTimingFunction: {\n default: 'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out)',\n [instant]: 'ease',\n [popupEndingTiming]: 'var(--lobe-tooltip-animation-ease-in)',\n [popupLayoutTiming]:\n 'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out), var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease)',\n [popupRepopTiming]: 'ease',\n },\n userSelect: 'none',\n /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n snapping — a visible one-frame shift when the measured width is fractional\n (single-line tooltips). */\n willChange: 'transform, opacity',\n height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n /* The 320px cap lives on the viewport, not here: Base UI measures content with\n --available-width set to max-content, and min(320px, max-content) is invalid, which\n recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n snaps to the new size and would freeze the shrink half of the morph. */\n maxWidth: 'var(--available-width)',\n /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n one frame later; the box only morphs if width/height actually read them. */\n width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n },\n\n positioner: {\n /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n change them together with the curves, not independently. */\n '--lobe-tooltip-animation-duration': { default: '280ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-animation-duration-exit': { default: '100ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',\n '--lobe-tooltip-animation-ease-out': springEnter,\n '--lobe-tooltip-animation-scale': '0.97',\n '--lobe-tooltip-animation-translate': '3px',\n '--lobe-tooltip-fade-duration': { default: '160ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-fade-ease': 'cubic-bezier(0.33, 1, 0.68, 1)',\n '--lobe-tooltip-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-layout-ease': springGlide,\n '--lobe-tooltip-translate-x': {\n default: '0',\n [placementLeft]: 'var(--lobe-tooltip-animation-translate)',\n [placementRight]: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n },\n '--lobe-tooltip-translate-y': {\n default: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n [placementLeft]: '0',\n [placementRight]: '0',\n [placementTop]: 'var(--lobe-tooltip-animation-translate)',\n },\n /* Never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n 'pointerEvents': { [anchorHidden]: 'none', default: null },\n 'transitionDuration': {\n default: 'var(--lobe-tooltip-animation-duration)',\n [instantOrRepop]: '0s',\n [positionerLayout]: 'var(--lobe-tooltip-layout-duration)',\n },\n 'transitionProperty': {\n default: 'none',\n [positionerLayout]:\n 'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n },\n 'transitionTimingFunction': {\n default: 'var(--lobe-tooltip-animation-ease-out)',\n [instantOrRepop]: 'ease',\n [positionerLayout]: 'var(--lobe-tooltip-layout-ease)',\n },\n 'visibility': { [anchorHidden]: 'hidden', default: null },\n 'willChange': 'transform, opacity',\n 'zIndex': 114_514,\n 'height': 'var(--positioner-height)',\n 'width': 'min(var(--positioner-width), 320px, var(--available-width))',\n },\n\n viewport: {\n '--lobe-tooltip-content-blur': '4px',\n '--lobe-tooltip-content-shift': '8px',\n '--lobe-tooltip-viewport-inline-padding': '8px',\n 'overflow': 'clip',\n 'paddingBlock': 4,\n 'paddingInline': 'var(--lobe-tooltip-viewport-inline-padding)',\n 'overflowWrap': 'break-word',\n 'position': 'relative',\n 'whiteSpace': 'normal',\n 'maxWidth': 'calc(320px - 2px)',\n },\n});\n"],"mappings":";AAoBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,gCAAgC;EAChC,4BAA4B;EAC5B,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instant = ':is([data-instant])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst popupLayoutTiming =\n ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nexport const styles = stylex.create({\n arrow: {\n '--lobe-tooltip-arrow-offset-block': '4px',\n '--lobe-tooltip-arrow-offset-inline': '6px',\n 'transition':\n 'inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease), inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease)',\n 'display': 'flex',\n 'insetBlockEnd': {\n 'default': null,\n \":is([data-side='top'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n },\n 'insetBlockStart': {\n 'default': null,\n \":is([data-side='bottom'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n },\n 'insetInlineEnd': {\n 'default': null,\n \":is([data-side='left'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n },\n 'insetInlineStart': {\n 'default': null,\n \":is([data-side='right'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n },\n 'pointerEvents': 'none',\n 'position': 'absolute',\n 'transform': {\n 'default': null,\n \":is([data-side='left'])\": 'rotate(90deg)',\n \":is([data-side='right'])\": 'rotate(-90deg)',\n \":is([data-side='top'])\": 'rotate(180deg)',\n },\n 'transformOrigin': 'center',\n 'height': 4,\n 'width': 8,\n },\n arrowStroke: {\n stroke: cssVar.colorBorderSecondary,\n },\n arrowSvg: {\n fill: cssVar.colorBgElevated,\n display: 'block',\n height: '100%',\n width: '100%',\n },\n\n popup: {\n borderRadius: cssVar.borderRadiusSM,\n backgroundColor: cssVar.colorBgElevated,\n boxShadow: `${cssVar.boxShadowTertiary}, var(--lobe-ring)`,\n boxSizing: 'border-box',\n color: cssVar.colorTextLabel,\n fontSize: cssVar.fontSizeSM,\n lineHeight: 1.2,\n opacity: { default: null, [startingOrEnding]: 0 },\n position: 'relative',\n transform: {\n default: null,\n [startingOrEnding]:\n 'translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0) scale(var(--lobe-tooltip-animation-scale))',\n },\n transformOrigin: 'var(--transform-origin)',\n /* `transition: none` is spelled out as longhands because StyleX layers longhands above\n shorthands. StyleX does not keep condition order, so the old cascade\n (layout < repop < ending-style < instant) is encoded with :not() guards. */\n transitionDuration: {\n default: 'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration)',\n [instant]: '0s',\n [popupEndingTiming]: 'var(--lobe-tooltip-animation-duration-exit)',\n [popupLayoutTiming]:\n 'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration), var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration)',\n [popupRepopTiming]: '0s',\n },\n transitionProperty: {\n default: 'opacity, transform',\n [instantOrRepop]: 'none',\n [popupLayoutProperty]: 'opacity, transform, width, height',\n },\n /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n as a dropped frame. The spring stays on transform only. */\n transitionTimingFunction: {\n default: 'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out)',\n [instant]: 'ease',\n [popupEndingTiming]: 'var(--lobe-tooltip-animation-ease-in)',\n [popupLayoutTiming]:\n 'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out), var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease)',\n [popupRepopTiming]: 'ease',\n },\n userSelect: 'none',\n /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n snapping — a visible one-frame shift when the measured width is fractional\n (single-line tooltips). */\n willChange: 'transform, opacity',\n height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n /* The 320px cap lives on the viewport, not here: Base UI measures content with\n --available-width set to max-content, and min(320px, max-content) is invalid, which\n recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n snaps to the new size and would freeze the shrink half of the morph. */\n maxWidth: 'var(--available-width)',\n /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n one frame later; the box only morphs if width/height actually read them. */\n width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n },\n\n positioner: {\n /* motionSpringBouncy is a spring shape normalized to its settle time, so each duration\n here is that spring's settle time — change them together, not independently. */\n '--lobe-tooltip-animation-duration': { default: '280ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-animation-duration-exit': { default: '100ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',\n '--lobe-tooltip-animation-ease-out': cssVar.motionSpringBouncy,\n '--lobe-tooltip-animation-scale': '0.97',\n '--lobe-tooltip-animation-translate': '3px',\n '--lobe-tooltip-fade-duration': { default: '160ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-fade-ease': 'cubic-bezier(0.33, 1, 0.68, 1)',\n '--lobe-tooltip-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n '--lobe-tooltip-layout-ease': cssVar.motionSpringBouncy,\n '--lobe-tooltip-translate-x': {\n default: '0',\n [placementLeft]: 'var(--lobe-tooltip-animation-translate)',\n [placementRight]: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n },\n '--lobe-tooltip-translate-y': {\n default: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n [placementLeft]: '0',\n [placementRight]: '0',\n [placementTop]: 'var(--lobe-tooltip-animation-translate)',\n },\n /* Never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n 'pointerEvents': { [anchorHidden]: 'none', default: null },\n 'transitionDuration': {\n default: 'var(--lobe-tooltip-animation-duration)',\n [instantOrRepop]: '0s',\n [positionerLayout]: 'var(--lobe-tooltip-layout-duration)',\n },\n 'transitionProperty': {\n default: 'none',\n [positionerLayout]:\n 'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n },\n 'transitionTimingFunction': {\n default: 'var(--lobe-tooltip-animation-ease-out)',\n [instantOrRepop]: 'ease',\n [positionerLayout]: 'var(--lobe-tooltip-layout-ease)',\n },\n 'visibility': { [anchorHidden]: 'hidden', default: null },\n 'willChange': 'transform, opacity',\n 'zIndex': 114_514,\n 'height': 'var(--positioner-height)',\n 'width': 'min(var(--positioner-width), 320px, var(--available-width))',\n },\n\n viewport: {\n '--lobe-tooltip-content-blur': '4px',\n '--lobe-tooltip-content-shift': '8px',\n '--lobe-tooltip-viewport-inline-padding': '8px',\n 'overflow': 'clip',\n 'paddingBlock': 4,\n 'paddingInline': 'var(--lobe-tooltip-viewport-inline-padding)',\n 'overflowWrap': 'break-word',\n 'position': 'relative',\n 'whiteSpace': 'normal',\n 'maxWidth': 'calc(320px - 2px)',\n },\n});\n"],"mappings":";AAkBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,gCAAgC;EAChC,4BAA4B;EAC5B,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
|
package/es/color/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ColorScaleItem } from "./types.mjs";
|
|
2
|
+
import { StatusColorScales, statusColorScales } from "./status/index.mjs";
|
|
2
3
|
import blueGeekblueMix from "./colors/blue.mjs";
|
|
3
4
|
import cyan from "./colors/cyan.mjs";
|
|
4
5
|
import geekblue from "./colors/geekblue.mjs";
|
|
@@ -22,4 +23,4 @@ import sage from "./neutrals/sage.mjs";
|
|
|
22
23
|
import sand from "./neutrals/sand.mjs";
|
|
23
24
|
import slate from "./neutrals/slate.mjs";
|
|
24
25
|
import { NeutralColorScales, neutralColorScales } from "./neutrals/index.mjs";
|
|
25
|
-
export { type ColorScaleItem, ColorScales, type ColorScalesProps, ColorScales$1 as CssVar, NeutralColorScales, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };
|
|
26
|
+
export { type ColorScaleItem, ColorScales, type ColorScalesProps, ColorScales$1 as CssVar, NeutralColorScales, type StatusColorScales, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, statusColorScales, volcano, yellow };
|
package/es/color/index.mjs
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { statusColorScales } from "./status/index.mjs";
|
|
1
2
|
import blueGeekblueMix from "./colors/blue.mjs";
|
|
2
3
|
import cyan from "./colors/cyan.mjs";
|
|
3
4
|
import geekblue from "./colors/geekblue.mjs";
|
|
@@ -21,4 +22,4 @@ import slate from "./neutrals/slate.mjs";
|
|
|
21
22
|
import { neutralColorScales } from "./neutrals/index.mjs";
|
|
22
23
|
import ColorScales from "./ColorScales/index.mjs";
|
|
23
24
|
import ColorScales$1 from "./CssVar/index.mjs";
|
|
24
|
-
export { ColorScales, ColorScales$1 as CssVar, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };
|
|
25
|
+
export { ColorScales, ColorScales$1 as CssVar, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, statusColorScales, volcano, yellow };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
//#region src/color/status/error.ts
|
|
2
|
+
const error = {
|
|
3
|
+
dark: [
|
|
4
|
+
"#190a09",
|
|
5
|
+
"#340b0c",
|
|
6
|
+
"#4b141a",
|
|
7
|
+
"#641f24",
|
|
8
|
+
"#8a3334",
|
|
9
|
+
"#aa3f3e",
|
|
10
|
+
"#b53a3a",
|
|
11
|
+
"#be3738",
|
|
12
|
+
"#d64242",
|
|
13
|
+
"#e95350",
|
|
14
|
+
"#ffa8a0",
|
|
15
|
+
"#ffe1df",
|
|
16
|
+
"#fff8f7"
|
|
17
|
+
],
|
|
18
|
+
darkA: [
|
|
19
|
+
"rgba(250, 100, 90, 0.1)",
|
|
20
|
+
"rgba(248, 52, 57, 0.21)",
|
|
21
|
+
"rgba(250, 67, 87, 0.3)",
|
|
22
|
+
"rgba(250, 78, 90, 0.4)",
|
|
23
|
+
"rgba(251, 93, 95, 0.55)",
|
|
24
|
+
"rgba(254, 94, 93, 0.67)",
|
|
25
|
+
"rgba(255, 82, 82, 0.71)",
|
|
26
|
+
"rgba(253, 73, 75, 0.75)",
|
|
27
|
+
"rgba(255, 79, 79, 0.84)",
|
|
28
|
+
"rgba(253, 90, 87, 0.92)",
|
|
29
|
+
"#ffa8a0",
|
|
30
|
+
"#ffe1df",
|
|
31
|
+
"#fff8f7"
|
|
32
|
+
],
|
|
33
|
+
light: [
|
|
34
|
+
"#ffffff",
|
|
35
|
+
"#fef8f7",
|
|
36
|
+
"#fff0ee",
|
|
37
|
+
"#ffe7e4",
|
|
38
|
+
"#ffded8",
|
|
39
|
+
"#ffcec5",
|
|
40
|
+
"#ffb9ab",
|
|
41
|
+
"#ff9c88",
|
|
42
|
+
"#ff775c",
|
|
43
|
+
"#f35837",
|
|
44
|
+
"#ce461e",
|
|
45
|
+
"#9b3206",
|
|
46
|
+
"#64260f"
|
|
47
|
+
],
|
|
48
|
+
lightA: [
|
|
49
|
+
"rgba(255, 255, 255, 0.01)",
|
|
50
|
+
"rgba(230, 80, 55, 0.04)",
|
|
51
|
+
"rgba(255, 41, 12, 0.07)",
|
|
52
|
+
"rgba(255, 37, 10, 0.11)",
|
|
53
|
+
"rgba(255, 49, 11, 0.16)",
|
|
54
|
+
"rgba(255, 42, 3, 0.23)",
|
|
55
|
+
"rgba(255, 43, 0, 0.33)",
|
|
56
|
+
"rgba(255, 44, 2, 0.47)",
|
|
57
|
+
"rgba(255, 43, 0, 0.64)",
|
|
58
|
+
"rgba(240, 44, 2, 0.79)",
|
|
59
|
+
"#ce461e",
|
|
60
|
+
"#9b3206",
|
|
61
|
+
"#64260f"
|
|
62
|
+
]
|
|
63
|
+
};
|
|
64
|
+
//#endregion
|
|
65
|
+
export { error };
|
|
66
|
+
|
|
67
|
+
//# sourceMappingURL=error.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"error.mjs","names":[],"sources":["../../../src/color/status/error.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\n\nexport const error: ColorScaleItem = {\n dark: [\n '#190a09',\n '#340b0c',\n '#4b141a',\n '#641f24',\n '#8a3334',\n '#aa3f3e',\n '#b53a3a',\n '#be3738',\n '#d64242',\n '#e95350',\n '#ffa8a0',\n '#ffe1df',\n '#fff8f7',\n ],\n darkA: [\n 'rgba(250, 100, 90, 0.1)',\n 'rgba(248, 52, 57, 0.21)',\n 'rgba(250, 67, 87, 0.3)',\n 'rgba(250, 78, 90, 0.4)',\n 'rgba(251, 93, 95, 0.55)',\n 'rgba(254, 94, 93, 0.67)',\n 'rgba(255, 82, 82, 0.71)',\n 'rgba(253, 73, 75, 0.75)',\n 'rgba(255, 79, 79, 0.84)',\n 'rgba(253, 90, 87, 0.92)',\n '#ffa8a0',\n '#ffe1df',\n '#fff8f7',\n ],\n light: [\n '#ffffff',\n '#fef8f7',\n '#fff0ee',\n '#ffe7e4',\n '#ffded8',\n '#ffcec5',\n '#ffb9ab',\n '#ff9c88',\n '#ff775c',\n '#f35837',\n '#ce461e',\n '#9b3206',\n '#64260f',\n ],\n lightA: [\n 'rgba(255, 255, 255, 0.01)',\n 'rgba(230, 80, 55, 0.04)',\n 'rgba(255, 41, 12, 0.07)',\n 'rgba(255, 37, 10, 0.11)',\n 'rgba(255, 49, 11, 0.16)',\n 'rgba(255, 42, 3, 0.23)',\n 'rgba(255, 43, 0, 0.33)',\n 'rgba(255, 44, 2, 0.47)',\n 'rgba(255, 43, 0, 0.64)',\n 'rgba(240, 44, 2, 0.79)',\n '#ce461e',\n '#9b3206',\n '#64260f',\n ],\n};\n"],"mappings":";AAEA,MAAa,QAAwB;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ColorScaleItem } from "../types.mjs";
|
|
2
|
+
//#region src/color/status/index.d.ts
|
|
3
|
+
export interface StatusColorScales {
|
|
4
|
+
error: ColorScaleItem;
|
|
5
|
+
info: ColorScaleItem;
|
|
6
|
+
success: ColorScaleItem;
|
|
7
|
+
warning: ColorScaleItem;
|
|
8
|
+
}
|
|
9
|
+
export declare const statusColorScales: StatusColorScales;
|
|
10
|
+
//#endregion
|
|
11
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { error } from "./error.mjs";
|
|
2
|
+
import { info } from "./info.mjs";
|
|
3
|
+
import { success } from "./success.mjs";
|
|
4
|
+
import { warning } from "./warning.mjs";
|
|
5
|
+
//#region src/color/status/index.ts
|
|
6
|
+
const statusColorScales = {
|
|
7
|
+
error,
|
|
8
|
+
info,
|
|
9
|
+
success,
|
|
10
|
+
warning
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { statusColorScales };
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/color/status/index.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\nimport { error } from './error';\nimport { info } from './info';\nimport { success } from './success';\nimport { warning } from './warning';\n\nexport interface StatusColorScales {\n error: ColorScaleItem;\n info: ColorScaleItem;\n success: ColorScaleItem;\n warning: ColorScaleItem;\n}\n\nexport const statusColorScales: StatusColorScales = {\n error,\n info,\n success,\n warning,\n};\n"],"mappings":";;;;;AAaA,MAAa,oBAAuC;CAClD;CACA;CACA;CACA;AACF"}
|