@emeraldemperaur/vector-sigma 1.4.23 → 1.4.24

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 +8 -5
  2. package/lib/index.esm.js +8 -5
  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, width = 12, newRow, className, style, children }) => {
48525
+ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, brandcolor, 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 } },
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({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})) },
48546
48546
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
48547
48547
  @keyframes slideDown {
48548
48548
  from { height: 0; opacity: 0; }
@@ -48572,6 +48572,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48572
48572
  border: 1px solid var(--gray-6);
48573
48573
  border-radius: var(--radius-3);
48574
48574
  background-color: transparent;
48575
+ overflow: hidden; /* Clips the background color to the rounded corners */
48575
48576
  }
48576
48577
  .v-accordion-item-outline {
48577
48578
  border-bottom: 1px solid var(--gray-6);
@@ -48584,6 +48585,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48584
48585
  border-radius: var(--radius-3);
48585
48586
  background-color: var(--color-surface);
48586
48587
  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 */
48587
48589
  }
48588
48590
  .v-accordion-item-material {
48589
48591
  border-bottom: 1px solid var(--gray-4);
@@ -48598,16 +48600,16 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48598
48600
  .v-accordion-root-neumorphic {
48599
48601
  display: flex;
48600
48602
  flex-direction: column;
48601
- gap: 16px; /* Neumorphic items look best separated */
48603
+ gap: 16px;
48602
48604
  }
48603
48605
  .v-accordion-item-neumorphic {
48604
48606
  background-color: var(--neu-bg);
48605
48607
  border-radius: 12px;
48606
48608
  box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
48607
48609
  transition: all 0.3s ease;
48610
+ overflow: hidden; /* Clips the background color to the rounded corners */
48608
48611
  }
48609
48612
  .v-accordion-item-neumorphic[data-state='open'] {
48610
- /* Pressed-in effect when open */
48611
48613
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
48612
48614
  }
48613
48615
 
@@ -48621,6 +48623,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48621
48623
  cursor: pointer;
48622
48624
  font-family: var(--default-font-family);
48623
48625
  box-sizing: border-box;
48626
+ background-color: var(--accordion-header-bg, transparent); /* Applies the custom color */
48624
48627
  }
48625
48628
  .v-accordion-trigger:disabled {
48626
48629
  cursor: not-allowed;
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, 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 } },
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({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})) },
48526
48526
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
48527
48527
  @keyframes slideDown {
48528
48528
  from { height: 0; opacity: 0; }
@@ -48552,6 +48552,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48552
48552
  border: 1px solid var(--gray-6);
48553
48553
  border-radius: var(--radius-3);
48554
48554
  background-color: transparent;
48555
+ overflow: hidden; /* Clips the background color to the rounded corners */
48555
48556
  }
48556
48557
  .v-accordion-item-outline {
48557
48558
  border-bottom: 1px solid var(--gray-6);
@@ -48564,6 +48565,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48564
48565
  border-radius: var(--radius-3);
48565
48566
  background-color: var(--color-surface);
48566
48567
  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 */
48567
48569
  }
48568
48570
  .v-accordion-item-material {
48569
48571
  border-bottom: 1px solid var(--gray-4);
@@ -48578,16 +48580,16 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48578
48580
  .v-accordion-root-neumorphic {
48579
48581
  display: flex;
48580
48582
  flex-direction: column;
48581
- gap: 16px; /* Neumorphic items look best separated */
48583
+ gap: 16px;
48582
48584
  }
48583
48585
  .v-accordion-item-neumorphic {
48584
48586
  background-color: var(--neu-bg);
48585
48587
  border-radius: 12px;
48586
48588
  box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
48587
48589
  transition: all 0.3s ease;
48590
+ overflow: hidden; /* Clips the background color to the rounded corners */
48588
48591
  }
48589
48592
  .v-accordion-item-neumorphic[data-state='open'] {
48590
- /* Pressed-in effect when open */
48591
48593
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
48592
48594
  }
48593
48595
 
@@ -48601,6 +48603,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
48601
48603
  cursor: pointer;
48602
48604
  font-family: var(--default-font-family);
48603
48605
  box-sizing: border-box;
48606
+ background-color: var(--accordion-header-bg, transparent); /* Applies the custom color */
48604
48607
  }
48605
48608
  .v-accordion-trigger:disabled {
48606
48609
  cursor: not-allowed;
package/lib/types/layouts/accordion/accordion.d.ts CHANGED
@@ -24,6 +24,13 @@ 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;
27
34
  /**
28
35
  * * The required viewport column width for the Accordion component.
29
36
  * i.e. 1 - 12
@@ -84,5 +91,5 @@ export interface AccordionItemProps {
84
91
  */
85
92
  icon?: ReactNode;
86
93
  }
87
- export declare const Accordion: ({ design, defaultOpenId, allowMultiple, width, newRow, className, style, children }: AccordionProps) => React.JSX.Element;
94
+ export declare const Accordion: ({ design, defaultOpenId, allowMultiple, brandcolor, width, newRow, className, style, children }: AccordionProps) => React.JSX.Element;
88
95
  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.23",
3
+ "version": "1.4.24",
4
4
  "description": "Dynamic Form Orchestrator: NPM Package",
5
5
  "repository": {
6
6
  "type": "git",