@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Inputs/Buttons/shared/variants.js

@@ -1,210 +1,420 @@
-import { primary, neutral, error, success, warning } from '../../../../constants/colors';
-import { spacing } from '../../../../constants/spacing';
+import { error, neutral, primary, success, warning, } from "../../../../constants/colors";
+import { spacing } from "../../../../constants/spacing";
 // Overrides mantine due to rem difference
 const loading = {
-    top: '-1px',
-    right: '-1px',
-    left: '-1px',
-    bottom: '-1px',
-    borderRadius: '8px',
+    borderRadius: "8px",
+    bottom: "-1px",
+    left: "-1px",
+    right: "-1px",
+    top: "-1px",
 };
 const disabled = {
     background: neutral[50],
     border: `1px solid ${neutral[50]}`,
     color: neutral[100],
 };
+// `ghost` is the variant for buttons living on a deliberately-dark surface
+// (e.g. inside a dark `SelectionToolbar` pill, over a video thumbnail). It is
+// intentionally theme-agnostic — the visual treatment ("translucent fill +
+// white text") describes the button itself, not the global theme. Use this
+// instead of inventing per-surface variants for every brand intent.
+const ghostDisabled = {
+    background: "rgba(255, 255, 255, 0.04)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    color: "rgba(255, 255, 255, 0.4)",
+};
+// Hover styles are gated behind this media query so they only apply to
+// devices with a true hover-capable pointer (mouse / trackpad). Touch
+// devices — iOS Safari especially — preserve `:hover` after a tap ends
+// ("sticky hover"), which makes buttons look stuck in their pressed
+// state until the user taps elsewhere. Wrapping `:hover` and
+// `:active:hover` in this query is the standard fix; `:active` still
+// fires during the tap so users still get press feedback.
+export const HOVER_MEDIA = "@media (hover: hover) and (pointer: fine)";
 export const componentVariants = {
-    primary: {
-        background: `linear-gradient(to right, ${primary[300]}, ${primary[200]})`,
-        border: `1px solid ${primary[200]}`,
-        color: 'white',
-        '&:hover': {
-            background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
+    cancel: {
+        "&:active": {
+            background: "white",
+            border: `1px solid ${error[100]}`,
+            color: error[100],
+        },
+        "&:disabled": disabled,
+        "&:toggled": {
+            background: error[100],
+            color: "white",
+        },
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: "white",
+            },
+            "&:before": loading,
+        },
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: "white",
+                border: `1px solid ${error[100]}`,
+                color: error[100],
+            },
+            "&:hover": {
+                background: error[100],
+                border: `1px solid ${error[100]}`,
+            },
+        },
+        background: error[200],
+        border: `1px solid ${error[200]}`,
+        color: "white",
+    },
+    ghost: {
+        "&:active": {
+            background: "rgba(255, 255, 255, 0.18)",
+            border: "1px solid rgba(255, 255, 255, 0.32)",
+            color: "white",
+        },
+        "&:disabled": ghostDisabled,
+        "&:toggled": {
+            background: "rgba(255, 255, 255, 0.18)",
+            border: "1px solid rgba(255, 255, 255, 0.32)",
+            color: "white",
+        },
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: "white",
+            },
+            "&:before": loading,
+        },
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: "rgba(255, 255, 255, 0.18)",
+                border: "1px solid rgba(255, 255, 255, 0.32)",
+                color: "white",
+            },
+            "&:hover": {
+                background: "rgba(255, 255, 255, 0.14)",
+                border: "1px solid rgba(255, 255, 255, 0.24)",
+                color: "white",
+            },
+        },
+        background: "rgba(255, 255, 255, 0.08)",
+        border: "1px solid rgba(255, 255, 255, 0.16)",
+        color: "white",
+    },
+    nav: {
+        "& .mantine-Button-inner": {
+            justifyContent: "flex-start",
+        },
+        "&:active": {
+            background: neutral[25],
+            color: primary[200],
+        },
+        "&:disabled": {
+            background: "transparent",
+            color: neutral[100],
+        },
+        "&:toggled": {
+            background: neutral[25],
+            color: primary[200],
+        },
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: neutral[200],
+            },
+            "&:before": loading,
+        },
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: neutral[25],
+                color: primary[200],
+            },
+            "&:hover": {
+                background: "transparent",
+                color: neutral[200],
+            },
+        },
+        background: "transparent",
+        border: "none",
+        color: neutral[300],
+        paddingLeft: spacing.sm,
+    },
+    "nav-cancel": {
+        "& .mantine-Button-inner": {
+            justifyContent: "flex-start",
         },
-        '&:active': {
-            background: 'white',
-            border: `1px solid ${primary[300]}`,
-            color: primary[300],
+        "&:active": {
+            background: error[25],
+            color: error[200],
         },
-        '&:toggled': {
-            background: `${primary[300]}`,
-            color: 'white',
+        "&:disabled": {
+            background: "transparent",
+            color: neutral[100],
+        },
+        "&:toggled": {
+            background: error[25],
+            color: error[200],
+        },
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: error[200],
+            },
+            "&:before": loading,
         },
-        '&:disabled': {
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: error[25],
+                color: error[200],
+            },
+            "&:hover": {
+                background: "transparent",
+                color: error[100],
+            },
+        },
+        background: "transparent",
+        border: "none",
+        color: error[200],
+        paddingLeft: spacing.sm,
+    },
+    primary: {
+        "&:active": {
+            background: "white",
+            border: `1px solid ${primary[200]}`,
+            color: primary[200],
+        },
+        "&:disabled": {
             ...disabled,
         },
-        '&[data-loading]': {
-            '& .mantine-Button-icon svg': {
-                stroke: 'white',
+        "&:toggled": {
+            background: `${primary[200]}`,
+            color: "white",
+        },
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: "white",
+            },
+            "&:before": loading,
+        },
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: "white",
+                border: `1px solid ${primary[200]}`,
+                color: primary[200],
+            },
+            "&:hover": {
+                background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
             },
-            '&:before': loading,
         },
+        background: `linear-gradient(to right, ${primary[200]}, ${primary[200]})`,
+        border: `1px solid ${primary[200]}`,
+        color: "white",
     },
     secondary: {
-        background: 'white',
-        color: neutral[200],
-        border: `1px solid ${neutral[200]}`,
-        '&:hover': {
-            background: neutral[100],
-            border: `1px solid ${neutral[100]}`,
-            color: 'white',
-        },
-        '&:active': {
+        "&:active": {
             background: neutral[100],
             border: `1px solid ${neutral[200]}`,
             color: neutral[200],
         },
-        '&:toggled': {
+        "&:disabled": disabled,
+        "&:toggled": {
             background: neutral[100],
-            color: 'neutral[200]',
+            color: "neutral[200]",
         },
-        '&:disabled': disabled,
-        '&[data-loading]': {
-            '& .mantine-Button-icon svg': {
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
                 stroke: neutral[200],
             },
-            '&:before': loading,
+            "&:before": loading,
         },
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: neutral[100],
+                border: `1px solid ${neutral[200]}`,
+                color: neutral[200],
+            },
+            "&:hover": {
+                background: neutral[100],
+                border: `1px solid ${neutral[100]}`,
+                color: "white",
+            },
+        },
+        background: "white",
+        border: `1px solid ${neutral[200]}`,
+        color: neutral[200],
     },
-    cancel: {
-        background: error[200],
-        color: 'white',
-        border: `1px solid ${error[200]}`,
-        '&:hover': {
+    "secondary-cancel": {
+        "&:active": {
+            background: "white",
+            border: `1px solid ${error[200]}`,
+            color: error[200],
+        },
+        "&:disabled": disabled,
+        "&:toggled": {
             background: error[100],
-            border: `1px solid ${error[100]}`,
-        },
-        '&:active': {
-            background: 'white',
-            border: `1px solid ${error[100]}`,
-            color: error[100],
+            color: "white",
         },
-        '&:toggled': {
-            background: error[100],
-            color: 'white',
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: error[200],
+            },
+            "&:before": loading,
         },
-        '&:disabled': disabled,
-        '&[data-loading]': {
-            '& .mantine-Button-icon svg': {
-                stroke: 'white',
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: "white",
+                border: `1px solid ${error[200]}`,
+                color: error[200],
+            },
+            "&:hover": {
+                background: error[25],
+                border: `1px solid ${error[100]}`,
+                color: error[200],
             },
-            '&:before': loading,
         },
+        background: "white",
+        border: `1px solid ${error[200]}`,
+        color: error[200],
     },
     success: {
-        background: success[200],
-        color: 'white',
-        border: `1px solid ${success[200]}`,
-        '&:hover': {
-            background: success[100],
-            border: `1px solid ${success[100]}`,
-        },
-        '&:active': {
-            background: 'white',
-            border: `1px solid ${success[100]}`,
-            color: success[100],
-        },
-        '&:toggled': {
-            background: success[100],
+        "&:active": {
+            background: "white",
+            border: `1px solid ${success[200]}`,
+            color: success[200],
+        },
+        "&:disabled": disabled,
+        "&:toggled": {
+            background: success[200],
+        },
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: "white",
+            },
+            "&:before": loading,
         },
-        '&:disabled': disabled,
-        '&[data-loading]': {
-            '& .mantine-Button-icon svg': {
-                stroke: 'white',
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: "white",
+                border: `1px solid ${success[200]}`,
+                color: success[200],
+            },
+            "&:hover": {
+                background: success[200],
+                border: `1px solid ${success[200]}`,
             },
-            '&:before': loading,
         },
+        background: success[300],
+        border: `1px solid ${success[300]}`,
+        color: "white",
     },
-    warning: {
-        background: warning[200],
-        color: 'white',
-        border: `1px solid ${warning[200]}`,
-        '&:hover': {
-            background: warning[100],
-            border: `1px solid ${warning[100]}`,
+    tertiary: {
+        "&:active": {
+            background: primary[100],
+            border: `1px solid ${primary[200]}`,
+            color: primary[200],
         },
-        '&:active': {
-            background: 'white',
-            border: `1px solid ${warning[100]}`,
-            color: warning[100],
+        "&:disabled": disabled,
+        "&:toggled": {
+            background: primary[100],
+            color: primary[200],
         },
-        '&:toggled': {
-            background: warning[100],
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: primary[200],
+            },
+            "&:before": loading,
         },
-        '&:disabled': disabled,
-        '&[data-loading]': {
-            '& .mantine-Button-icon svg': {
-                stroke: 'white',
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: primary[100],
+                border: `1px solid ${primary[200]}`,
+                color: primary[200],
+            },
+            "&:hover": {
+                background: primary[100],
+                border: `1px solid ${primary[100]}`,
+                color: "white",
             },
-            '&:before': loading,
         },
+        background: "white",
+        border: `1px solid ${primary[200]}`,
+        color: primary[200],
     },
     text: {
-        background: 'transparent',
-        color: neutral[200],
-        border: 'none',
-        padding: '0',
-        height: 'auto',
-        minWidth: 'unset',
-        '&:hover': {
-            background: 'transparent',
-            color: primary[300],
-        },
-        '&:active': {
-            background: 'transparent',
+        "&:active": {
+            background: "transparent",
             color: primary[200],
         },
-        '&:toggled': {
-            background: 'transparent',
-            color: primary[300],
-        },
-        '&:disabled': {
-            background: 'transparent',
+        "&:disabled": {
+            background: "transparent",
             color: neutral[100],
         },
-        '&[data-loading]': {
-            '& .mantine-Button-icon svg': {
+        "&:toggled": {
+            background: "transparent",
+            color: primary[200],
+        },
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
                 stroke: neutral[200],
             },
-            '&:before': loading,
+            "&:before": loading,
         },
-    },
-    nav: {
-        background: 'white',
-        paddingLeft: spacing.sm,
-        color: neutral[200],
-        '& .mantine-Button-inner': {
-            justifyContent: 'flex-start',
-        },
-        '&:hover': {
-            background: neutral[50],
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: "transparent",
+                color: primary[200],
+            },
+            "&:hover": {
+                background: "transparent",
+                color: primary[200],
+            },
         },
-        '&:active': {
-            background: neutral[100],
-            color: neutral[200],
+        background: "transparent",
+        border: "none",
+        color: neutral[200],
+        height: "auto",
+        minWidth: "unset",
+        padding: "0",
+    },
+    warning: {
+        "&:active": {
+            background: "white",
+            border: `1px solid ${warning[100]}`,
+            color: warning[100],
         },
-        '&:toggled': {
-            background: neutral[50],
-            color: neutral[200],
+        "&:disabled": disabled,
+        "&:toggled": {
+            background: warning[100],
         },
-        '&:disabled': {
-            background: neutral[50],
-            color: neutral[100],
+        "&[data-loading]": {
+            "& .mantine-Button-icon svg": {
+                stroke: "white",
+            },
+            "&:before": loading,
         },
-        '&[data-loading]': {
-            '& .mantine-Button-icon svg': {
-                stroke: neutral[200],
+        [HOVER_MEDIA]: {
+            "&:active:hover": {
+                background: "white",
+                border: `1px solid ${warning[100]}`,
+                color: warning[100],
+            },
+            "&:hover": {
+                background: warning[100],
+                border: `1px solid ${warning[100]}`,
             },
-            '&:before': loading,
         },
+        background: warning[200],
+        border: `1px solid ${warning[200]}`,
+        color: "white",
     },
 };
 export const subtleVariants = {
+    cancel: { color: error[200] },
+    // `ghost` is already the subtle treatment for dark surfaces — the `subtle`
+    // modifier is a no-op for it, but we expose a key for type completeness.
+    ghost: { color: "white" },
+    nav: { color: neutral[300] },
+    "nav-cancel": { color: error[200] },
     primary: { color: primary[200] },
     secondary: { color: neutral[200] },
-    cancel: { color: error[200] },
+    "secondary-cancel": { color: error[200] },
     success: { color: success[200] },
-    warning: { color: warning[200] },
+    tertiary: { color: primary[200] },
     text: { color: neutral[200] },
-    nav: { color: neutral[200] },
+    warning: { color: warning[200] },
 };

package/dist/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.d.ts

@@ -0,0 +1,40 @@
+export type ColorPickerTriggerVariant = 'fontColor' | 'fillColor' | 'borderColor' | 'shadowColor';
+export interface ColorPickerTriggerProps {
+    variant: ColorPickerTriggerVariant;
+    /** Current color. `null` / `'transparent'` renders the transparency checker. */
+    value: string | null;
+    onChange: (color: string) => void;
+    /** Optional curated color swatches shown under the picker. */
+    swatches?: string[];
+    /** Color format passed to Mantine's `ColorPicker`. Default `'hex'`. */
+    format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+    /** Accessibility label. Default derives from `variant`. */
+    ariaLabel?: string;
+    /** Render the trigger on a dark surface. Default `false`. */
+    dark?: boolean;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Controlled open state. When provided, `onOpenChange` must also be supplied. */
+    opened?: boolean;
+    /** Fires when the open state should change (controlled mode). */
+    onOpenChange?: (next: boolean) => void;
+    /** Size of the swatch in px for `fillColor` variant. Default `16`. */
+    swatchSize?: number;
+}
+/**
+ * Trigger + popover pair that opens a Mantine `ColorPicker`. Four visual
+ * variants:
+ *   - `fontColor`: stacked "A" with a colored underline bar (the bar reflects
+ *      the current text color).
+ *   - `borderColor`: hollow "A" whose stroke reflects the current text-border
+ *      color, paired with a colored underline bar.
+ *   - `shadowColor`: solid "A" with a soft drop shadow tinted by the current
+ *      shadow color, paired with a colored underline bar.
+ *   - `fillColor`: 16×16 swatch, with a checkerboard pattern when the fill is
+ *      transparent / null.
+ *
+ * All variants drive the same popover — used in the slide-editor text
+ * toolbar and reusable anywhere a color needs to be picked inline.
+ */
+export declare const ColorPickerTrigger: ({ variant, value, onChange, swatches, format, ariaLabel, dark, disabled, opened: openedProp, onOpenChange, swatchSize, }: ColorPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorPickerTrigger.d.ts.map

package/dist/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,yBAAyB,GACjC,WAAW,GACX,WAAW,GACX,aAAa,GACb,aAAa,CAAC;AAElB,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,yBAAyB,CAAC;IACnC,gFAAgF;IAChF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1D,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iEAAiE;IACjE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkBD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,GAAI,0HAYhC,uBAAuB,4CAsMzB,CAAC"}