@adea-ai/ui 0.122.0 → 0.122.2
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.
- package/dist/components/layout/contextual-sidebar/contextual-sidebar.d.ts +4 -1
- package/dist/components/layout/contextual-sidebar/contextual-sidebar.d.ts.map +1 -1
- package/dist/components/layout/contextual-sidebar/contextual-sidebar.js +1 -1
- package/dist/components/layout/contextual-sidebar/contextual-sidebar.js.map +1 -1
- package/dist/components/layout/pixel-resize-handle/pixel-resize-handle.d.ts +4 -1
- package/dist/components/layout/pixel-resize-handle/pixel-resize-handle.d.ts.map +1 -1
- package/dist/components/layout/pixel-resize-handle/pixel-resize-handle.js +1 -1
- package/dist/components/layout/pixel-resize-handle/pixel-resize-handle.js.map +1 -1
- package/dist/components/ui/button/button.d.ts.map +1 -1
- package/dist/components/ui/button/button.js +6 -4
- package/dist/components/ui/button/button.js.map +1 -1
- package/dist/r/src/components/layout/contextual-sidebar/contextual-sidebar.tsx +5 -2
- package/dist/r/src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx +5 -2
- package/dist/r/src/components/ui/button/button.tsx +7 -4
- package/package.json +1 -1
- package/src/components/layout/contextual-sidebar/contextual-sidebar.tsx +5 -2
- package/src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx +5 -2
- package/src/components/ui/button/button.tsx +7 -4
|
@@ -30,7 +30,10 @@ export type ContextualSidebarProps = {
|
|
|
30
30
|
/** Pass the host's initial viewport seed to distinguish stale desktop state. */
|
|
31
31
|
wideViewportAtLoad?: boolean;
|
|
32
32
|
resizeLabel?: string;
|
|
33
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* The resize edge's grip: the quieter rung by default, or the bordered chip
|
|
35
|
+
* for hosts that want the heavier affordance.
|
|
36
|
+
*/
|
|
34
37
|
resizeGrip?: 'chip' | 'rung';
|
|
35
38
|
/** Stable external opener used when the modal mobile sheet closes. */
|
|
36
39
|
restoreFocusRef?: Accessor<HTMLElement | undefined>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contextual-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/contextual-sidebar/contextual-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAe7C,MAAM,MAAM,8BAA8B,GAAG;IAC3C,wEAAwE;IACxE,MAAM,EAAE,OAAO,CAAA;IACf,qFAAqF;IACrF,WAAW,IAAI,WAAW,GAAG,SAAS,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,qDAAqD;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IACrC,8EAA8E;IAC9E,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;IACjC,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB
|
|
1
|
+
{"version":3,"file":"contextual-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/contextual-sidebar/contextual-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAe7C,MAAM,MAAM,8BAA8B,GAAG;IAC3C,wEAAwE;IACxE,MAAM,EAAE,OAAO,CAAA;IACf,qFAAqF;IACrF,WAAW,IAAI,WAAW,GAAG,SAAS,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,qDAAqD;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IACrC,8EAA8E;IAC9E,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;IACjC,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,sEAAsE;IACtE,eAAe,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,CAAA;IACnD,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9E,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACnD,iEAAiE;IACjE,MAAM,CAAC,CAAC,OAAO,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7D,0EAA0E;IAC1E,OAAO,CAAC,OAAO,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7D,oEAAoE;IACpE,MAAM,CAAC,CAAC,OAAO,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7D,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAoJ9D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contextual-sidebar.js","names":["Accessor","JSX","Show","createSignal","createUniqueId","onCleanup","onMount","cn","SidebarNav","SidebarNavContent","SidebarNavFooter","SidebarNavHeader","SidebarNavTitle","PixelResizeHandle","MobileModule","MobileLoad","error","ContextualSidebarRenderContext","mobile","portalMount","HTMLElement","ContextualSidebarProps","id","label","title","titleVisibility","open","onOpenChange","width","minimum","maximum","step","wideViewportAtLoad","resizeLabel","resizeGrip","restoreFocusRef","onSidebarElement","element","sidebarClass","sheetClass","headerClass","contentClass","footerClass","headingAs","header","context","Element","content","footer","onWidthChange","onWidthCommit","ContextualSidebar","props","isNarrowViewport","setIsNarrowViewport","mobileLoad","setMobileLoad","mobileRequested","loadMobile","then","module","mobileMount","setMobileMount","connected","mount","isConnected","undefined","media","window","matchMedia","updateViewport","wasNarrow","matches","addEventListener","removeEventListener","renderSidebar","navigationId","_$createComponent","as","aria-label","aria-hidden","inert","data-open","String","ref","node","queueMicrotask","class","children","when","side","value","grip","controls","onChange","onCommit","fallback","_$memo","_wide","keyed","loaded","MobileSidebar","_$createComponent","_$memo"],"sources":["../../../../src/components/layout/contextual-sidebar/contextual-sidebar.tsx"],"sourcesContent":["import type { Accessor, JSX } from 'solid-js'\nimport { Show, createSignal, createUniqueId, onCleanup, onMount } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport {\n SidebarNav,\n SidebarNavContent,\n SidebarNavFooter,\n SidebarNavHeader,\n SidebarNavTitle,\n} from '../sidebar-nav/sidebar-nav'\nimport { PixelResizeHandle } from '../pixel-resize-handle/pixel-resize-handle'\n\ntype MobileModule = typeof import('./mobile-contextual-sidebar')\ntype MobileLoad = MobileModule | { error: unknown }\n\nexport type ContextualSidebarRenderContext = {\n /** Whether the slot is being rendered inside the modal mobile sheet. */\n mobile: boolean\n /** Mount nested popovers and menus inside the mobile dialog's accessibility tree. */\n portalMount(): HTMLElement | undefined\n}\n\nexport type ContextualSidebarProps = {\n /** Stable host id prefix; generated when omitted. */\n id?: string\n /** Landmark name shared by the desktop and mobile navigation. */\n label: string\n /** Visible navigation title and mobile dialog title. */\n title: string\n /**\n * Where the title row shows. `always` (default) draws it on desktop and in\n * the mobile sheet; `mobile` keeps the desktop title for assistive\n * technology only and drops the desktop row, for hosts whose top bar\n * already names the context. A `header` slot keeps the row visible.\n */\n titleVisibility?: 'always' | 'mobile'\n /** Host-controlled expanded state for the desktop panel and mobile dialog. */\n open: boolean\n onOpenChange(open: boolean): void\n /** Current host-owned pixel width, reflected by the resize handle. */\n width: number\n minimum: number\n maximum: number\n step?: number\n /** Pass the host's initial viewport seed to distinguish stale desktop state. */\n wideViewportAtLoad?: boolean\n resizeLabel?: string\n /** The resize edge's grip: the default bordered chip, or the quieter rung. */\n resizeGrip?: 'chip' | 'rung'\n /** Stable external opener used when the modal mobile sheet closes. */\n restoreFocusRef?: Accessor<HTMLElement | undefined>\n /** Called with the nav node so a host can project width onto its layout root. */\n onSidebarElement?: (element: HTMLElement | undefined, mobile: boolean) => void\n /** Host-owned layout classes applied to both nav instances. */\n sidebarClass?: string\n /** Host-owned responsive constraints for the modal sheet. */\n sheetClass?: string\n headerClass?: string\n contentClass?: string\n footerClass?: string\n headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n /** Optional action/content slot alongside the shared heading. */\n header?(context: ContextualSidebarRenderContext): JSX.Element\n /** View-specific navigation rows, projects, rooms, files, or sessions. */\n content(context: ContextualSidebarRenderContext): JSX.Element\n /** Optional view-specific footer, such as an archive affordance. */\n footer?(context: ContextualSidebarRenderContext): JSX.Element\n onWidthChange(width: number): void\n onWidthCommit?(width: number): void\n}\n\n/**\n * ContextualSidebar.\n *\n * Shared navigation geometry and interaction policy for an application's\n * contextual sidebar. The host keeps ownership of the actual grid width,\n * persisted preference, open state, and view-specific navigation content.\n */\nexport function ContextualSidebar(props: ContextualSidebarProps) {\n const [isNarrowViewport, setIsNarrowViewport] = createSignal(false)\n const [mobileLoad, setMobileLoad] = createSignal<MobileLoad>()\n let mobileRequested = false\n // Keep the resolved component mounted across viewport changes for Sheet cleanup.\n const loadMobile = () => {\n if (mobileRequested) return\n mobileRequested = true\n // Native module caching shares successful loads without keeping a rejected promise.\n void import('./mobile-contextual-sidebar').then(\n (module) => {\n if (mobileRequested) setMobileLoad(module)\n },\n (error: unknown) => {\n if (mobileRequested) setMobileLoad({ error })\n }\n )\n }\n const [mobileMount, setMobileMount] = createSignal<\n { element: HTMLElement; connected: boolean } | undefined\n >()\n const id = props.id ?? `contextual-sidebar-${createUniqueId()}`\n const resizeLabel = () => props.resizeLabel ?? `Resize ${props.label}`\n const portalMount = () => {\n const mount = mobileMount()\n return mount?.connected && mount.element.isConnected ? mount.element : undefined\n }\n\n onMount(() => {\n const media = window.matchMedia('(max-width: 48rem)')\n const updateViewport = () => {\n const wasNarrow = isNarrowViewport()\n if (media.matches) loadMobile()\n // Close before mounting a modal. A desktop-expanded host state is not\n // mobile intent, and opening the Sheet for one frame can steal focus.\n if (media.matches && !wasNarrow) props.onOpenChange(false)\n setIsNarrowViewport(media.matches)\n }\n\n // A route can mount after a wide-loaded host crosses into mobile. Clear\n // that stale seed, but preserve a sidebar intentionally opened at a\n // narrow boot viewport.\n if (media.matches) loadMobile()\n if (media.matches && props.wideViewportAtLoad && props.open) props.onOpenChange(false)\n setIsNarrowViewport(media.matches)\n media.addEventListener('change', updateViewport)\n onCleanup(() => {\n mobileRequested = false\n media.removeEventListener('change', updateViewport)\n })\n })\n\n const renderSidebar = (mobile: boolean) => {\n let element: HTMLElement | undefined\n const context: ContextualSidebarRenderContext = {\n mobile,\n portalMount: () => (mobile ? portalMount() : undefined),\n }\n const navigationId = `${id}-${mobile ? 'mobile' : 'desktop'}`\n\n onCleanup(() => {\n if (mobile && mobileMount()?.element === element) setMobileMount(undefined)\n element = undefined\n props.onSidebarElement?.(undefined, mobile)\n })\n\n return (\n <SidebarNav\n as=\"aside\"\n id={navigationId}\n aria-label={props.label}\n aria-hidden={!mobile && !props.open ? 'true' : undefined}\n inert={!mobile && !props.open}\n data-contextual-sidebar={mobile ? 'mobile' : 'desktop'}\n data-open={mobile ? undefined : String(props.open)}\n ref={(node) => {\n element = node\n if (mobile) {\n setMobileMount({ element: node, connected: node.isConnected })\n queueMicrotask(() => {\n if (node.isConnected && mobileMount()?.element === node)\n setMobileMount({ element: node, connected: true })\n })\n }\n props.onSidebarElement?.(node, mobile)\n }}\n class={cn('relative h-full w-full max-w-full', props.sidebarClass)}\n >\n <Show when={!mobile && props.open}>\n <PixelResizeHandle\n // The ruler spans the sidebar as a pointer-events-none overlay; lift\n // it above the neighbouring pane so the edge stays grabbable.\n class=\"z-(--z-docked)\"\n side=\"left\"\n value={props.width}\n minimum={props.minimum}\n maximum={props.maximum}\n step={props.step}\n label={resizeLabel()}\n grip={props.resizeGrip}\n controls={navigationId}\n onChange={props.onWidthChange}\n onCommit={props.onWidthCommit}\n />\n </Show>\n <Show when={!mobile || mobileMount()?.connected}>\n <Show\n when={mobile || props.titleVisibility !== 'mobile' || props.header}\n fallback={\n <SidebarNavTitle as={props.headingAs ?? 'h2'} class=\"sr-only\">\n {props.title}\n </SidebarNavTitle>\n }\n >\n <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>\n <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>\n {props.header?.(context)}\n </SidebarNavHeader>\n </Show>\n <SidebarNavContent class={props.contentClass}>{props.content(context)}</SidebarNavContent>\n {props.footer ? (\n <SidebarNavFooter class={props.footerClass}>{props.footer(context)}</SidebarNavFooter>\n ) : null}\n </Show>\n </SidebarNav>\n )\n }\n\n return (\n <>\n <Show when={!isNarrowViewport()}>{(_wide) => renderSidebar(false)}</Show>\n <Show when={mobileLoad()} keyed>\n {(loaded) => {\n if ('error' in loaded) throw loaded.error\n return (\n <loaded.MobileSidebar\n open={isNarrowViewport() && props.open}\n onOpenChange={props.onOpenChange}\n label={props.label}\n sheetClass={props.sheetClass}\n restoreFocusRef={props.restoreFocusRef}\n renderSidebar={() => renderSidebar(true)}\n />\n )\n }}\n </Show>\n </>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"contextual-sidebar.js","names":["Accessor","JSX","Show","createSignal","createUniqueId","onCleanup","onMount","cn","SidebarNav","SidebarNavContent","SidebarNavFooter","SidebarNavHeader","SidebarNavTitle","PixelResizeHandle","MobileModule","MobileLoad","error","ContextualSidebarRenderContext","mobile","portalMount","HTMLElement","ContextualSidebarProps","id","label","title","titleVisibility","open","onOpenChange","width","minimum","maximum","step","wideViewportAtLoad","resizeLabel","resizeGrip","restoreFocusRef","onSidebarElement","element","sidebarClass","sheetClass","headerClass","contentClass","footerClass","headingAs","header","context","Element","content","footer","onWidthChange","onWidthCommit","ContextualSidebar","props","isNarrowViewport","setIsNarrowViewport","mobileLoad","setMobileLoad","mobileRequested","loadMobile","then","module","mobileMount","setMobileMount","connected","mount","isConnected","undefined","media","window","matchMedia","updateViewport","wasNarrow","matches","addEventListener","removeEventListener","renderSidebar","navigationId","_$createComponent","as","aria-label","aria-hidden","inert","data-open","String","ref","node","queueMicrotask","class","children","when","side","value","grip","controls","onChange","onCommit","fallback","_$memo","_wide","keyed","loaded","MobileSidebar","_$createComponent","_$memo"],"sources":["../../../../src/components/layout/contextual-sidebar/contextual-sidebar.tsx"],"sourcesContent":["import type { Accessor, JSX } from 'solid-js'\nimport { Show, createSignal, createUniqueId, onCleanup, onMount } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport {\n SidebarNav,\n SidebarNavContent,\n SidebarNavFooter,\n SidebarNavHeader,\n SidebarNavTitle,\n} from '../sidebar-nav/sidebar-nav'\nimport { PixelResizeHandle } from '../pixel-resize-handle/pixel-resize-handle'\n\ntype MobileModule = typeof import('./mobile-contextual-sidebar')\ntype MobileLoad = MobileModule | { error: unknown }\n\nexport type ContextualSidebarRenderContext = {\n /** Whether the slot is being rendered inside the modal mobile sheet. */\n mobile: boolean\n /** Mount nested popovers and menus inside the mobile dialog's accessibility tree. */\n portalMount(): HTMLElement | undefined\n}\n\nexport type ContextualSidebarProps = {\n /** Stable host id prefix; generated when omitted. */\n id?: string\n /** Landmark name shared by the desktop and mobile navigation. */\n label: string\n /** Visible navigation title and mobile dialog title. */\n title: string\n /**\n * Where the title row shows. `always` (default) draws it on desktop and in\n * the mobile sheet; `mobile` keeps the desktop title for assistive\n * technology only and drops the desktop row, for hosts whose top bar\n * already names the context. A `header` slot keeps the row visible.\n */\n titleVisibility?: 'always' | 'mobile'\n /** Host-controlled expanded state for the desktop panel and mobile dialog. */\n open: boolean\n onOpenChange(open: boolean): void\n /** Current host-owned pixel width, reflected by the resize handle. */\n width: number\n minimum: number\n maximum: number\n step?: number\n /** Pass the host's initial viewport seed to distinguish stale desktop state. */\n wideViewportAtLoad?: boolean\n resizeLabel?: string\n /**\n * The resize edge's grip: the quieter rung by default, or the bordered chip\n * for hosts that want the heavier affordance.\n */\n resizeGrip?: 'chip' | 'rung'\n /** Stable external opener used when the modal mobile sheet closes. */\n restoreFocusRef?: Accessor<HTMLElement | undefined>\n /** Called with the nav node so a host can project width onto its layout root. */\n onSidebarElement?: (element: HTMLElement | undefined, mobile: boolean) => void\n /** Host-owned layout classes applied to both nav instances. */\n sidebarClass?: string\n /** Host-owned responsive constraints for the modal sheet. */\n sheetClass?: string\n headerClass?: string\n contentClass?: string\n footerClass?: string\n headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n /** Optional action/content slot alongside the shared heading. */\n header?(context: ContextualSidebarRenderContext): JSX.Element\n /** View-specific navigation rows, projects, rooms, files, or sessions. */\n content(context: ContextualSidebarRenderContext): JSX.Element\n /** Optional view-specific footer, such as an archive affordance. */\n footer?(context: ContextualSidebarRenderContext): JSX.Element\n onWidthChange(width: number): void\n onWidthCommit?(width: number): void\n}\n\n/**\n * ContextualSidebar.\n *\n * Shared navigation geometry and interaction policy for an application's\n * contextual sidebar. The host keeps ownership of the actual grid width,\n * persisted preference, open state, and view-specific navigation content.\n */\nexport function ContextualSidebar(props: ContextualSidebarProps) {\n const [isNarrowViewport, setIsNarrowViewport] = createSignal(false)\n const [mobileLoad, setMobileLoad] = createSignal<MobileLoad>()\n let mobileRequested = false\n // Keep the resolved component mounted across viewport changes for Sheet cleanup.\n const loadMobile = () => {\n if (mobileRequested) return\n mobileRequested = true\n // Native module caching shares successful loads without keeping a rejected promise.\n void import('./mobile-contextual-sidebar').then(\n (module) => {\n if (mobileRequested) setMobileLoad(module)\n },\n (error: unknown) => {\n if (mobileRequested) setMobileLoad({ error })\n }\n )\n }\n const [mobileMount, setMobileMount] = createSignal<\n { element: HTMLElement; connected: boolean } | undefined\n >()\n const id = props.id ?? `contextual-sidebar-${createUniqueId()}`\n const resizeLabel = () => props.resizeLabel ?? `Resize ${props.label}`\n const portalMount = () => {\n const mount = mobileMount()\n return mount?.connected && mount.element.isConnected ? mount.element : undefined\n }\n\n onMount(() => {\n const media = window.matchMedia('(max-width: 48rem)')\n const updateViewport = () => {\n const wasNarrow = isNarrowViewport()\n if (media.matches) loadMobile()\n // Close before mounting a modal. A desktop-expanded host state is not\n // mobile intent, and opening the Sheet for one frame can steal focus.\n if (media.matches && !wasNarrow) props.onOpenChange(false)\n setIsNarrowViewport(media.matches)\n }\n\n // A route can mount after a wide-loaded host crosses into mobile. Clear\n // that stale seed, but preserve a sidebar intentionally opened at a\n // narrow boot viewport.\n if (media.matches) loadMobile()\n if (media.matches && props.wideViewportAtLoad && props.open) props.onOpenChange(false)\n setIsNarrowViewport(media.matches)\n media.addEventListener('change', updateViewport)\n onCleanup(() => {\n mobileRequested = false\n media.removeEventListener('change', updateViewport)\n })\n })\n\n const renderSidebar = (mobile: boolean) => {\n let element: HTMLElement | undefined\n const context: ContextualSidebarRenderContext = {\n mobile,\n portalMount: () => (mobile ? portalMount() : undefined),\n }\n const navigationId = `${id}-${mobile ? 'mobile' : 'desktop'}`\n\n onCleanup(() => {\n if (mobile && mobileMount()?.element === element) setMobileMount(undefined)\n element = undefined\n props.onSidebarElement?.(undefined, mobile)\n })\n\n return (\n <SidebarNav\n as=\"aside\"\n id={navigationId}\n aria-label={props.label}\n aria-hidden={!mobile && !props.open ? 'true' : undefined}\n inert={!mobile && !props.open}\n data-contextual-sidebar={mobile ? 'mobile' : 'desktop'}\n data-open={mobile ? undefined : String(props.open)}\n ref={(node) => {\n element = node\n if (mobile) {\n setMobileMount({ element: node, connected: node.isConnected })\n queueMicrotask(() => {\n if (node.isConnected && mobileMount()?.element === node)\n setMobileMount({ element: node, connected: true })\n })\n }\n props.onSidebarElement?.(node, mobile)\n }}\n class={cn('relative h-full w-full max-w-full', props.sidebarClass)}\n >\n <Show when={!mobile && props.open}>\n <PixelResizeHandle\n // The ruler spans the sidebar as a pointer-events-none overlay; lift\n // it above the neighbouring pane so the edge stays grabbable.\n class=\"z-(--z-docked)\"\n side=\"left\"\n value={props.width}\n minimum={props.minimum}\n maximum={props.maximum}\n step={props.step}\n label={resizeLabel()}\n grip={props.resizeGrip ?? 'rung'}\n controls={navigationId}\n onChange={props.onWidthChange}\n onCommit={props.onWidthCommit}\n />\n </Show>\n <Show when={!mobile || mobileMount()?.connected}>\n <Show\n when={mobile || props.titleVisibility !== 'mobile' || props.header}\n fallback={\n <SidebarNavTitle as={props.headingAs ?? 'h2'} class=\"sr-only\">\n {props.title}\n </SidebarNavTitle>\n }\n >\n <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>\n <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>\n {props.header?.(context)}\n </SidebarNavHeader>\n </Show>\n <SidebarNavContent class={props.contentClass}>{props.content(context)}</SidebarNavContent>\n {props.footer ? (\n <SidebarNavFooter class={props.footerClass}>{props.footer(context)}</SidebarNavFooter>\n ) : null}\n </Show>\n </SidebarNav>\n )\n }\n\n return (\n <>\n <Show when={!isNarrowViewport()}>{(_wide) => renderSidebar(false)}</Show>\n <Show when={mobileLoad()} keyed>\n {(loaded) => {\n if ('error' in loaded) throw loaded.error\n return (\n <loaded.MobileSidebar\n open={isNarrowViewport() && props.open}\n onOpenChange={props.onOpenChange}\n label={props.label}\n sheetClass={props.sheetClass}\n restoreFocusRef={props.restoreFocusRef}\n renderSidebar={() => renderSidebar(true)}\n />\n )\n }}\n </Show>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAiFA,SAAgBmD,kBAAkBC,OAA+B;CAC/D,MAAM,CAACC,kBAAkBC,uBAAuBnD,aAAa,KAAK;CAClE,MAAM,CAACoD,YAAYC,iBAAiBrD,aAAyB;CAC7D,IAAIsD,kBAAkB;CAEtB,MAAMC,mBAAmB;EACvB,IAAID,iBAAiB;EACrBA,kBAAkB;EAElB,OAAY,iCAA8B,CAACE,MACxCC,WAAW;GACV,IAAIH,iBAAiBD,cAAcI,MAAM;EAC3C,IACC5C,UAAmB;GAClB,IAAIyC,iBAAiBD,cAAc,EAAExC,MAAM,CAAC;EAC9C,CACF;CACF;CACA,MAAM,CAAC6C,aAAaC,kBAAkB3D,aAEpC;CACF,MAAMmB,KAAK8B,MAAM9B,MAAM,sBAAsBlB,eAAe;CAC5D,MAAM6B,oBAAoBmB,MAAMnB,eAAe,UAAUmB,MAAM7B;CAC/D,MAAMJ,oBAAoB;EACxB,MAAM6C,QAAQH,YAAY;EAC1B,OAAOG,OAAOD,aAAaC,MAAM3B,QAAQ4B,cAAcD,MAAM3B,UAAU6B,KAAAA;CACzE;CAEA5D,cAAc;EACZ,MAAM6D,QAAQC,OAAOC,WAAW,oBAAoB;EACpD,MAAMC,uBAAuB;GAC3B,MAAMC,YAAYlB,iBAAiB;GACnC,IAAIc,MAAMK,SAASd,WAAW;GAG9B,IAAIS,MAAMK,WAAW,CAACD,WAAWnB,MAAMzB,aAAa,KAAK;GACzD2B,oBAAoBa,MAAMK,OAAO;EACnC;EAKA,IAAIL,MAAMK,SAASd,WAAW;EAC9B,IAAIS,MAAMK,WAAWpB,MAAMpB,sBAAsBoB,MAAM1B,MAAM0B,MAAMzB,aAAa,KAAK;EACrF2B,oBAAoBa,MAAMK,OAAO;EACjCL,MAAMM,iBAAiB,UAAUH,cAAc;EAC/CjE,gBAAgB;GACdoD,kBAAkB;GAClBU,MAAMO,oBAAoB,UAAUJ,cAAc;EACpD,CAAC;CACH,CAAC;CAED,MAAMK,iBAAiBzD,WAAoB;EACzC,IAAImB;EACJ,MAAMQ,UAA0C;GAC9C3B;GACAC,mBAAoBD,SAASC,YAAY,IAAI+C,KAAAA;EAC/C;EACA,MAAMU,eAAe,GAAGtD,GAAE,GAAIJ,SAAS,WAAW;EAElDb,gBAAgB;GACd,IAAIa,UAAU2C,YAAY,CAAC,EAAExB,YAAYA,SAASyB,eAAeI,KAAAA,CAAS;GAC1E7B,UAAU6B,KAAAA;GACVd,MAAMhB,mBAAmB8B,KAAAA,GAAWhD,MAAM;EAC5C,CAAC;EAED,OAAA2D,gBACGrE,YAAU;GACTsE,IAAE;GACFxD,IAAIsD;GAAY,KAAA,gBAAA;IAAA,OACJxB,MAAM7B;GAAK;GAAA,KAAA,iBAAA;IAAA,OACV,CAACL,UAAU,CAACkC,MAAM1B,OAAO,SAASwC,KAAAA;GAAS;GAAA,IACxDe,QAAK;IAAA,OAAE,CAAC/D,UAAU,CAACkC,MAAM1B;GAAI;GAAA,2BACJR,SAAS,WAAW;GAAS,KAAA,eAAA;IAAA,OAC3CA,SAASgD,KAAAA,IAAYiB,OAAO/B,MAAM1B,IAAI;GAAC;GAAA0D,MAC5CC,SAAS;IACbhD,UAAUgD;IACV,IAAInE,QAAQ;KACV4C,eAAe;MAAEzB,SAASgD;MAAMtB,WAAWsB,KAAKpB;KAAY,CAAC;KAC7DqB,qBAAqB;MACnB,IAAID,KAAKpB,eAAeJ,YAAY,CAAC,EAAExB,YAAYgD,MACjDvB,eAAe;OAAEzB,SAASgD;OAAMtB,WAAW;MAAK,CAAC;KACrD,CAAC;IACH;IACAX,MAAMhB,mBAAmBiD,MAAMnE,MAAM;GACvC;GAAC,KAAA,WAAA;IAAA,OACMX,GAAG,qCAAqC6C,MAAMd,YAAY;GAAC;GAAA,IAAAkD,WAAA;IAAA,OAAA,CAAAX,gBAEjE3E,MAAI;KAAA,IAACuF,OAAI;MAAA,OAAE,CAACvE,UAAUkC,MAAM1B;KAAI;KAAA,IAAA8D,WAAA;MAAA,OAAAX,gBAC9BhE,mBAEC;OAAA,SAAA;OAEA6E,MAAI;OAAA,IACJC,QAAK;QAAA,OAAEvC,MAAMxB;OAAK;OAAA,IAClBC,UAAO;QAAA,OAAEuB,MAAMvB;OAAO;OAAA,IACtBC,UAAO;QAAA,OAAEsB,MAAMtB;OAAO;OAAA,IACtBC,OAAI;QAAA,OAAEqB,MAAMrB;OAAI;OAAA,IAChBR,QAAK;QAAA,OAAEU,YAAY;OAAC;OAAA,IACpB2D,OAAI;QAAA,OAAExC,MAAMlB,cAAc;OAAM;OAChC2D,UAAUjB;OAAY,IACtBkB,WAAQ;QAAA,OAAE1C,MAAMH;OAAa;OAAA,IAC7B8C,WAAQ;QAAA,OAAE3C,MAAMF;OAAa;MAAA,CAAA;KAAA;IAAA,CAAA,GAAA2B,gBAGhC3E,MAAI;KAAA,IAACuF,OAAI;MAAA,OAAE,CAACvE,UAAU2C,YAAY,CAAC,EAAEE;KAAS;KAAA,IAAAyB,WAAA;MAAA,OAAA;OAAAX,gBAC5C3E,MAAI;QAAA,IACHuF,OAAI;SAAA,OAAEvE,UAAUkC,MAAM3B,oBAAoB,YAAY2B,MAAMR;QAAM;QAAA,IAClEoD,WAAQ;SAAA,OAAAnB,gBACLjE,iBAAe;UAAA,IAACkE,KAAE;WAAA,OAAE1B,MAAMT,aAAa;UAAI;UAAA,SAAA;UAAA,IAAA6C,WAAA;WAAA,OACzCpC,MAAM5B;UAAK;SAAA,CAAA;QAAA;QAAA,IAAAgE,WAAA;SAAA,OAAAX,gBAIflE,kBAAgB;UAAA,KAAA,WAAA;WAAA,OAAQJ,GAAGW,UAAU,SAASkC,MAAMZ,WAAW;UAAC;UAAA,IAAAgD,WAAA;WAAA,OAAA,CAAAX,gBAC9DjE,iBAAe;YAAA,IAACkE,KAAE;aAAA,OAAE1B,MAAMT,aAAa;YAAI;YAAA,IAAA6C,WAAA;aAAA,OAAGpC,MAAM5B;YAAK;WAAA,CAAA,GAAAyE,WACzD7C,MAAMR,SAASC,OAAO,CAAC,CAAA;UAAA;SAAA,CAAA;QAAA;OAAA,CAAA;OAAAgC,gBAG3BpE,mBAAiB;QAAA,KAAA,WAAA;SAAA,OAAQ2C,MAAMX;QAAY;QAAA,IAAA+C,WAAA;SAAA,OAAGpC,MAAML,QAAQF,OAAO;QAAC;OAAA,CAAA;OAAAoD,WACpEA,WAAA,CAAA,CAAA7C,MAAMJ,MAAM,CAAA,CAAA,IAAA6B,gBACVnE,kBAAgB;QAAA,KAAA,WAAA;SAAA,OAAQ0C,MAAMV;QAAW;QAAA,IAAA8C,WAAA;SAAA,OAAGpC,MAAMJ,OAAOH,OAAO;QAAC;OAAA,CAAA,IAChE,IAAI;MAAA;KAAA;IAAA,CAAA,CAAA;GAAA;EAAA,CAAA;CAIhB;CAEA,OAAA,CAAAgC,gBAEK3E,MAAI;EAAA,IAACuF,OAAI;GAAA,OAAE,CAACpC,iBAAiB;EAAC;EAAAmC,WAAIU,UAAUvB,cAAc,KAAK;CAAC,CAAA,GAAAE,gBAChE3E,MAAI;EAAA,IAACuF,OAAI;GAAA,OAAElC,WAAW;EAAC;EAAE4C,OAAK;EAAAX,WAC3BY,WAAW;GACX,IAAI,WAAWA,QAAQ,MAAMA,OAAOpF;GACpC,OAAA6D,gBACGuB,OAAOC,eAAa;IAAA,IACnB3E,OAAI;KAAA,OAAEuE,WAAA,CAAA,CAAA5C,iBAAiB,CAAC,CAAA,CAAA,KAAID,MAAM1B;IAAI;IAAA,IACtCC,eAAY;KAAA,OAAEyB,MAAMzB;IAAY;IAAA,IAChCJ,QAAK;KAAA,OAAE6B,MAAM7B;IAAK;IAAA,IAClBgB,aAAU;KAAA,OAAEa,MAAMb;IAAU;IAAA,IAC5BJ,kBAAe;KAAA,OAAEiB,MAAMjB;IAAe;IACtCwC,qBAAqBA,cAAc,IAAI;GAAC,CAAA;EAG9C;CAAC,CAAA,CAAA;AAIT"}
|
|
@@ -9,7 +9,10 @@ export type PixelResizeHandleProps = {
|
|
|
9
9
|
label?: string;
|
|
10
10
|
controls?: string;
|
|
11
11
|
class?: string;
|
|
12
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* The grip drawn on the edge: the quieter rung by default, or the bordered
|
|
14
|
+
* chip for hosts that want the heavier affordance.
|
|
15
|
+
*/
|
|
13
16
|
grip?: 'chip' | 'rung';
|
|
14
17
|
onChange(value: number): void;
|
|
15
18
|
onCommit?(value: number): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixel-resize-handle.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,sBAAsB,GAAG;IACnC,6EAA6E;IAC7E,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IACtB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd
|
|
1
|
+
{"version":3,"file":"pixel-resize-handle.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,sBAAsB,GAAG;IACnC,6EAA6E;IAC7E,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IACtB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kCAgJ9D"}
|
|
@@ -77,7 +77,7 @@ function PixelResizeHandle(props) {
|
|
|
77
77
|
}),
|
|
78
78
|
createComponent(ResizableHandle, {
|
|
79
79
|
get withHandle() {
|
|
80
|
-
return props.grip === "
|
|
80
|
+
return props.grip === "chip" ? true : "rung";
|
|
81
81
|
},
|
|
82
82
|
get label() {
|
|
83
83
|
return props.label ?? `Resize ${props.side} pane`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixel-resize-handle.js","names":["ResizableHandle","ResizablePanel","ResizablePanelGroup","createSignal","onCleanup","cn","PixelResizeHandleProps","side","value","minimum","maximum","step","label","controls","class","grip","onChange","onCommit","PixelResizeHandle","props","Math","max","min","round","ratio","isRight","rulerSizes","commit","interacting","drag","setDrag","pointerId","startX","startValue","handle","HTMLElement","endPointer","shouldCommit","current","undefined","hasPointerCapture","releasePointerCapture","endKeyboard","wasInteracting","_$createComponent","orientation","dir","sizes","keyboardDelta","style","width","onSizesChange","length","next","bounded","children","minSize","_$memo","maxSize","withHandle","aria-controls","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","data-dragging","onHandleDragStart","event","preventDefault","button","isPrimary","currentTarget","focus","setPointerCapture","clientX","onPointerMove","PointerEvent","delta","onPointerUp","onPointerCancel","onLostPointerCapture","onBlur","onKeyDown","includes","key","onKeyUp","_$createComponent","_$memo"],"sources":["../../../../src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx"],"sourcesContent":["import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../ui/resizable'\nimport { createSignal, onCleanup } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type PixelResizeHandleProps = {\n /** Which physical edge of the ruler the resizable surface is attached to. */\n side: 'left' | 'right'\n /** Current width in CSS pixels. */\n value: number\n minimum: number\n maximum: number\n step?: number\n label?: string\n controls?: string\n class?: string\n /** The grip drawn on the edge: the default bordered chip, or the quieter rung. */\n grip?: 'chip' | 'rung'\n onChange(value: number): void\n onCommit?(value: number): void\n}\n\n/**\n * PixelResizeHandle.\n *\n * A keyboard- and pointer-operable edge ruler for a host-owned pane. Keep the\n * pane's actual width and any persistence in its layout owner; this component\n * reports a bounded pixel value and places the shared resizable grip at the\n * matching left or right edge.\n *\n * Corvu 0.2.5 supplies geometry, keyboard resizing, ARIA and the shared grip,\n * but its global drag handler does not end on pointer cancellation. Prevent\n * that handler through its public start hook and use local pointer capture\n * for bounded pixel gestures, including cancellation and lost capture.\n */\nexport function PixelResizeHandle(props: PixelResizeHandleProps) {\n const maximum = () => Math.max(1, props.maximum)\n const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))\n const value = () => Math.min(maximum(), Math.max(minimum(), Math.round(props.value)))\n const ratio = () => value() / maximum()\n const isRight = () => props.side === 'right'\n const rulerSizes = () => (isRight() ? [1 - ratio(), ratio()] : [ratio(), 1 - ratio()])\n const commit = () => props.onCommit?.(value())\n let interacting = false\n const [drag, setDrag] = createSignal<{\n pointerId: number\n startX: number\n startValue: number\n handle: HTMLElement\n }>()\n const endPointer = (shouldCommit: boolean) => {\n const current = drag()\n if (!current) return\n setDrag(undefined)\n if (current.handle.hasPointerCapture(current.pointerId))\n current.handle.releasePointerCapture(current.pointerId)\n if (shouldCommit) commit()\n }\n const endKeyboard = () => {\n const wasInteracting = interacting\n interacting = false\n if (wasInteracting) commit()\n }\n onCleanup(() => {\n endKeyboard()\n endPointer(false)\n })\n\n return (\n <ResizablePanelGroup\n orientation=\"horizontal\"\n dir=\"ltr\"\n sizes={rulerSizes()}\n keyboardDelta={`${props.step ?? 16}px`}\n style={{ width: `${maximum()}px` }}\n class={cn(\n 'pointer-events-none absolute inset-y-0 flex',\n {\n 'left-0': props.side === 'left',\n 'right-0': props.side === 'right',\n },\n props.class\n )}\n onSizesChange={(sizes) => {\n // Panel registration and teardown also emit sizes. Only user resizing\n // may update the host preference; collapsing must preserve its width.\n if (!interacting || sizes.length !== 2) return\n const next = Math.round((sizes[isRight() ? 1 : 0] ?? ratio()) * maximum())\n const bounded = Math.min(maximum(), Math.max(minimum(), next))\n if (bounded !== value()) props.onChange(bounded)\n }}\n >\n <ResizablePanel\n minSize={isRight() ? 0 : minimum() / maximum()}\n maxSize={1}\n aria-hidden=\"true\"\n />\n <ResizableHandle\n withHandle={props.grip === 'rung' ? 'rung' : true}\n label={props.label ?? `Resize ${props.side} pane`}\n aria-controls={props.controls}\n aria-valuemin={minimum()}\n aria-valuemax={maximum()}\n aria-valuenow={value()}\n aria-valuetext={`${value()} pixels`}\n data-dragging={drag() ? '' : undefined}\n onHandleDragStart={(event) => {\n // Corvu checks defaultPrevented before starting its global handler.\n event.preventDefault()\n if (event.button !== 0 || !event.isPrimary) return\n const handle = event.currentTarget\n if (!(handle instanceof HTMLElement)) return\n endPointer(false)\n interacting = false\n handle.focus()\n handle.setPointerCapture(event.pointerId)\n setDrag({\n pointerId: event.pointerId,\n startX: event.clientX,\n startValue: value(),\n handle,\n })\n }}\n onPointerMove={(event: PointerEvent) => {\n const current = drag()\n if (!current || event.pointerId !== current.pointerId) return\n if (!current.handle.hasPointerCapture(current.pointerId)) {\n endPointer(false)\n return\n }\n const delta = (event.clientX - current.startX) * (isRight() ? -1 : 1)\n const next = Math.min(\n maximum(),\n Math.max(minimum(), Math.round(current.startValue + delta))\n )\n if (next !== value()) props.onChange(next)\n }}\n onPointerUp={(event: PointerEvent) => {\n if (event.pointerId === drag()?.pointerId) endPointer(true)\n }}\n onPointerCancel={(event: PointerEvent) => {\n if (event.pointerId === drag()?.pointerId) endPointer(false)\n }}\n onLostPointerCapture={(event: PointerEvent) => {\n if (event.pointerId === drag()?.pointerId) endPointer(false)\n }}\n onBlur={() => {\n endKeyboard()\n endPointer(false)\n }}\n onKeyDown={(event) => {\n const current = drag()\n if (current && !current.handle.hasPointerCapture(current.pointerId)) endPointer(false)\n if (drag()) {\n event.preventDefault()\n return\n }\n if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) interacting = true\n // Corvu operates on physical panel order. Home/End here describe\n // the controlled pane width, including a pane after the separator.\n if (event.key === 'Home' || event.key === 'End') {\n event.preventDefault()\n props.onChange(event.key === 'Home' ? minimum() : maximum())\n }\n }}\n onKeyUp={(event) => {\n if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {\n endKeyboard()\n }\n }}\n class=\"pointer-events-auto\"\n />\n <ResizablePanel\n minSize={isRight() ? minimum() / maximum() : 0}\n maxSize={1}\n aria-hidden=\"true\"\n />\n </ResizablePanelGroup>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pixel-resize-handle.js","names":["ResizableHandle","ResizablePanel","ResizablePanelGroup","createSignal","onCleanup","cn","PixelResizeHandleProps","side","value","minimum","maximum","step","label","controls","class","grip","onChange","onCommit","PixelResizeHandle","props","Math","max","min","round","ratio","isRight","rulerSizes","commit","interacting","drag","setDrag","pointerId","startX","startValue","handle","HTMLElement","endPointer","shouldCommit","current","undefined","hasPointerCapture","releasePointerCapture","endKeyboard","wasInteracting","_$createComponent","orientation","dir","sizes","keyboardDelta","style","width","onSizesChange","length","next","bounded","children","minSize","_$memo","maxSize","withHandle","aria-controls","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","data-dragging","onHandleDragStart","event","preventDefault","button","isPrimary","currentTarget","focus","setPointerCapture","clientX","onPointerMove","PointerEvent","delta","onPointerUp","onPointerCancel","onLostPointerCapture","onBlur","onKeyDown","includes","key","onKeyUp","_$createComponent","_$memo"],"sources":["../../../../src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx"],"sourcesContent":["import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../ui/resizable'\nimport { createSignal, onCleanup } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type PixelResizeHandleProps = {\n /** Which physical edge of the ruler the resizable surface is attached to. */\n side: 'left' | 'right'\n /** Current width in CSS pixels. */\n value: number\n minimum: number\n maximum: number\n step?: number\n label?: string\n controls?: string\n class?: string\n /**\n * The grip drawn on the edge: the quieter rung by default, or the bordered\n * chip for hosts that want the heavier affordance.\n */\n grip?: 'chip' | 'rung'\n onChange(value: number): void\n onCommit?(value: number): void\n}\n\n/**\n * PixelResizeHandle.\n *\n * A keyboard- and pointer-operable edge ruler for a host-owned pane. Keep the\n * pane's actual width and any persistence in its layout owner; this component\n * reports a bounded pixel value and places the shared resizable grip at the\n * matching left or right edge.\n *\n * Corvu 0.2.5 supplies geometry, keyboard resizing, ARIA and the shared grip,\n * but its global drag handler does not end on pointer cancellation. Prevent\n * that handler through its public start hook and use local pointer capture\n * for bounded pixel gestures, including cancellation and lost capture.\n */\nexport function PixelResizeHandle(props: PixelResizeHandleProps) {\n const maximum = () => Math.max(1, props.maximum)\n const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))\n const value = () => Math.min(maximum(), Math.max(minimum(), Math.round(props.value)))\n const ratio = () => value() / maximum()\n const isRight = () => props.side === 'right'\n const rulerSizes = () => (isRight() ? [1 - ratio(), ratio()] : [ratio(), 1 - ratio()])\n const commit = () => props.onCommit?.(value())\n let interacting = false\n const [drag, setDrag] = createSignal<{\n pointerId: number\n startX: number\n startValue: number\n handle: HTMLElement\n }>()\n const endPointer = (shouldCommit: boolean) => {\n const current = drag()\n if (!current) return\n setDrag(undefined)\n if (current.handle.hasPointerCapture(current.pointerId))\n current.handle.releasePointerCapture(current.pointerId)\n if (shouldCommit) commit()\n }\n const endKeyboard = () => {\n const wasInteracting = interacting\n interacting = false\n if (wasInteracting) commit()\n }\n onCleanup(() => {\n endKeyboard()\n endPointer(false)\n })\n\n return (\n <ResizablePanelGroup\n orientation=\"horizontal\"\n dir=\"ltr\"\n sizes={rulerSizes()}\n keyboardDelta={`${props.step ?? 16}px`}\n style={{ width: `${maximum()}px` }}\n class={cn(\n 'pointer-events-none absolute inset-y-0 flex',\n {\n 'left-0': props.side === 'left',\n 'right-0': props.side === 'right',\n },\n props.class\n )}\n onSizesChange={(sizes) => {\n // Panel registration and teardown also emit sizes. Only user resizing\n // may update the host preference; collapsing must preserve its width.\n if (!interacting || sizes.length !== 2) return\n const next = Math.round((sizes[isRight() ? 1 : 0] ?? ratio()) * maximum())\n const bounded = Math.min(maximum(), Math.max(minimum(), next))\n if (bounded !== value()) props.onChange(bounded)\n }}\n >\n <ResizablePanel\n minSize={isRight() ? 0 : minimum() / maximum()}\n maxSize={1}\n aria-hidden=\"true\"\n />\n <ResizableHandle\n withHandle={props.grip === 'chip' ? true : 'rung'}\n label={props.label ?? `Resize ${props.side} pane`}\n aria-controls={props.controls}\n aria-valuemin={minimum()}\n aria-valuemax={maximum()}\n aria-valuenow={value()}\n aria-valuetext={`${value()} pixels`}\n data-dragging={drag() ? '' : undefined}\n onHandleDragStart={(event) => {\n // Corvu checks defaultPrevented before starting its global handler.\n event.preventDefault()\n if (event.button !== 0 || !event.isPrimary) return\n const handle = event.currentTarget\n if (!(handle instanceof HTMLElement)) return\n endPointer(false)\n interacting = false\n handle.focus()\n handle.setPointerCapture(event.pointerId)\n setDrag({\n pointerId: event.pointerId,\n startX: event.clientX,\n startValue: value(),\n handle,\n })\n }}\n onPointerMove={(event: PointerEvent) => {\n const current = drag()\n if (!current || event.pointerId !== current.pointerId) return\n if (!current.handle.hasPointerCapture(current.pointerId)) {\n endPointer(false)\n return\n }\n const delta = (event.clientX - current.startX) * (isRight() ? -1 : 1)\n const next = Math.min(\n maximum(),\n Math.max(minimum(), Math.round(current.startValue + delta))\n )\n if (next !== value()) props.onChange(next)\n }}\n onPointerUp={(event: PointerEvent) => {\n if (event.pointerId === drag()?.pointerId) endPointer(true)\n }}\n onPointerCancel={(event: PointerEvent) => {\n if (event.pointerId === drag()?.pointerId) endPointer(false)\n }}\n onLostPointerCapture={(event: PointerEvent) => {\n if (event.pointerId === drag()?.pointerId) endPointer(false)\n }}\n onBlur={() => {\n endKeyboard()\n endPointer(false)\n }}\n onKeyDown={(event) => {\n const current = drag()\n if (current && !current.handle.hasPointerCapture(current.pointerId)) endPointer(false)\n if (drag()) {\n event.preventDefault()\n return\n }\n if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) interacting = true\n // Corvu operates on physical panel order. Home/End here describe\n // the controlled pane width, including a pane after the separator.\n if (event.key === 'Home' || event.key === 'End') {\n event.preventDefault()\n props.onChange(event.key === 'Home' ? minimum() : maximum())\n }\n }}\n onKeyUp={(event) => {\n if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {\n endKeyboard()\n }\n }}\n class=\"pointer-events-auto\"\n />\n <ResizablePanel\n minSize={isRight() ? minimum() / maximum() : 0}\n maxSize={1}\n aria-hidden=\"true\"\n />\n </ResizablePanelGroup>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAwC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGvF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAwC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGvF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;;8EA6D1B,CAAA;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAE7D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,IAAI,gBAAgB,CAC7E,CAAC,EACD,kBAAkB,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,MAAM,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,kCAwBhF"}
|
|
@@ -34,11 +34,13 @@ var buttonVariants = cva(`${controlInteractive} inline-flex shrink-0 items-cente
|
|
|
34
34
|
ghost: "text-foreground hover:bg-surface-hover",
|
|
35
35
|
/**
|
|
36
36
|
* A ghost that opens something: a sheet, menu or popover trigger in a
|
|
37
|
-
* toolbar. While its surface is open it holds the
|
|
38
|
-
*
|
|
39
|
-
* neighbours
|
|
37
|
+
* toolbar. While its surface is open it holds the accent's own tint —
|
|
38
|
+
* the same treatment that drives the side rail's active destination —
|
|
39
|
+
* so the open control never reads identical to its closed neighbours
|
|
40
|
+
* and the app's pressed chrome reads as one accent chroma. The
|
|
41
|
+
* compound hover keeps the tint when an open control is pointed at.
|
|
40
42
|
*/
|
|
41
|
-
toolbar: "text-foreground hover:bg-surface-hover data-[expanded]:bg-
|
|
43
|
+
toolbar: "text-foreground hover:bg-surface-hover data-[expanded]:bg-primary-subtle data-[expanded]:text-primary data-[expanded]:hover:bg-primary-subtle",
|
|
42
44
|
/** A tinted primary, for a secondary action inside a primary flow. */
|
|
43
45
|
subtle: "bg-primary-subtle text-primary hover:bg-primary-subtle/80",
|
|
44
46
|
success: "bg-success text-success-foreground hover:bg-success/90",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":["Polymorphic","PolymorphicProps","ComponentProps","splitProps","ValidComponent","cva","controlInteractive","controlSize","VariantProps","cn","buttonVariants","variants","variant","default","secondary","destructive","outline","ghost","toolbar","subtle","success","link","size","xs","sm","md","lg","xl","touchTarget","comfortable","defaultVariants","ButtonVariantProps","ButtonProps","T","class","Button","props","local","rest","_$createComponent","_$mergeProps","as","type","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'\nimport { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Button.\n *\n * One appearance ladder shared by every pressable thing in the system: a\n * button, a toolbar control, a dialog action, and a menu row all draw from the\n * same tokens, so a row of them cannot drift apart.\n *\n * The variants answer \"what is this for\", never \"what colour is it\". A caller\n * that wants a red button writes `variant=\"destructive\"`; the red lives here.\n * That is also what lets the design-system linter tell a caller which variant\n * to use instead of only which class was wrong.\n *\n * Polymorphic: pass `as=\"a\"` (or any component) and the button becomes it\n * while keeping the same styling contract. This replaces the React-era\n * `asChild` primitive, which has no Solid equivalent that preserves props.\n */\nexport const buttonVariants = cva(\n `${controlInteractive} inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap select-none [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n {\n variants: {\n variant: {\n /** The one primary action in a view. */\n default: 'bg-primary text-primary-foreground hover:bg-primary-hover',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-surface-hover',\n /** For the action that destroys something. Never the default. */\n destructive:\n 'bg-destructive-action text-destructive-action-foreground hover:bg-destructive-action/90 focus-visible:ring-destructive-subtle',\n /** A bordered button for a surface that already has a fill. */\n outline:\n 'border border-border bg-transparent text-foreground hover:bg-surface-hover hover:border-input',\n /** No chrome until hover. The default for toolbar and row actions. */\n ghost: 'text-foreground hover:bg-surface-hover',\n /**\n * A ghost that opens something: a sheet, menu or popover trigger in a\n * toolbar. While its surface is open it holds the
|
|
1
|
+
{"version":3,"file":"button.js","names":["Polymorphic","PolymorphicProps","ComponentProps","splitProps","ValidComponent","cva","controlInteractive","controlSize","VariantProps","cn","buttonVariants","variants","variant","default","secondary","destructive","outline","ghost","toolbar","subtle","success","link","size","xs","sm","md","lg","xl","touchTarget","comfortable","defaultVariants","ButtonVariantProps","ButtonProps","T","class","Button","props","local","rest","_$createComponent","_$mergeProps","as","type","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'\nimport { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Button.\n *\n * One appearance ladder shared by every pressable thing in the system: a\n * button, a toolbar control, a dialog action, and a menu row all draw from the\n * same tokens, so a row of them cannot drift apart.\n *\n * The variants answer \"what is this for\", never \"what colour is it\". A caller\n * that wants a red button writes `variant=\"destructive\"`; the red lives here.\n * That is also what lets the design-system linter tell a caller which variant\n * to use instead of only which class was wrong.\n *\n * Polymorphic: pass `as=\"a\"` (or any component) and the button becomes it\n * while keeping the same styling contract. This replaces the React-era\n * `asChild` primitive, which has no Solid equivalent that preserves props.\n */\nexport const buttonVariants = cva(\n `${controlInteractive} inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap select-none [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n {\n variants: {\n variant: {\n /** The one primary action in a view. */\n default: 'bg-primary text-primary-foreground hover:bg-primary-hover',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-surface-hover',\n /** For the action that destroys something. Never the default. */\n destructive:\n 'bg-destructive-action text-destructive-action-foreground hover:bg-destructive-action/90 focus-visible:ring-destructive-subtle',\n /** A bordered button for a surface that already has a fill. */\n outline:\n 'border border-border bg-transparent text-foreground hover:bg-surface-hover hover:border-input',\n /** No chrome until hover. The default for toolbar and row actions. */\n ghost: 'text-foreground hover:bg-surface-hover',\n /**\n * A ghost that opens something: a sheet, menu or popover trigger in a\n * toolbar. While its surface is open it holds the accent's own tint —\n * the same treatment that drives the side rail's active destination —\n * so the open control never reads identical to its closed neighbours\n * and the app's pressed chrome reads as one accent chroma. The\n * compound hover keeps the tint when an open control is pointed at.\n */\n toolbar:\n 'text-foreground hover:bg-surface-hover data-[expanded]:bg-primary-subtle data-[expanded]:text-primary data-[expanded]:hover:bg-primary-subtle',\n /** A tinted primary, for a secondary action inside a primary flow. */\n subtle: 'bg-primary-subtle text-primary hover:bg-primary-subtle/80',\n success: 'bg-success text-success-foreground hover:bg-success/90',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n '2xs': `${controlSize['2xs']} [&_svg]:size-3`,\n xs: `${controlSize.xs} [&_svg]:size-3.5`,\n sm: `${controlSize.sm} [&_svg]:size-3.5`,\n md: `${controlSize.md} [&_svg]:size-4`,\n lg: `${controlSize.lg} [&_svg]:size-4`,\n xl: `${controlSize.xl} [&_svg]:size-5`,\n '2xl': `${controlSize['2xl']} [&_svg]:size-6`,\n /* Square, for an icon with no label. The accessible name then has to\n come from `aria-label` or a visually hidden label — an icon-only\n button with neither is the accessibility finding the Storybook lane\n catches on every story. */\n 'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',\n 'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',\n 'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',\n 'icon-md': 'size-control-md p-0 [&_svg]:size-4',\n 'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',\n 'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',\n 'icon-2xl': 'size-control-2xl p-0 [&_svg]:size-6',\n },\n /** Opt in to a stable touch target on devices with any coarse pointer. */\n touchTarget: {\n comfortable: 'touch-target-comfortable',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n }\n)\n\ntype ButtonVariantProps = VariantProps<typeof buttonVariants>\n\nexport type ButtonProps<T extends ValidComponent = 'button'> = PolymorphicProps<\n T,\n ButtonVariantProps & {\n class?: string\n }\n>\n\nexport function Button<T extends ValidComponent = 'button'>(props: ButtonProps<T>) {\n const [local, rest] = splitProps(props as ButtonProps, [\n 'variant',\n 'size',\n 'touchTarget',\n 'class',\n ])\n\n return (\n <Polymorphic\n as=\"button\"\n type=\"button\"\n data-slot=\"button\"\n class={cn(\n buttonVariants({\n variant: local.variant,\n size: local.size,\n touchTarget: local.touchTarget,\n }),\n local.class\n )}\n {...(rest as ComponentProps<'button'>)}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAaU,iBAAiBL,IAC5B,GAAGC,mBAAkB,sJACrB;CACEK,UAAU;EACRC,SAAS;;GAEPC,SAAS;GACTC,WAAW;;GAEXC,aACE;;GAEFC,SACE;;GAEFC,OAAO;;;;;;;;;GASPC,SACE;;GAEFC,QAAQ;GACRC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;GACJ,OAAO,GAAGf,YAAY,OAAM;GAC5BgB,IAAI,GAAGhB,YAAYgB,GAAE;GACrBC,IAAI,GAAGjB,YAAYiB,GAAE;GACrBC,IAAI,GAAGlB,YAAYkB,GAAE;GACrBC,IAAI,GAAGnB,YAAYmB,GAAE;GACrBC,IAAI,GAAGpB,YAAYoB,GAAE;GACrB,OAAO,GAAGpB,YAAY,OAAM;GAK5B,YAAY;GACZ,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,YAAY;EACd;;EAEAqB,aAAa,EACXC,aAAa,2BACf;CACF;CACAC,iBAAiB;EACflB,SAAS;EACTU,MAAM;CACR;AACF,CACF;AAWA,SAAgBa,OAA4CC,OAAuB;CACjF,MAAM,CAACC,OAAOC,QAAQnC,WAAWiC,OAAsB;EACrD;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGvC,aAAWwC,WAAA;EACVC,IAAE;EACFC,MAAI;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEGjC,GACLC,eAAe;IACbE,SAASyB,MAAMzB;IACfU,MAAMe,MAAMf;IACZM,aAAaS,MAAMT;GACrB,CAAC,GACDS,MAAMH,KACR;EAAC;CAAA,GACII,IAAgC,CAAA;AAG3C"}
|
|
@@ -45,7 +45,10 @@ export type ContextualSidebarProps = {
|
|
|
45
45
|
/** Pass the host's initial viewport seed to distinguish stale desktop state. */
|
|
46
46
|
wideViewportAtLoad?: boolean
|
|
47
47
|
resizeLabel?: string
|
|
48
|
-
/**
|
|
48
|
+
/**
|
|
49
|
+
* The resize edge's grip: the quieter rung by default, or the bordered chip
|
|
50
|
+
* for hosts that want the heavier affordance.
|
|
51
|
+
*/
|
|
49
52
|
resizeGrip?: 'chip' | 'rung'
|
|
50
53
|
/** Stable external opener used when the modal mobile sheet closes. */
|
|
51
54
|
restoreFocusRef?: Accessor<HTMLElement | undefined>
|
|
@@ -175,7 +178,7 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
|
|
|
175
178
|
maximum={props.maximum}
|
|
176
179
|
step={props.step}
|
|
177
180
|
label={resizeLabel()}
|
|
178
|
-
grip={props.resizeGrip}
|
|
181
|
+
grip={props.resizeGrip ?? 'rung'}
|
|
179
182
|
controls={navigationId}
|
|
180
183
|
onChange={props.onWidthChange}
|
|
181
184
|
onCommit={props.onWidthCommit}
|
|
@@ -13,7 +13,10 @@ export type PixelResizeHandleProps = {
|
|
|
13
13
|
label?: string
|
|
14
14
|
controls?: string
|
|
15
15
|
class?: string
|
|
16
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* The grip drawn on the edge: the quieter rung by default, or the bordered
|
|
18
|
+
* chip for hosts that want the heavier affordance.
|
|
19
|
+
*/
|
|
17
20
|
grip?: 'chip' | 'rung'
|
|
18
21
|
onChange(value: number): void
|
|
19
22
|
onCommit?(value: number): void
|
|
@@ -95,7 +98,7 @@ export function PixelResizeHandle(props: PixelResizeHandleProps) {
|
|
|
95
98
|
aria-hidden="true"
|
|
96
99
|
/>
|
|
97
100
|
<ResizableHandle
|
|
98
|
-
withHandle={props.grip === '
|
|
101
|
+
withHandle={props.grip === 'chip' ? true : 'rung'}
|
|
99
102
|
label={props.label ?? `Resize ${props.side} pane`}
|
|
100
103
|
aria-controls={props.controls}
|
|
101
104
|
aria-valuemin={minimum()}
|
|
@@ -37,11 +37,14 @@ export const buttonVariants = cva(
|
|
|
37
37
|
ghost: 'text-foreground hover:bg-surface-hover',
|
|
38
38
|
/**
|
|
39
39
|
* A ghost that opens something: a sheet, menu or popover trigger in a
|
|
40
|
-
* toolbar. While its surface is open it holds the
|
|
41
|
-
*
|
|
42
|
-
* neighbours
|
|
40
|
+
* toolbar. While its surface is open it holds the accent's own tint —
|
|
41
|
+
* the same treatment that drives the side rail's active destination —
|
|
42
|
+
* so the open control never reads identical to its closed neighbours
|
|
43
|
+
* and the app's pressed chrome reads as one accent chroma. The
|
|
44
|
+
* compound hover keeps the tint when an open control is pointed at.
|
|
43
45
|
*/
|
|
44
|
-
toolbar:
|
|
46
|
+
toolbar:
|
|
47
|
+
'text-foreground hover:bg-surface-hover data-[expanded]:bg-primary-subtle data-[expanded]:text-primary data-[expanded]:hover:bg-primary-subtle',
|
|
45
48
|
/** A tinted primary, for a secondary action inside a primary flow. */
|
|
46
49
|
subtle: 'bg-primary-subtle text-primary hover:bg-primary-subtle/80',
|
|
47
50
|
success: 'bg-success text-success-foreground hover:bg-success/90',
|
package/package.json
CHANGED
|
@@ -45,7 +45,10 @@ export type ContextualSidebarProps = {
|
|
|
45
45
|
/** Pass the host's initial viewport seed to distinguish stale desktop state. */
|
|
46
46
|
wideViewportAtLoad?: boolean
|
|
47
47
|
resizeLabel?: string
|
|
48
|
-
/**
|
|
48
|
+
/**
|
|
49
|
+
* The resize edge's grip: the quieter rung by default, or the bordered chip
|
|
50
|
+
* for hosts that want the heavier affordance.
|
|
51
|
+
*/
|
|
49
52
|
resizeGrip?: 'chip' | 'rung'
|
|
50
53
|
/** Stable external opener used when the modal mobile sheet closes. */
|
|
51
54
|
restoreFocusRef?: Accessor<HTMLElement | undefined>
|
|
@@ -175,7 +178,7 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
|
|
|
175
178
|
maximum={props.maximum}
|
|
176
179
|
step={props.step}
|
|
177
180
|
label={resizeLabel()}
|
|
178
|
-
grip={props.resizeGrip}
|
|
181
|
+
grip={props.resizeGrip ?? 'rung'}
|
|
179
182
|
controls={navigationId}
|
|
180
183
|
onChange={props.onWidthChange}
|
|
181
184
|
onCommit={props.onWidthCommit}
|
|
@@ -13,7 +13,10 @@ export type PixelResizeHandleProps = {
|
|
|
13
13
|
label?: string
|
|
14
14
|
controls?: string
|
|
15
15
|
class?: string
|
|
16
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* The grip drawn on the edge: the quieter rung by default, or the bordered
|
|
18
|
+
* chip for hosts that want the heavier affordance.
|
|
19
|
+
*/
|
|
17
20
|
grip?: 'chip' | 'rung'
|
|
18
21
|
onChange(value: number): void
|
|
19
22
|
onCommit?(value: number): void
|
|
@@ -95,7 +98,7 @@ export function PixelResizeHandle(props: PixelResizeHandleProps) {
|
|
|
95
98
|
aria-hidden="true"
|
|
96
99
|
/>
|
|
97
100
|
<ResizableHandle
|
|
98
|
-
withHandle={props.grip === '
|
|
101
|
+
withHandle={props.grip === 'chip' ? true : 'rung'}
|
|
99
102
|
label={props.label ?? `Resize ${props.side} pane`}
|
|
100
103
|
aria-controls={props.controls}
|
|
101
104
|
aria-valuemin={minimum()}
|
|
@@ -37,11 +37,14 @@ export const buttonVariants = cva(
|
|
|
37
37
|
ghost: 'text-foreground hover:bg-surface-hover',
|
|
38
38
|
/**
|
|
39
39
|
* A ghost that opens something: a sheet, menu or popover trigger in a
|
|
40
|
-
* toolbar. While its surface is open it holds the
|
|
41
|
-
*
|
|
42
|
-
* neighbours
|
|
40
|
+
* toolbar. While its surface is open it holds the accent's own tint —
|
|
41
|
+
* the same treatment that drives the side rail's active destination —
|
|
42
|
+
* so the open control never reads identical to its closed neighbours
|
|
43
|
+
* and the app's pressed chrome reads as one accent chroma. The
|
|
44
|
+
* compound hover keeps the tint when an open control is pointed at.
|
|
43
45
|
*/
|
|
44
|
-
toolbar:
|
|
46
|
+
toolbar:
|
|
47
|
+
'text-foreground hover:bg-surface-hover data-[expanded]:bg-primary-subtle data-[expanded]:text-primary data-[expanded]:hover:bg-primary-subtle',
|
|
45
48
|
/** A tinted primary, for a secondary action inside a primary flow. */
|
|
46
49
|
subtle: 'bg-primary-subtle text-primary hover:bg-primary-subtle/80',
|
|
47
50
|
success: 'bg-success text-success-foreground hover:bg-success/90',
|