@emeraldemperaur/vector-sigma 1.4.23 → 1.4.25
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/lib/index.cjs +12 -8
- package/lib/index.esm.js +12 -8
- package/lib/types/layouts/accordion/accordion.d.ts +15 -1
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -48522,7 +48522,7 @@ const Row = ({ children, className, gap = "4" }) => {
|
|
|
48522
48522
|
};
|
|
48523
48523
|
|
|
48524
48524
|
const AccordionContext = React.createContext({ design: 'outline' });
|
|
48525
|
-
const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, width = 12, newRow, className, style, children }) => {
|
|
48525
|
+
const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, brandcolor, titleColor, width = 12, newRow, className, style, children }) => {
|
|
48526
48526
|
const containerRef = React.useRef(null);
|
|
48527
48527
|
const [neuVars, setNeuVars] = React.useState({});
|
|
48528
48528
|
React.useEffect(() => {
|
|
@@ -48540,9 +48540,9 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48540
48540
|
children
|
|
48541
48541
|
};
|
|
48542
48542
|
const accordionRoot = allowMultiple ? (React.createElement(Root2$4, Object.assign({ type: "multiple", defaultValue: defaultOpenId ? [defaultOpenId] : undefined }, sharedProps))) : (React.createElement(Root2$4, Object.assign({ type: "single", defaultValue: defaultOpenId || undefined, collapsible: true }, sharedProps)));
|
|
48543
|
-
return (React.createElement(AccordionContext.Provider, { value: { design } },
|
|
48543
|
+
return (React.createElement(AccordionContext.Provider, { value: { design, brandcolor, titleColor } },
|
|
48544
48544
|
React.createElement(Column, { span: width, newLine: newRow },
|
|
48545
|
-
React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign({ width: '100%' }, style), neuVars) },
|
|
48545
|
+
React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})), (titleColor ? { '--accordion-title-color': titleColor } : {})) },
|
|
48546
48546
|
React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
48547
48547
|
@keyframes slideDown {
|
|
48548
48548
|
from { height: 0; opacity: 0; }
|
|
@@ -48565,13 +48565,15 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48565
48565
|
}
|
|
48566
48566
|
.v-accordion-chevron {
|
|
48567
48567
|
transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
|
48568
|
-
color
|
|
48568
|
+
/* Inherit custom title color if provided, else fallback to gray */
|
|
48569
|
+
color: var(--accordion-title-color, var(--gray-10));
|
|
48569
48570
|
}
|
|
48570
48571
|
|
|
48571
48572
|
.v-accordion-root-outline {
|
|
48572
48573
|
border: 1px solid var(--gray-6);
|
|
48573
48574
|
border-radius: var(--radius-3);
|
|
48574
48575
|
background-color: transparent;
|
|
48576
|
+
overflow: hidden;
|
|
48575
48577
|
}
|
|
48576
48578
|
.v-accordion-item-outline {
|
|
48577
48579
|
border-bottom: 1px solid var(--gray-6);
|
|
@@ -48584,6 +48586,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48584
48586
|
border-radius: var(--radius-3);
|
|
48585
48587
|
background-color: var(--color-surface);
|
|
48586
48588
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
48589
|
+
overflow: hidden;
|
|
48587
48590
|
}
|
|
48588
48591
|
.v-accordion-item-material {
|
|
48589
48592
|
border-bottom: 1px solid var(--gray-4);
|
|
@@ -48598,16 +48601,16 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48598
48601
|
.v-accordion-root-neumorphic {
|
|
48599
48602
|
display: flex;
|
|
48600
48603
|
flex-direction: column;
|
|
48601
|
-
gap: 16px;
|
|
48604
|
+
gap: 16px;
|
|
48602
48605
|
}
|
|
48603
48606
|
.v-accordion-item-neumorphic {
|
|
48604
48607
|
background-color: var(--neu-bg);
|
|
48605
48608
|
border-radius: 12px;
|
|
48606
48609
|
box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
|
|
48607
48610
|
transition: all 0.3s ease;
|
|
48611
|
+
overflow: hidden;
|
|
48608
48612
|
}
|
|
48609
48613
|
.v-accordion-item-neumorphic[data-state='open'] {
|
|
48610
|
-
/* Pressed-in effect when open */
|
|
48611
48614
|
box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
|
|
48612
48615
|
}
|
|
48613
48616
|
|
|
@@ -48621,6 +48624,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48621
48624
|
cursor: pointer;
|
|
48622
48625
|
font-family: var(--default-font-family);
|
|
48623
48626
|
box-sizing: border-box;
|
|
48627
|
+
background-color: var(--accordion-header-bg, transparent);
|
|
48624
48628
|
}
|
|
48625
48629
|
.v-accordion-trigger:disabled {
|
|
48626
48630
|
cursor: not-allowed;
|
|
@@ -48635,8 +48639,8 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
|
|
|
48635
48639
|
React.createElement(Header, { style: { margin: 0 } },
|
|
48636
48640
|
React.createElement(Trigger2, { className: "v-accordion-trigger" },
|
|
48637
48641
|
React.createElement(p$5, { align: "center", gap: "3" },
|
|
48638
|
-
icon && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accent-9)' } }, icon)),
|
|
48639
|
-
React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--gray-12)' } }, title)),
|
|
48642
|
+
icon && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accordion-title-color, var(--accent-9))' } }, icon)),
|
|
48643
|
+
React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
|
|
48640
48644
|
React.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
|
|
48641
48645
|
React.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
|
|
48642
48646
|
React.createElement("div", { style: { padding: '0 16px 16px 16px' } },
|
package/lib/index.esm.js
CHANGED
|
@@ -48502,7 +48502,7 @@ const Row = ({ children, className, gap = "4" }) => {
|
|
|
48502
48502
|
};
|
|
48503
48503
|
|
|
48504
48504
|
const AccordionContext = createContext({ design: 'outline' });
|
|
48505
|
-
const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, width = 12, newRow, className, style, children }) => {
|
|
48505
|
+
const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, brandcolor, titleColor, width = 12, newRow, className, style, children }) => {
|
|
48506
48506
|
const containerRef = useRef(null);
|
|
48507
48507
|
const [neuVars, setNeuVars] = useState({});
|
|
48508
48508
|
useEffect(() => {
|
|
@@ -48520,9 +48520,9 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48520
48520
|
children
|
|
48521
48521
|
};
|
|
48522
48522
|
const accordionRoot = allowMultiple ? (React__default.createElement(Root2$4, Object.assign({ type: "multiple", defaultValue: defaultOpenId ? [defaultOpenId] : undefined }, sharedProps))) : (React__default.createElement(Root2$4, Object.assign({ type: "single", defaultValue: defaultOpenId || undefined, collapsible: true }, sharedProps)));
|
|
48523
|
-
return (React__default.createElement(AccordionContext.Provider, { value: { design } },
|
|
48523
|
+
return (React__default.createElement(AccordionContext.Provider, { value: { design, brandcolor, titleColor } },
|
|
48524
48524
|
React__default.createElement(Column, { span: width, newLine: newRow },
|
|
48525
|
-
React__default.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign({ width: '100%' }, style), neuVars) },
|
|
48525
|
+
React__default.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})), (titleColor ? { '--accordion-title-color': titleColor } : {})) },
|
|
48526
48526
|
React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
48527
48527
|
@keyframes slideDown {
|
|
48528
48528
|
from { height: 0; opacity: 0; }
|
|
@@ -48545,13 +48545,15 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48545
48545
|
}
|
|
48546
48546
|
.v-accordion-chevron {
|
|
48547
48547
|
transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
|
48548
|
-
color
|
|
48548
|
+
/* Inherit custom title color if provided, else fallback to gray */
|
|
48549
|
+
color: var(--accordion-title-color, var(--gray-10));
|
|
48549
48550
|
}
|
|
48550
48551
|
|
|
48551
48552
|
.v-accordion-root-outline {
|
|
48552
48553
|
border: 1px solid var(--gray-6);
|
|
48553
48554
|
border-radius: var(--radius-3);
|
|
48554
48555
|
background-color: transparent;
|
|
48556
|
+
overflow: hidden;
|
|
48555
48557
|
}
|
|
48556
48558
|
.v-accordion-item-outline {
|
|
48557
48559
|
border-bottom: 1px solid var(--gray-6);
|
|
@@ -48564,6 +48566,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48564
48566
|
border-radius: var(--radius-3);
|
|
48565
48567
|
background-color: var(--color-surface);
|
|
48566
48568
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
48569
|
+
overflow: hidden;
|
|
48567
48570
|
}
|
|
48568
48571
|
.v-accordion-item-material {
|
|
48569
48572
|
border-bottom: 1px solid var(--gray-4);
|
|
@@ -48578,16 +48581,16 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48578
48581
|
.v-accordion-root-neumorphic {
|
|
48579
48582
|
display: flex;
|
|
48580
48583
|
flex-direction: column;
|
|
48581
|
-
gap: 16px;
|
|
48584
|
+
gap: 16px;
|
|
48582
48585
|
}
|
|
48583
48586
|
.v-accordion-item-neumorphic {
|
|
48584
48587
|
background-color: var(--neu-bg);
|
|
48585
48588
|
border-radius: 12px;
|
|
48586
48589
|
box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
|
|
48587
48590
|
transition: all 0.3s ease;
|
|
48591
|
+
overflow: hidden;
|
|
48588
48592
|
}
|
|
48589
48593
|
.v-accordion-item-neumorphic[data-state='open'] {
|
|
48590
|
-
/* Pressed-in effect when open */
|
|
48591
48594
|
box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
|
|
48592
48595
|
}
|
|
48593
48596
|
|
|
@@ -48601,6 +48604,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
|
|
|
48601
48604
|
cursor: pointer;
|
|
48602
48605
|
font-family: var(--default-font-family);
|
|
48603
48606
|
box-sizing: border-box;
|
|
48607
|
+
background-color: var(--accordion-header-bg, transparent);
|
|
48604
48608
|
}
|
|
48605
48609
|
.v-accordion-trigger:disabled {
|
|
48606
48610
|
cursor: not-allowed;
|
|
@@ -48615,8 +48619,8 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
|
|
|
48615
48619
|
React__default.createElement(Header, { style: { margin: 0 } },
|
|
48616
48620
|
React__default.createElement(Trigger2, { className: "v-accordion-trigger" },
|
|
48617
48621
|
React__default.createElement(p$5, { align: "center", gap: "3" },
|
|
48618
|
-
icon && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accent-9)' } }, icon)),
|
|
48619
|
-
React__default.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--gray-12)' } }, title)),
|
|
48622
|
+
icon && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accordion-title-color, var(--accent-9))' } }, icon)),
|
|
48623
|
+
React__default.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
|
|
48620
48624
|
React__default.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
|
|
48621
48625
|
React__default.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
|
|
48622
48626
|
React__default.createElement("div", { style: { padding: '0 16px 16px 16px' } },
|
|
@@ -24,6 +24,20 @@ export interface AccordionProps {
|
|
|
24
24
|
* allowMultiple={true}
|
|
25
25
|
*/
|
|
26
26
|
allowMultiple?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* * Option to pass a custom hex, rgb, or css variable to color the background
|
|
29
|
+
* of the AccordionItem headers.
|
|
30
|
+
* * @example
|
|
31
|
+
* brandcolor="var(--accent-3)"
|
|
32
|
+
*/
|
|
33
|
+
brandcolor?: string;
|
|
34
|
+
/**
|
|
35
|
+
* * Option to specify the text and icon color of the AccordionItem headers.
|
|
36
|
+
* Useful when using a dark brandcolor to ensure legibility.
|
|
37
|
+
* * @example
|
|
38
|
+
* titleColor="#ffffff"
|
|
39
|
+
*/
|
|
40
|
+
titleColor?: string;
|
|
27
41
|
/**
|
|
28
42
|
* * The required viewport column width for the Accordion component.
|
|
29
43
|
* i.e. 1 - 12
|
|
@@ -84,5 +98,5 @@ export interface AccordionItemProps {
|
|
|
84
98
|
*/
|
|
85
99
|
icon?: ReactNode;
|
|
86
100
|
}
|
|
87
|
-
export declare const Accordion: ({ design, defaultOpenId, allowMultiple, width, newRow, className, style, children }: AccordionProps) => React.JSX.Element;
|
|
101
|
+
export declare const Accordion: ({ design, defaultOpenId, allowMultiple, brandcolor, titleColor, width, newRow, className, style, children }: AccordionProps) => React.JSX.Element;
|
|
88
102
|
export declare const AccordionItem: ({ sectionId, title, children, disabled, icon }: AccordionItemProps) => React.JSX.Element;
|