@emeraldemperaur/vector-sigma 1.4.24 → 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.
Files changed (4) hide show
  1. package/lib/index.cjs +11 -10
  2. package/lib/index.esm.js +11 -10
  3. package/lib/types/layouts/accordion/accordion.d.ts +8 -1
  4. 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, brandcolor, 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, brandcolor } },
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(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})) },
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,14 +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: var(--gray-10);
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;
48575
- overflow: hidden; /* Clips the background color to the rounded corners */
48576
+ overflow: hidden;
48576
48577
  }
48577
48578
  .v-accordion-item-outline {
48578
48579
  border-bottom: 1px solid var(--gray-6);
@@ -48585,7 +48586,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48585
48586
  border-radius: var(--radius-3);
48586
48587
  background-color: var(--color-surface);
48587
48588
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
48588
- overflow: hidden; /* Clips the background color to the rounded corners */
48589
+ overflow: hidden;
48589
48590
  }
48590
48591
  .v-accordion-item-material {
48591
48592
  border-bottom: 1px solid var(--gray-4);
@@ -48607,7 +48608,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48607
48608
  border-radius: 12px;
48608
48609
  box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
48609
48610
  transition: all 0.3s ease;
48610
- overflow: hidden; /* Clips the background color to the rounded corners */
48611
+ overflow: hidden;
48611
48612
  }
48612
48613
  .v-accordion-item-neumorphic[data-state='open'] {
48613
48614
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
@@ -48623,7 +48624,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48623
48624
  cursor: pointer;
48624
48625
  font-family: var(--default-font-family);
48625
48626
  box-sizing: border-box;
48626
- background-color: var(--accordion-header-bg, transparent); /* Applies the custom color */
48627
+ background-color: var(--accordion-header-bg, transparent);
48627
48628
  }
48628
48629
  .v-accordion-trigger:disabled {
48629
48630
  cursor: not-allowed;
@@ -48638,8 +48639,8 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
48638
48639
  React.createElement(Header, { style: { margin: 0 } },
48639
48640
  React.createElement(Trigger2, { className: "v-accordion-trigger" },
48640
48641
  React.createElement(p$5, { align: "center", gap: "3" },
48641
- icon && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accent-9)' } }, icon)),
48642
- 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)),
48643
48644
  React.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
48644
48645
  React.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
48645
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, brandcolor, 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, brandcolor } },
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(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})) },
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,14 +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: var(--gray-10);
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;
48555
- overflow: hidden; /* Clips the background color to the rounded corners */
48556
+ overflow: hidden;
48556
48557
  }
48557
48558
  .v-accordion-item-outline {
48558
48559
  border-bottom: 1px solid var(--gray-6);
@@ -48565,7 +48566,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48565
48566
  border-radius: var(--radius-3);
48566
48567
  background-color: var(--color-surface);
48567
48568
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
48568
- overflow: hidden; /* Clips the background color to the rounded corners */
48569
+ overflow: hidden;
48569
48570
  }
48570
48571
  .v-accordion-item-material {
48571
48572
  border-bottom: 1px solid var(--gray-4);
@@ -48587,7 +48588,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48587
48588
  border-radius: 12px;
48588
48589
  box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
48589
48590
  transition: all 0.3s ease;
48590
- overflow: hidden; /* Clips the background color to the rounded corners */
48591
+ overflow: hidden;
48591
48592
  }
48592
48593
  .v-accordion-item-neumorphic[data-state='open'] {
48593
48594
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
@@ -48603,7 +48604,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48603
48604
  cursor: pointer;
48604
48605
  font-family: var(--default-font-family);
48605
48606
  box-sizing: border-box;
48606
- background-color: var(--accordion-header-bg, transparent); /* Applies the custom color */
48607
+ background-color: var(--accordion-header-bg, transparent);
48607
48608
  }
48608
48609
  .v-accordion-trigger:disabled {
48609
48610
  cursor: not-allowed;
@@ -48618,8 +48619,8 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
48618
48619
  React__default.createElement(Header, { style: { margin: 0 } },
48619
48620
  React__default.createElement(Trigger2, { className: "v-accordion-trigger" },
48620
48621
  React__default.createElement(p$5, { align: "center", gap: "3" },
48621
- icon && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accent-9)' } }, icon)),
48622
- 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)),
48623
48624
  React__default.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
48624
48625
  React__default.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
48625
48626
  React__default.createElement("div", { style: { padding: '0 16px 16px 16px' } },
package/lib/types/layouts/accordion/accordion.d.ts CHANGED
@@ -31,6 +31,13 @@ export interface AccordionProps {
31
31
  * brandcolor="var(--accent-3)"
32
32
  */
33
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;
34
41
  /**
35
42
  * * The required viewport column width for the Accordion component.
36
43
  * i.e. 1 - 12
@@ -91,5 +98,5 @@ export interface AccordionItemProps {
91
98
  */
92
99
  icon?: ReactNode;
93
100
  }
94
- export declare const Accordion: ({ design, defaultOpenId, allowMultiple, brandcolor, 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;
95
102
  export declare const AccordionItem: ({ sectionId, title, children, disabled, icon }: AccordionItemProps) => React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emeraldemperaur/vector-sigma",
3
- "version": "1.4.24",
3
+ "version": "1.4.25",
4
4
  "description": "Dynamic Form Orchestrator: NPM Package",
5
5
  "repository": {
6
6
  "type": "git",