@bubo-squared/ui-framework 0.2.18 → 0.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +63 -13
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +6 -5
  4. package/dist/index.d.ts +6 -5
  5. package/dist/index.js +63 -13
  6. package/dist/index.js.map +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -75,7 +75,7 @@ type MessageButtonProps = Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>,
75
75
  };
76
76
  declare const MessageButton: React$1.FC<MessageButtonProps>;
77
77
 
78
- declare const Accordion: React$1.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "children" | "type" | "title" | "collapsible"> & {
78
+ declare const Accordion: React$1.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "children" | "title" | "type" | "collapsible"> & {
79
79
  title: React$1.ReactNode;
80
80
  expandIcon?: React$1.ReactNode;
81
81
  defaultOpen?: boolean;
@@ -131,7 +131,7 @@ declare const Typography: <T extends ElementType = "span">(props: TypographyProp
131
131
 
132
132
  declare const badgeVariants: (props?: ({
133
133
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
134
- variant?: "primary" | "secondary" | "disabled" | "success" | "error" | "active" | "informal" | "warning" | "double-default" | "double-current" | null | undefined;
134
+ variant?: "error" | "primary" | "secondary" | "disabled" | "success" | "active" | "informal" | "warning" | "double-default" | "double-current" | null | undefined;
135
135
  } & class_variance_authority_types.ClassProp) | undefined) => string;
136
136
  type BadgeVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled" | "active";
137
137
  type BadgeSize = "sm" | "md" | "lg" | "xl";
@@ -147,7 +147,7 @@ declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefA
147
147
 
148
148
  declare const badgeDigitVariants: (props?: ({
149
149
  size?: "sm" | "md" | null | undefined;
150
- variant?: "primary" | "secondary" | "disabled" | "success" | "error" | "informal" | "warning" | null | undefined;
150
+ variant?: "error" | "primary" | "secondary" | "disabled" | "success" | "informal" | "warning" | null | undefined;
151
151
  } & class_variance_authority_types.ClassProp) | undefined) => string;
152
152
  type BadgeDigitSize = "sm" | "md";
153
153
  type BadgeDigitVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled";
@@ -160,7 +160,7 @@ interface BadgeDigitProps extends React$1.HTMLAttributes<HTMLDivElement>, Varian
160
160
  declare const BadgeDigit: React$1.ForwardRefExoticComponent<BadgeDigitProps & React$1.RefAttributes<HTMLDivElement>>;
161
161
 
162
162
  declare const badgeDotVariants: (props?: ({
163
- status?: "disabled" | "error" | "informal" | "warning" | "success/online" | null | undefined;
163
+ status?: "error" | "disabled" | "informal" | "warning" | "success/online" | null | undefined;
164
164
  } & class_variance_authority_types.ClassProp) | undefined) => string;
165
165
  interface BadgeDotProps extends VariantProps<typeof badgeDotVariants> {
166
166
  className?: string;
@@ -391,7 +391,7 @@ interface SelectOption {
391
391
  }
392
392
  declare const selectTriggerVariants: (props?: ({
393
393
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
394
- status?: "success" | "error" | "default" | null | undefined;
394
+ status?: "error" | "success" | "default" | null | undefined;
395
395
  } & class_variance_authority_types.ClassProp) | undefined) => string;
396
396
  interface SelectProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof selectTriggerVariants> {
397
397
  label?: string;
@@ -664,6 +664,7 @@ interface TooltipProps {
664
664
  open?: boolean;
665
665
  defaultOpen?: boolean;
666
666
  onOpenChange?: (open: boolean) => void;
667
+ delayDuration?: number;
667
668
  }
668
669
  declare const Tooltip: React$1.FC<TooltipProps>;
669
670
 
package/dist/index.d.ts CHANGED
@@ -75,7 +75,7 @@ type MessageButtonProps = Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>,
75
75
  };
76
76
  declare const MessageButton: React$1.FC<MessageButtonProps>;
77
77
 
78
- declare const Accordion: React$1.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "children" | "type" | "title" | "collapsible"> & {
78
+ declare const Accordion: React$1.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "children" | "title" | "type" | "collapsible"> & {
79
79
  title: React$1.ReactNode;
80
80
  expandIcon?: React$1.ReactNode;
81
81
  defaultOpen?: boolean;
@@ -131,7 +131,7 @@ declare const Typography: <T extends ElementType = "span">(props: TypographyProp
131
131
 
132
132
  declare const badgeVariants: (props?: ({
133
133
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
134
- variant?: "primary" | "secondary" | "disabled" | "success" | "error" | "active" | "informal" | "warning" | "double-default" | "double-current" | null | undefined;
134
+ variant?: "error" | "primary" | "secondary" | "disabled" | "success" | "active" | "informal" | "warning" | "double-default" | "double-current" | null | undefined;
135
135
  } & class_variance_authority_types.ClassProp) | undefined) => string;
136
136
  type BadgeVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled" | "active";
137
137
  type BadgeSize = "sm" | "md" | "lg" | "xl";
@@ -147,7 +147,7 @@ declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefA
147
147
 
148
148
  declare const badgeDigitVariants: (props?: ({
149
149
  size?: "sm" | "md" | null | undefined;
150
- variant?: "primary" | "secondary" | "disabled" | "success" | "error" | "informal" | "warning" | null | undefined;
150
+ variant?: "error" | "primary" | "secondary" | "disabled" | "success" | "informal" | "warning" | null | undefined;
151
151
  } & class_variance_authority_types.ClassProp) | undefined) => string;
152
152
  type BadgeDigitSize = "sm" | "md";
153
153
  type BadgeDigitVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled";
@@ -160,7 +160,7 @@ interface BadgeDigitProps extends React$1.HTMLAttributes<HTMLDivElement>, Varian
160
160
  declare const BadgeDigit: React$1.ForwardRefExoticComponent<BadgeDigitProps & React$1.RefAttributes<HTMLDivElement>>;
161
161
 
162
162
  declare const badgeDotVariants: (props?: ({
163
- status?: "disabled" | "error" | "informal" | "warning" | "success/online" | null | undefined;
163
+ status?: "error" | "disabled" | "informal" | "warning" | "success/online" | null | undefined;
164
164
  } & class_variance_authority_types.ClassProp) | undefined) => string;
165
165
  interface BadgeDotProps extends VariantProps<typeof badgeDotVariants> {
166
166
  className?: string;
@@ -391,7 +391,7 @@ interface SelectOption {
391
391
  }
392
392
  declare const selectTriggerVariants: (props?: ({
393
393
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
394
- status?: "success" | "error" | "default" | null | undefined;
394
+ status?: "error" | "success" | "default" | null | undefined;
395
395
  } & class_variance_authority_types.ClassProp) | undefined) => string;
396
396
  interface SelectProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof selectTriggerVariants> {
397
397
  label?: string;
@@ -664,6 +664,7 @@ interface TooltipProps {
664
664
  open?: boolean;
665
665
  defaultOpen?: boolean;
666
666
  onOpenChange?: (open: boolean) => void;
667
+ delayDuration?: number;
667
668
  }
668
669
  declare const Tooltip: React$1.FC<TooltipProps>;
669
670
 
package/dist/index.js CHANGED
@@ -11,10 +11,40 @@ function cn(...inputs) {
11
11
  return twMerge(clsx(inputs));
12
12
  }
13
13
 
14
+ // src/lib/ripple.ts
15
+ function removeExistingRipples(target) {
16
+ const ripples = target.querySelectorAll(".bubo-ripple");
17
+ ripples.forEach((node) => node.remove());
18
+ }
19
+ function spawnRipple(target, clientX, clientY, options = {}) {
20
+ if (typeof window === "undefined" || typeof document === "undefined") return;
21
+ const rect = target.getBoundingClientRect();
22
+ const x = clientX - rect.left;
23
+ const y = clientY - rect.top;
24
+ const radius = Math.sqrt(rect.width * rect.width + rect.height * rect.height);
25
+ const size = radius * 2;
26
+ removeExistingRipples(target);
27
+ const ripple = document.createElement("span");
28
+ ripple.className = "bubo-ripple";
29
+ ripple.style.width = `${size}px`;
30
+ ripple.style.height = `${size}px`;
31
+ ripple.style.left = `${x - radius}px`;
32
+ ripple.style.top = `${y - radius}px`;
33
+ const durationMs = options.durationMs ?? 500;
34
+ ripple.style.animationDuration = `${durationMs}ms`;
35
+ const cleanup = () => {
36
+ ripple.removeEventListener("animationend", cleanup);
37
+ ripple.remove();
38
+ };
39
+ ripple.addEventListener("animationend", cleanup);
40
+ target.appendChild(ripple);
41
+ window.setTimeout(cleanup, durationMs + 50);
42
+ }
43
+
14
44
  // src/components/Buttons/Button.tsx
15
45
  import { jsx as jsx2, jsxs } from "react/jsx-runtime";
16
46
  var buttonVariants = cva(
17
- "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
47
+ "relative inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
18
48
  {
19
49
  variants: {
20
50
  variant: {
@@ -81,14 +111,23 @@ var Button = React.forwardRef(
81
111
  children,
82
112
  trailingIcon,
83
113
  leadingIcon,
114
+ onPointerDown,
84
115
  ...rest
85
116
  } = props;
86
117
  const Comp = asChild ? Slot : "button";
118
+ const handlePointerDown = (e) => {
119
+ onPointerDown?.(e);
120
+ if (e.defaultPrevented) return;
121
+ if (rest.disabled) return;
122
+ if (e.button !== 0 || !e.isPrimary) return;
123
+ spawnRipple(e.currentTarget, e.clientX, e.clientY);
124
+ };
87
125
  return /* @__PURE__ */ jsxs(
88
126
  Comp,
89
127
  {
90
128
  className: cn(buttonVariants({ variant, size, className })),
91
129
  ref,
130
+ onPointerDown: handlePointerDown,
92
131
  ...rest,
93
132
  children: [
94
133
  leadingIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
@@ -141,7 +180,7 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
141
180
  import { cva as cva3 } from "class-variance-authority";
142
181
  import { jsx as jsx4 } from "react/jsx-runtime";
143
182
  var iconButtonVariants = cva3(
144
- "inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none overflow-hidden p-2 cursor-pointer",
183
+ "relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none overflow-hidden p-2 cursor-pointer",
145
184
  {
146
185
  variants: {
147
186
  variant: {
@@ -187,14 +226,23 @@ var IconButton = React2.forwardRef(
187
226
  asChild = false,
188
227
  icon,
189
228
  round = false,
229
+ onPointerDown,
190
230
  ...rest
191
231
  } = props;
192
232
  const Comp = asChild ? Slot2 : "button";
233
+ const handlePointerDown = (e) => {
234
+ onPointerDown?.(e);
235
+ if (e.defaultPrevented) return;
236
+ if (rest.disabled) return;
237
+ if (e.button !== 0 || !e.isPrimary) return;
238
+ spawnRipple(e.currentTarget, e.clientX, e.clientY);
239
+ };
193
240
  return /* @__PURE__ */ jsx4(
194
241
  Comp,
195
242
  {
196
243
  className: cn(iconButtonVariants({ variant, size }), round ? "rounded-full" : "rounded-4", className),
197
244
  ref,
245
+ onPointerDown: handlePointerDown,
198
246
  ...rest,
199
247
  children: /* @__PURE__ */ jsx4("div", { className: "buttonIcon flex items-center justify-center", children: icon })
200
248
  }
@@ -3137,10 +3185,11 @@ var Tooltip = (props) => {
3137
3185
  open,
3138
3186
  defaultOpen,
3139
3187
  onOpenChange,
3140
- children
3188
+ children,
3189
+ delayDuration = 200
3141
3190
  } = props;
3142
3191
  const { side, align } = mapPlacementToSideAndAlign(placement);
3143
- const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 p-4 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
3192
+ const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 py-1.5 px-2.5 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
3144
3193
  const tooltipArrowClasses = "relative fill-(--background-tooltip) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
3145
3194
  return /* @__PURE__ */ jsxs24(
3146
3195
  TooltipPrimitive.Root,
@@ -3149,6 +3198,7 @@ var Tooltip = (props) => {
3149
3198
  defaultOpen,
3150
3199
  onOpenChange,
3151
3200
  disableHoverableContent,
3201
+ delayDuration,
3152
3202
  children: [
3153
3203
  /* @__PURE__ */ jsx36(TooltipPrimitive.Trigger, { asChild: true, children }),
3154
3204
  /* @__PURE__ */ jsx36(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs24(
@@ -3160,9 +3210,9 @@ var Tooltip = (props) => {
3160
3210
  className: cn(tooltipClasses, className),
3161
3211
  children: [
3162
3212
  showArrow && /* @__PURE__ */ jsx36(TooltipArrow, { className: tooltipArrowClasses }),
3163
- /* @__PURE__ */ jsxs24("div", { className: "grid gap-2", children: [
3213
+ /* @__PURE__ */ jsxs24("div", { className: "grid", children: [
3164
3214
  (strapline ?? "") !== "" && /* @__PURE__ */ jsx36("span", { className: "caption text-secondary", children: strapline }),
3165
- /* @__PURE__ */ jsx36("h4", { className: "subtitle-medium text-primary", children: title }),
3215
+ /* @__PURE__ */ jsx36("h4", { className: "paragraph-md text-primary", children: title }),
3166
3216
  (description ?? "") !== "" && /* @__PURE__ */ jsx36("p", { className: "paragraph-sm text-primary", children: description })
3167
3217
  ] })
3168
3218
  ]
@@ -3622,10 +3672,10 @@ var TextArea = (props) => {
3622
3672
  success: "border-(--border-success)",
3623
3673
  error: "border-(--border-error)"
3624
3674
  };
3625
- const statusFocusClass = {
3626
- default: "focus-within:border-(--border-brand) focus-within:hover:border-(--border-brand) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
3627
- success: "focus-within:border-(--border-success) focus-within:hover:border-(--border-success) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-success)]",
3628
- error: "focus-within:border-(--border-error) focus-within:hover:border-(--border-error) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-error)]"
3675
+ const statusShellClass = {
3676
+ default: "input-default",
3677
+ success: "input-success",
3678
+ error: "input-error"
3629
3679
  };
3630
3680
  const counterColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-primary";
3631
3681
  const handleResizePointerDown = (event) => {
@@ -3665,11 +3715,11 @@ var TextArea = (props) => {
3665
3715
  "div",
3666
3716
  {
3667
3717
  className: cn(
3668
- "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text transition-colors",
3669
- "border-(--border-secondary) hover:border-(--border-secondary-hover) hover:bg-(--background-primary-hover)",
3718
+ "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text",
3719
+ "border-(--border-secondary)",
3720
+ statusShellClass[status],
3670
3721
  disabled && "bg-(--background-primary-disabled) border-(--border-secondary-disabled) cursor-default",
3671
3722
  statusBorderClass[status],
3672
- !disabled && statusFocusClass[status],
3673
3723
  className
3674
3724
  ),
3675
3725
  ref: containerRef,