@apple-pie/slice 0.1.26 → 0.1.28

package/dist/esm/stores/microphone.mjs

@@ -0,0 +1,7 @@
+export { g as getMicrophoneState, m as microphoneActions, u as useMicActive, a as useMicError, b as useMicMuted, c as useMicOptions, d as useMicRequesting, e as useMicStream, f as useMicSupported, h as useMicTrack, i as useMicrophoneStore, j as useMicrophoneStoreActions, k as useMicrophones, l as useSyncMicrophoneStore } from "../chunks/microphoneStore-t16oxjGB.mjs";
+
+import "../chunks/tslib.es6-C-olHjXV.mjs";
+
+import "react";
+
+import "zustand";

package/dist/esm/stores.mjs

@@ -2,6 +2,8 @@ export { F as FormFactor, d as dpr, f as formFactor, g as gettingLocation, i as
 
 export { c as createUploadsWorker, g as getUploads, a as getUploadsError, b as getUploadsWorkerStatus, u as uploadsActions, d as uploadsInitialized, e as useUploads, f as useUploadsActions, h as useUploadsError, i as useUploadsInitialized, j as useUploadsStore, k as useUploadsWorkerStatus } from "./chunks/uploadsStore-B7VECR5Q.mjs";
 
+export { g as getMicrophoneState, m as microphoneActions, u as useMicActive, a as useMicError, b as useMicMuted, c as useMicOptions, d as useMicRequesting, e as useMicStream, f as useMicSupported, h as useMicTrack, i as useMicrophoneStore, j as useMicrophoneStoreActions, k as useMicrophones, l as useSyncMicrophoneStore } from "./chunks/microphoneStore-t16oxjGB.mjs";
+
 export { g as getTip, t as tipActions, u as useTip, a as useTipActions, b as useTipStore } from "./chunks/tipStore-CL5a95Bl.mjs";
 
 export { g as getToast, t as toastActions, u as useToast, a as useToastActions, b as useToastStore } from "./chunks/toastStore-D2PEIqCo.mjs";

package/dist/esm/theme/colors.mjs

@@ -133,7 +133,7 @@ const coreColors = {
     "core-icon-primary": coreColors["brand-grey-950"],
     "core-icon-secondary": coreColors["brand-grey-700"],
     "core-icon-tertiary": coreColors["brand-sea-500"],
-    "core-outline-secondary": coreColors["brand-grey-700"],
+    "core-outline-secondary": coreColors["brand-grey-100"],
     "core-outline-primary": coreColors["brand-grey-100"],
     "core-outline-special": coreColors["brand-sea-100"],
     "core-outline-tertiary": coreColors["brand-sea-500"],
@@ -199,7 +199,7 @@ const coreColors = {
     "core-icon-primary": coreColors["brand-white-0"],
     "core-icon-secondary": coreColors["brand-grey-200"],
     "core-icon-tertiary": coreColors["brand-sky-300"],
-    "core-outline-secondary": coreColors["brand-grey-100"],
+    "core-outline-secondary": coreColors["brand-grey-900"],
     "core-outline-primary": coreColors["brand-grey-700"],
     "core-outline-special": coreColors["brand-sky-900"],
     "core-outline-tertiary": coreColors["brand-sky-300"],

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

@@ -10,6 +10,7 @@ export declare const Button: React.NamedExoticComponent<Omit<React.ButtonHTMLAtt
     label?: string;
     iconRight?: string;
     iconLeft?: string;
+    iconFill?: boolean;
     fill?: boolean;
     count?: number;
     showDot?: boolean;
@@ -48,6 +49,7 @@ export declare const Button: React.NamedExoticComponent<Omit<React.ButtonHTMLAtt
     label?: string;
     iconRight?: string;
     iconLeft?: string;
+    iconFill?: boolean;
     fill?: boolean;
     count?: number;
     showDot?: boolean;

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

@@ -10,6 +10,7 @@ type ButtonBaseProps = {
     label?: string;
     iconRight?: string;
     iconLeft?: string;
+    iconFill?: boolean;
     fill?: boolean;
     count?: number;
     showDot?: boolean;

package/dist/types/components/DraggablePanel/DrggablePanel.d.ts

@@ -18,13 +18,12 @@ type DraggablePanelBaseProps = {
     onResizeStart?: (info: Info) => void;
     containerRef?: React.RefObject<HTMLDivElement | null>;
     sizeConstraints?: Constraint;
-    dragsRight?: boolean;
     isClosed?: boolean;
     resizeHandle?: Partial<ResizeHandle>;
     borderRight?: any;
     borderLeft?: any;
     bgColor?: string;
-    drags?: boolean;
+    drags?: 'left' | 'right' | false;
     dragHandle?: boolean;
     dragHandleStyle?: DragHandleProps;
     disableOnContext?: boolean;

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

@@ -3,6 +3,7 @@ export declare const FlexDiv: React.NamedExoticComponent<Omit<React.HTMLAttribut
     className?: string;
     children?: any;
     preset?: import("./_types").Preset;
+    scrollBox?: boolean;
     scrollY?: boolean;
     scrollX?: boolean;
     absolute?: boolean;
@@ -33,6 +34,7 @@ export declare const FlexDiv: React.NamedExoticComponent<Omit<React.HTMLAttribut
     className?: string;
     children?: any;
     preset?: import("./_types").Preset;
+    scrollBox?: boolean;
     scrollY?: boolean;
     scrollX?: boolean;
     absolute?: boolean;

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

@@ -10,10 +10,11 @@ export declare enum Size {
 export declare enum Preset {
     FillScroll = "fill-scroll",
     FillCenter = "fill-center",
+    FillStart = "fill-start",
     Window = "window",
     Row = "row",
     RowBetween = "row-between",
-    Column = "fill-column",
+    Column = "column",
     Default = "default",
     Draggable = "draggable"
 }
@@ -24,6 +25,8 @@ export declare const layoutSets: {
         justify: string;
         align: string;
         scrollY: boolean;
+        scrollX: boolean;
+        overflow: string;
         direction: string;
     };
     "fill-center": {
@@ -32,6 +35,18 @@ export declare const layoutSets: {
         justify: string;
         align: string;
         scrollY: boolean;
+        scrollX: boolean;
+        overflow: string;
+        direction: string;
+    };
+    "fill-start": {
+        width: string;
+        height: string;
+        justify: string;
+        align: string;
+        scrollY: boolean;
+        scrollX: boolean;
+        overflow: string;
         direction: string;
     };
     window: {
@@ -40,6 +55,8 @@ export declare const layoutSets: {
         justify: string;
         align: string;
         scrollY: boolean;
+        scrollX: boolean;
+        overflow: string;
         direction: string;
     };
     row: {
@@ -47,7 +64,9 @@ export declare const layoutSets: {
         height: string;
         justify: string;
         align: string;
-        scrollY: boolean;
+        scrollY: undefined;
+        scrollX: undefined;
+        overflow: string;
         direction: string;
     };
     "row-between": {
@@ -55,15 +74,19 @@ export declare const layoutSets: {
         height: string;
         justify: string;
         align: string;
-        scrollY: boolean;
+        scrollY: undefined;
+        scrollX: undefined;
+        overflow: string;
         direction: string;
     };
-    "fill-column": {
+    column: {
         width: string;
         height: string;
         justify: string;
         align: string;
-        scrollY: boolean;
+        scrollY: undefined;
+        scrollX: undefined;
+        overflow: string;
         direction: string;
     };
     default: {
@@ -71,7 +94,9 @@ export declare const layoutSets: {
         height: string;
         justify: string;
         align: string;
-        scrollY: boolean;
+        scrollY: undefined;
+        scrollX: undefined;
+        overflow: string;
         direction: string;
     };
     draggable: {
@@ -79,7 +104,9 @@ export declare const layoutSets: {
         height: string;
         justify: string;
         align: string;
-        scrollY: boolean;
+        scrollY: undefined;
+        scrollX: undefined;
+        overflow: string;
         direction: string;
     };
 };
@@ -87,6 +114,7 @@ type FlexDivBaseProps = {
     className?: string;
     children?: any;
     preset?: Preset;
+    scrollBox?: boolean;
     scrollY?: boolean;
     scrollX?: boolean;
     absolute?: boolean;

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

@@ -9,6 +9,7 @@ type IconBaseProps = {
     toggle?: boolean;
     pointer?: boolean;
     disabled?: boolean;
+    fill?: boolean;
     onClick?: (e: React.MouseEvent<SVGElement, MouseEvent>) => void;
 };
 export type IconProps = Omit<React.SVGAttributes<SVGSVGElement>, keyof IconBaseProps> & IconBaseProps;
@@ -52,6 +53,8 @@ export declare const SliceIcons: {
         readonly videoOff: "video off";
         readonly download: "download";
         readonly upload: "upload";
+        readonly speaker: "speaker";
+        readonly speakerMuted: "speaker muted";
     };
     readonly files: {
         readonly document: "document";
@@ -68,6 +71,7 @@ export declare const SliceIcons: {
         readonly invoice: "invoice";
         readonly payment: "payment";
         readonly wallet: "wallet";
+        readonly laptop: "laptop";
     };
     readonly charts: {
         readonly barChart: "bar chart";
@@ -107,6 +111,10 @@ export declare const SliceIcons: {
         readonly fontSmaller: "font smaller";
         readonly characterBeam: "character beam";
     };
+    readonly weather: {
+        readonly sun: "sun";
+        readonly moonFull: "moon full";
+    };
     readonly ai: {
         readonly sparkle: "sparkle";
         readonly wand: "wand";
@@ -126,6 +134,7 @@ export declare const SliceIcons: {
         readonly menu: "menu";
         readonly more: "more";
         readonly sidebar: "sidebar";
+        readonly keyboard: "keyboard";
         readonly x: "x";
     };
 };

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

@@ -5,6 +5,7 @@ type IconButtonBaseProps = {
     round?: boolean;
     frameSize?: number;
     iconSize?: number;
+    iconFill?: boolean;
     icon?: string;
     iconColor?: string;
     iconColorOn?: string;

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

@@ -0,0 +1,2 @@
+import type { ToggleButtonProps } from './_types';
+export declare function ToggleButton(props: Readonly<ToggleButtonProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import type React from 'react';
+import type { ToolTip } from '../sharedTypes';
+export interface ToggleButtonProps {
+    children?: React.ReactNode;
+    label?: string;
+    textSize?: 's' | 'm' | 'l';
+    buttonSize?: 's' | 'm' | 'l' | 'xl';
+    frameSize?: number;
+    icon?: string;
+    selected?: boolean;
+    iconColor?: string;
+    iconColorOn?: string;
+    bgColor?: string;
+    bgColorOn?: string;
+    onChange?: (state: boolean) => void;
+    onSelect?: () => void;
+    onToolTip?: (tip: ToolTip | null) => void;
+    gap?: number;
+    iconSize?: number;
+    tooltip?: string;
+    fill?: boolean;
+    unselect?: boolean;
+    disabled?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { ToggleButton } from './ToggleButton';
+export type { ToggleButtonProps } from './_types';

package/dist/types/hooks/useMicrophone/useMicrophone.d.ts

@@ -6,6 +6,7 @@ export type MicOption = {
 export type UseMicrophoneReturn = {
     micStream: RefObject<MediaStream | null>;
     micTrack: RefObject<MediaStreamTrack | null>;
+    isActive: boolean;
     muted: boolean;
     isSupported: boolean;
     isRequesting: boolean;
@@ -20,4 +21,4 @@ export type UseMicrophoneReturn = {
     refreshMicrophones: () => Promise<MediaDeviceInfo[]>;
     setMicrophone: (deviceId: string | DropDownOption<MicOption>) => Promise<void>;
 };
-export declare function useMicrophone(startMuted?: boolean, microphoneDeviceId?: string): UseMicrophoneReturn;
+export declare function useMicrophone(startMuted?: boolean, microphoneDeviceId?: string, autoRequest?: boolean): UseMicrophoneReturn;

package/dist/types/hooks/useTheme/useTheme.d.ts

@@ -37,11 +37,15 @@ export declare function useTheme(): {
      */
     set: (newTheme: SliceTheme | string) => void;
     /**
-     * Toggle between light and dark themes
+     * Togglebetween light and dark themes
      */
     toggle: () => void;
     /**
      * If the currently active theme is the Slice's default dark theme'
      */
     isDark: boolean;
+    /**
+     * True when the current theme is still being derived from the OS preference
+     */
+    systemTheme: boolean;
 };

package/dist/types/hooks/useWindow/useWindow.d.ts

@@ -34,7 +34,7 @@ export declare function useWindow(breakpoints?: BreakPoints, top?: boolean): {
     isElectron: boolean;
     isAppleDevice: boolean;
     formFactor: FormFactor;
-    dpr: 1 | 2 | 3;
+    dpr: 2 | 1 | 3;
     geolocationSupported: boolean;
     location: WindowGeolocation | null;
     locationError: Error | null;

package/dist/types/index.d.ts

@@ -48,6 +48,8 @@ export type { SliderProps } from './components/Slider';
 export { Spacer } from './components/Spacer';
 export { Switch } from './components/Switch';
 export type { SwitchProps } from './components/Switch';
+export { ToggleButton } from './components/ToggleButton';
+export type { ToggleButtonProps } from './components/ToggleButton';
 export { TabBar } from './components/TabBar';
 export type { TabOption, TabBarProps } from './components/TabBar';
 export { TextArea } from './components/TextArea';

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

@@ -14,6 +14,8 @@ interface ThemeProviderProps {
 }
 type ThemeContextValue = {
     initialTheme: string;
+    systemTheme: boolean;
+    setSystemTheme: (value: boolean) => void;
 };
 export declare function useThemeContext(): ThemeContextValue;
 export declare function ThemeProvider(props: Readonly<ThemeProviderProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,5 @@
 export * from './LocalDB';
+export * from './microphone';
 export * from './SSE';
 export * from './toast';
 export * from './tip';

package/dist/types/stores/microphone/_types.d.ts

@@ -0,0 +1,28 @@
+import type { RefObject } from 'react';
+import type { DropDownOption } from '../../components/DropDown';
+import type { MicOption, UseMicrophoneReturn } from '../../hooks';
+export type MicrophoneStoreState = {
+    micStream: RefObject<MediaStream | null>;
+    micTrack: RefObject<MediaStreamTrack | null>;
+    isActive: boolean;
+    muted: boolean;
+    isSupported: boolean;
+    isRequesting: boolean;
+    error: Error | null;
+    microphones: MediaDeviceInfo[];
+    micOptions: DropDownOption<MicOption>[];
+};
+export type MicrophoneStoreActions = {
+    sync: (microphone: UseMicrophoneReturn | null) => void;
+    clear: () => void;
+    requestMicrophone: () => Promise<MediaStream | null>;
+    stopMicrophone: () => void;
+    muteMic: () => boolean;
+    unmuteMic: () => boolean;
+    toggleMute: () => void;
+    refreshMicrophones: () => Promise<MediaDeviceInfo[]>;
+    setMicrophone: (deviceId: string | DropDownOption<MicOption>) => Promise<void>;
+};
+export type MicrophoneStore = MicrophoneStoreState & {
+    actions: MicrophoneStoreActions;
+};

package/dist/types/stores/microphone/index.d.ts

@@ -0,0 +1,2 @@
+export { useMicrophoneStore, useSyncMicrophoneStore, useMicStream, useMicTrack, useMicActive, useMicMuted, useMicSupported, useMicRequesting, useMicError, useMicrophones, useMicOptions, useMicrophoneStoreActions, microphoneActions, getMicrophoneState, } from './microphoneStore';
+export type { MicrophoneStore, MicrophoneStoreActions, MicrophoneStoreState, } from './_types';

package/dist/types/stores/microphone/microphoneStore.d.ts

@@ -0,0 +1,24 @@
+import type { RefObject } from 'react';
+import type { DropDownOption } from '../../components/DropDown';
+import type { MicOption, UseMicrophoneReturn } from '../../hooks';
+import type { MicrophoneStore, MicrophoneStoreActions } from './_types';
+/**
+ * Store factory that creates the store state based on a sync or a clear
+ */
+export declare const useMicrophoneStore: import("zustand").UseBoundStore<import("zustand").StoreApi<MicrophoneStore>>;
+/**
+ * Bind the value of useMicrophone hook to the useMicrophoneStore. Use this to update the store with a new mic object.
+ */
+export declare function useSyncMicrophoneStore(microphone: UseMicrophoneReturn | null): void;
+export declare const useMicStream: () => RefObject<MediaStream | null>;
+export declare const useMicTrack: () => RefObject<MediaStreamTrack | null>;
+export declare const useMicActive: () => boolean;
+export declare const useMicMuted: () => boolean;
+export declare const useMicSupported: () => boolean;
+export declare const useMicRequesting: () => boolean;
+export declare const useMicError: () => Error | null;
+export declare const useMicrophones: () => MediaDeviceInfo[];
+export declare const useMicOptions: () => DropDownOption<MicOption>[];
+export declare const useMicrophoneStoreActions: () => MicrophoneStoreActions;
+export declare const microphoneActions: MicrophoneStoreActions;
+export declare const getMicrophoneState: () => MicrophoneStore;

package/dist/types/stores/window/windowStore.d.ts

@@ -7,7 +7,7 @@ export declare const useViewportHeight: () => number;
 export declare const useIsAppleDevice: () => boolean;
 export declare const useIsTouchDevice: () => boolean;
 export declare const useIsElectron: () => boolean;
-export declare const useDpr: () => 1 | 2 | 3;
+export declare const useDpr: () => 2 | 1 | 3;
 export declare const useLocation: () => WindowGeolocation | null;
 export declare const useLocationError: () => Error | null;
 export declare const useGettingLocation: () => boolean;
@@ -19,7 +19,7 @@ export declare const viewportHeight: () => number;
 export declare const isAppleDevice: () => boolean;
 export declare const isTouchDevice: () => boolean;
 export declare const isElectron: () => boolean;
-export declare const dpr: () => 1 | 2 | 3;
+export declare const dpr: () => 2 | 1 | 3;
 export declare const location: () => WindowGeolocation | null;
 export declare const locationError: () => Error | null;
 export declare const gettingLocation: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@apple-pie/slice",
-	"version": "0.1.26",
+	"version": "0.1.28",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.mjs",
 	"exports": {