@apple-pie/slice 0.0.0 → 0.0.2

package/dist/types/uikit/UIButton/UIButton.d.ts

@@ -1,3 +1,74 @@
 import React from 'react';
-import type { UIButtonHandle, UIButtonProps } from './_types';
-export declare const UIButton: React.NamedExoticComponent<UIButtonProps & React.RefAttributes<UIButtonHandle>>;
+import type { ToolTip } from '../sharedTypes';
+import type { UIButtonHandle } from './_types';
+export declare const UIButton: React.NamedExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    size?: "large" | "medium" | "text";
+    variant?: "solid" | "outline" | "text";
+    state?: "normal" | "hover" | "disabled";
+    width?: string;
+    label?: string;
+    iconRight?: string;
+    iconLeft?: string;
+    fill?: boolean;
+    count?: number;
+    showDot?: boolean;
+    round?: boolean;
+    tooltip?: string;
+    iconSize?: number;
+    borderRadius?: number;
+    iconColor?: string;
+    bgColor?: string;
+    bgColorDisabled?: string;
+    labelColor?: string;
+    labelSize?: "s" | "m" | "l";
+    transition?: import("framer-motion").Transition;
+    variants?: import("framer-motion").Variants;
+    initial?: string;
+    animate?: string;
+    exit?: string;
+    underline?: boolean;
+    progress?: boolean;
+    working?: boolean;
+    duration?: number;
+    trigger?: boolean;
+    destructive?: boolean;
+    paddingRight?: number;
+    paddingLeft?: number;
+    onToolTip?: (tip: ToolTip | null) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => void;
+}> & {
+    size?: "large" | "medium" | "text";
+    variant?: "solid" | "outline" | "text";
+    state?: "normal" | "hover" | "disabled";
+    width?: string;
+    label?: string;
+    iconRight?: string;
+    iconLeft?: string;
+    fill?: boolean;
+    count?: number;
+    showDot?: boolean;
+    round?: boolean;
+    tooltip?: string;
+    iconSize?: number;
+    borderRadius?: number;
+    iconColor?: string;
+    bgColor?: string;
+    bgColorDisabled?: string;
+    labelColor?: string;
+    labelSize?: "s" | "m" | "l";
+    transition?: import("framer-motion").Transition;
+    variants?: import("framer-motion").Variants;
+    initial?: string;
+    animate?: string;
+    exit?: string;
+    underline?: boolean;
+    progress?: boolean;
+    working?: boolean;
+    duration?: number;
+    trigger?: boolean;
+    destructive?: boolean;
+    paddingRight?: number;
+    paddingLeft?: number;
+    onToolTip?: (tip: ToolTip | null) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => void;
+} & React.RefAttributes<UIButtonHandle>>;

package/dist/types/uikit/UIButton/_types.d.ts

@@ -1,7 +1,7 @@
 import type { Transition, Variants } from 'motion/react';
 import type React from 'react';
 import type { ToolTip } from '../sharedTypes';
-export interface UIButtonProps {
+type UIButtonBaseProps = {
     size?: 'large' | 'medium' | 'text';
     variant?: 'solid' | 'outline' | 'text';
     state?: 'normal' | 'hover' | 'disabled';
@@ -36,7 +36,9 @@ export interface UIButtonProps {
     paddingLeft?: number;
     onToolTip?: (tip: ToolTip | null) => void;
     onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => void;
-}
+};
+export type UIButtonProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof UIButtonBaseProps> & UIButtonBaseProps;
 export interface UIButtonHandle {
     triggerClick: () => void;
 }
+export {};

package/dist/types/uikit/UIButtonBar/_types.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { ToolTip } from '../sharedTypes';
 export type BarButton = {
     icon?: string;
@@ -5,10 +6,12 @@ export type BarButton = {
     label?: string;
     tip: string;
 };
-export interface UIButtonBarProps {
+type UIButtonBarBaseProps = {
     options?: BarButton[];
     label?: string;
     current?: number;
     onChange?: (option: BarButton) => void;
     onToolTip?: (tip: ToolTip | null) => void;
-}
+};
+export type UIButtonBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof UIButtonBarBaseProps> & UIButtonBarBaseProps;
+export {};

package/dist/types/uikit/UICard/_types.d.ts

@@ -1,4 +1,5 @@
-export interface UICardProps {
+import type React from 'react';
+type UICardBaseProps = {
     id?: string;
     icon?: string;
     label?: string;
@@ -8,4 +9,6 @@ export interface UICardProps {
         id?: string;
         command?: string;
     }) => void;
-}
+};
+export type UICardProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof UICardBaseProps> & UICardBaseProps;
+export {};

package/dist/types/uikit/UIChip/_types.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { IconNames } from '../Icon/_types';
 import type { ToolTip } from '../sharedTypes';
-export interface UIChipProps {
+type UIChipBaseProps = {
     label?: string;
     icon?: IconNames | string;
     disabled?: boolean;
@@ -16,4 +16,6 @@ export interface UIChipProps {
     onToolTip?: (tip: ToolTip | null) => void;
     onClick?: (e: React.MouseEvent<HTMLDivElement> | undefined) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLDivElement> | undefined) => void;
-}
+};
+export type UIChipProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof UIChipBaseProps> & UIChipBaseProps;
+export {};

package/dist/types/uikit/UIFileIcon/UIFileIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { UIFileIconProps } from './_types';
-export declare const UIFileIcon: React.MemoExoticComponent<(props: UIFileIconProps) => any>;
+export declare const UIFileIcon: React.MemoExoticComponent<(props: UIFileIconProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null>;

package/dist/types/uikit/UIFileIcon/_types.d.ts

@@ -8,10 +8,12 @@ export declare enum UIFileIcons {
     Document = "document",
     Spreadhseet = "spreadsheet"
 }
-export interface UIFileIconProps {
+type UIFileIconBaseProps = {
     name?: UIFileIcons | string;
     size?: number;
     pointer?: boolean;
     disabled?: boolean;
     onClick?: (e: React.MouseEvent<SVGElement, MouseEvent>) => void;
-}
+};
+export type UIFileIconProps = Omit<React.SVGAttributes<SVGSVGElement>, keyof UIFileIconBaseProps> & UIFileIconBaseProps;
+export {};

package/dist/types/uikit/UILabel/_types.d.ts

@@ -1,9 +1,11 @@
 import type React from 'react';
-export interface UILabelProps {
+type UILabelBaseProps = {
     label?: string;
     state?: 'red' | 'yellow' | 'green' | 'blue' | 'grey' | 'lightgrey' | 'white';
     noFill?: boolean;
     round?: boolean;
     button?: boolean;
     onClick?: (e: React.MouseEvent<any>) => void;
-}
+};
+export type UILabelProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof UILabelBaseProps> & UILabelBaseProps;
+export {};

package/dist/types/util/utils.d.ts

@@ -31,3 +31,15 @@ export declare const hexToRgb: (hex: string | undefined) => string | undefined;
  * Utility to accessibility - mimics click event with designated keys event
  */
 export declare function accessibleKeyDown(e: React.KeyboardEvent<any>, clickFunction: () => void, keys?: string[]): void;
+/**
+ * Get the pointer position from a DOM touch or mouse event
+ */
+export declare function pointerPosition(e: MouseEvent | TouchEvent): number;
+/**
+ * Filter and trim class name array
+ */
+export declare function filterClasses(classNames: string[]): string;
+/**
+ * Takes a style string or number and returns a valid CSS style string
+ */
+export declare function setStyle(value: string | number | undefined, defaultVal?: number | string | undefined): string;

package/package.json

@@ -1,9 +1,77 @@
 {
 	"name": "@apple-pie/slice",
-	"version": "0.0.0",
-	"main": "dist/index.js",
-	"module": "dist/index.esm.js",
+	"version": "0.0.2",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"exports": {
+		".": {
+			"types": "./dist/types/index.d.ts",
+			"import": "./dist/esm/index.js",
+			"require": "./dist/cjs/index.js"
+		},
+		"./hooks": {
+			"types": "./dist/types/hooks/index.d.ts",
+			"import": "./dist/esm/hooks.js",
+			"require": "./dist/cjs/hooks.js"
+		},
+		"./hooks/*": {
+			"types": "./dist/types/hooks/*/*.d.ts",
+			"import": "./dist/esm/hooks/*.js",
+			"require": "./dist/cjs/hooks/*.js"
+		},
+		"./providers": {
+			"types": "./dist/types/providers/index.d.ts",
+			"import": "./dist/esm/providers.js",
+			"require": "./dist/cjs/providers.js"
+		},
+		"./providers/*": {
+			"types": "./dist/types/providers/*.d.ts",
+			"import": "./dist/esm/providers/*.js",
+			"require": "./dist/cjs/providers/*.js"
+		},
+		"./stores": {
+			"types": "./dist/types/stores/index.d.ts",
+			"import": "./dist/esm/stores.js",
+			"require": "./dist/cjs/stores.js"
+		},
+		"./stores/*": {
+			"types": "./dist/types/stores/*/index.d.ts",
+			"import": "./dist/esm/stores/*.js",
+			"require": "./dist/cjs/stores/*.js"
+		},
+		"./theme": {
+			"types": "./dist/types/theme/index.d.ts",
+			"import": "./dist/esm/theme.js",
+			"require": "./dist/cjs/theme.js"
+		},
+		"./theme/colors": {
+			"types": "./dist/types/theme/colors/colors.d.ts",
+			"import": "./dist/esm/theme/colors.js",
+			"require": "./dist/cjs/theme/colors.js"
+		},
+		"./theme/corners": {
+			"types": "./dist/types/theme/corners/corners.d.ts",
+			"import": "./dist/esm/theme/corners.js",
+			"require": "./dist/cjs/theme/corners.js"
+		},
+		"./theme/type": {
+			"types": "./dist/types/theme/type/type.d.ts",
+			"import": "./dist/esm/theme/type.js",
+			"require": "./dist/cjs/theme/type.js"
+		},
+		"./theme/themes": {
+			"types": "./dist/types/theme/themes.d.ts",
+			"import": "./dist/esm/theme/themes.js",
+			"require": "./dist/cjs/theme/themes.js"
+		},
+		"./uikit/*": {
+			"types": "./dist/types/uikit/*/index.d.ts",
+			"import": "./dist/esm/uikit/*.js",
+			"require": "./dist/cjs/uikit/*.js"
+		}
+	},
 	"files": ["dist", "README.md", "scripts/copy-assets.mjs"],
+	"sideEffects": ["**/*.css"],
 	"scripts": {
 		"lint": "biome format --write . && biome check .",
 		"lint:fix": "biome format --write . && biome check --write .",
@@ -15,7 +83,7 @@
 		"benchmark:watch": "vitest bench --project benchmarks",
 		"benchmark:ui": "vitest bench --project benchmarks --ui",
 		"prebuild": "rm -rf dist",
-		"build": "NODE_ENV=production rollup -c --bundleConfigAsCjs && ./scripts/copy-css.sh",
+		"build": "NODE_ENV=production rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json && ./scripts/copy-css.sh",
 		"dev": "vite",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build"
@@ -59,6 +127,7 @@
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-strip-code": "^0.2.8",
+		"rollup-plugin-visualizer": "^7.0.1",
 		"storybook": "^10.2.9",
 		"tsx": "^4.21.0",
 		"typescript": "^5.7.3",
@@ -69,6 +138,12 @@
 	"peerDependencies": {
 		"motion": "^11.15.0",
 		"react": "^18.0.0 || ^19.0.0",
-		"react-dom": "^18.0.0 || ^19.0.0"
+		"react-dom": "^18.0.0 || ^19.0.0",
+		"zustand": "^5.0.0"
+	},
+	"peerDependenciesMeta": {
+		"zustand": {
+			"optional": true
+		}
 	}
 }

package/dist/colors.css

@@ -1,237 +0,0 @@
-/* Core brand colors - theme independent */
-:root {
-	--brand-grey-50: #f4f7fa;
-	--brand-grey-100: #e5ecf3;
-	--brand-grey-200: #d5e0ea;
-	--brand-grey-300: #98acbf;
-	--brand-grey-400: #7f96a9;
-	--brand-grey-500: #657d91;
-	--brand-grey-600: #4c6273;
-	--brand-grey-700: #405261;
-	--brand-grey-800: #37434e;
-	--brand-grey-900: #2d353d;
-	--brand-grey-950: #1f262d;
-	--brand-sea-50: #e8f1ff;
-	--brand-sea-100: #c7defe;
-	--brand-sea-200: #a5c9ff;
-	--brand-sea-300: #7ab3ff;
-	--brand-sea-400: #4084ff;
-	--brand-sea-500: #2f45ff;
-	--brand-sea-600: #2d2fff;
-	--brand-sea-700: #0000ff;
-	--brand-sea-800: #0609cd;
-	--brand-sea-900: #001699;
-	--brand-sea-950: #0a0b5c;
-	--brand-sky-50: #eafffe;
-	--brand-sky-100: #cdfffb;
-	--brand-sky-200: #a3f8ff;
-	--brand-sky-300: #6af5ff;
-	--brand-sky-400: #00edff;
-	--brand-sky-500: #00c8e0;
-	--brand-sky-600: #00a6c0;
-	--brand-sky-700: #03839b;
-	--brand-sky-800: #0d697d;
-	--brand-sky-900: #105669;
-	--brand-sky-950: #033949;
-	--brand-land-50: #f4ffe5;
-	--brand-land-100: #e0ffb7;
-	--brand-land-200: #caff95;
-	--brand-land-300: #b7fe59;
-	--brand-land-400: #9cf820;
-	--brand-land-500: #71e618;
-	--brand-land-600: #56c900;
-	--brand-land-700: #2d8c00;
-	--brand-land-800: #31690b;
-	--brand-land-900: #2a580f;
-	--brand-land-950: #123201;
-	--brand-orange-50: #fff8ec;
-	--brand-orange-100: #ffebd7;
-	--brand-orange-200: #ffe3c6;
-	--brand-orange-300: #ffc182;
-	--brand-orange-400: #ff972e;
-	--brand-orange-500: #ff800a;
-	--brand-orange-600: #ff6700;
-	--brand-orange-700: #ff3700;
-	--brand-orange-800: #a02b0b;
-	--brand-orange-900: #80250b;
-	--brand-orange-950: #461604;
-	--brand-yellow-50: #ffffea;
-	--brand-yellow-100: #fffdca;
-	--brand-yellow-200: #fff2a0;
-	--brand-yellow-300: #ffeb72;
-	--brand-yellow-400: #ffd333;
-	--brand-yellow-500: #ffc200;
-	--brand-yellow-600: #ffad00;
-	--brand-yellow-700: #c68601;
-	--brand-yellow-800: #8f6307;
-	--brand-yellow-900: #5f430a;
-	--brand-yellow-950: #442e00;
-	--brand-purple-50: #faf0ff;
-	--brand-purple-100: #f4ddff;
-	--brand-purple-200: #e5cdff;
-	--brand-purple-300: #ccafff;
-	--brand-purple-400: #b891ff;
-	--brand-purple-500: #7d48ff;
-	--brand-purple-600: #6a14ff;
-	--brand-purple-700: #5600f1;
-	--brand-purple-800: #4d01d6;
-	--brand-purple-900: #4003af;
-	--brand-purple-950: #1e007c;
-	--brand-magenta-50: #fef1fc;
-	--brand-magenta-100: #ffdcef;
-	--brand-magenta-200: #ffcae6;
-	--brand-magenta-300: #ff90cb;
-	--brand-magenta-400: #ff61ca;
-	--brand-magenta-500: #ff3ac2;
-	--brand-magenta-600: #f012aa;
-	--brand-magenta-700: #df059b;
-	--brand-magenta-800: #9b0069;
-	--brand-magenta-900: #790a55;
-	--brand-magenta-950: #58003a;
-	--brand-white-0: #ffffff;
-	--product-red-400: #ff474a;
-	--product-red-500: #df0529;
-}
-
-/* Light theme colors */
-:root,
-[data-theme="lightMode"] {
-	--array-land: #e0ffb7;
-	--array-land-label: #56c900;
-	--array-magenta: #ffdcef;
-	--array-magenta-label: #f012aa;
-	--array-orange: #ffebd7;
-	--array-orange-label: #ff6700;
-	--array-purple: #f4ddff;
-	--array-purple-label: #6a14ff;
-	--array-sea: #c7defe;
-	--array-sea-label: #2d2fff;
-	--array-sky: #cdfffb;
-	--array-sky-label: #00a6c0;
-	--array-yellow: #fffdca;
-	--array-yellow-label: #ffad00;
-	--core-badge-primary: #2f45ff;
-	--core-badge-secondary: #e5ecf3;
-	--core-button-disabled: #f4f7fa;
-	--core-button-primary: #2f45ff;
-	--core-drop-shadow: #0339491a;
-	--core-gp-logo-primary: #0000ff;
-	--core-gp-logo-secondary: #1f262d;
-	--core-icon-dark: #1f262d;
-	--core-icon-disabled: #98acbf;
-	--core-icon-error: #df0529;
-	--core-icon-light: #ffffff;
-	--core-icon-primary: #1f262d;
-	--core-icon-secondary: #405261;
-	--core-icon-tertiary: #2f45ff;
-	--core-outline-secondary: #405261;
-	--core-outline-primary: #e5ecf3;
-	--core-outline-special: #c7defe;
-	--core-outline-tertiary: #2f45ff;
-	--core-surface-coverup-translucent: #1f262d52;
-	--core-surface-overlay-translucent: #ffffffcc;
-	--core-surface-primary: #ffffff;
-	--core-surface-secondary: #f4f7fa;
-	--core-surface-special: #e8f1ff;
-	--core-text-dark: #1f262d;
-	--core-text-disabled: #98acbf;
-	--core-text-error: #df0529;
-	--core-text-light: #ffffff;
-	--core-text-primary: #1f262d;
-	--core-text-secondary: #405261;
-	--core-text-tertiary: #4c6273;
-	--core-text-special: #2f45ff;
-	--core-link-primary: #0000ff;
-	--eor-tag-employee: #03839b;
-	--eor-tag-overdue: #df0529;
-	--eor-tag-paid: #2d8c00;
-	--eor-tag-pending: #ff800a;
-	--eor-tag-professional: #2f45ff;
-	--feedback-attention: #ffc200;
-	--feedback-informative: #03839b;
-	--feedback-positive: #2d8c00;
-	--feedback-urgency: #ff800a;
-	--feedback-warning: #df0529;
-	--gia-tag-risk-high: #df0529;
-	--gia-tag-risk-low: #03839b;
-	--gia-tag-risk-moderate: #ff800a;
-	--gia-text-excerpt-highlight: #ffebd7;
-	--gia-text-selection: #c7defe;
-	--scroll-bar: #e3e8ef;
-	--scroll-bar-hover: #cdd5df;
-	--surface-shadow-soft: 0px 4px 24px #0339491a;
-	--surface-shadow-strong: 0px 4px 64px #0339491a;
-}
-
-/* Dark theme colors */
-[data-theme="darkMode"] {
-	--array-land: #e0ffb7;
-	--array-land-label: #56c900;
-	--array-magenta: #ffdcef;
-	--array-magenta-label: #f012aa;
-	--array-orange: #ffebd7;
-	--array-orange-label: #ff6700;
-	--array-purple: #f4ddff;
-	--array-purple-label: #6a14ff;
-	--array-sea: #c7defe;
-	--array-sea-label: #2d2fff;
-	--array-sky: #cdfffb;
-	--array-sky-label: #00a6c0;
-	--array-yellow: #fffdca;
-	--array-yellow-label: #ffad00;
-	--core-badge-primary: #2f45ff;
-	--core-badge-secondary: #405261;
-	--core-button-disabled: #2d353d;
-	--core-button-primary: #2f45ff;
-	--core-drop-shadow: #0000007a;
-	--core-gp-logo-primary: #2f45ff;
-	--core-gp-logo-secondary: #ffffff;
-	--core-icon-dark: #1f262d;
-	--core-icon-disabled: #657d91;
-	--core-icon-error: #ff474a;
-	--core-icon-light: #ffffff;
-	--core-icon-primary: #ffffff;
-	--core-icon-secondary: #d5e0ea;
-	--core-icon-tertiary: #6af5ff;
-	--core-outline-secondary: #e5ecf3;
-	--core-outline-primary: #405261;
-	--core-outline-special: #105669;
-	--core-outline-tertiary: #6af5ff;
-	--core-surface-coverup-translucent: #0000007a;
-	--core-surface-overlay-translucent: #1f262dcc;
-	--core-surface-primary: #1f262d;
-	--core-surface-secondary: #2d353d;
-	--core-surface-special: #033949;
-	--core-text-dark: #1f262d;
-	--core-text-disabled: #657d91;
-	--core-text-error: #ff474a;
-	--core-text-light: #ffffff;
-	--core-text-primary: #ffffff;
-	--core-text-secondary: #d5e0ea;
-	--core-text-tertiary: #7f96a9;
-	--core-text-special: #6af5ff;
-	--core-link-primary: #6af5ff;
-	--eor-tag-employee: #03839b;
-	--eor-tag-overdue: #ff474a;
-	--eor-tag-paid: #2d8c00;
-	--eor-tag-pending: #ff800a;
-	--eor-tag-professional: #2f45ff;
-	--feedback-attention: #ffd333;
-	--feedback-informative: #00a6c0;
-	--feedback-positive: #2d8c00;
-	--feedback-urgency: #ff800a;
-	--feedback-warning: #ff474a;
-	--gia-tag-risk-high: #ff474a;
-	--gia-tag-risk-low: #00a6c0;
-	--gia-tag-risk-moderate: #ff800a;
-	--gia-text-excerpt-highlight: #ffebd7;
-	--gia-text-selection: #001699;
-	--scroll-bar: rgba(255, 255, 255, 0.1);
-	--scroll-bar-hover: rgba(255, 255, 255, 0.15);
-	--surface-shadow-soft: 0px 4px 24px #0000007a;
-	--surface-shadow-strong: 0px 4px 64px #0000007a;
-}
-
-body {
-	background: var(--core-surface-primary);
-}