@fanvue/ui 2.10.0 → 2.10.1

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 (5) hide show
  1. package/dist/cjs/components/BottomNavigation/BottomNavigation.cjs +1 -1
  2. package/dist/cjs/components/BottomNavigation/BottomNavigation.cjs.map +1 -1
  3. package/dist/components/BottomNavigation/BottomNavigation.mjs +1 -1
  4. package/dist/components/BottomNavigation/BottomNavigation.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/cjs/components/BottomNavigation/BottomNavigation.cjs CHANGED
@@ -83,7 +83,7 @@ const BottomNavigation = React__namespace.forwardRef(
83
83
  },
84
84
  children: [
85
85
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent" }),
86
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] dark:opacity-15" }) })
86
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "@container h-20 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] @max-[80px]:w-[calc(70%-10px)] dark:opacity-15" }) })
87
87
  ]
88
88
  }
89
89
  )
package/dist/cjs/components/BottomNavigation/BottomNavigation.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomNavigation.cjs","sources":["../../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n /** The currently selected action value. */\n value?: string;\n /** Called when the selected action changes. */\n onValueChange?: (value: string) => void;\n /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */\n hideOnDesktop?: boolean;\n /** When `true`, renders the information-architecture style with visible labels and a sliding active indicator. @default false */\n hasInformationArchitectureNav?: boolean;\n}\n\ninterface BottomNavigationContextValue {\n value?: string;\n onValueChange?: (value: string) => void;\n hasInformationArchitectureNav: boolean;\n}\n\nconst BottomNavigationContext = React.createContext<BottomNavigationContextValue>({\n hasInformationArchitectureNav: false,\n});\n\nexport function useBottomNavigationContext(): BottomNavigationContextValue {\n return React.useContext(BottomNavigationContext);\n}\n\nfunction resolveChildren(children: React.ReactNode, value: string | undefined) {\n const items = React.Children.toArray(children);\n for (let i = 0; i < items.length; i++) {\n const child = items[i];\n if (React.isValidElement<{ value?: string }>(child) && child.props.value === value) {\n return { count: items.length, activeIndex: i };\n }\n }\n return { count: items.length, activeIndex: undefined };\n}\n\nexport const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n (\n {\n className,\n children,\n value,\n onValueChange,\n hasInformationArchitectureNav = false,\n hideOnDesktop = false,\n ...props\n },\n ref,\n ) => {\n const contextValue = React.useMemo<BottomNavigationContextValue>(\n () => ({ value, onValueChange, hasInformationArchitectureNav }),\n [value, onValueChange, hasInformationArchitectureNav],\n );\n\n if (hasInformationArchitectureNav) {\n const { count: itemCount, activeIndex } = resolveChildren(children, value);\n const { style, ...restProps } = props;\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n {...restProps}\n className={cn(\n \"fixed inset-x-0 bottom-0 flex h-[calc(env(safe-area-inset-bottom,0px)+80px)] items-stretch justify-around pb-[env(safe-area-inset-bottom,0px)]\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={\n { zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style } as React.CSSProperties\n }\n >\n {activeIndex != null && (\n <div\n aria-hidden=\"true\"\n data-part=\"indicator\"\n className=\"pointer-events-none absolute inset-x-0 -top-px h-0\"\n >\n <div\n className=\"absolute top-0 flex -translate-x-1/2 flex-col items-center motion-safe:transition-[left] motion-safe:duration-300 motion-safe:ease-in-out\"\n style={{\n left: `calc((${activeIndex} + 0.5) * (100% / ${itemCount}))`,\n width: `calc(100% / ${itemCount})`,\n }}\n >\n <div className=\"h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent\" />\n <div className=\"h-20 w-full overflow-hidden\">\n <div className=\"mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] dark:opacity-15\" />\n </div>\n </div>\n </div>\n )}\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n }\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n className={cn(\n \"fixed inset-x-0 bottom-0\",\n \"flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n \"pb-[env(safe-area-inset-bottom,0px)]\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...props.style }}\n {...props}\n >\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n },\n);\n\nBottomNavigation.displayName = \"BottomNavigation\";\n"],"names":["React","jsx","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,0BAA0BA,iBAAM,cAA4C;AAAA,EAChF,+BAA+B;AACjC,CAAC;AAEM,SAAS,6BAA2D;AACzE,SAAOA,iBAAM,WAAW,uBAAuB;AACjD;AAEA,SAAS,gBAAgB,UAA2B,OAA2B;AAC7E,QAAM,QAAQA,iBAAM,SAAS,QAAQ,QAAQ;AAC7C,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,QAAQ,MAAM,CAAC;AACrB,QAAIA,iBAAM,eAAmC,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAClF,aAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,EAAA;AAAA,IAC7C;AAAA,EACF;AACA,SAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,OAAA;AAC7C;AAEO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAeA,iBAAM;AAAA,MACzB,OAAO,EAAE,OAAO,eAAe;MAC/B,CAAC,OAAO,eAAe,6BAA6B;AAAA,IAAA;AAGtD,QAAI,+BAA+B;AACjC,YAAM,EAAE,OAAO,WAAW,gBAAgB,gBAAgB,UAAU,KAAK;AACzE,YAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAEhC,aACEC,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACC,GAAG;AAAA,UACJ,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,UAEF,OACE,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,UAGrD,UAAA;AAAA,YAAA,eAAe,QACdF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,aAAU;AAAA,gBACV,WAAU;AAAA,gBAEV,UAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,MAAM,SAAS,WAAW,qBAAqB,SAAS;AAAA,sBACxD,OAAO,eAAe,SAAS;AAAA,oBAAA;AAAA,oBAGjC,UAAA;AAAA,sBAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,wGAAA,CAAwG;AAAA,sBACvHA,2BAAAA,IAAC,SAAI,WAAU,+BACb,yCAAC,OAAA,EAAI,WAAU,sKAAqK,EAAA,CACtL;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YAGH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,IAEJ;AAEA,WACEA,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWE,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAM,MAAA;AAAA,QAChE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;;"}
1
+ {"version":3,"file":"BottomNavigation.cjs","sources":["../../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n /** The currently selected action value. */\n value?: string;\n /** Called when the selected action changes. */\n onValueChange?: (value: string) => void;\n /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */\n hideOnDesktop?: boolean;\n /** When `true`, renders the information-architecture style with visible labels and a sliding active indicator. @default false */\n hasInformationArchitectureNav?: boolean;\n}\n\ninterface BottomNavigationContextValue {\n value?: string;\n onValueChange?: (value: string) => void;\n hasInformationArchitectureNav: boolean;\n}\n\nconst BottomNavigationContext = React.createContext<BottomNavigationContextValue>({\n hasInformationArchitectureNav: false,\n});\n\nexport function useBottomNavigationContext(): BottomNavigationContextValue {\n return React.useContext(BottomNavigationContext);\n}\n\nfunction resolveChildren(children: React.ReactNode, value: string | undefined) {\n const items = React.Children.toArray(children);\n for (let i = 0; i < items.length; i++) {\n const child = items[i];\n if (React.isValidElement<{ value?: string }>(child) && child.props.value === value) {\n return { count: items.length, activeIndex: i };\n }\n }\n return { count: items.length, activeIndex: undefined };\n}\n\nexport const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n (\n {\n className,\n children,\n value,\n onValueChange,\n hasInformationArchitectureNav = false,\n hideOnDesktop = false,\n ...props\n },\n ref,\n ) => {\n const contextValue = React.useMemo<BottomNavigationContextValue>(\n () => ({ value, onValueChange, hasInformationArchitectureNav }),\n [value, onValueChange, hasInformationArchitectureNav],\n );\n\n if (hasInformationArchitectureNav) {\n const { count: itemCount, activeIndex } = resolveChildren(children, value);\n const { style, ...restProps } = props;\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n {...restProps}\n className={cn(\n \"fixed inset-x-0 bottom-0 flex h-[calc(env(safe-area-inset-bottom,0px)+80px)] items-stretch justify-around pb-[env(safe-area-inset-bottom,0px)]\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={\n { zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style } as React.CSSProperties\n }\n >\n {activeIndex != null && (\n <div\n aria-hidden=\"true\"\n data-part=\"indicator\"\n className=\"pointer-events-none absolute inset-x-0 -top-px h-0\"\n >\n <div\n className=\"absolute top-0 flex -translate-x-1/2 flex-col items-center motion-safe:transition-[left] motion-safe:duration-300 motion-safe:ease-in-out\"\n style={{\n left: `calc((${activeIndex} + 0.5) * (100% / ${itemCount}))`,\n width: `calc(100% / ${itemCount})`,\n }}\n >\n <div className=\"h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent\" />\n <div className=\"@container h-20 w-full overflow-hidden\">\n <div className=\"mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] @max-[80px]:w-[calc(70%-10px)] dark:opacity-15\" />\n </div>\n </div>\n </div>\n )}\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n }\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n className={cn(\n \"fixed inset-x-0 bottom-0\",\n \"flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n \"pb-[env(safe-area-inset-bottom,0px)]\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...props.style }}\n {...props}\n >\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n },\n);\n\nBottomNavigation.displayName = \"BottomNavigation\";\n"],"names":["React","jsx","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,0BAA0BA,iBAAM,cAA4C;AAAA,EAChF,+BAA+B;AACjC,CAAC;AAEM,SAAS,6BAA2D;AACzE,SAAOA,iBAAM,WAAW,uBAAuB;AACjD;AAEA,SAAS,gBAAgB,UAA2B,OAA2B;AAC7E,QAAM,QAAQA,iBAAM,SAAS,QAAQ,QAAQ;AAC7C,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,QAAQ,MAAM,CAAC;AACrB,QAAIA,iBAAM,eAAmC,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAClF,aAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,EAAA;AAAA,IAC7C;AAAA,EACF;AACA,SAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,OAAA;AAC7C;AAEO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAeA,iBAAM;AAAA,MACzB,OAAO,EAAE,OAAO,eAAe;MAC/B,CAAC,OAAO,eAAe,6BAA6B;AAAA,IAAA;AAGtD,QAAI,+BAA+B;AACjC,YAAM,EAAE,OAAO,WAAW,gBAAgB,gBAAgB,UAAU,KAAK;AACzE,YAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAEhC,aACEC,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACC,GAAG;AAAA,UACJ,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,UAEF,OACE,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,UAGrD,UAAA;AAAA,YAAA,eAAe,QACdF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,aAAU;AAAA,gBACV,WAAU;AAAA,gBAEV,UAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,MAAM,SAAS,WAAW,qBAAqB,SAAS;AAAA,sBACxD,OAAO,eAAe,SAAS;AAAA,oBAAA;AAAA,oBAGjC,UAAA;AAAA,sBAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,wGAAA,CAAwG;AAAA,sBACvHA,2BAAAA,IAAC,SAAI,WAAU,0CACb,yCAAC,OAAA,EAAI,WAAU,qMAAoM,EAAA,CACrN;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YAGH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,IAEJ;AAEA,WACEA,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWE,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAM,MAAA;AAAA,QAChE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;;"}
package/dist/components/BottomNavigation/BottomNavigation.mjs CHANGED
@@ -64,7 +64,7 @@ const BottomNavigation = React.forwardRef(
64
64
  },
65
65
  children: [
66
66
  /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent" }),
67
- /* @__PURE__ */ jsx("div", { className: "h-20 w-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] dark:opacity-15" }) })
67
+ /* @__PURE__ */ jsx("div", { className: "@container h-20 w-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] @max-[80px]:w-[calc(70%-10px)] dark:opacity-15" }) })
68
68
  ]
69
69
  }
70
70
  )
package/dist/components/BottomNavigation/BottomNavigation.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomNavigation.mjs","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n /** The currently selected action value. */\n value?: string;\n /** Called when the selected action changes. */\n onValueChange?: (value: string) => void;\n /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */\n hideOnDesktop?: boolean;\n /** When `true`, renders the information-architecture style with visible labels and a sliding active indicator. @default false */\n hasInformationArchitectureNav?: boolean;\n}\n\ninterface BottomNavigationContextValue {\n value?: string;\n onValueChange?: (value: string) => void;\n hasInformationArchitectureNav: boolean;\n}\n\nconst BottomNavigationContext = React.createContext<BottomNavigationContextValue>({\n hasInformationArchitectureNav: false,\n});\n\nexport function useBottomNavigationContext(): BottomNavigationContextValue {\n return React.useContext(BottomNavigationContext);\n}\n\nfunction resolveChildren(children: React.ReactNode, value: string | undefined) {\n const items = React.Children.toArray(children);\n for (let i = 0; i < items.length; i++) {\n const child = items[i];\n if (React.isValidElement<{ value?: string }>(child) && child.props.value === value) {\n return { count: items.length, activeIndex: i };\n }\n }\n return { count: items.length, activeIndex: undefined };\n}\n\nexport const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n (\n {\n className,\n children,\n value,\n onValueChange,\n hasInformationArchitectureNav = false,\n hideOnDesktop = false,\n ...props\n },\n ref,\n ) => {\n const contextValue = React.useMemo<BottomNavigationContextValue>(\n () => ({ value, onValueChange, hasInformationArchitectureNav }),\n [value, onValueChange, hasInformationArchitectureNav],\n );\n\n if (hasInformationArchitectureNav) {\n const { count: itemCount, activeIndex } = resolveChildren(children, value);\n const { style, ...restProps } = props;\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n {...restProps}\n className={cn(\n \"fixed inset-x-0 bottom-0 flex h-[calc(env(safe-area-inset-bottom,0px)+80px)] items-stretch justify-around pb-[env(safe-area-inset-bottom,0px)]\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={\n { zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style } as React.CSSProperties\n }\n >\n {activeIndex != null && (\n <div\n aria-hidden=\"true\"\n data-part=\"indicator\"\n className=\"pointer-events-none absolute inset-x-0 -top-px h-0\"\n >\n <div\n className=\"absolute top-0 flex -translate-x-1/2 flex-col items-center motion-safe:transition-[left] motion-safe:duration-300 motion-safe:ease-in-out\"\n style={{\n left: `calc((${activeIndex} + 0.5) * (100% / ${itemCount}))`,\n width: `calc(100% / ${itemCount})`,\n }}\n >\n <div className=\"h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent\" />\n <div className=\"h-20 w-full overflow-hidden\">\n <div className=\"mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] dark:opacity-15\" />\n </div>\n </div>\n </div>\n )}\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n }\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n className={cn(\n \"fixed inset-x-0 bottom-0\",\n \"flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n \"pb-[env(safe-area-inset-bottom,0px)]\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...props.style }}\n {...props}\n >\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n },\n);\n\nBottomNavigation.displayName = \"BottomNavigation\";\n"],"names":[],"mappings":";;;;AAoBA,MAAM,0BAA0B,MAAM,cAA4C;AAAA,EAChF,+BAA+B;AACjC,CAAC;AAEM,SAAS,6BAA2D;AACzE,SAAO,MAAM,WAAW,uBAAuB;AACjD;AAEA,SAAS,gBAAgB,UAA2B,OAA2B;AAC7E,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,QAAQ,MAAM,CAAC;AACrB,QAAI,MAAM,eAAmC,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAClF,aAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,EAAA;AAAA,IAC7C;AAAA,EACF;AACA,SAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,OAAA;AAC7C;AAEO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,MAAM;AAAA,MACzB,OAAO,EAAE,OAAO,eAAe;MAC/B,CAAC,OAAO,eAAe,6BAA6B;AAAA,IAAA;AAGtD,QAAI,+BAA+B;AACjC,YAAM,EAAE,OAAO,WAAW,gBAAgB,gBAAgB,UAAU,KAAK;AACzE,YAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAEhC,aACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACC,GAAG;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,UAEF,OACE,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,UAGrD,UAAA;AAAA,YAAA,eAAe,QACd;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,aAAU;AAAA,gBACV,WAAU;AAAA,gBAEV,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,MAAM,SAAS,WAAW,qBAAqB,SAAS;AAAA,sBACxD,OAAO,eAAe,SAAS;AAAA,oBAAA;AAAA,oBAGjC,UAAA;AAAA,sBAAA,oBAAC,OAAA,EAAI,WAAU,wGAAA,CAAwG;AAAA,sBACvH,oBAAC,SAAI,WAAU,+BACb,8BAAC,OAAA,EAAI,WAAU,sKAAqK,EAAA,CACtL;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YAGH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,IAEJ;AAEA,WACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAM,MAAA;AAAA,QAChE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;"}
1
+ {"version":3,"file":"BottomNavigation.mjs","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n /** The currently selected action value. */\n value?: string;\n /** Called when the selected action changes. */\n onValueChange?: (value: string) => void;\n /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */\n hideOnDesktop?: boolean;\n /** When `true`, renders the information-architecture style with visible labels and a sliding active indicator. @default false */\n hasInformationArchitectureNav?: boolean;\n}\n\ninterface BottomNavigationContextValue {\n value?: string;\n onValueChange?: (value: string) => void;\n hasInformationArchitectureNav: boolean;\n}\n\nconst BottomNavigationContext = React.createContext<BottomNavigationContextValue>({\n hasInformationArchitectureNav: false,\n});\n\nexport function useBottomNavigationContext(): BottomNavigationContextValue {\n return React.useContext(BottomNavigationContext);\n}\n\nfunction resolveChildren(children: React.ReactNode, value: string | undefined) {\n const items = React.Children.toArray(children);\n for (let i = 0; i < items.length; i++) {\n const child = items[i];\n if (React.isValidElement<{ value?: string }>(child) && child.props.value === value) {\n return { count: items.length, activeIndex: i };\n }\n }\n return { count: items.length, activeIndex: undefined };\n}\n\nexport const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n (\n {\n className,\n children,\n value,\n onValueChange,\n hasInformationArchitectureNav = false,\n hideOnDesktop = false,\n ...props\n },\n ref,\n ) => {\n const contextValue = React.useMemo<BottomNavigationContextValue>(\n () => ({ value, onValueChange, hasInformationArchitectureNav }),\n [value, onValueChange, hasInformationArchitectureNav],\n );\n\n if (hasInformationArchitectureNav) {\n const { count: itemCount, activeIndex } = resolveChildren(children, value);\n const { style, ...restProps } = props;\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n {...restProps}\n className={cn(\n \"fixed inset-x-0 bottom-0 flex h-[calc(env(safe-area-inset-bottom,0px)+80px)] items-stretch justify-around pb-[env(safe-area-inset-bottom,0px)]\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={\n { zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style } as React.CSSProperties\n }\n >\n {activeIndex != null && (\n <div\n aria-hidden=\"true\"\n data-part=\"indicator\"\n className=\"pointer-events-none absolute inset-x-0 -top-px h-0\"\n >\n <div\n className=\"absolute top-0 flex -translate-x-1/2 flex-col items-center motion-safe:transition-[left] motion-safe:duration-300 motion-safe:ease-in-out\"\n style={{\n left: `calc((${activeIndex} + 0.5) * (100% / ${itemCount}))`,\n width: `calc(100% / ${itemCount})`,\n }}\n >\n <div className=\"h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent\" />\n <div className=\"@container h-20 w-full overflow-hidden\">\n <div className=\"mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] @max-[80px]:w-[calc(70%-10px)] dark:opacity-15\" />\n </div>\n </div>\n </div>\n )}\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n }\n\n return (\n <BottomNavigationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n className={cn(\n \"fixed inset-x-0 bottom-0\",\n \"flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around\",\n \"border-neutral-alphas-200 border-t bg-bg-primary\",\n \"pb-[env(safe-area-inset-bottom,0px)]\",\n hideOnDesktop && \"md:hidden\",\n className,\n )}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...props.style }}\n {...props}\n >\n {children}\n </nav>\n </BottomNavigationContext.Provider>\n );\n },\n);\n\nBottomNavigation.displayName = \"BottomNavigation\";\n"],"names":[],"mappings":";;;;AAoBA,MAAM,0BAA0B,MAAM,cAA4C;AAAA,EAChF,+BAA+B;AACjC,CAAC;AAEM,SAAS,6BAA2D;AACzE,SAAO,MAAM,WAAW,uBAAuB;AACjD;AAEA,SAAS,gBAAgB,UAA2B,OAA2B;AAC7E,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,QAAQ,MAAM,CAAC;AACrB,QAAI,MAAM,eAAmC,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAClF,aAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,EAAA;AAAA,IAC7C;AAAA,EACF;AACA,SAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,OAAA;AAC7C;AAEO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,MAAM;AAAA,MACzB,OAAO,EAAE,OAAO,eAAe;MAC/B,CAAC,OAAO,eAAe,6BAA6B;AAAA,IAAA;AAGtD,QAAI,+BAA+B;AACjC,YAAM,EAAE,OAAO,WAAW,gBAAgB,gBAAgB,UAAU,KAAK;AACzE,YAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAEhC,aACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACC,GAAG;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,UAEF,OACE,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,UAGrD,UAAA;AAAA,YAAA,eAAe,QACd;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,aAAU;AAAA,gBACV,WAAU;AAAA,gBAEV,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,MAAM,SAAS,WAAW,qBAAqB,SAAS;AAAA,sBACxD,OAAO,eAAe,SAAS;AAAA,oBAAA;AAAA,oBAGjC,UAAA;AAAA,sBAAA,oBAAC,OAAA,EAAI,WAAU,wGAAA,CAAwG;AAAA,sBACvH,oBAAC,SAAI,WAAU,0CACb,8BAAC,OAAA,EAAI,WAAU,qMAAoM,EAAA,CACrN;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YAGH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,IAEJ;AAEA,WACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAM,MAAA;AAAA,QAChE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fanvue/ui",
3
- "version": "2.10.0",
3
+ "version": "2.10.1",
4
4
  "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org",