@apple-pie/slice 0.1.34 → 0.1.35

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

@@ -24,6 +24,7 @@ type TextAreaBaseProps = {
     textSize?: 'xs' | 's' | 'm' | 'l';
     disabled?: boolean;
     submitClears?: boolean;
+    maxLength?: number;
     onChange?: (value: string) => void;
     onSubmit?: (value: string) => void;
     onFocus?: (value: string) => void;

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { AnimationPreset, ButtonAnimation } from '../IconButton';
 import type { ToolTip } from '../sharedTypes';
 export interface ToggleButtonProps {
     children?: React.ReactNode;
@@ -7,6 +8,8 @@ export interface ToggleButtonProps {
     buttonSize?: 's' | 'm' | 'l' | 'xl';
     frameSize?: number;
     icon?: string;
+    iconOn?: string;
+    iconTwo?: string;
     selected?: boolean;
     iconColor?: string;
     iconColorOn?: string;
@@ -22,4 +25,6 @@ export interface ToggleButtonProps {
     fill?: boolean;
     unselect?: boolean;
     disabled?: boolean;
+    presetAnimations?: AnimationPreset;
+    customAnimations?: ButtonAnimation;
 }

package/dist/types/index.d.ts

@@ -12,8 +12,8 @@ export { AvatarGroup } from './components/AvatarGroup';
 export type { AvatarGroupProps, AvatarInfo } from './components/AvatarGroup';
 export { Badge } from './components/Badge';
 export type { BadgeProps } from './components/Badge';
-export { IconButton } from './components/IconButton';
-export type { IconButtonProps } from './components/IconButton';
+export { IconButton, AnimationPreset, AnimationType, } from './components/IconButton';
+export type { IconButtonProps, AnimationValue, MotionValue, TransitionValue, ButtonAnimation, } from './components/IconButton';
 export { Camera } from './components/Camera';
 export type { CameraElement, CameraProps, CameraSnapshotOptions, Controls, UserProfile, Settings, } from './components/Camera';
 export { CheckBox } from './components/CheckBox';

package/dist/types/theme/colors/types.d.ts

@@ -153,6 +153,7 @@ export type Colors = {
     'core-text-primary': string;
     'core-text-secondary': string;
     'core-text-special': string;
+    'core-text-accent': string;
     'core-text-tertiary': string;
     'core-link-primary': string;
     'eor-tag-employee': string;

package/package.json

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

package/dist/cjs/chunks/IconButton-KFtalJ6A.js

@@ -1,82 +0,0 @@
-'use client';
-"use strict";
-
-var tslib_es6 = require("./tslib.es6-yslq87rf.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-D0jOqpGM.js"), Dot = require("./Dot-DLk45OlQ.js"), Icon = require("./Icon-CRxH8X5b.js"), sharedTypes = require("./sharedTypes-Cep5dDpY.js"), css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_label = "IconButton-module_label__qWGFD flexBox-module_row__z24tF type-module_body-l-regular__lOYbg", css_icon = "IconButton-module_icon__2DDWy flexBox-module_row__z24tF", css_count = "IconButton-module_count__6r373 flexBox-module_row__z24tF";
-
-const IconButton = React.memo(props => {
-    const {frameSize: frameSize = 36, iconSize: iconSize = 20, round: round = !0, icon: icon = "more", borderRadius: borderRadius = 4, border: border = !1, tooltip: tooltip, color: color, colorOn: colorOn, iconFill: iconFill = !1, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorOn: bgColorOn = "var(--core-outline-primary)", iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover = !0, count: count = 0, toggle: toggle = !1, toggleIcon: toggleIcon = !1, isToggled: isToggled = !1, disabled: disabled = !1, showDot: showDot = !1, buttonSize: buttonSize = "m", onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "frameSize", "iconSize", "round", "icon", "borderRadius", "border", "tooltip", "color", "colorOn", "iconFill", "bgColor", "bgColorHover", "bgColorOn", "iconColor", "iconColorOn", "iconColorHover", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "buttonSize", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), [on, setOn] = React.useState(isToggled), [hovered, setHovered] = React.useState(!1);
-    React.useEffect(() => setOn(isToggled), [ isToggled ]);
-    const handleClick = React.useCallback(e => {
-        disabled || (tooltip && onToolTip(null), toggle && setOn(!on), onClick(e));
-    }, [ disabled, tooltip, onToolTip, on, onClick, toggle ]), handleMouseEnter = React.useCallback(e => {
-        if (setHovered(!0), !(null == ref ? void 0 : ref.current) || !tooltip) return;
-        const tip = {
-            type: sharedTypes.ToolTipType.button,
-            payload: {
-                label: tooltip
-            },
-            event: e,
-            ref: ref
-        };
-        onToolTip(tip);
-    }, [ tooltip, onToolTip ]), handleMouseLeave = React.useCallback(() => {
-        setHovered(!1), tooltip && onToolTip(null);
-    }, [ tooltip, onToolTip ]), bgColorNormal = React.useMemo(() => on ? bgColorOn : null != bgColor ? bgColor : "var(--core-surface-secondary)", [ bgColorOn, bgColor, on ]), bgHoverColor = React.useMemo(() => hover && on ? bgColorOn : hover ? bgColorHover : null != bgColor ? bgColor : "transparent", [ hover, bgColor, bgColorOn, bgColorHover, on ]), textColor = React.useMemo(() => on ? colorOn : null != color ? color : "var(--core-text-primary)", [ on, colorOn, color ]), setIconColor = React.useMemo(() => on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ on, iconColorOn, iconColor, iconColorHover, hovered ]), size = React.useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = React.useMemo(() => ({
-        "--ib-bg-color": bgColorNormal,
-        "--ib-bg-color-hover": disabled ? bgColorNormal : bgHoverColor,
-        "--ib-icon-size": `${null != iconSize ? iconSize : 0}px`,
-        "--ib-button-size": `${null != size ? size : 0}px`,
-        "--ib-border-radius": round ? "100%" : `${null != borderRadius ? borderRadius : 0}px`,
-        "--ib-border": border ? "1px" : 0,
-        "--ib-color": textColor,
-        "--ib-cursor": disabled ? "default" : "pointer"
-    }), [ bgColorNormal, bgHoverColor, textColor, border, size, borderRadius, iconSize, round, disabled ]);
-    return jsxRuntime.jsxs(react.motion.button, Object.assign({
-        id: divId,
-        type: "button",
-        className: `${css_button}${divClass}`,
-        style: Object.assign(Object.assign({}, divStyle), cssVars),
-        onClick: e => handleClick(e),
-        onMouseOutCapture: handleMouseLeave,
-        onMouseOverCapture: handleMouseEnter,
-        transition: transition,
-        variants: variants,
-        initial: initial,
-        animate: animate,
-        exit: exit,
-        disabled: disabled,
-        "aria-disabled": disabled,
-        ref: ref
-    }, rest, {
-        children: [ jsxRuntime.jsx("div", {
-            className: css_icon,
-            style: {
-                opacity: disabled ? .3 : 1
-            },
-            children: jsxRuntime.jsx(Icon.Icon, {
-                name: icon,
-                strokeColor: setIconColor,
-                fillColor: fillColor,
-                disabled: disabled,
-                size: iconSize,
-                fill: iconFill,
-                toggle: !!toggleIcon && on,
-                pointer: !0
-            })
-        }), label && jsxRuntime.jsx("div", {
-            className: css_label,
-            children: label
-        }), jsxRuntime.jsx(Dot.Dot, {
-            show: showDot
-        }), 0 !== count && jsxRuntime.jsx("div", {
-            className: css_count,
-            children: jsxRuntime.jsx(Badge.Badge, {
-                variant: "light",
-                count: count,
-                hideNull: !0
-            })
-        }) ]
-    }));
-});
-
-exports.IconButton = IconButton;

package/dist/esm/chunks/Chip-HGLXF8JO.mjs

@@ -1,87 +0,0 @@
-'use client';
-import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
-
-import { jsxs, jsx } from "react/jsx-runtime";
-
-import React, { useState, useCallback, useMemo } from "react";
-
-import { s as setStyle, a as accessibleKeyDown } from "./misc-BQH7I5Zj.mjs";
-
-import { I as Icon } from "./Icon-CbDAKN_S.mjs";
-
-import { T as ToolTipType } from "./sharedTypes-DoNQkNSM.mjs";
-
-var css = {
-    chip: "Chip-module_chip__0nys- flexBox-module_row__z24tF",
-    icon: "Chip-module_icon__dtR-K flexBox-module_row__z24tF",
-    xs: "Chip-module_xs__s-KNG type-module_body-xs-regular__ZAFft",
-    s: "Chip-module_s__2KTXi type-module_body-s-regular__vRHSP",
-    m: "Chip-module_m__l2u3N type-module_body-m-regular__LuQBA",
-    l: "Chip-module_l__3MqPN type-module_body-l-regular__lOYbg"
-};
-
-const Chip = React.memo(props => {
-    const {children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 20, disabled: disabled = !1, focused: focused = !1, iconPosition: iconPosition = "left", labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", labelColorHover: labelColorHover = "var(--core-text-special)", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-text-primary)", borderColorHover: borderColorHover = "var(--core-text-special)", borderColorDisabled: borderColorDisabled = "var(--core-text-disabled)", bgColor: bgColor = "transparent", bgColorHover: bgColorHover = "var(--core-surface-secondary)", borderRadius: borderRadius = 8, paddingTop: paddingTop, paddingTops: paddingTops = 8, paddingSides: paddingSides = 16, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = __rest(props, [ "children", "label", "icon", "tooltip", "iconSize", "disabled", "focused", "iconPosition", "labelSize", "labelColor", "labelColorHover", "iconColor", "iconColorHover", "backgroundColor", "backgroundColorHover", "borderWidth", "borderSize", "borderColor", "borderColorHover", "borderColorDisabled", "bgColor", "bgColorHover", "borderRadius", "paddingTop", "paddingTops", "paddingSides", "gap", "onToolTip", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = useState(!1), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = useCallback(e => {
-        disabled || onClick(e);
-    }, [ disabled, onClick ]), handleMouseEnter = useCallback((enter, event) => {
-        if (enter) {
-            if (tooltip) {
-                const tip = {
-                    type: ToolTipType.button,
-                    payload: {
-                        label: tooltip
-                    },
-                    ref: null,
-                    event: event
-                };
-                onToolTip(tip);
-            }
-            setIsHovered(!0);
-        } else onToolTip(null), setIsHovered(!1);
-    }, [ tooltip, onToolTip ]), padding = useMemo(() => {
-        if (!icon) return `${resolvedPaddingTop}px ${paddingSides}px`;
-        return `${resolvedPaddingTop}px ${"right" === iconPosition ? paddingSides - 4 : paddingSides}px ${resolvedPaddingTop}px ${"right" === iconPosition ? paddingSides : paddingSides - 4}px`;
-    }, [ icon, iconPosition, resolvedPaddingTop, paddingSides ]), computedIconColor = useMemo(() => disabled ? "var(--core-text-disabled)" : isHovered ? null != iconColorHover ? iconColorHover : "var(--core-text-special)" : null != iconColor ? iconColor : "var(--core-text-primary)", [ iconColor, disabled, isHovered, iconColorHover ]), cssVars = useMemo(() => ({
-        "--ui-chip-padding": padding,
-        "--ui-chip-gap": setStyle(gap),
-        "--ui-chip-border-radius": setStyle(borderRadius),
-        "--ui-chip-border-size": setStyle(resolvedBorderWidth),
-        "--ui-chip-border-color": disabled ? borderColorDisabled : borderColor,
-        "--ui-chip-border-color-hover": disabled ? borderColorDisabled : borderColorHover,
-        "--ui-chip-bg-color": resolvedBackgroundColor,
-        "--ui-chip-bg-color-hover": disabled ? resolvedBackgroundColor : resolvedBackgroundColorHover,
-        "--ui-chip-label-color": disabled ? "var(--core-text-disabled)" : labelColor,
-        "--ui-chip-label-color-hover": disabled ? "var(--core-text-disabled)" : labelColorHover,
-        "--ui-chip-cursor": disabled ? "default" : "pointer"
-    }), [ padding, resolvedBackgroundColor, borderColor, borderColorDisabled, borderColorHover, resolvedBorderWidth, resolvedBackgroundColorHover, labelColorHover, labelColor, gap, borderRadius, disabled ]);
-    return jsxs("div", Object.assign({
-        id: divId,
-        className: `${css.chip}${divClass}`,
-        style: Object.assign(Object.assign({}, divStyle), cssVars),
-        onKeyDown: e => accessibleKeyDown(e, () => handleClick(e)),
-        onClick: handleClick,
-        onMouseEnter: e => handleMouseEnter(!0, e),
-        onMouseLeave: e => handleMouseEnter(!1, e)
-    }, rest, {
-        children: [ icon && "right" !== iconPosition && jsx("div", {
-            className: css.icon,
-            children: jsx(Icon, {
-                name: icon,
-                size: iconSize,
-                strokeColor: computedIconColor
-            })
-        }), jsx("div", {
-            className: css[labelSize],
-            children: null != children ? children : label
-        }), icon && "right" === iconPosition && jsx("div", {
-            className: css.icon,
-            children: jsx(Icon, {
-                name: icon,
-                size: iconSize,
-                strokeColor: computedIconColor
-            })
-        }) ]
-    }));
-});
-
-export { Chip as C };

package/dist/esm/chunks/IconButton-nOcdRqR3.mjs

@@ -1,96 +0,0 @@
-'use client';
-import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
-
-import { jsxs, jsx } from "react/jsx-runtime";
-
-import { motion } from "motion/react";
-
-import React, { useRef, useState, useEffect, useCallback, useMemo } from "react";
-
-import { B as Badge } from "./Badge-DHvo2-ZQ.mjs";
-
-import { D as Dot } from "./Dot-B6Q97aIp.mjs";
-
-import { I as Icon } from "./Icon-CbDAKN_S.mjs";
-
-import { T as ToolTipType } from "./sharedTypes-DoNQkNSM.mjs";
-
-var css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_label = "IconButton-module_label__qWGFD flexBox-module_row__z24tF type-module_body-l-regular__lOYbg", css_icon = "IconButton-module_icon__2DDWy flexBox-module_row__z24tF", css_count = "IconButton-module_count__6r373 flexBox-module_row__z24tF";
-
-const IconButton = React.memo(props => {
-    const {frameSize: frameSize = 36, iconSize: iconSize = 20, round: round = !0, icon: icon = "more", borderRadius: borderRadius = 4, border: border = !1, tooltip: tooltip, color: color, colorOn: colorOn, iconFill: iconFill = !1, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorOn: bgColorOn = "var(--core-outline-primary)", iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover = !0, count: count = 0, toggle: toggle = !1, toggleIcon: toggleIcon = !1, isToggled: isToggled = !1, disabled: disabled = !1, showDot: showDot = !1, buttonSize: buttonSize = "m", onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "frameSize", "iconSize", "round", "icon", "borderRadius", "border", "tooltip", "color", "colorOn", "iconFill", "bgColor", "bgColorHover", "bgColorOn", "iconColor", "iconColorOn", "iconColorHover", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "buttonSize", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), [on, setOn] = useState(isToggled), [hovered, setHovered] = useState(!1);
-    useEffect(() => setOn(isToggled), [ isToggled ]);
-    const handleClick = useCallback(e => {
-        disabled || (tooltip && onToolTip(null), toggle && setOn(!on), onClick(e));
-    }, [ disabled, tooltip, onToolTip, on, onClick, toggle ]), handleMouseEnter = useCallback(e => {
-        if (setHovered(!0), !(null == ref ? void 0 : ref.current) || !tooltip) return;
-        const tip = {
-            type: ToolTipType.button,
-            payload: {
-                label: tooltip
-            },
-            event: e,
-            ref: ref
-        };
-        onToolTip(tip);
-    }, [ tooltip, onToolTip ]), handleMouseLeave = useCallback(() => {
-        setHovered(!1), tooltip && onToolTip(null);
-    }, [ tooltip, onToolTip ]), bgColorNormal = useMemo(() => on ? bgColorOn : null != bgColor ? bgColor : "var(--core-surface-secondary)", [ bgColorOn, bgColor, on ]), bgHoverColor = useMemo(() => hover && on ? bgColorOn : hover ? bgColorHover : null != bgColor ? bgColor : "transparent", [ hover, bgColor, bgColorOn, bgColorHover, on ]), textColor = useMemo(() => on ? colorOn : null != color ? color : "var(--core-text-primary)", [ on, colorOn, color ]), setIconColor = useMemo(() => on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ on, iconColorOn, iconColor, iconColorHover, hovered ]), size = useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = useMemo(() => ({
-        "--ib-bg-color": bgColorNormal,
-        "--ib-bg-color-hover": disabled ? bgColorNormal : bgHoverColor,
-        "--ib-icon-size": `${null != iconSize ? iconSize : 0}px`,
-        "--ib-button-size": `${null != size ? size : 0}px`,
-        "--ib-border-radius": round ? "100%" : `${null != borderRadius ? borderRadius : 0}px`,
-        "--ib-border": border ? "1px" : 0,
-        "--ib-color": textColor,
-        "--ib-cursor": disabled ? "default" : "pointer"
-    }), [ bgColorNormal, bgHoverColor, textColor, border, size, borderRadius, iconSize, round, disabled ]);
-    return jsxs(motion.button, Object.assign({
-        id: divId,
-        type: "button",
-        className: `${css_button}${divClass}`,
-        style: Object.assign(Object.assign({}, divStyle), cssVars),
-        onClick: e => handleClick(e),
-        onMouseOutCapture: handleMouseLeave,
-        onMouseOverCapture: handleMouseEnter,
-        transition: transition,
-        variants: variants,
-        initial: initial,
-        animate: animate,
-        exit: exit,
-        disabled: disabled,
-        "aria-disabled": disabled,
-        ref: ref
-    }, rest, {
-        children: [ jsx("div", {
-            className: css_icon,
-            style: {
-                opacity: disabled ? .3 : 1
-            },
-            children: jsx(Icon, {
-                name: icon,
-                strokeColor: setIconColor,
-                fillColor: fillColor,
-                disabled: disabled,
-                size: iconSize,
-                fill: iconFill,
-                toggle: !!toggleIcon && on,
-                pointer: !0
-            })
-        }), label && jsx("div", {
-            className: css_label,
-            children: label
-        }), jsx(Dot, {
-            show: showDot
-        }), 0 !== count && jsx("div", {
-            className: css_count,
-            children: jsx(Badge, {
-                variant: "light",
-                count: count,
-                hideNull: !0
-            })
-        }) ]
-    }));
-});
-
-export { IconButton as I };