@number10/jsx-components 5.0.0

package/dist/SegmentedControl.d.ts

@@ -0,0 +1,50 @@
+import { ChildrenType, PortableTextStyle, ViewPrimitivePropsComplete, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+export type SegmentedControlSize = 'small' | 'medium' | 'large';
+export type SegmentedControlVariant = 'solid' | 'soft' | 'outline';
+export type SegmentedControlLabelPosition = 'left' | 'top' | 'none';
+export interface SegmentedControlLabels {
+    group?: string;
+}
+export interface SegmentedControlOption {
+    value: string;
+    label?: string;
+    icon?: ChildrenType;
+    children?: ChildrenType;
+    disabled?: boolean;
+}
+export interface SegmentedControlOptionRenderProps {
+    option: SegmentedControlOption;
+    selected: boolean;
+    disabled: boolean;
+    hovered: boolean;
+    index: number;
+    size: SegmentedControlSize;
+    variant: SegmentedControlVariant;
+    orientation: SegmentedControlOrientation;
+    textStyle?: PortableTextStyle;
+    iconSize?: number;
+}
+export interface SegmentedControlProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    options: SegmentedControlOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    orientation?: SegmentedControlOrientation;
+    size?: SegmentedControlSize;
+    variant?: SegmentedControlVariant;
+    label?: string;
+    labelPosition?: SegmentedControlLabelPosition;
+    labels?: SegmentedControlLabels;
+    disabled?: boolean;
+    segmentWidth?: ViewPrimitivePropsComplete['width'];
+    segmentHeight?: ViewPrimitivePropsComplete['height'];
+    renderOption?: (props: SegmentedControlOptionRenderProps) => ChildrenType;
+    theme?: PortableComponentPartialTheme<'SegmentedControl'>;
+}
+export declare function findSegmentedControlOption(options: SegmentedControlOption[], value: string | undefined): SegmentedControlOption | undefined;
+export declare function resolveSegmentedControlValue(options: SegmentedControlOption[], value?: string, defaultValue?: string): string;
+export declare function isSegmentedControlOptionSelectable(option: SegmentedControlOption, currentValue: string, disabled?: boolean): boolean;
+export declare function SegmentedControl(props: SegmentedControlProps): VNodeLike;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;GAEG;AAEH,OAAO,KAAK,EACV,YAAY,EACZ,iBAAiB,EACjB,0BAA0B,EAC1B,SAAS,EACV,MAAM,oBAAoB,CAAA;AAW3B,OAAO,KAAK,EACV,6BAA6B,EAG9B,MAAM,eAAe,CAAA;AAEtB,MAAM,MAAM,2BAA2B,GAAG,YAAY,GAAG,UAAU,CAAA;AACnE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAClE,MAAM,MAAM,6BAA6B,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnE,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iCAAiC;IAChD,MAAM,EAAE,sBAAsB,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,oBAAoB,CAAA;IAC1B,OAAO,EAAE,uBAAuB,CAAA;IAChC,WAAW,EAAE,2BAA2B,CAAA;IACxC,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC;IACzF,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,2BAA2B,CAAA;IACzC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,6BAA6B,CAAA;IAC7C,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,0BAA0B,CAAC,OAAO,CAAC,CAAA;IAClD,aAAa,CAAC,EAAE,0BAA0B,CAAC,QAAQ,CAAC,CAAA;IACpD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iCAAiC,KAAK,YAAY,CAAA;IACzE,KAAK,CAAC,EAAE,6BAA6B,CAAC,kBAAkB,CAAC,CAAA;CAC1D;AAED,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,sBAAsB,EAAE,EACjC,KAAK,EAAE,MAAM,GAAG,SAAS,GACxB,sBAAsB,GAAG,SAAS,CAGpC;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,sBAAsB,EAAE,EACjC,KAAK,CAAC,EAAE,MAAM,EACd,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,CASR;AAED,wBAAgB,kCAAkC,CAChD,MAAM,EAAE,sBAAsB,EAC9B,YAAY,EAAE,MAAM,EACpB,QAAQ,UAAQ,GACf,OAAO,CAET;AAoJD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAqMxE"}

package/dist/SegmentedControl.js

@@ -0,0 +1,201 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { KNOWN_COMPONENTS as n, getGlobalThemeDefaults as r, mergeThemes as i, resolveComponentTheme as a, useEffect as o, useState as s, useTheme as c } from "@number10/jsx-core";
+import { Fragment as l, jsx as u, jsxs as d } from "@number10/jsx-core/jsx-runtime";
+//#region src/SegmentedControl.tsx
+function f(e, t) {
+	if (t !== void 0) return e.find((e) => e.value === t);
+}
+function p(e, t, n) {
+	if (t !== void 0) return f(e, t)?.value ?? "";
+	let r = f(e, n);
+	return r ? r.value : e.find((e) => !e.disabled)?.value ?? e[0]?.value ?? "";
+}
+function m(e, t, n = !1) {
+	return !n && !e.disabled && e.value !== t;
+}
+function h(...e) {
+	return Object.assign({}, ...e.filter(Boolean));
+}
+function g(...e) {
+	let t = Object.assign({}, ...e.filter(Boolean));
+	return Object.keys(t).length > 0 ? t : void 0;
+}
+function _(e) {
+	let { orientation: t, size: n, variant: r, segmentWidth: i, segmentHeight: a, segmentGap: o, segmentPadding: s, segmentCornerRadius: c, segmentStyle: l, segmentHoverStyle: u, segmentSelectedStyle: d, segmentDisabledStyle: f, textStyle: p, selectedTextStyle: m, disabledTextStyle: h, labelStyle: g, iconGap: _, iconSize: v, disabledAlpha: y, labelPosition: b, labels: x, ...S } = e;
+	return S;
+}
+function v(e) {
+	switch (e) {
+		case "small": return {
+			segmentWidth: 72,
+			segmentHeight: 28,
+			segmentPadding: {
+				left: 8,
+				right: 8,
+				top: 4,
+				bottom: 4
+			},
+			iconSize: 14,
+			textStyle: { fontSize: "12px" }
+		};
+		case "large": return {
+			segmentWidth: 108,
+			segmentHeight: 40,
+			segmentPadding: {
+				left: 14,
+				right: 14,
+				top: 8,
+				bottom: 8
+			},
+			iconSize: 20,
+			textStyle: { fontSize: "16px" }
+		};
+		default: return {};
+	}
+}
+function y(e) {
+	switch (e) {
+		case "soft": return {
+			backgroundColor: 988970,
+			backgroundAlpha: .78,
+			borderColor: 3359061,
+			segmentStyle: {
+				backgroundColor: 1976635,
+				backgroundAlpha: 0,
+				borderWidth: 0
+			},
+			segmentHoverStyle: {
+				backgroundColor: 3359061,
+				backgroundAlpha: .7
+			},
+			segmentSelectedStyle: {
+				backgroundColor: 3359061,
+				backgroundAlpha: 1,
+				borderColor: 6583435,
+				borderWidth: 1
+			},
+			textStyle: { color: "#cbd5e1" },
+			selectedTextStyle: {
+				color: "#ffffff",
+				fontStyle: "bold"
+			}
+		};
+		case "outline": return {
+			backgroundColor: 0,
+			backgroundAlpha: 0,
+			borderColor: 6333946,
+			borderWidth: 1,
+			segmentStyle: {
+				backgroundColor: 0,
+				backgroundAlpha: 0,
+				borderColor: 6333946,
+				borderWidth: 0
+			},
+			segmentHoverStyle: {
+				backgroundColor: 1920728,
+				backgroundAlpha: .12
+			},
+			segmentSelectedStyle: {
+				backgroundColor: 1920728,
+				backgroundAlpha: .2,
+				borderColor: 9684477,
+				borderWidth: 1
+			},
+			textStyle: { color: "#bfdbfe" },
+			selectedTextStyle: {
+				color: "#ffffff",
+				fontStyle: "bold"
+			}
+		};
+		default: return {};
+	}
+}
+function b(b) {
+	let { options: x, value: S, defaultValue: C, onChange: ee, orientation: te, size: ne, variant: w, label: T, labelPosition: E, labels: D, disabled: O = !1, segmentWidth: k, segmentHeight: A, renderOption: j, theme: M, alpha: N, ...re } = b, P = c(), ie = M ? i(P ?? {}, M) : P, { props: F, nestedTheme: I } = a({
+		componentName: "SegmentedControl",
+		globalTheme: r(),
+		localTheme: ie,
+		knownComponents: n
+	}), L = S !== void 0, [R, z] = s(p(x, S, C)), [B, V] = s(void 0), H = L ? p(x, S) : p(x, R);
+	o(() => {
+		!L && R !== H && z(H);
+	}, [
+		L,
+		R,
+		H
+	]);
+	let U = {
+		...F.labels ?? {},
+		...D ?? {}
+	}, W = te ?? F.orientation ?? "horizontal", G = ne ?? F.size ?? "medium", K = w ?? F.variant ?? "solid", q = v(G), J = y(K), Y = E ?? F.labelPosition ?? "none", ae = k ?? q.segmentWidth ?? F.segmentWidth, oe = A ?? q.segmentHeight ?? F.segmentHeight, X = T ?? U.group, se = Y !== "none" && X !== void 0, ce = h(_(F), _(J)), Z = Y === "left" ? "row" : "column", le = W === "horizontal" ? "row" : "column", ue = F.segmentGap ?? 0, Q = g({
+		color: "#dbeafe",
+		fontSize: "13px"
+	}, F.textStyle, J.textStyle, q.textStyle), de = g(Q, F.selectedTextStyle, J.selectedTextStyle), fe = g(Q, F.disabledTextStyle), pe = F.labelStyle ?? {
+		color: "#9fb3c8",
+		fontSize: "13px"
+	}, $ = O ? F.disabledAlpha ?? .5 : N, me = (e) => {
+		let t = f(x, e);
+		!t || !m(t, H, O) || (L || z(e), ee?.(e));
+	}, he = (n, r) => {
+		let a = n.value === H, o = O || !!n.disabled, s = B === n.value, c = m(n, H, O), f = n.label ?? (n.icon ? void 0 : n.value), p = h({
+			height: oe,
+			width: ae,
+			padding: q.segmentPadding ?? F.segmentPadding,
+			cornerRadius: F.segmentCornerRadius
+		}, F.segmentStyle, J.segmentStyle, s && !a && !o ? F.segmentHoverStyle : void 0, s && !a && !o ? J.segmentHoverStyle : void 0, a ? F.segmentSelectedStyle : void 0, a ? J.segmentSelectedStyle : void 0, o ? F.segmentDisabledStyle : void 0), g = o ? fe : a ? de : Q, _ = q.iconSize ?? F.iconSize, v = i(I, {
+			Text: g ? { style: g } : {},
+			Icon: { ..._ === void 0 ? {} : { size: _ } }
+		}), y = j?.({
+			option: n,
+			selected: a,
+			disabled: o,
+			hovered: s,
+			index: r,
+			size: G,
+			variant: K,
+			orientation: W,
+			...g ? { textStyle: g } : {},
+			..._ === void 0 ? {} : { iconSize: _ }
+		}) ?? n.children, b = c && (F.segmentHoverStyle || J.segmentHoverStyle) ? {
+			onHoverStart: () => V(n.value),
+			onHoverEnd: () => V((e) => e === n.value ? void 0 : e)
+		} : {};
+		return /* @__PURE__ */ u(t, {
+			direction: "row",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: F.iconGap ?? 6,
+			...p,
+			enableGestures: c,
+			onTouch: () => me(n.value),
+			...b,
+			theme: v,
+			children: y ?? /* @__PURE__ */ d(l, { children: [n.icon, f === void 0 ? null : /* @__PURE__ */ u(e, {
+				text: f,
+				...g ? { style: g } : {}
+			})] })
+		}, n.value);
+	}, ge = /* @__PURE__ */ u(t, {
+		...ce,
+		direction: le,
+		gap: ue,
+		...$ === void 0 ? {} : { alpha: $ },
+		theme: I,
+		children: x.map(he)
+	});
+	return /* @__PURE__ */ d(t, {
+		...re,
+		direction: Z,
+		alignItems: "center",
+		gap: F.gap ?? 8,
+		theme: I,
+		children: [se ? /* @__PURE__ */ u(e, {
+			text: X,
+			style: pe
+		}) : null, ge]
+	});
+}
+//#endregion
+export { b as SegmentedControl, f as findSegmentedControlOption, m as isSegmentedControlOptionSelectable, p as resolveSegmentedControlValue };

package/dist/SegmentedControl.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SegmentedControl.test.d.ts.map

package/dist/SegmentedControl.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.test.d.ts","sourceRoot":"","sources":["../src/SegmentedControl.test.ts"],"names":[],"mappings":""}

package/dist/Sidebar.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const n=require(`./Divider.cjs`),r=require(`./ScrollView.cjs`);let i=require(`@number10/jsx-core`),a=require(`@number10/jsx-core/jsx-runtime`);function o(e){return e?(Array.isArray(e)?e.flat(1/0):[e]).filter(e=>!!e&&typeof e==`object`&&`type`in e):[]}function s(s){let c=(0,i.useTheme)(),l=s.theme?(0,i.mergeThemes)(c??{},s.theme):c,{props:u,nestedTheme:d}=(0,i.resolveComponentTheme)({componentName:`Sidebar`,globalTheme:(0,i.getGlobalThemeDefaults)(),localTheme:l,knownComponents:i.KNOWN_COMPONENTS}),f=u,p=s.variant??f.variant??`solid`,m=s.size??f.size??`md`,ee=f.variants?.[p]??{},h=f.sizes?.[m]??{},{variants:te,sizes:ne,headerStyle:g,footerStyle:_,sectionStyle:v,itemStyle:y,badgeStyle:b,dividerColor:x,dividerAlpha:re,scrollable:S,itemGap:C,sectionGap:w,variant:ie,size:ae,...T}=f,{header:E,footer:D,sections:O,scrollable:k,showDividers:A=!1,itemGap:j,sectionGap:M,theme:oe,children:N,...P}=s,F=P.gap??h.gap??f.gap??T.gap,I=M??w??F??8,L=j??C??8,se=k??S??!1,R=x??13421772,z={...T,...ee,...h,...P,direction:P.direction??`column`,alignItems:P.alignItems??`start`,gap:F},{titleStyle:B,...V}=v??{},{textStyle:H,active:U,disabledAlpha:W,...G}=y??{},{textStyle:K,...q}=b??{},J=t=>t?typeof t==`string`?(0,a.jsx)(e.Text,{text:t,style:B}):t:null,Y=n=>{if(n==null)return null;let r=typeof n==`number`?(0,a.jsx)(e.Text,{text:`${n}`,style:K}):n;return(0,a.jsx)(t.View,{direction:`row`,alignItems:`center`,justifyContent:`center`,...q,padding:q.padding??6,children:r})},X=(n,r)=>n?.length?n.map((n,i)=>{let s=n.key??`${r??`section`}-item-${i}`,c=n.active?U??{}:{},l=n.disabled&&W!==void 0?{alpha:W}:{},u=n.content??(n.label?(0,a.jsx)(e.Text,{text:n.label,style:H}):null),d=o(n.icon??null),f=o(u),p=o(Y(n.badge)),m=n.disabled?void 0:()=>n.onSelect?.(n.key??s);return(0,a.jsx)(t.View,{direction:`row`,alignItems:`center`,gap:G.gap??L,enableGestures:!n.disabled,...m?{onTouch:m}:{},...G,...c,...l,children:[...d,...f,...p]},s)}):null,Z=(()=>{if(!O?.length)return null;let e=O.length-1;return O.map((r,i)=>{let o=r.key??`section-${i}`;return(0,a.jsxs)(t.View,{direction:`column`,gap:I,...V,children:[J(r.title),r.content??null,X(r.items,o),r.footer??null,A&&i<e?(0,a.jsx)(n.Divider,{color:R,thickness:1,length:`100%`,orientation:`horizontal`}):null]},o)})})(),Q=!!O?.length,ce=Z??(Q?null:N)??null,le=Q?N??null:null,$=[...o(ce),...o(le)];return(0,a.jsxs)(t.View,{...z,theme:d,backgroundColor:f.backgroundColor,backgroundAlpha:f.backgroundAlpha,padding:f.padding,gap:f.gap,children:[E?(0,a.jsx)(t.View,{...g,children:E}):null,se?(0,a.jsx)(r.ScrollView,{flex:1,width:`fill`,height:`fill`,showVerticalSlider:`auto`,showHorizontalSlider:!1,sliderSize:`tiny`,theme:d,children:(0,a.jsx)(t.View,{direction:`column`,gap:F,width:`fill`,children:$})}):$,D?(0,a.jsx)(t.View,{..._,children:D}):null]})}exports.Sidebar=s;

package/dist/Sidebar.d.ts

@@ -0,0 +1,36 @@
+import { VNodeLike, ViewPrimitivePropsComplete } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type SidebarVariant = 'solid' | 'muted' | 'ghost' | 'inset';
+export type SidebarSize = 'sm' | 'md' | 'lg';
+export interface SidebarNavItem {
+    key?: string;
+    label?: string;
+    icon?: VNodeLike;
+    badge?: VNodeLike | number;
+    active?: boolean;
+    disabled?: boolean;
+    onSelect?: (key: string | undefined) => void;
+    content?: VNodeLike;
+}
+export interface SidebarSection {
+    key?: string;
+    title?: string | VNodeLike;
+    items?: SidebarNavItem[];
+    footer?: VNodeLike;
+    content?: VNodeLike;
+}
+export interface SidebarProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    variant?: SidebarVariant;
+    size?: SidebarSize;
+    header?: VNodeLike;
+    footer?: VNodeLike;
+    sections?: SidebarSection[];
+    scrollable?: boolean;
+    showDividers?: boolean;
+    itemGap?: number;
+    sectionGap?: number;
+    children?: VNodeLike;
+    theme?: PortableComponentPartialTheme<'Sidebar'>;
+}
+export declare function Sidebar(props: SidebarProps): VNodeLike;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../src/Sidebar.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;GAIG;AAEH,OAAO,KAAK,EAGV,SAAS,EACT,0BAA0B,EAC3B,MAAM,oBAAoB,CAAA;AAW3B,OAAO,KAAK,EAAE,6BAA6B,EAAgB,MAAM,eAAe,CAAA;AAEhF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5C,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAC5C,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC;IAChF,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,6BAA6B,CAAC,SAAS,CAAC,CAAA;CACjD;AAQD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,SAAS,CAqMtD"}

package/dist/Sidebar.js

@@ -0,0 +1,122 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { Divider as n } from "./Divider.js";
+import { ScrollView as r } from "./ScrollView.js";
+import { KNOWN_COMPONENTS as i, getGlobalThemeDefaults as a, mergeThemes as o, resolveComponentTheme as s, useTheme as c } from "@number10/jsx-core";
+import { jsx as l, jsxs as u } from "@number10/jsx-core/jsx-runtime";
+//#region src/Sidebar.tsx
+function d(e) {
+	return e ? (Array.isArray(e) ? e.flat(Infinity) : [e]).filter((e) => !!e && typeof e == "object" && "type" in e) : [];
+}
+function f(f) {
+	let p = c(), m = f.theme ? o(p ?? {}, f.theme) : p, { props: h, nestedTheme: g } = s({
+		componentName: "Sidebar",
+		globalTheme: a(),
+		localTheme: m,
+		knownComponents: i
+	}), _ = h, v = f.variant ?? _.variant ?? "solid", y = f.size ?? _.size ?? "md", b = _.variants?.[v] ?? {}, x = _.sizes?.[y] ?? {}, { variants: ee, sizes: te, headerStyle: S, footerStyle: ne, sectionStyle: C, itemStyle: w, badgeStyle: T, dividerColor: re, dividerAlpha: ie, scrollable: ae, itemGap: E, sectionGap: D, variant: oe, size: se, ...O } = _, { header: k, footer: A, sections: j, scrollable: M, showDividers: N = !1, itemGap: P, sectionGap: F, theme: ce, children: I, ...L } = f, R = L.gap ?? x.gap ?? _.gap ?? O.gap, z = F ?? D ?? R ?? 8, B = P ?? E ?? 8, V = M ?? ae ?? !1, H = re ?? 13421772, U = {
+		...O,
+		...b,
+		...x,
+		...L,
+		direction: L.direction ?? "column",
+		alignItems: L.alignItems ?? "start",
+		gap: R
+	}, { titleStyle: W, ...G } = C ?? {}, { textStyle: K, active: q, disabledAlpha: J, ...Y } = w ?? {}, { textStyle: X, ...Z } = T ?? {}, le = (t) => t ? typeof t == "string" ? /* @__PURE__ */ l(e, {
+		text: t,
+		style: W
+	}) : t : null, ue = (n) => {
+		if (n == null) return null;
+		let r = typeof n == "number" ? /* @__PURE__ */ l(e, {
+			text: `${n}`,
+			style: X
+		}) : n;
+		return /* @__PURE__ */ l(t, {
+			direction: "row",
+			alignItems: "center",
+			justifyContent: "center",
+			...Z,
+			padding: Z.padding ?? 6,
+			children: r
+		});
+	}, de = (n, r) => n?.length ? n.map((n, i) => {
+		let a = n.key ?? `${r ?? "section"}-item-${i}`, o = n.active ? q ?? {} : {}, s = n.disabled && J !== void 0 ? { alpha: J } : {}, c = n.content ?? (n.label ? /* @__PURE__ */ l(e, {
+			text: n.label,
+			style: K
+		}) : null), u = d(n.icon ?? null), f = d(c), p = d(ue(n.badge)), m = n.disabled ? void 0 : () => n.onSelect?.(n.key ?? a);
+		return /* @__PURE__ */ l(t, {
+			direction: "row",
+			alignItems: "center",
+			gap: Y.gap ?? B,
+			enableGestures: !n.disabled,
+			...m ? { onTouch: m } : {},
+			...Y,
+			...o,
+			...s,
+			children: [
+				...u,
+				...f,
+				...p
+			]
+		}, a);
+	}) : null, fe = (() => {
+		if (!j?.length) return null;
+		let e = j.length - 1;
+		return j.map((r, i) => {
+			let a = r.key ?? `section-${i}`;
+			return /* @__PURE__ */ u(t, {
+				direction: "column",
+				gap: z,
+				...G,
+				children: [
+					le(r.title),
+					r.content ?? null,
+					de(r.items, a),
+					r.footer ?? null,
+					N && i < e ? /* @__PURE__ */ l(n, {
+						color: H,
+						thickness: 1,
+						length: "100%",
+						orientation: "horizontal"
+					}) : null
+				]
+			}, a);
+		});
+	})(), Q = !!j?.length, pe = fe ?? (Q ? null : I) ?? null, me = Q ? I ?? null : null, $ = [...d(pe), ...d(me)];
+	return /* @__PURE__ */ u(t, {
+		...U,
+		theme: g,
+		backgroundColor: _.backgroundColor,
+		backgroundAlpha: _.backgroundAlpha,
+		padding: _.padding,
+		gap: _.gap,
+		children: [
+			k ? /* @__PURE__ */ l(t, {
+				...S,
+				children: k
+			}) : null,
+			V ? /* @__PURE__ */ l(r, {
+				flex: 1,
+				width: "fill",
+				height: "fill",
+				showVerticalSlider: "auto",
+				showHorizontalSlider: !1,
+				sliderSize: "tiny",
+				theme: g,
+				children: /* @__PURE__ */ l(t, {
+					direction: "column",
+					gap: R,
+					width: "fill",
+					children: $
+				})
+			}) : $,
+			A ? /* @__PURE__ */ l(t, {
+				...ne,
+				children: A
+			}) : null
+		]
+	});
+}
+//#endregion
+export { f as Sidebar };

package/dist/Slider.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/VectorDrawContent.cjs`),n=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let r=require(`@number10/jsx-core`),i=require(`@number10/jsx-core/jsx-runtime`);function a(e){let{size:n,color:r,borderColor:a,borderWidth:o=0,isDragging:s,dragScale:c=1.1}=e,l=s?c:1,u=n/2;return(0,i.jsx)(t.VectorDrawContent,{scale:l,onDraw:e=>{o>0&&a!==void 0&&e.fillStyle(a,1).fillCircle(0,0,u),e.fillStyle(r,1).fillCircle(0,0,u-o)}})}function o(t){let o=(0,r.useTheme)(),s=t.theme?(0,r.mergeThemes)(o??{},t.theme):o,{props:c,nestedTheme:l}=(0,r.resolveComponentTheme)({componentName:`Slider`,globalTheme:(0,r.getGlobalThemeDefaults)(),localTheme:s,knownComponents:r.KNOWN_COMPONENTS}),u=t.mode===`range`,d=t.defaultValue??t.min??0,f=t.defaultValue??[t.min??0,t.max??100],[ee,p]=(0,r.useState)(u?f:d),m=t.value!==void 0,h=m?t.value:ee,g=t.min??0,_=t.max??100,v=u?0:h,y=u?h:[g,_],b=t.step??1,x=t.orientation??`horizontal`,S=t.reverse??!1,C=t.disabled??!1,w=t.snap??!0,T=t.minDistance??b,E=t.trackLength??c.trackLength??200,D=c.trackHeight??6,O=c.thumbSize??20,[k,te]=(0,r.useState)(!1),[A,ne]=(0,r.useState)(!1),j=(0,r.useRef)(0),re=(0,r.useRef)(0),M=e=>Math.max(g,Math.min(_,e)),N=e=>g+Math.round((e-g)/b)*b,P=e=>_===g?0:(e-g)/(_-g),F=(e,t)=>{let n=S?t-e:e;return g+Math.max(0,Math.min(1,n/t))*(_-g)},I=e=>{let t=P(e)*E;return S?E-t:t},L=(u?y[0]:v)??0,R=(u?y[1]:0)??0,z=I(L),B=u?I(R):0,[V,H]=(0,r.useState)(z),[U,W]=(0,r.useState)(B);(0,r.useEffect)(()=>{k||H(z)},[z,k]),(0,r.useEffect)(()=>{!A&&u&&W(B)},[B,u,A]);let G=(0,r.useMemo)(()=>{if(!t.marks)return[];if(Array.isArray(t.marks))return t.marks;let e=[];for(let t=g;t<=_;t+=b)e.push({value:t});return e},[t.marks,g,_,b]),ie=e=>{if(C)return;e.stopPropagation();let n=F(x===`horizontal`?e.localX??0:e.localY??0,E),r=M(w?N(n):n);if(u){let e=Math.abs(r-y[0])<=Math.abs(r-y[1])?[r,y[1]]:[y[0],r];if(e[1]-e[0]<T)return;m||p(e),t.onChange?.(e)}else m||p(r),t.onChange?.(r)},K=e=>n=>{if(C)return;n.stopPropagation();let r=e===0,i=r?k:A,a=r?te:ne,o=r?j:re,s=r?H:W,c=r?V:U;if(n.state===`start`){a(!0),o.current=c,u?t.onChangeStart?.(y):t.onChangeStart?.(v);return}if(n.state===`end`){a(!1),u?t.onChangeEnd?.(y):t.onChangeEnd?.(v);return}if(!i)return;let l=x===`horizontal`?n.dx??0:n.dy??0;o.current+=l;let d=Math.max(0,Math.min(E,o.current)),f=F(d,E);if(f=w?N(f):f,u){let e=r?[f,y[1]]:[y[0],f];r?(e[0]=M(e[0]),e[1]-e[0]<T&&(e[0]=e[1]-T),e[0]=M(e[0])):(e[1]=M(e[1]),e[1]-e[0]<T&&(e[1]=e[0]+T),e[1]=M(e[1]));let n=I(r?e[0]:e[1]);s(w?n:d),m||p(e),t.onChange?.(e)}else{let e=M(f),n=I(e);s(w?n:d),m||p(e),t.onChange?.(e)}},ae=t.formatValue??(e=>e.toString()),q=x===`horizontal`,oe=C?c.disabledAlpha??.4:t.alpha??1,J=O+8,se={x:t.valueLabelOffset1?.x??t.valueLabelOffset?.x??(u?q?S?J:-J:J:q&&S?-J:J),y:t.valueLabelOffset1?.y??t.valueLabelOffset?.y??(u?q?-8:S?J:-J:q?-8:S?J:-8)},ce={x:t.valueLabelOffset2?.x??(u&&q&&S?-J:J),y:t.valueLabelOffset2?.y??(u?q?-8:S?-J:J:-8)},Y=u?P(y[0]):0,X=P(u?y[1]:v),Z=S?E-X*E:Y*E,Q=(S?E-Y*E:X*E)-Z,$=(t,r)=>(0,i.jsx)(n.View,{x:r.x-50,y:r.y-25,width:100,height:50,alignItems:`center`,justifyContent:`center`,children:(0,i.jsx)(n.View,{backgroundColor:c.valueLabel?.backgroundColor??0,padding:c.valueLabel?.padding??{left:6,right:6,top:4,bottom:4},cornerRadius:c.valueLabel?.cornerRadius??4,children:(0,i.jsx)(e.Text,{text:ae(t),style:c.valueLabel?.textStyle??{color:`#ffffff`,fontSize:`12px`}})})});return(0,i.jsx)(n.View,{direction:q?`column`:`row`,alignItems:`center`,justifyContent:`center`,gap:8,alpha:oe,width:t.width,height:t.height,theme:l,children:(0,i.jsxs)(n.View,{width:q?E:D,height:q?D:E,backgroundColor:c.trackColor??4473924,cornerRadius:c.trackBorderRadius??D/2,direction:`stack`,enableGestures:!C,onTouch:ie,...t.onTooltip===void 0?{}:{onTooltip:t.onTooltip},theme:l,children:[t.renderTrack?(0,i.jsx)(n.View,{children:t.renderTrack(Y,u?X:void 0)}):(0,i.jsx)(n.View,{x:q?Z:0,y:q?0:Z,width:q?Q:D,height:q?D:Q,backgroundColor:c.trackFilledColor??5090295,cornerRadius:c.trackBorderRadius??D/2}),G.map(e=>{let t=P(e.value),r=S?E-t*E:t*E,a=e.style?.height??c.markHeight??8,o=e.style?.width??c.markWidth??2,s=e.style?.color??c.markColor??8947848;return(0,i.jsx)(n.View,{x:q?r-o/2:D/2-o/2,y:q?D/2-a/2:r-o/2,width:q?o:a,height:q?a:o,backgroundColor:s,children:e.label},e.value)}),(0,i.jsxs)(n.View,{x:q?V:0,y:q?0:V,direction:`stack`,children:[(0,i.jsx)(n.View,{x:-O,y:-O,width:O*2,height:O*2,enableGestures:!C,onTouchMove:K(0)}),(0,i.jsx)(n.View,{x:q?0:D/2,y:q?D/2:0,width:O,height:O,direction:`stack`,children:t.renderThumb?t.renderThumb(L,k,0):(0,i.jsx)(a,{size:O,color:c.thumbColor??5090295,borderColor:c.thumbBorderColor??16777215,borderWidth:c.thumbBorderWidth??2,isDragging:k,dragScale:c.thumbDragScale??1.1})}),t.showValue?$(L,se):null]}),u?(0,i.jsxs)(n.View,{x:q?U:0,y:q?0:U,direction:`stack`,children:[(0,i.jsx)(n.View,{x:-O,y:-O,width:O*2,height:O*2,enableGestures:!C,onTouchMove:K(1)}),(0,i.jsx)(n.View,{x:q?0:D/2,y:q?D/2:0,width:O,height:O,direction:`stack`,children:t.renderThumb?t.renderThumb(R,A,1):(0,i.jsx)(a,{size:O,color:c.thumbColor??5090295,borderColor:c.thumbBorderColor??16777215,borderWidth:c.thumbBorderWidth??2,isDragging:A,dragScale:c.thumbDragScale??1.1})}),t.showValue?$(R,ce):null]}):null]})})}function s(e){return(0,i.jsx)(o,{...e,mode:`single`})}function c(e){return(0,i.jsx)(o,{...e,mode:`range`})}exports.RangeSlider=c,exports.Slider=s;

package/dist/Slider.d.ts

@@ -0,0 +1,80 @@
+import { SizeValue, TooltipCallback, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface SliderMark {
+    value: number;
+    label?: VNodeLike;
+    style?: {
+        color?: number;
+        height?: number;
+        width?: number;
+    };
+}
+export interface SliderProps {
+    key?: string | number | undefined;
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: 'horizontal' | 'vertical';
+    reverse?: boolean;
+    disabled?: boolean;
+    showValue?: boolean;
+    valueLabelOffset?: {
+        x?: number;
+        y?: number;
+    };
+    formatValue?: (value: number) => string;
+    marks?: SliderMark[] | boolean;
+    snap?: boolean;
+    trackLength?: number;
+    renderThumb?: (value: number, isDragging: boolean) => VNodeLike;
+    renderTrack?: (fillPercentage: number) => VNodeLike;
+    onChange?: (value: number) => void;
+    onChangeStart?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    theme?: PortableComponentPartialTheme<'Slider'>;
+    width?: SizeValue | undefined;
+    height?: SizeValue | undefined;
+    alpha?: number;
+    /** Portable tooltip callback; renderer decides how to draw it. */
+    onTooltip?: TooltipCallback | undefined;
+}
+export interface RangeSliderProps {
+    key?: string | number | undefined;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: 'horizontal' | 'vertical';
+    reverse?: boolean;
+    disabled?: boolean;
+    showValue?: boolean;
+    valueLabelOffset1?: {
+        x?: number;
+        y?: number;
+    };
+    valueLabelOffset2?: {
+        x?: number;
+        y?: number;
+    };
+    formatValue?: (value: number) => string;
+    marks?: SliderMark[] | boolean;
+    snap?: boolean;
+    trackLength?: number;
+    minDistance?: number;
+    renderThumb?: (value: number, isDragging: boolean, thumbIndex?: number) => VNodeLike;
+    renderTrack?: (startPercentage: number, endPercentage?: number) => VNodeLike;
+    onChange?: (value: [number, number]) => void;
+    onChangeStart?: (value: [number, number]) => void;
+    onChangeEnd?: (value: [number, number]) => void;
+    theme?: PortableComponentPartialTheme<'Slider'>;
+    width?: SizeValue | undefined;
+    height?: SizeValue | undefined;
+    alpha?: number;
+    onTooltip?: TooltipCallback | undefined;
+}
+export declare function Slider(props: SliderProps): VNodeLike;
+export declare function RangeSlider(props: RangeSliderProps): VNodeLike;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"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"}