@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/dist/tokens.d.ts

@@ -0,0 +1,2 @@
+export * from './token-engine'
+export {}

package/dist/tokens.js

@@ -0,0 +1,233 @@
+import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as S, f as p, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as _, q as m, r as B, s as L, t as M, u as w, v as j, w as U, x as D, y as G, z as H } from "./node-CRWdZOVN.js";
+import { BRANCH_COLLECTION as ie, BRANCH_ID_PATTERN as ae, PRESETS as ce, PRESET_BLEND_DEFAULT as fe, PRESET_GREEN as le, PRESET_JUSPAY as Te, PRESET_ORANGE as ue, PRESET_PURPLE as de, RADIUS_PRESETS as Oe, SNAPSHOT_SUBCOLLECTION as ke, STORAGE_KEYS as Ee, TEAM_ROLE_PERMISSIONS as Ve, VERSION_PATTERN as ge, VERSION_SUBCOLLECTION as ve, analyzeContrast as Se, canUserPerformAction as pe, diffBrandConfigs as he, extractOverridePaths as Re, generateBranchId as Ae, generateColorScale as ye, getContrastRatio as Ce, getContrastRatioHex as Ne, getDefaultOnboardingState as Ie, getDefaultPreferences as Pe, getPreset as _e, hexToRgb as me, incrementVersion as Be, isValidHexColor as Le, listPresets as Me, meetsWCAG as we, parseBranchId as je, relativeLuminance as Ue, resolveWithInheritance as De, snapshotsPath as Ge, suggestForeground as He, validateAgainstLocks as xe, validateBranchId as Ke, validateBrandConfig as Fe, validatePaletteContrast as Je, validateVersion as $e, versionsPath as Ye } from "./tokens-server.js";
+function O(e) {
+  const o = typeof structuredClone == "function" ? structuredClone(u) : JSON.parse(JSON.stringify(u));
+  return x(o, e), K(o, e), F(o, e), J(o, e), o;
+}
+function x(e, o) {
+  if (!o.colors) return;
+  const t = Object.entries(o.colors);
+  for (const [n, s] of t) {
+    if (!s) continue;
+    const r = e.colors[n];
+    if (r)
+      for (const [i, c] of Object.entries(s))
+        c !== void 0 && (r[i] = c);
+  }
+}
+function K(e, o) {
+  if (!o.radius) return;
+  const t = e.border.radius;
+  for (const [n, s] of Object.entries(o.radius))
+    s !== void 0 && n in t && (t[n] = s);
+}
+function F(e, o) {
+  if (!o.shadows) return;
+  const t = e.shadows;
+  for (const [n, s] of Object.entries(o.shadows))
+    s !== void 0 && n in t && (t[n] = s);
+}
+function J(e, o) {
+  if (o.font) {
+    if (o.font.family) {
+      const t = e.font;
+      "family" in t && (t.family = o.font.family);
+    }
+    if (o.font.weight) {
+      const t = e.font.weight;
+      for (const [n, s] of Object.entries(o.font.weight))
+        s !== void 0 && n in t && (t[n] = s);
+    }
+  }
+}
+const l = {
+  BUTTONV2: H,
+  ACCORDIONV2: G,
+  ALERTV2: D,
+  AVATARV2: U,
+  BREADCRUMBV2: j,
+  CHARTSV2: w,
+  CHECKBOXV2: M,
+  CODEEDITORV2: L,
+  KEYVALUEPAIRV2: B,
+  MENU_V2: m,
+  MULTI_SELECT_V2: _,
+  POPOVERV2: P,
+  PROGRESS_BARV2: I,
+  RADIOV2: N,
+  SINGLE_SELECT_V2: C,
+  SWITCHV2: y,
+  SNACKBARV2: A,
+  STATCARDV2: R,
+  TABSV2: h,
+  TAGV2: p,
+  TEXT_INPUTV2: S,
+  TIMELINE: v,
+  TOOLTIPV2: g,
+  TOPBARV2: V,
+  SIDEBARV2: E,
+  MOBILE_NAVIGATION_V2: k
+}, $ = 32, a = [];
+function Y(e, o) {
+  return `${o}::${JSON.stringify(e)}`;
+}
+function W(e) {
+  const o = a.findIndex((n) => n.key === e);
+  if (o === -1) return null;
+  const [t] = a.splice(o, 1);
+  return a.unshift(t), t.tokens;
+}
+function X(e, o) {
+  a.length >= $ && a.pop(), a.unshift({ key: e, tokens: o });
+}
+function z() {
+  a.length = 0;
+}
+function q(e, o = d.LIGHT) {
+  const t = Y(e, o), n = W(t);
+  if (n) return n;
+  const s = {}, r = [];
+  for (const [i, c] of Object.entries(l))
+    try {
+      s[i] = c(e, o);
+    } catch (f) {
+      r.push({ component: i, error: f }), s[i] = {};
+    }
+  return r.length > 0 && console.warn(
+    `[token-engine] ${r.length} component(s) failed to resolve:`,
+    r.map((i) => i.component).join(", ")
+  ), X(t, s), s;
+}
+function Q(e, o, t = d.LIGHT) {
+  const n = l[e];
+  if (!n) {
+    const s = Object.keys(l).join(", ");
+    console.warn(
+      `[token-engine] Unknown component key "${e}". Valid keys: ${s}`
+    );
+    return;
+  }
+  try {
+    return n(o, t);
+  } catch (s) {
+    console.error(
+      `[token-engine] Failed to resolve tokens for "${e}":`,
+      s
+    );
+    return;
+  }
+}
+function oe(e, o) {
+  l[e] = o, z();
+}
+const te = Object.keys(l);
+function Z(e) {
+  try {
+    return structuredClone(e);
+  } catch {
+    return JSON.parse(JSON.stringify(e));
+  }
+}
+function se(e, o = "light") {
+  let t = e;
+  o === "dark" && e.darkModeOverrides && (t = {
+    ...e,
+    colors: T(
+      e.colors ?? {},
+      e.darkModeOverrides.colors ?? {}
+    ),
+    radius: {
+      ...e.radius,
+      ...e.darkModeOverrides.radius
+    },
+    shadows: {
+      ...e.shadows,
+      ...e.darkModeOverrides.shadows
+    },
+    font: {
+      ...e.font,
+      ...e.darkModeOverrides.font
+    }
+  });
+  const n = O(t), s = t.componentOverrides && Object.keys(t.componentOverrides).length > 0, r = q(n, o), i = s ? Z(r) : r;
+  return t.componentOverrides && b(i, t, o), i;
+}
+function b(e, o, t) {
+  const n = o.componentOverrides;
+  for (const [s, r] of Object.entries(n)) {
+    const i = {
+      ...o,
+      colors: T(
+        o.colors ?? {},
+        r.colors ?? {}
+      ),
+      radius: { ...o.radius, ...r.radius },
+      shadows: { ...o.shadows, ...r.shadows },
+      font: { ...o.font, ...r.font }
+    }, c = O(i);
+    let f = Q(
+      s,
+      c,
+      t
+    );
+    f !== void 0 && (r.tokenOverrides && (f = T(
+      f,
+      r.tokenOverrides
+    )), e[s] = f);
+  }
+}
+function T(e, o) {
+  const t = { ...e };
+  for (const [n, s] of Object.entries(o))
+    s && typeof s == "object" && !Array.isArray(s) && e[n] && typeof e[n] == "object" ? t[n] = T(e[n], s) : t[n] = s;
+  return t;
+}
+export {
+  ie as BRANCH_COLLECTION,
+  ae as BRANCH_ID_PATTERN,
+  ce as PRESETS,
+  fe as PRESET_BLEND_DEFAULT,
+  le as PRESET_GREEN,
+  Te as PRESET_JUSPAY,
+  ue as PRESET_ORANGE,
+  de as PRESET_PURPLE,
+  Oe as RADIUS_PRESETS,
+  ke as SNAPSHOT_SUBCOLLECTION,
+  Ee as STORAGE_KEYS,
+  Ve as TEAM_ROLE_PERMISSIONS,
+  te as V2_COMPONENT_KEYS,
+  ge as VERSION_PATTERN,
+  ve as VERSION_SUBCOLLECTION,
+  Se as analyzeContrast,
+  O as buildBrandFoundation,
+  pe as canUserPerformAction,
+  z as clearTokenCache,
+  he as diffBrandConfigs,
+  Re as extractOverridePaths,
+  Ae as generateBranchId,
+  ye as generateColorScale,
+  Ce as getContrastRatio,
+  Ne as getContrastRatioHex,
+  Ie as getDefaultOnboardingState,
+  Pe as getDefaultPreferences,
+  _e as getPreset,
+  me as hexToRgb,
+  Be as incrementVersion,
+  Le as isValidHexColor,
+  Me as listPresets,
+  we as meetsWCAG,
+  je as parseBranchId,
+  oe as registerResolver,
+  Ue as relativeLuminance,
+  q as resolveAllTokens,
+  se as resolveBrandTokens,
+  De as resolveWithInheritance,
+  Ge as snapshotsPath,
+  He as suggestForeground,
+  xe as validateAgainstLocks,
+  Ke as validateBranchId,
+  Fe as validateBrandConfig,
+  Je as validatePaletteContrast,
+  $e as validateVersion,
+  Ye as versionsPath
+};

package/lib/breakpoints/breakPoints.ts

@@ -0,0 +1,8 @@
+export type BreakpointType = {
+    sm: number
+    lg: number
+}
+export const BREAKPOINTS: BreakpointType = {
+    sm: 320,
+    lg: 1024,
+}

package/lib/components/Accordion/Accordion.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react'
+import * as RadixAccordion from '@radix-ui/react-accordion'
+import { forwardRef, useCallback, useState } from 'react'
+import { styled } from 'styled-components'
+import { type AccordionProps, AccordionType } from './types'
+import type { AccordionTokenType } from './accordion.tokens'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+
+const StyledAccordionRoot = styled(RadixAccordion.Root)<{
+    $accordionType: AccordionType
+    $AccordionToken: AccordionTokenType
+}>((props) => ({
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: props.$AccordionToken.gap[props.$accordionType],
+    borderRadius: props.$AccordionToken.borderRadius[props.$accordionType],
+}))
+
+const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+    (
+        {
+            children,
+            accordionType = AccordionType.NO_BORDER,
+            defaultValue,
+            value: controlledValue,
+            isMultiple = false,
+            onValueChange,
+        },
+        ref
+    ) => {
+        const accordionToken =
+            useResponsiveTokens<AccordionTokenType>('ACCORDION')
+
+        const isControlled = controlledValue !== undefined
+        const [internalValue, setInternalValue] = useState<
+            string | string[] | undefined
+        >(defaultValue)
+
+        const currentValue = isControlled ? controlledValue : internalValue
+
+        const handleValueChange = useCallback(
+            (newValue: string | string[]) => {
+                if (!isControlled) setInternalValue(newValue)
+                onValueChange?.(newValue)
+            },
+            [isControlled, onValueChange]
+        )
+
+        const renderChildren = () =>
+            React.Children.map(children, (child, index) => {
+                if (!React.isValidElement(child)) return child
+
+                const total = React.Children.toArray(children).filter(
+                    React.isValidElement
+                ).length
+
+                const childProps = {
+                    ...(child.props as object),
+                    accordionType,
+                    isFirst: index === 0,
+                    isLast: index === total - 1,
+                    isIntermediate: index > 0 && index < total - 1,
+                    currentValue,
+                }
+
+                return React.cloneElement(child, childProps)
+            })
+
+        const commonProps = {
+            ref,
+            $accordionType: accordionType,
+            $AccordionToken: accordionToken,
+        }
+
+        return isMultiple ? (
+            <StyledAccordionRoot
+                data-accordion="accordion"
+                type="multiple"
+                {...(isControlled
+                    ? { value: (controlledValue ?? []) as string[] }
+                    : { defaultValue: defaultValue as string[] | undefined })}
+                onValueChange={handleValueChange as (value: string[]) => void}
+                {...commonProps}
+            >
+                {renderChildren()}
+            </StyledAccordionRoot>
+        ) : (
+            <StyledAccordionRoot
+                data-accordion="accordion"
+                type="single"
+                collapsible
+                {...(isControlled
+                    ? { value: (controlledValue ?? '') as string }
+                    : {
+                          defaultValue: defaultValue as string | undefined,
+                      })}
+                onValueChange={handleValueChange as (value: string) => void}
+                {...commonProps}
+            >
+                {renderChildren()}
+            </StyledAccordionRoot>
+        )
+    }
+)
+
+Accordion.displayName = 'Accordion'
+
+export default Accordion