@pathscale/ui 0.0.160 → 0.0.161

package/dist/components/size-picker/SizePicker.d.ts

@@ -0,0 +1,10 @@
+import { type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import { type SizePreset } from "./sizeStore";
+export interface SizePickerProps extends IComponentBaseProps {
+    storagePrefix?: string;
+    onSizeChange?: (size: SizePreset) => void;
+    "aria-label"?: string;
+}
+declare const SizePicker: Component<SizePickerProps>;
+export default SizePicker;

package/dist/components/size-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SizePicker } from "./SizePicker";
+export type { SizePickerProps } from "./SizePicker";
+export { createSizeStore, getDefaultSizeStore, type SizeStore, type SizePreset, } from "./sizeStore";

package/dist/components/size-picker/sizeStore.d.ts

@@ -0,0 +1,8 @@
+export type SizePreset = "M" | "L" | "XL";
+export interface SizeStore {
+    size: () => SizePreset;
+    setSize: (size: SizePreset) => void;
+    scale: () => number;
+}
+export declare function createSizeStore(storagePrefix: string): SizeStore;
+export declare function getDefaultSizeStore(): SizeStore;

package/dist/index.d.ts

@@ -107,6 +107,8 @@ export type { StreamingTableStore } from "./components/streaming-table";
 export { default as Tabs } from "./components/tabs";
 export type { RadioTabProps, TabProps, TabsProps } from "./components/tabs";
 export { default as Textarea } from "./components/textarea";
+export { SizePicker, createSizeStore, getDefaultSizeStore, } from "./components/size-picker";
+export type { SizePickerProps, SizeStore, SizePreset, } from "./components/size-picker";
 export { ThemeColorPicker, createHueShiftStore, getDefaultHueShiftStore, resetHueShift, } from "./components/theme-color-picker";
 export type { ThemeColorPickerProps, HueShiftStore, } from "./components/theme-color-picker";
 export { Timeline, TimelineEnd, TimelineItem, TimelineMiddle, TimelineStart, } from "./components/timeline";

package/dist/index.js

@@ -18352,6 +18352,96 @@ const Textarea = (props)=>{
     })();
 };
 const textarea_Textarea = Textarea;
+const SIZE_SCALE = {
+    M: 100,
+    L: 112.5,
+    XL: 125
+};
+function applySize(preset) {
+    document.documentElement.style.fontSize = `${SIZE_SCALE[preset]}%`;
+}
+function createSizeStore(storagePrefix) {
+    const STORAGE_KEY = `${storagePrefix}_size_preset`;
+    const getInitial = ()=>{
+        if ("undefined" == typeof window) return "M";
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved && saved in SIZE_SCALE) return saved;
+        return "M";
+    };
+    const [size, setSizeInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitial());
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const s = size();
+        if ("undefined" == typeof window) return;
+        localStorage.setItem(STORAGE_KEY, s);
+        applySize(s);
+    });
+    return {
+        size,
+        setSize: setSizeInternal,
+        scale: ()=>SIZE_SCALE[size()]
+    };
+}
+let defaultStore = null;
+function getDefaultSizeStore() {
+    if (!defaultStore) defaultStore = createSizeStore("theme");
+    return defaultStore;
+}
+var SizePicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=radiogroup>");
+const PRESETS = [
+    "M",
+    "L",
+    "XL"
+];
+const SizePicker_SizePicker = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "storagePrefix",
+        "onSizeChange",
+        "aria-label",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const store = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>createSizeStore(local.storagePrefix ?? "theme"));
+    const handleClick = (preset)=>{
+        store().setSize(preset);
+        local.onSizeChange?.(preset);
+    };
+    const classes = ()=>twMerge("inline-flex gap-1", clsx(local.class, local.className));
+    return (()=>{
+        var _el$ = SizePicker_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-label"] () {
+                return local["aria-label"] ?? "Change text size";
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            each: PRESETS,
+            children: (preset)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
+                    type: "button",
+                    size: "xs",
+                    get color () {
+                        return store().size() === preset ? "primary" : "ghost";
+                    },
+                    onClick: ()=>handleClick(preset),
+                    role: "radio",
+                    get ["aria-checked"] () {
+                        return store().size() === preset;
+                    },
+                    "aria-label": `Size ${preset}`,
+                    children: preset
+                })
+        }));
+        return _el$;
+    })();
+};
+const SizePicker = SizePicker_SizePicker;
 let cspAllowsInlineStyles = null;
 const checkCspAllowsInlineStyles = ()=>{
     if (null !== cspAllowsInlineStyles) return cspAllowsInlineStyles;
@@ -18793,10 +18883,10 @@ function createHueShiftStore(storagePrefix) {
         isAvailable: ()=>checkCspAllowsInlineStyles()
     };
 }
-let defaultStore = null;
+let hueShift_defaultStore = null;
 function getDefaultHueShiftStore() {
-    if (!defaultStore) defaultStore = createHueShiftStore("theme");
-    return defaultStore;
+    if (!hueShift_defaultStore) hueShift_defaultStore = createHueShiftStore("theme");
+    return hueShift_defaultStore;
 }
 var ThemeColorPicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 mt-2 p-6 bg-base-100 rounded-lg shadow-xl border border-base-300 z-50">'), ThemeColorPicker_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 function hueToColorValue(hue, sat) {
@@ -19735,4 +19825,4 @@ const createRouteTransitionResolver = (options)=>{
         return fallback ?? noMotion;
     };
 };
-export { accordion_Accordion as Accordion, alert_Alert as Alert, AlphaSlider, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorInput as ColorInput, colorpicker_ColorPicker as ColorPicker, ColorPickerContext, ColorPickerFlowerSelector, colorpicker_ColorPickerGradientSelector as ColorPickerGradientSelector, ColorPickerWheelSelector, colorpicker_ColorPreview as ColorPreview, colorpicker_ColorSwatches as ColorSwatches, ColorWheel, colorpicker_ColorWheelFlower as ColorWheelFlower, ConfirmDialog, connectionstatus_ConnectionStatus as ConnectionStatus, CookieConsent, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, DropdownSelect, EmptyState, EnhancedTable, Fieldset, FileInput, FirefoxPWABanner, flex_Flex as Flex, floating_dock_FloatingDock as FloatingDock, footer_Footer as Footer, form_Form as Form, form_actions_FormActions as FormActions, glass_panel_GlassPanel as GlassPanel, GlowCard, Grid, hero_Hero as Hero, colorpicker_HueSlider as HueSlider, I18nContext, I18nProvider, icon_Icon as Icon, immersive_landing_ImmersiveLanding as ImmersiveLanding, ImmersiveLandingContext, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, language_switcher_LanguageSwitcher as LanguageSwitcher, LightnessSlider, link_Link as Link, live_chat_LiveChatBubble as LiveChatBubble, LiveChatPanel, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, noise_background_NoiseBackground as NoiseBackground, PWAInstallPrompt, Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, radio_group_RadioGroup as RadioGroup, range_Range as Range, Rating, colorpicker_SaturationBrightness as SaturationBrightness, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, SkipLink, RangeSlider as SliderField, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, switch_field_SwitchField as SwitchField, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, ThemeColorPicker, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, video_preview_VideoPreview as VideoPreview, windowmockup_WindowMockup as WindowMockup, createHueShiftStore, createI18n, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getDefaultHueShiftStore, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resetHueShift, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useColorPickerContext, useDesktop, useFormValidation, useI18n, useImmersiveLanding, useImmersiveLandingContext };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, AlphaSlider, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorInput as ColorInput, colorpicker_ColorPicker as ColorPicker, ColorPickerContext, ColorPickerFlowerSelector, colorpicker_ColorPickerGradientSelector as ColorPickerGradientSelector, ColorPickerWheelSelector, colorpicker_ColorPreview as ColorPreview, colorpicker_ColorSwatches as ColorSwatches, ColorWheel, colorpicker_ColorWheelFlower as ColorWheelFlower, ConfirmDialog, connectionstatus_ConnectionStatus as ConnectionStatus, CookieConsent, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, DropdownSelect, EmptyState, EnhancedTable, Fieldset, FileInput, FirefoxPWABanner, flex_Flex as Flex, floating_dock_FloatingDock as FloatingDock, footer_Footer as Footer, form_Form as Form, form_actions_FormActions as FormActions, glass_panel_GlassPanel as GlassPanel, GlowCard, Grid, hero_Hero as Hero, colorpicker_HueSlider as HueSlider, I18nContext, I18nProvider, icon_Icon as Icon, immersive_landing_ImmersiveLanding as ImmersiveLanding, ImmersiveLandingContext, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, language_switcher_LanguageSwitcher as LanguageSwitcher, LightnessSlider, link_Link as Link, live_chat_LiveChatBubble as LiveChatBubble, LiveChatPanel, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, noise_background_NoiseBackground as NoiseBackground, PWAInstallPrompt, Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, radio_group_RadioGroup as RadioGroup, range_Range as Range, Rating, colorpicker_SaturationBrightness as SaturationBrightness, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, SizePicker, skeleton_Skeleton as Skeleton, SkipLink, RangeSlider as SliderField, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, switch_field_SwitchField as SwitchField, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, ThemeColorPicker, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, video_preview_VideoPreview as VideoPreview, windowmockup_WindowMockup as WindowMockup, createHueShiftStore, createI18n, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createSizeStore, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getDefaultHueShiftStore, getDefaultSizeStore, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resetHueShift, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useColorPickerContext, useDesktop, useFormValidation, useI18n, useImmersiveLanding, useImmersiveLandingContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.160",
+  "version": "0.0.161",
   "author": "pathscale",
   "repository": {
     "type": "git",