@a-type/ui 0.8.5 → 0.8.7

package/dist/esm/components/tooltip/Tooltip.js

@@ -16,7 +16,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import classNames from 'clsx';
 function Content(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, Object.assign({ className: classNames('layer-components:relative layer-components:rounded-lg layer-components:py-2 layer-components:px-3 layer-components:border-default layer-components:text-sm layer-components:leading-tight layer-components:color-inherit layer-components:bg-white layer-components:shadow-sm layer-components:select-none layer-components:hidden layer-components:z-tooltip layer-components:sm:display-initial', '[&[data-state=delayed-open]]:display-initial', '[&[data-state=instant-open]]:display-initial', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "fill-white stroke-black stroke-1" })] })) }));
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, Object.assign({ className: classNames('layer-components:relative layer-components:rounded-md layer-components:py-2 layer-components:px-3 layer-components:bg-black layer-components:text-white layer-components:text-sm layer-components:leading-tight layer-components:shadow-sm layer-components:select-none layer-components:hidden layer-components:z-tooltip layer-components:sm:display-initial', '[&[data-state=delayed-open]]:display-initial', '[&[data-state=instant-open]]:display-initial', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "fill-black" })] })) }));
 }
 // Exports
 export const TooltipProvider = TooltipPrimitive.Provider;

package/dist/esm/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAGb,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,SAAS,OAAO,CAAC,EAIsB;QAJtB,EAChB,QAAQ,EACR,SAAS,OAE6B,EADnC,KAAK,cAHQ,yBAIhB,CADQ;IAER,OAAO,CACN,KAAC,gBAAgB,CAAC,MAAM,cACvB,MAAC,gBAAgB,CAAC,OAAO,kBACxB,SAAS,EAAE,UAAU,CACpB,wKAAwK,EACxK,8CAA8C,EAC9C,8CAA8C,EAC9C,mFAAmF,EACnF,kEAAkE,EAClE,SAAS,CACT,IACG,KAAK,eAER,QAAQ,EACT,KAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,kCAAkC,GAAG,KAC7C,GACF,CAC1B,CAAC;AACH,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAEzD,MAAM,UAAU,OAAO,CAAC,EAQvB;QARuB,EACvB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,OAIR,EAHG,IAAI,cALgB,2CAMvB,CADO;IAIP,OAAO,CACN,MAAC,gBAAgB,CAAC,IAAI,kBAAC,IAAI,EAAE,IAAI,iBAC/B,QAAQ,CAAC,CAAC,CAAC,CACX,QAAQ,CACR,CAAC,CAAC,CAAC,CACH,KAAC,gBAAgB,CAAC,cAAc,kBAAC,OAAO,UAAK,IAAI,cAC/C,QAAQ,IACwB,CAClC,EACD,KAAC,OAAO,kBAAC,UAAU,EAAE,EAAE,gBAAG,OAAO,IAAW,KACrB,CACxB,CAAC;AACH,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAGb,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,SAAS,OAAO,CAAC,EAIsB;QAJtB,EAChB,QAAQ,EACR,SAAS,OAE6B,EADnC,KAAK,cAHQ,yBAIhB,CADQ;IAER,OAAO,CACN,KAAC,gBAAgB,CAAC,MAAM,cACvB,MAAC,gBAAgB,CAAC,OAAO,kBACxB,SAAS,EAAE,UAAU,CACpB,sJAAsJ,EACtJ,8CAA8C,EAC9C,8CAA8C,EAC9C,mFAAmF,EACnF,kEAAkE,EAClE,SAAS,CACT,IACG,KAAK,eAER,QAAQ,EACT,KAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,KACvB,GACF,CAC1B,CAAC;AACH,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAEzD,MAAM,UAAU,OAAO,CAAC,EAQvB;QARuB,EACvB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,OAIR,EAHG,IAAI,cALgB,2CAMvB,CADO;IAIP,OAAO,CACN,MAAC,gBAAgB,CAAC,IAAI,kBAAC,IAAI,EAAE,IAAI,iBAC/B,QAAQ,CAAC,CAAC,CAAC,CACX,QAAQ,CACR,CAAC,CAAC,CAAC,CACH,KAAC,gBAAgB,CAAC,cAAc,kBAAC,OAAO,UAAK,IAAI,cAC/C,QAAQ,IACwB,CAClC,EACD,KAAC,OAAO,kBAAC,UAAU,EAAE,EAAE,gBAAG,OAAO,IAAW,KACrB,CACxB,CAAC;AACH,CAAC"}

package/dist/esm/components/tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip.js';
+declare const meta: {
+    title: string;
+    component: typeof Tooltip;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+    args: {
+        content: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;

package/dist/esm/components/tooltip/Tooltip.stories.js

@@ -0,0 +1,19 @@
+// @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from './Tooltip.js';
+const meta = {
+    title: 'Tooltip',
+    component: Tooltip,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+    args: {
+        content: 'hello world',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsx(Tooltip, Object.assign({}, args, { children: _jsx("button", { children: "Hover me" }) }))),
+};
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/esm/components/tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE;QACL,OAAO,EAAE,aAAa;KACtB;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,KAAC,OAAO,oBAAK,IAAI,cAChB,wCAAyB,IAChB,CACV;CACD,CAAC"}

package/dist/esm/hooks/index.d.ts

@@ -7,3 +7,4 @@ export * from './useOnUnmount.js';
 export * from './withClassName.js';
 export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
+export * from './useTitleBarColor.js';

package/dist/esm/hooks/index.js

@@ -8,4 +8,5 @@ export * from './useOnUnmount.js';
 export * from './withClassName.js';
 export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
+export * from './useTitleBarColor.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/dist/esm/hooks/useTitleBarColor.d.ts

@@ -0,0 +1,5 @@
+export declare function useTitleBarColor(color: string): void;
+export declare function useSetTitleBarColor(): {
+    setColor: (color: string) => void;
+    resetColor: () => void;
+};

package/dist/esm/hooks/useTitleBarColor.js

@@ -0,0 +1,32 @@
+// @unocss-include
+var _a, _b;
+import { useCallback, useEffect } from 'react';
+let defaultColor = '#ffffff';
+if (typeof document !== 'undefined') {
+    defaultColor =
+        (_b = (_a = document.querySelector('meta[name=theme-color]')) === null || _a === void 0 ? void 0 : _a.getAttribute('content')) !== null && _b !== void 0 ? _b : defaultColor;
+}
+function changeThemeColor(color) {
+    // evaluate css var if necessary
+    if (color.startsWith('var(')) {
+        const root = document.documentElement;
+        const cssVar = color.slice(4, -1).trim();
+        color = getComputedStyle(root).getPropertyValue(cssVar);
+    }
+    var metaThemeColor = document.querySelector('meta[name=theme-color]');
+    metaThemeColor === null || metaThemeColor === void 0 ? void 0 : metaThemeColor.setAttribute('content', color);
+}
+export function useTitleBarColor(color) {
+    useEffect(() => {
+        changeThemeColor(color);
+        return () => {
+            changeThemeColor(defaultColor);
+        };
+    }, [color]);
+}
+export function useSetTitleBarColor() {
+    const setColor = useCallback((color) => changeThemeColor(color), []);
+    const resetColor = useCallback(() => changeThemeColor(defaultColor), []);
+    return { setColor, resetColor };
+}
+//# sourceMappingURL=useTitleBarColor.js.map

package/dist/esm/hooks/useTitleBarColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,IAAI,YAAY,GAAG,SAAS,CAAC;AAC7B,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;IACpC,YAAY;QACX,MAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,0CAAE,YAAY,CAAC,SAAS,CAAC,mCACzE,YAAY,CAAC;CACd;AAED,SAAS,gBAAgB,CAAC,KAAa;IACtC,gCAAgC;IAChC,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;QAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACzC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;KACxD;IACD,IAAI,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACtE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAa;IAC7C,SAAS,CAAC,GAAG,EAAE;QACd,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,OAAO,GAAG,EAAE;YACX,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACb,CAAC;AAED,MAAM,UAAU,mBAAmB;IAClC,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IACzE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AACjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "type": "module",
   "files": [
     "/dist",

package/src/components/button/classes.tsx

@@ -16,7 +16,7 @@ export function getButtonClassName({
 		'layer-components:(px-4 py-2 bg-[var(--bg)] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-sans border border-solid border-transparent rounded-full cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 shadow-none whitespace-nowrap)',
 		'layer-components:hover:(bg-[var(--hover)] shadow-[0_0_0_6px_var(--hover)])',
 		'layer-components:focus:outline-off',
-		'layer-components:focus-visible:(outline-off shadow-[0_0_0_6px_var(--focus,var(--hover))])',
+		'layer-components:focus-visible:(outline-off [box-shadow:0_0_0_6px_var(--focus,var(--hover))])',
 		'layer-components:active:(shadow-[0_0_0_6px_var(--active)] bg-[var(--active)])',
 		'important:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)',
 		'important:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)',
@@ -36,7 +36,7 @@ export function getButtonClassName({
 const colors = {
 	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)] color-black border-black focus-visible:([--bg:var(--color-primary)]))`,
 	accent: `layer-variants:[&.btn-color-accent]:([--bg:var(--color-accent-wash)] [--hover:var(--color-accent-light)] [--focus:var(--color-accent-light)] [--active:var(--color-accent-light)] color-black border-black focus-visible:([--bg:var(--color-accent-light)]))`,
-	default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] [--hover:var(--color-gray-2)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-3)] color-black border-black)`,
+	default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] [--hover:var(--color-gray-2)] [--focus:var(--color-gray-dark-blend)] [--active:var(--color-gray-3)] color-black border-black)`,
 	ghost: `layer-variants:[&.btn-color-ghost]:([--bg:transparent] [--hover:var(--color-gray-blend)] [--focus:var(--color-gray-dark-blend)] [--active:var(--color-gray-dark-blend)] color-dark-blend)`,
 	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention-light)] [--hover:var(--color-attention-light)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] border-black color-black hover:([--bg:var(--colors-attention)]))`,
 	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg:transparent] [--hover:rgb(from_var(--color-attention-light)_r_g_b/0.25)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] color-attention-dark)`,

package/src/components/dialog/Dialog.tsx

@@ -21,7 +21,7 @@ import { useDrag } from '@use-gesture/react';
 
 const StyledOverlay = withClassName(
 	DialogPrimitive.Overlay,
-	'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-gray-dark-blend)',
+	'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-gray-dark-blend [box-shadow:inset_0_30px_60px_0px_#00001020] border-top-1 border-top-solid border-top-gray-5)',
 	'layer-components:[&[data-state=closed]]:animate-fade-out',
 	'motion-reduce:animate-none',
 );

package/src/components/input/Input.tsx

@@ -9,8 +9,8 @@ import {
 
 export const inputClassName = classNames(
 	'layer-components:(px-4 py-2 text-md font-sans rounded-lg bg-white select-auto min-w-60px color-black border-default)',
-	'layer-components:focus:(outline-none bg-gray2)',
-	'layer-components:focus-visible:(outline-none shadow-focus)',
+	'layer-components:focus:(outline-none bg-gray2 ring-4	ring-white)',
+	'layer-components:focus-visible:(outline-none ring-primary-wash)',
 	'layer-components:md:(min-w-120px)',
 );
 

package/src/components/layouts/PageContent.tsx

@@ -29,7 +29,7 @@ export function PageContent({
 		<div
 			className={classNames(
 				'layer-components:([grid-area:content] max-w-full min-w-0 w-full flex flex-col items-start relative flex-1 gap-3)',
-				'layer-components:(rounded-b-lg border-b border-b-solid border-b-[#00000070] bg-wash sm:border-none sm:rounded-0)',
+				'layer-components:(rounded-b-lg border-b border-b-solid border-b-[#00000070] bg-wash [box-shadow:0_0_10px_0_#00000024] sm:border-none sm:rounded-0 sm:shadow-none)',
 				{ 'layer-variants:(overflow-y-auto h-full)': scrollable },
 				className,
 			)}

package/src/components/layouts/layouts.stories.tsx

@@ -6,6 +6,7 @@ import {
 	NavBarItem,
 	NavBarItemIcon,
 	NavBarItemIconWrapper,
+	NavBarItemPip,
 	NavBarItemText,
 	NavBarRoot,
 } from '../navBar.js';
@@ -37,19 +38,16 @@ export const Default: Story = {
 				<NavBarRoot>
 					<NavBarItem>
 						<NavBarItemIconWrapper>
-							<NavBarItemIcon>
-								<Icon name="placeholder" />
-							</NavBarItemIcon>
+							<NavBarItemIcon name="calendar" />
 						</NavBarItemIconWrapper>
 						<NavBarItemText>Item 1</NavBarItemText>
 					</NavBarItem>
-					<NavBarItem>
+					<NavBarItem active={true}>
 						<NavBarItemIconWrapper>
-							<NavBarItemIcon>
-								<Icon name="placeholder" />
-							</NavBarItemIcon>
+							<NavBarItemIcon name="book" />
 						</NavBarItemIconWrapper>
 						<NavBarItemText>Item 2</NavBarItemText>
+						<NavBarItemPip />
 					</NavBarItem>
 				</NavBarRoot>
 			</PageNav>

package/src/components/navBar/NavBar.tsx

@@ -1,30 +1,34 @@
-import classNames from 'clsx';
+import classNames, { clsx } from 'clsx';
 import { withClassName } from '../../hooks.js';
 import { ReactNode, forwardRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import { Icon, IconProps } from '../icon.js';
 
 export const navBarItemClass = classNames(
-	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-inherit)',
+	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-gray-7 select-none)',
 	'layer-components:sm:(flex-row-reverse h-auto justify-start gap-2 overflow-visible)',
-	'layer-components:hover:bg-primaryWash',
-	'layer-components:focus-visible:(outline-none bg-primaryWash)',
-	'layer-components:active:bg-primaryWash',
+	'layer-components:hover:bg-primary-wash',
+	'layer-components:focus-visible:(outline-none bg-primary-wash)',
+	'layer-components:active:bg-primary-wash layer-components:sm:active:bg-gray-dark-blend',
+	'layer-components:[&[data-active=true]]:(bg-primary-wash text-primary-dark)',
 );
 
 export interface NavBarItemProps {
 	asChild?: boolean;
 	className?: string;
 	children?: ReactNode;
+	active?: boolean;
 }
 
 export const NavBarItem = forwardRef<HTMLDivElement, NavBarItemProps>(
-	function NavBarItem({ asChild, className, ...rest }, ref) {
+	function NavBarItem({ asChild, className, active, ...rest }, ref) {
 		const Comp = asChild ? Slot : 'div';
 
 		return (
 			<Comp
 				ref={ref}
 				className={classNames(navBarItemClass, className)}
+				data-active={active}
 				{...rest}
 			/>
 		);
@@ -33,7 +37,8 @@ export const NavBarItem = forwardRef<HTMLDivElement, NavBarItemProps>(
 
 export const NavBarItemIconWrapper = withClassName(
 	'div',
-	'layer-components:(relative flex) layer-components:sm:(p-6px rounded-full bg-lightBlend)',
+	'layer-components:(relative flex) layer-components:sm:(p-6px rounded-full bg-gray-blend)',
+	'layer-variants:[*[data-active=true]_&]:bg-primary-light',
 );
 
 export const NavBarItemText = withClassName(
@@ -41,9 +46,33 @@ export const NavBarItemText = withClassName(
 	'layer-components:(overflow-hidden pl-1 inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:sm:(text-md leading-normal)',
 );
 
-export const NavBarItemIcon = withClassName(
-	'div',
-	'layer-components:(relative z-1 flex fill-none [a[data-active=true]_&]:fill-primary-light)',
+interface NavBarItemIconProps {
+	asChild?: boolean;
+	name?: IconProps['name'];
+	className?: string;
+	children?: ReactNode;
+}
+export const NavBarItemIcon = forwardRef<any, NavBarItemIconProps>(
+	function NavBarItemIcon(
+		{ children, asChild, className, name = 'placeholder', ...rest },
+		ref,
+	) {
+		const Comp = asChild ? Slot : Icon;
+		return (
+			<Comp
+				name={name}
+				className={clsx(
+					'layer-components:(relative z-1 flex fill-none)',
+					'layer-variants:[*[data-active=true]_&]:fill-primary-light',
+					className,
+				)}
+				{...rest}
+				ref={ref}
+			>
+				{children}
+			</Comp>
+		);
+	},
 );
 
 export const NavBarItemPip = withClassName(

package/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip.js';
+
+const meta = {
+	title: 'Tooltip',
+	component: Tooltip,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+	args: {
+		content: 'hello world',
+	},
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+	render: (args) => (
+		<Tooltip {...args}>
+			<button>Hover me</button>
+		</Tooltip>
+	),
+};

package/src/components/tooltip/Tooltip.tsx

@@ -13,7 +13,7 @@ function Content({
 		<TooltipPrimitive.Portal>
 			<TooltipPrimitive.Content
 				className={classNames(
-					'layer-components:(relative rounded-lg py-2 px-3 border-default text-sm leading-tight color-inherit bg-white shadow-sm select-none hidden z-tooltip sm:display-initial)',
+					'layer-components:(relative rounded-md py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
 					'[&[data-state=delayed-open]]:display-initial',
 					'[&[data-state=instant-open]]:display-initial',
 					'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
@@ -23,7 +23,7 @@ function Content({
 				{...props}
 			>
 				{children}
-				<TooltipPrimitive.Arrow className="fill-white stroke-black stroke-1" />
+				<TooltipPrimitive.Arrow className="fill-black" />
 			</TooltipPrimitive.Content>
 		</TooltipPrimitive.Portal>
 	);

package/src/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './useOnUnmount.js';
 export * from './withClassName.js';
 export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
+export * from './useTitleBarColor.js';

package/src/hooks/useTitleBarColor.ts

@@ -0,0 +1,34 @@
+import { useCallback, useEffect } from 'react';
+
+let defaultColor = '#ffffff';
+if (typeof document !== 'undefined') {
+	defaultColor =
+		document.querySelector('meta[name=theme-color]')?.getAttribute('content') ??
+		defaultColor;
+}
+
+function changeThemeColor(color: string) {
+	// evaluate css var if necessary
+	if (color.startsWith('var(')) {
+		const root = document.documentElement;
+		const cssVar = color.slice(4, -1).trim();
+		color = getComputedStyle(root).getPropertyValue(cssVar);
+	}
+	var metaThemeColor = document.querySelector('meta[name=theme-color]');
+	metaThemeColor?.setAttribute('content', color);
+}
+
+export function useTitleBarColor(color: string) {
+	useEffect(() => {
+		changeThemeColor(color);
+		return () => {
+			changeThemeColor(defaultColor);
+		};
+	}, [color]);
+}
+
+export function useSetTitleBarColor() {
+	const setColor = useCallback((color: string) => changeThemeColor(color), []);
+	const resetColor = useCallback(() => changeThemeColor(defaultColor), []);
+	return { setColor, resetColor };
+}