@apple-pie/slice 0.1.24 → 0.1.25

package/dist/esm/hooks/useObserveTheme.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useEffect } from "react";
 
 import { lightTheme, darkTheme } from "../theme/themes.mjs";

package/dist/esm/hooks/useTheme.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useMemo } from "react";
 
 import { darkTheme, lightTheme } from "../theme/themes.mjs";

package/dist/esm/hooks/useToolTip.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useLayoutEffect } from "react";
 
 const hiddenCoords = {

package/dist/esm/hooks/useTrackRenders.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { useRef, useEffect } from "react";
 
 import { d as debug } from "../chunks/misc-BeEWwOaJ.mjs";

package/dist/esm/hooks/useWindow.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useEffect, useCallback } from "react";
 
 /**
@@ -64,6 +65,7 @@ function useWindow(breakpoints = bootstrapBreakPoints, top = !0) {
     }, [ geolocationSupported ]);
     function handleResize() {
         var _a, _b, _c, _d;
+        if (!isBrowser) return;
         const windowWidth = top && null !== (_b = null === (_a = window.top) || void 0 === _a ? void 0 : _a.innerWidth) && void 0 !== _b ? _b : window.innerWidth, windowHeight = top && null !== (_d = null === (_c = window.top) || void 0 === _c ? void 0 : _c.innerHeight) && void 0 !== _d ? _d : window.innerHeight;
         setFormFactor(getFormFactor(windowWidth)), setViewportHeight(windowHeight), setViewportWidth(windowWidth), 
         isElectron || setHeight(isTouchDevice ? `${windowHeight}px` : "100vh");

package/dist/esm/index.mjs

@@ -32,79 +32,79 @@ export { useWindow } from "./hooks/useWindow.mjs";
 
 export { useObserveResize } from "./hooks/useObserveResize.mjs";
 
-export { A as AudioBubble } from "./chunks/AudioBubble-DFh3Vxl6.mjs";
+export { A as AudioBubble } from "./chunks/AudioBubble-DZfzkdlq.mjs";
 
-export { A as Avatar } from "./chunks/Avatar-C8uV7ROZ.mjs";
+export { A as Avatar } from "./chunks/Avatar-m5-zleDk.mjs";
 
-export { A as AvatarGroup } from "./chunks/AvatarGroup-Bt1Lkn5S.mjs";
+export { A as AvatarGroup } from "./chunks/AvatarGroup-DlgP4lTS.mjs";
 
-export { B as Badge } from "./chunks/Badge-D-U1jomY.mjs";
+export { B as Badge } from "./chunks/Badge-CC0zSLMf.mjs";
 
-export { I as IconButton } from "./chunks/IconButton-oAB8ZFTf.mjs";
+export { I as IconButton } from "./chunks/IconButton-Dciw5CLn.mjs";
 
-export { C as Camera } from "./chunks/Camera-DSSiOeJd.mjs";
+export { C as Camera } from "./chunks/Camera-BJJpDuuA.mjs";
 
-export { C as CheckBox } from "./chunks/CheckBox-B6zWSySW.mjs";
+export { C as CheckBox } from "./chunks/CheckBox-Cf2l3-D9.mjs";
 
-export { D as DivInput } from "./chunks/DivInput-cIMIH07H.mjs";
+export { D as DivInput } from "./chunks/DivInput-WJltaCra.mjs";
 
-export { D as Dot } from "./chunks/Dot-Cj6gWj4_.mjs";
+export { D as Dot } from "./chunks/Dot-DZE134mJ.mjs";
 
-export { D as DraggablePanel } from "./chunks/DrggablePanel-CQcIbxpX.mjs";
+export { D as DraggablePanel } from "./chunks/DrggablePanel-DA7pYWg6.mjs";
 
-export { D as DropDown } from "./chunks/DropDown-DFUc_rjP.mjs";
+export { D as DropDown } from "./chunks/DropDown-BQ2tNN3_.mjs";
 
-export { E as ErrorSummary } from "./chunks/ErrorSummary-Mz9siVxm.mjs";
+export { E as ErrorSummary } from "./chunks/ErrorSummary-EzCqVifm.mjs";
 
-export { G as Grouper } from "./chunks/Grouper-B04WxD6K.mjs";
+export { G as Grouper } from "./chunks/Grouper-CvPYEsF_.mjs";
 
-export { O as Overlay } from "./chunks/Overlay-3KkyDm1f.mjs";
+export { O as Overlay } from "./chunks/Overlay-DiSvgIQP.mjs";
 
-export { F as FlexDiv, S as Size } from "./chunks/_types-DOQAaLqq.mjs";
+export { F as FlexDiv, P as Preset, S as Size } from "./chunks/FlexDiv-BFrVoFhC.mjs";
 
-export { P as Pager } from "./chunks/Pager-DmiwYLl5.mjs";
+export { P as Pager } from "./chunks/Pager-BoDLaKFh.mjs";
 
-export { P as PromptInput } from "./chunks/PromptInput-D4Q-DWjz.mjs";
+export { P as PromptInput } from "./chunks/PromptInput-plgRiAb7.mjs";
 
-export { D as DoneCheck, P as ProgressIndicator } from "./chunks/ProgressIndicator-CxsZm_As.mjs";
+export { D as DoneCheck, P as ProgressIndicator } from "./chunks/ProgressIndicator-CB_oazMD.mjs";
 
-export { R as RadioButton } from "./chunks/RadioButton-B0jvM5VW.mjs";
+export { R as RadioButton } from "./chunks/RadioButton-B6ImCUYY.mjs";
 
-export { R as RadioButtonList } from "./chunks/RadioButtonList-DBRAv87_.mjs";
+export { R as RadioButtonList } from "./chunks/RadioButtonList-Cf6gk8yp.mjs";
 
-export { S as Slider } from "./chunks/Slider-CONGTXUE.mjs";
+export { S as Slider } from "./chunks/Slider-Cav86rU6.mjs";
 
-export { S as Spacer } from "./chunks/Spacer-C5fcJYq-.mjs";
+export { S as Spacer } from "./chunks/Spacer-C5651N0N.mjs";
 
-export { S as Switch } from "./chunks/Switch-CyoaJwSX.mjs";
+export { S as Switch } from "./chunks/Switch-RfA431T4.mjs";
 
-export { T as TabBar } from "./chunks/TabBar-DmO1ixBz.mjs";
+export { T as TabBar } from "./chunks/TabBar-0zpJ9GtN.mjs";
 
-export { T as TextArea } from "./chunks/TextArea-DaB8g-fZ.mjs";
+export { T as TextArea } from "./chunks/TextArea-B64bIPHm.mjs";
 
-export { T as TextField } from "./chunks/TextField-BGeEJXUJ.mjs";
+export { T as TextField } from "./chunks/TextField-BZeoN_ye.mjs";
 
 export { ThemeProvider } from "./providers/ThemeProvider.mjs";
 
-export { T as Tip } from "./chunks/Tip-DrQvxDsH.mjs";
+export { T as Tip } from "./chunks/Tip-C5LB54J9.mjs";
 
-export { T as Toast, a as ToastType } from "./chunks/Toast-C5XSDgno.mjs";
+export { T as Toast, a as ToastType } from "./chunks/Toast-Bl4s4tRo.mjs";
 
-export { B as Button } from "./chunks/Button-sEYjFcR2.mjs";
+export { B as Button } from "./chunks/Button-YER9dCLE.mjs";
 
-export { C as Chip } from "./chunks/Chip-BBKJ6wG4.mjs";
+export { C as Chip } from "./chunks/Chip-DWp7p2BF.mjs";
 
-export { F as FileIcon, a as FileIconNames } from "./chunks/FileIcon-DeW-ZBiv.mjs";
+export { F as FileIcon, a as FileIconNames } from "./chunks/FileIcon-Cufsp1gn.mjs";
 
-export { I as Icon } from "./chunks/Icon-KDwlMXzH.mjs";
+export { I as Icon } from "./chunks/Icon-DI32kOA1.mjs";
 
-export { S as SliceIcons } from "./chunks/_types-C2C2Zwd0.mjs";
+export { S as SliceIcons } from "./chunks/_types-DeEhv4Y5.mjs";
 
-export { B as ButtonBar } from "./chunks/ButtonBar-DSR2lhhN.mjs";
+export { B as ButtonBar } from "./chunks/ButtonBar-BH4pcEpN.mjs";
 
-export { L as Label, a as LabelBackground } from "./chunks/Label-BD7VlTDw.mjs";
+export { L as Label, a as LabelBackground } from "./chunks/Label-CvCDAg1y.mjs";
 
-export { U as UploadArea, a as allTypes, b as audioTypes, d as documentTypes, i as imageTypes, t as textTypes, v as videoTypes } from "./chunks/UploadArea-Gpq-MhqB.mjs";
+export { U as UploadArea, a as allTypes, b as audioTypes, d as documentTypes, i as imageTypes, t as textTypes, v as videoTypes } from "./chunks/UploadArea-D3g2g1LK.mjs";
 
 import "./theme/corners.mjs";
 
@@ -128,6 +128,6 @@ import "./chunks/misc-BeEWwOaJ.mjs";
 
 import "motion/react";
 
-import "./chunks/FileList-0Dzx15hl.mjs";
+import "./chunks/FileList-BQ9X5YnB.mjs";
 
 import "./chunks/debounce-Bst1jxMS.mjs";

package/dist/esm/providers/ThemeProvider.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from "react/jsx-runtime";
 
 import { useEffect } from "react";
@@ -26,21 +27,21 @@ styleInject("/* Keep these values in sync with src/hooks/useWindow/useWindow.ts
 
 styleInject("[data-slice-theme-scope] {\n\t--motion-magnet: cubic-bezier(0.352, 0.003, 0.993, -0.052);\n\t--motion-water: cubic-bezier(0.36, 0, 0.64, 1);\n\t--motion-spring: linear(\n\t\t0,\n\t\t0.002 0.2%,\n\t\t0.011 0.5%,\n\t\t0.041 1%,\n\t\t0.1 1.6%,\n\t\t0.18 2.2%,\n\t\t0.365 3.3%,\n\t\t0.925 6.2%,\n\t\t1.058 7%,\n\t\t1.17 7.8%,\n\t\t1.26 8.6%,\n\t\t1.318 9.3%,\n\t\t1.342 9.7%,\n\t\t1.36 10.1%,\n\t\t1.372 10.5%,\n\t\t1.378 10.9%,\n\t\t1.378 11.4%,\n\t\t1.374 11.7%,\n\t\t1.368 12%,\n\t\t1.348 12.6%,\n\t\t1.314 13.3%,\n\t\t1.237 14.5%,\n\t\t1.026 17.4%,\n\t\t0.975 18.2%,\n\t\t0.933 19%,\n\t\t0.9 19.8%,\n\t\t0.878 20.5%,\n\t\t0.864 21.2%,\n\t\t0.859 21.6%,\n\t\t0.857 22%,\n\t\t0.856 22.5%,\n\t\t0.86 23.1%,\n\t\t0.867 23.7%,\n\t\t0.88 24.4%,\n\t\t0.909 25.6%,\n\t\t0.991 28.6%,\n\t\t1.01 29.4%,\n\t\t1.026 30.2%,\n\t\t1.037 30.9%,\n\t\t1.046 31.6%,\n\t\t1.051 32.3%,\n\t\t1.054 33.1%,\n\t\t1.053 34.2%,\n\t\t1.046 35.5%,\n\t\t1.035 36.7%,\n\t\t1.003 39.8%,\n\t\t0.99 41.4%,\n\t\t0.983 42.8%,\n\t\t0.979 44.2%,\n\t\t0.982 46.3%,\n\t\t1.002 52%,\n\t\t1.006 53.6%,\n\t\t1.008 55.2%,\n\t\t1.007 57.5%,\n\t\t0.999 63.1%,\n\t\t0.997 66.3%,\n\t\t1.001 77.2%,\n\t\t1 88.2%,\n\t\t1\n\t);\n\t--motion-magnet-duration: 0.5s;\n\t--motion-water-duration: 0.25s;\n\t--motion-spring-duration: 1s;\n}\n");
 
-styleInject('.slice-global-body {\n\t/* apply themed background color */\n\tbackground-color: var(--core-surface-primary);\n\t/* remove gaps */\n\tmargin: 0;\n\tpadding: 0;\n\t/* base medium body font style with pref. for theme google font */\n\tfont-family: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",\n\t\tRoboto, Helvetica, Arial, sans-serif;\n\tfont-weight: 360;\n\tfont-size: 15px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n\t-webkit-font-smoothing: antialiased;\n}\n');
-
-const darkModeMediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
-
 function ThemeProvider(props) {
-    const {children: children, theme: theme, system: system, global: global} = props;
+    const {children: children, theme: theme, system: system, global: global, initialTheme: initialTheme} = props;
     return useEffect(() => {
-        if (theme) {
+        if (theme || initialTheme) {
             const newTheme = function(theme) {
                 if (theme) return theme.includes("dark") ? darkTheme : lightTheme;
-            }(theme);
+            }(null != theme ? theme : initialTheme);
             if (!newTheme) return;
-            document.documentElement.dataset.sliceTheme = newTheme.name;
+            name = newTheme.name, "undefined" != typeof document && (document.documentElement.dataset.sliceTheme = name);
         }
-    }, [ theme ]), useEffect(() => {
+        var name;
+    }, [ theme, initialTheme ]), useEffect(() => {
+        if (!system) return;
+        const darkModeMediaQuery = "undefined" == typeof globalThis || "function" != typeof globalThis.matchMedia ? null : globalThis.matchMedia("(prefers-color-scheme: dark)");
+        if (!darkModeMediaQuery) return;
         const handleSystemThemeChange = e => {
             if (system) {
                 const autoTheme = e.matches ? darkTheme : lightTheme;
@@ -65,4 +66,6 @@ function ThemeProvider(props) {
     });
 }
 
+styleInject('.slice-global-body {\n\t/* apply themed background color */\n\tbackground-color: var(--core-surface-primary);\n\t/* remove gaps */\n\tmargin: 0;\n\tpadding: 0;\n\t/* base medium body font style with pref. for theme google font */\n\tfont-family: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",\n\t\tRoboto, Helvetica, Arial, sans-serif;\n\tfont-weight: 360;\n\tfont-size: 15px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n\t-webkit-font-smoothing: antialiased;\n}\n');
+
 export { ThemeProvider };

package/dist/esm/providers/themeServer.mjs

@@ -0,0 +1,24 @@
+function normalizeThemeName(theme) {
+    if (theme) return theme.includes("dark") ? "darkMode" : "lightMode";
+}
+
+/**
+ * Resolve the startup Slice theme from an explicit theme value, cookie value,
+ * or fallback theme in that order.
+ */ function resolveInitialTheme(options = {}) {
+    var _a, _b;
+    const {theme: theme, cookieTheme: cookieTheme, fallbackTheme: fallbackTheme = "lightMode"} = options;
+    return null !== (_b = null !== (_a = normalizeThemeName(theme)) && void 0 !== _a ? _a : normalizeThemeName(cookieTheme)) && void 0 !== _b ? _b : fallbackTheme;
+}
+
+/**
+ * Return the root HTML attributes needed to render the active Slice theme
+ * before client hydration.
+ */ function getThemeHtmlAttributes(theme) {
+    var _a;
+    return {
+        "data-slice-theme": null !== (_a = normalizeThemeName(theme)) && void 0 !== _a ? _a : "lightMode"
+    };
+}
+
+export { getThemeHtmlAttributes, resolveInitialTheme };

package/dist/esm/providers.mjs

@@ -1,5 +1,7 @@
 export { ThemeProvider } from "./providers/ThemeProvider.mjs";
 
+export { getThemeHtmlAttributes, resolveInitialTheme } from "./providers/themeServer.mjs";
+
 import "react/jsx-runtime";
 
 import "react";

package/dist/types/components/ButtonBar/_types.d.ts

@@ -8,7 +8,7 @@ export type BarButton = {
 };
 type ButtonBarBaseProps = {
     buttons?: BarButton[];
-    buttonSize?: number;
+    frameSize?: number;
     iconSize?: number;
     toggle?: boolean;
     selected?: number;
@@ -23,6 +23,7 @@ type ButtonBarBaseProps = {
     bgColorHover?: string;
     bgColorActive?: string;
     labelColor?: string;
+    buttonSize?: 's' | 'm' | 'l' | 'xl';
     onClick?: (button: BarButton) => void;
     onChange?: (option: BarButton) => void;
     onToolTip?: (tip: ToolTip | null) => void;

package/dist/types/components/FlexDiv/FlexDiv.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const FlexDiv: React.NamedExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
     className?: string;
     children?: any;
+    preset?: import("./_types").Preset;
     scrollY?: boolean;
     scrollX?: boolean;
     absolute?: boolean;
@@ -31,6 +32,7 @@ export declare const FlexDiv: React.NamedExoticComponent<Omit<React.HTMLAttribut
 }> & {
     className?: string;
     children?: any;
+    preset?: import("./_types").Preset;
     scrollY?: boolean;
     scrollX?: boolean;
     absolute?: boolean;

package/dist/types/components/FlexDiv/_types.d.ts

@@ -7,9 +7,86 @@ export declare enum Size {
     Viewport = "viewport",
     Auto = "auto"
 }
+export declare enum Preset {
+    FillScroll = "fill-scroll",
+    FillCenter = "fill-center",
+    Window = "window",
+    Row = "row",
+    RowBetween = "row-between",
+    Column = "fill-column",
+    Default = "default",
+    Draggable = "draggable"
+}
+export declare const layoutSets: {
+    "fill-scroll": {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+    "fill-center": {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+    window: {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+    row: {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+    "row-between": {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+    "fill-column": {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+    default: {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+    draggable: {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        direction: string;
+    };
+};
 type FlexDivBaseProps = {
     className?: string;
     children?: any;
+    preset?: Preset;
     scrollY?: boolean;
     scrollX?: boolean;
     absolute?: boolean;

package/dist/types/components/FlexDiv/index.d.ts

@@ -1,2 +1,2 @@
 export { FlexDiv } from './FlexDiv';
-export { Size, type FlexDivProps } from './_types';
+export { Size, Preset, type FlexDivProps } from './_types';

package/dist/types/components/Icon/_types.d.ts

@@ -4,7 +4,7 @@ type IconBaseProps = {
     size?: number;
     stroke?: number;
     strokeColor?: string;
-    fillColor?: string;
+    fillColor?: number;
     coverUp?: string;
     toggle?: boolean;
     pointer?: boolean;
@@ -125,6 +125,7 @@ export declare const SliceIcons: {
         readonly home: "home";
         readonly menu: "menu";
         readonly more: "more";
+        readonly sidebar: "sidebar";
         readonly x: "x";
     };
 };

package/dist/types/components/Icon/iconRegistry.d.ts

@@ -2,7 +2,7 @@ import type { JSX } from 'react';
 export interface IconRenderProps {
     stroke: number;
     strokeColor: string;
-    fillColor: string;
+    fillColor: number;
     coverUp: string;
 }
 export type IconLineRenderer = (props: IconRenderProps) => JSX.Element;

package/dist/types/components/IconButton/_types.d.ts

@@ -2,6 +2,7 @@ import type { Transition, Variants } from 'motion/react';
 import type React from 'react';
 import type { ToolTip } from '../sharedTypes';
 type IconButtonBaseProps = {
+    round?: boolean;
     frameSize?: number;
     iconSize?: number;
     icon?: string;
@@ -11,7 +12,7 @@ type IconButtonBaseProps = {
     tooltip?: string;
     color?: string;
     colorOn?: string;
-    fillColor?: string;
+    fillColor?: number;
     disabled?: boolean;
     bgColor?: string;
     bgColorOn?: string;
@@ -32,6 +33,7 @@ type IconButtonBaseProps = {
     borderRadius?: number;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onToolTip?: (tip: ToolTip | null) => void;
+    buttonSize?: 's' | 'm' | 'l' | 'xl';
 };
 export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof IconButtonBaseProps> & IconButtonBaseProps;
 export {};

package/dist/types/index.d.ts

@@ -31,7 +31,7 @@ export { Grouper } from './components/Grouper';
 export type { GrouperProps } from './components/Grouper';
 export { Overlay } from './components/Overlay';
 export type { OverlayProps } from './components/Overlay';
-export { FlexDiv, Size } from './components/FlexDiv';
+export { FlexDiv, Size, Preset } from './components/FlexDiv';
 export type { FlexDivProps } from './components/FlexDiv';
 export { Pager } from './components/Pager';
 export type { PagerProps } from './components/Pager';

package/dist/types/providers/ThemeProvider.d.ts

@@ -8,6 +8,7 @@ import '../theme/global/global.css';
 interface ThemeProviderProps {
     children?: React.ReactNode;
     theme?: string;
+    initialTheme?: string;
     system?: boolean;
     global?: boolean;
 }

package/dist/types/providers/index.d.ts

@@ -1 +1,2 @@
 export { ThemeProvider } from './ThemeProvider';
+export { getThemeHtmlAttributes, resolveInitialTheme, type SliceThemeName, } from './themeServer';

package/dist/types/providers/themeServer.d.ts

@@ -0,0 +1,19 @@
+export type SliceThemeName = 'lightMode' | 'darkMode';
+type ResolveInitialThemeOptions = {
+    theme?: string | null;
+    cookieTheme?: string | null;
+    fallbackTheme?: SliceThemeName;
+};
+/**
+ * Resolve the startup Slice theme from an explicit theme value, cookie value,
+ * or fallback theme in that order.
+ */
+export declare function resolveInitialTheme(options?: ResolveInitialThemeOptions): SliceThemeName;
+/**
+ * Return the root HTML attributes needed to render the active Slice theme
+ * before client hydration.
+ */
+export declare function getThemeHtmlAttributes(theme?: string | null): {
+    readonly 'data-slice-theme': SliceThemeName;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@apple-pie/slice",
-	"version": "0.1.24",
+	"version": "0.1.25",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.mjs",
 	"exports": {
@@ -158,6 +158,7 @@
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-strip-code": "^0.2.8",
 		"rollup-plugin-visualizer": "^7.0.1",
+		"rollup-preserve-directives": "^1.1.3",
 		"storybook": "^10.2.9",
 		"tsx": "^4.21.0",
 		"typescript": "^5.7.3",