@spaced-out/genesis-mcp 1.0.37 → 1.0.39
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/data/design-system.json +6 -6
- package/package.json +1 -1
package/data/design-system.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"buildDate": "2026-
|
|
4
|
-
"version": "0.6.
|
|
3
|
+
"buildDate": "2026-07-09T08:41:25.021Z",
|
|
4
|
+
"version": "0.6.26",
|
|
5
5
|
"designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
|
|
6
6
|
},
|
|
7
7
|
"components": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"story": {
|
|
35
35
|
"path": "Accordion.stories.tsx",
|
|
36
|
-
"content": "import * as React from 'react';\n\nimport type {AccordionPropsType} from 'src/components/Accordion/Accordion';\nimport {Accordion} from 'src/components/Accordion/Accordion';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Accordion/Accordion',\n component: Accordion,\n argTypes: {\n classNames: {\n description:\n 'Optional class name overrides for styling parts of the accordion. Keys include: wrapper, headerWrapper, header, content.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, headerWrapper?: string, header?: string, content?: string}',\n },\n },\n },\n header: {\n description:\n 'A React node that renders the visible header of the accordion. This typically includes a title or label for the section. It can be a string, JSX, or any React element.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n id: {\n description:\n 'A unique string identifier for the accordion instance. Required when used inside an AccordionGroup to control open/close or disabled states via openedIds and disabledIds arrays.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n children: {\n description:\n 'The content to be shown inside the accordion when it is expanded. Can be a string, JSX, or any valid React node. This content remains hidden when the accordion is collapsed.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n isOpen: {\n description: 'Controls whether the accordion is open or closed.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n disabled: {\n description:\n 'Disables
|
|
36
|
+
"content": "import * as React from 'react';\n\nimport type {AccordionPropsType} from 'src/components/Accordion/Accordion';\nimport {Accordion} from 'src/components/Accordion/Accordion';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Accordion/Accordion',\n component: Accordion,\n argTypes: {\n classNames: {\n description:\n 'Optional class name overrides for styling parts of the accordion. Keys include: wrapper, headerWrapper, header, content.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, headerWrapper?: string, header?: string, content?: string}',\n },\n },\n },\n header: {\n description:\n 'A React node that renders the visible header of the accordion. This typically includes a title or label for the section. It can be a string, JSX, or any React element.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n id: {\n description:\n 'A unique string identifier for the accordion instance. Required when used inside an AccordionGroup to control open/close or disabled states via openedIds and disabledIds arrays.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n children: {\n description:\n 'The content to be shown inside the accordion when it is expanded. Can be a string, JSX, or any valid React node. This content remains hidden when the accordion is collapsed.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n isOpen: {\n description: 'Controls whether the accordion is open or closed.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n disabled: {\n description:\n 'Disables only the toggle switch (when showToggle is true), locking it in its current on/off state. Expanding and collapsing the accordion remain available toggle is on.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n showToggle: {\n description: 'Displays a toggle switch to enable/disable the accordion',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onChange: {\n description: 'Callback triggered when the accordion is opened or closed.',\n control: false,\n table: {\n type: {\n summary: '(id?: string, isOpen: boolean) => mixed',\n },\n },\n },\n onToggle: {\n description:\n 'Callback triggered when the enable/disable toggle is clicked.',\n control: false,\n table: {\n type: {\n summary: '(checked?: boolean) => mixed',\n },\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates an Accordion component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Accordion } from \"@spaced-out/ui-design-system/lib/components/Accordion\";\n\\`\\`\\`\nThe Accordion component is a collapsible UI element used to toggle the visibility of content sections. It can be used independently or within and AccordionGroup.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Accordion/Accordion',\n },\n },\n};\n\nexport const DefaultStory = (args: AccordionPropsType): React.ReactNode => {\n const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);\n const [checked, setChecked] = React.useState(args.checked ?? false);\n\n const onToggleHandler = (checked: boolean) => {\n args.onToggle?.(checked);\n setChecked(checked);\n setIsOpened(checked);\n };\n return (\n <Accordion\n {...args}\n isOpen={isOpened}\n checked={checked}\n onToggle={onToggleHandler}\n >\n <div>\n Accordions allow you to organize content into collapsible sections. This\n improves page readability and reduces visual clutter. Click the header\n to expand or collapse this section.\n </div>\n </Accordion>\n );\n};\n\nDefaultStory.args = {\n classNames: {wrapper: ''},\n id: 'ac1',\n header: 'What is an Accordion?',\n testId: 'accordion-default-story',\n};\n\nexport const WithToggleStory = (args: AccordionPropsType): React.ReactNode => {\n const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);\n const [checked, setChecked] = React.useState(args.checked);\n\n const onToggleHandler = (checked: boolean) => {\n args.onToggle?.(checked);\n setIsOpened(checked);\n setChecked(checked);\n };\n\n React.useEffect(() => {\n setIsOpened(args.isOpen ?? false);\n }, [args.isOpen]);\n\n return (\n <Accordion\n {...args}\n isOpen={isOpened}\n checked={checked}\n header={'What is an Accordion?'}\n onToggle={onToggleHandler}\n >\n <div>\n Accordions allow you to organize content into collapsible sections. This\n improves page readability and reduces visual clutter. Click the header\n to expand or collapse this section.\n </div>\n </Accordion>\n );\n};\nWithToggleStory.args = {\n classNames: {wrapper: ''},\n id: 'ac1',\n showToggle: true,\n checked: false,\n testId: 'accordion-with-toggle-story',\n};\nDefaultStory.storyName = 'Default';\nWithToggleStory.storyName = 'With Toggle';\n"
|
|
37
37
|
},
|
|
38
38
|
"css": {
|
|
39
39
|
"path": "Accordion.module.css",
|
|
@@ -434,7 +434,7 @@
|
|
|
434
434
|
},
|
|
435
435
|
"DonutChart/DonutChart.d.ts": {
|
|
436
436
|
"path": "DonutChart/DonutChart.d.ts",
|
|
437
|
-
"content": "import * as React from 'react';\nimport type { ChartOptions, Drilldown, LegendOptionsType, PieSeriesOptions } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly<ChartWrapperClassNames & {\n highChart?: string;\n subtitleClassNames?: SubtitleClassNames;\n}>;\ninterface SubtitleClassNames {\n wrapper?: string;\n text?: string;\n subtext?: string;\n}\nexport interface DonutChartProps extends Omit<ChartOptions, 'isLoading' | 'classNames' | 'cardTitle' | 'customExportOptions' | 'headerActions' | 'centerText' | 'centerSubtext' | 'series' | 'drilldown' | 'legend' | 'hasEmptyData' | 'emptyText'> {\n isLoading?: boolean;\n classNames?: ClassNames;\n cardTitle?: React.ReactNode;\n customExportOptions?: Array<ExportOptionType> | null;\n headerActions?: React.ReactNode;\n centerText?: string;\n centerSubtext?: string;\n series: Array<PieSeriesOptions>;\n drilldown?: Drilldown;\n legend?: LegendOptionsType;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const DonutChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, hasEmptyData, emptyText, testId, ...userOptions }: DonutChartProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=DonutChart.d.ts.map"
|
|
437
|
+
"content": "import * as React from 'react';\nimport type { ChartOptions, Drilldown, LegendOptionsType, PieSeriesOptions } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly<ChartWrapperClassNames & {\n highChart?: string;\n subtitleClassNames?: SubtitleClassNames;\n}>;\ninterface SubtitleClassNames {\n wrapper?: string;\n text?: string;\n subtext?: string;\n}\nexport interface DonutChartProps extends Omit<ChartOptions, 'isLoading' | 'classNames' | 'cardTitle' | 'customExportOptions' | 'headerActions' | 'centerText' | 'centerSubtext' | 'series' | 'drilldown' | 'legend' | 'hasEmptyData' | 'emptyText'> {\n isLoading?: boolean;\n classNames?: ClassNames;\n cardTitle?: React.ReactNode;\n customExportOptions?: Array<ExportOptionType> | null;\n headerActions?: React.ReactNode;\n centerText?: string;\n centerSubtext?: string;\n showTotal?: boolean;\n showLegendValues?: boolean;\n formatValue?: (value: number) => string;\n series: Array<PieSeriesOptions>;\n drilldown?: Drilldown;\n legend?: LegendOptionsType;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const DonutChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, showTotal, showLegendValues, formatValue, hasEmptyData, emptyText, testId, ...userOptions }: DonutChartProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=DonutChart.d.ts.map"
|
|
438
438
|
},
|
|
439
439
|
"DonutChart/index.d.ts": {
|
|
440
440
|
"path": "DonutChart/index.d.ts",
|
|
@@ -5026,7 +5026,7 @@
|
|
|
5026
5026
|
},
|
|
5027
5027
|
"donutChart.d.ts": {
|
|
5028
5028
|
"path": "donutChart.d.ts",
|
|
5029
|
-
"content": "import type { ChartOptions, LegendOptionsType } from '../../types/charts';\ninterface DonutChartPropsType {\n legend?: LegendOptionsType;\n defaultCenterHTML?: string;\n}\nexport declare const rightLegendColumn: {\n readonly layout: \"vertical\";\n readonly align: \"right\";\n readonly verticalAlign: \"middle\";\n readonly itemMarginBottom: 12;\n readonly symbolPadding: 8;\n readonly symbolWidth: 8;\n readonly width: \"36%\";\n};\n/**\n * This function modifies the the common chart behavior to donut chart default behavior.\n * It will not take userPassed option into account.\n */\nexport declare const getDonutChartOptions: ({ legend, defaultCenterHTML, }: DonutChartPropsType) => ChartOptions;\nexport {};\n//# sourceMappingURL=donutChart.d.ts.map"
|
|
5029
|
+
"content": "import type { ChartOptions, LegendOptionsType } from '../../types/charts';\ninterface DonutChartPropsType {\n legend?: LegendOptionsType;\n defaultCenterHTML?: string;\n /**\n * Formatter for each legend item. When provided, the legend renders as HTML\n * so items can show the point value and percentage alongside the name.\n */\n legendLabelFormatter?: LegendOptionsType['labelFormatter'];\n /**\n * Formats the center total for a given value. When provided, the center is\n * recomputed from the visible points on every render (applied via\n * textContent) so an auto-computed total stays in sync with the\n * (redistributed) legend percentages after a slice is toggled off.\n */\n getCenterTextForVisibleTotal?: (visibleTotal: number) => string;\n}\n/**\n * Marker class on the center total element. The auto-total's text is updated\n * in place (via textContent) as slices are toggled, so it must be locatable\n * without rebuilding the subtitle HTML. A class is used (not a data-attribute)\n * because Highcharts' useHTML sanitizer keeps the class attribute but strips\n * unknown data-* attributes.\n */\nexport declare const CENTER_TOTAL_CLASS = \"donut-center-total\";\nexport declare const rightLegendColumn: {\n readonly layout: \"vertical\";\n readonly align: \"right\";\n readonly verticalAlign: \"middle\";\n readonly itemMarginBottom: 12;\n readonly symbolPadding: 8;\n readonly symbolWidth: 8;\n readonly width: \"36%\";\n};\n/**\n * This function modifies the the common chart behavior to donut chart default behavior.\n * It will not take userPassed option into account.\n */\nexport declare const getDonutChartOptions: ({ legend, defaultCenterHTML, legendLabelFormatter, getCenterTextForVisibleTotal, }: DonutChartPropsType) => ChartOptions;\nexport {};\n//# sourceMappingURL=donutChart.d.ts.map"
|
|
5030
5030
|
},
|
|
5031
5031
|
"funnelChart.d.ts": {
|
|
5032
5032
|
"path": "funnelChart.d.ts",
|
|
@@ -5034,7 +5034,7 @@
|
|
|
5034
5034
|
},
|
|
5035
5035
|
"helpers.d.ts": {
|
|
5036
5036
|
"path": "helpers.d.ts",
|
|
5037
|
-
"content": "export declare const deepMerge: <T extends object>(obj1: Partial<T> | null | undefined, obj2: Partial<T> | null | undefined, ...args: Array<Partial<T> | null | undefined>) => T;\nexport declare const rightLineLegendColumn: {\n readonly layout: \"vertical\";\n readonly align: \"right\";\n readonly verticalAlign: \"middle\";\n readonly itemMarginBottom: 12;\n readonly symbolPadding: 4;\n readonly symbolWidth: 16;\n readonly width: \"40%\";\n};\nexport declare const bottomLegendRow: {\n readonly layout: \"horizontal\";\n readonly align: \"center\";\n readonly verticalAlign: \"bottom\";\n readonly itemDistance: 20;\n readonly symbolPadding: 4;\n readonly symbolWidth: 16;\n};\nexport declare const yAxisTitleStyle: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const xAxisTitleStyle: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const yAxisLabelStyle: {\n readonly fontSize: \"12px\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly letterSpacing: \"0em\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const xAxisLabelStyle: {\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0.01em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const activeLabelStyle: {\n readonly color: \"#17172A\";\n readonly fill: \"#17172A\";\n readonly textDecoration: \"underline\";\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0.01em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\n//# sourceMappingURL=helpers.d.ts.map"
|
|
5037
|
+
"content": "export declare const deepMerge: <T extends object>(obj1: Partial<T> | null | undefined, obj2: Partial<T> | null | undefined, ...args: Array<Partial<T> | null | undefined>) => T;\n/**\n * Default number formatter used by charts for center totals and legend values.\n * Abbreviates large numbers into a compact, locale-aware form, keeping up to\n * two decimal places (e.g. 1460 -> \"1.46K\", 1260 -> \"1.26K\", 1200 -> \"1.2K\",\n * 200 -> \"200\").\n */\nexport declare const formatCompactNumber: (value: number) => string;\nexport declare const rightLineLegendColumn: {\n readonly layout: \"vertical\";\n readonly align: \"right\";\n readonly verticalAlign: \"middle\";\n readonly itemMarginBottom: 12;\n readonly symbolPadding: 4;\n readonly symbolWidth: 16;\n readonly width: \"40%\";\n};\nexport declare const bottomLegendRow: {\n readonly layout: \"horizontal\";\n readonly align: \"center\";\n readonly verticalAlign: \"bottom\";\n readonly itemDistance: 20;\n readonly symbolPadding: 4;\n readonly symbolWidth: 16;\n};\nexport declare const yAxisTitleStyle: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const xAxisTitleStyle: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const yAxisLabelStyle: {\n readonly fontSize: \"12px\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly letterSpacing: \"0em\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const xAxisLabelStyle: {\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0.01em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const activeLabelStyle: {\n readonly color: \"#17172A\";\n readonly fill: \"#17172A\";\n readonly textDecoration: \"underline\";\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0.01em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\n//# sourceMappingURL=helpers.d.ts.map"
|
|
5038
5038
|
},
|
|
5039
5039
|
"index.d.ts": {
|
|
5040
5040
|
"path": "index.d.ts",
|
package/package.json
CHANGED