gridsmith-ui 0.2.12 → 0.2.14

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 (4) hide show
  1. package/dist/index.js +36 -24
  2. package/dist/index.js.map +1 -1
  3. package/dist/roots.css +9 -4
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1742,7 +1742,7 @@ var iconPaddingReduce = {
1742
1742
  md: 4,
1743
1743
  lg: 6
1744
1744
  };
1745
- var HOVER_SCALE_CAP = { "--_btn-scale": "min(var(--ds-hover-scale), 1.04)" };
1745
+ var HOVER_SCALE_CAP = { "--_btn-scale": "min(var(--ds-hover-scale), 1.02)" };
1746
1746
  function Button({ variant = "default", size = "md", iconLeft, iconRight, loading, className, children, disabled, style: style2, ...props }) {
1747
1747
  const spinnerSize = size === "lg" || size === "icon-lg" ? "md" : "sm";
1748
1748
  let paddingStyle;
@@ -1959,6 +1959,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
1959
1959
  }
1960
1960
  function Input({ className, size = "md", error = false, prefix, suffix, ...props }) {
1961
1961
  const borderColor = error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]";
1962
+ const hoverBorder = !error && !props.disabled && !props.readOnly ? "hover:border-[var(--ds-input-border-hover)]" : "";
1962
1963
  if (prefix || suffix) {
1963
1964
  return /* @__PURE__ */ jsxs(
1964
1965
  "div",
@@ -1971,7 +1972,8 @@ function Input({ className, size = "md", error = false, prefix, suffix, ...props
1971
1972
  borderColor,
1972
1973
  "rounded-[var(--ds-radius-md)]",
1973
1974
  "shadow-[var(--ds-input-shadow)]",
1974
- "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)]",
1975
+ hoverBorder,
1976
+ "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
1975
1977
  "transition-colors duration-[var(--ds-transition-speed)]",
1976
1978
  props.disabled && "cursor-not-allowed opacity-disabled",
1977
1979
  props.readOnly && "bg-[var(--ds-bg-muted)] cursor-default",
@@ -2012,7 +2014,8 @@ function Input({ className, size = "md", error = false, prefix, suffix, ...props
2012
2014
  "rounded-[var(--ds-radius-md)]",
2013
2015
  "shadow-[var(--ds-input-shadow)]",
2014
2016
  "placeholder:text-[var(--ds-text-muted)]",
2015
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
2017
+ hoverBorder,
2018
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
2016
2019
  "disabled:cursor-not-allowed disabled:opacity-disabled",
2017
2020
  "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default",
2018
2021
  "transition-colors duration-[var(--ds-transition-speed)]",
@@ -2051,9 +2054,10 @@ function Textarea({ className, autoResize, maxRows, ref, ...props }) {
2051
2054
  "rounded-[var(--ds-radius-md)]",
2052
2055
  "shadow-[var(--ds-input-shadow)]",
2053
2056
  "placeholder:text-[var(--ds-text-muted)]",
2054
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
2055
- "disabled:cursor-not-allowed disabled:opacity-disabled",
2056
- "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default",
2057
+ "hover:border-[var(--ds-input-border-hover)]",
2058
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
2059
+ "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
2060
+ "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default read-only:hover:border-[var(--ds-input-border)]",
2057
2061
  "transition-colors duration-[var(--ds-transition-speed)]",
2058
2062
  autoResize && "resize-none overflow-hidden",
2059
2063
  className
@@ -2226,7 +2230,8 @@ function Dropdown({
2226
2230
  "rounded-[var(--ds-radius-md)]",
2227
2231
  "shadow-[var(--ds-input-shadow)]",
2228
2232
  "transition-colors",
2229
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
2233
+ !error && "hover:border-[var(--ds-input-border-hover)]",
2234
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
2230
2235
  "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
2231
2236
  !selectedValues.length && "text-[var(--ds-text-muted)]"
2232
2237
  ),
@@ -2424,7 +2429,8 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
2424
2429
  "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
2425
2430
  "shadow-[var(--ds-input-shadow)]",
2426
2431
  "transition-colors duration-[var(--ds-transition-speed)]",
2427
- "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)]",
2432
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
2433
+ "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
2428
2434
  disabled && "opacity-disabled pointer-events-none"
2429
2435
  ),
2430
2436
  children: [
@@ -2773,7 +2779,8 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
2773
2779
  "shadow-[var(--ds-input-shadow)]",
2774
2780
  "transition-colors cursor-pointer",
2775
2781
  "px-ds-3 py-ds-2",
2776
- open && "border-[var(--ds-accent-primary)]",
2782
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
2783
+ open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
2777
2784
  disabled && "opacity-disabled cursor-not-allowed",
2778
2785
  value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
2779
2786
  ),
@@ -3248,7 +3255,8 @@ function TimePicker({
3248
3255
  "shadow-[var(--ds-input-shadow)]",
3249
3256
  "transition-colors cursor-pointer",
3250
3257
  "px-ds-3 py-ds-2",
3251
- open && "border-[var(--ds-accent-primary)]",
3258
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3259
+ open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
3252
3260
  disabled && "opacity-disabled cursor-not-allowed",
3253
3261
  value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
3254
3262
  ),
@@ -3399,7 +3407,8 @@ function NumberInput({
3399
3407
  "shadow-[var(--ds-input-shadow)]",
3400
3408
  "bg-[var(--ds-input-bg)]",
3401
3409
  "transition-colors duration-[var(--ds-transition-speed)]",
3402
- "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)]",
3410
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3411
+ "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
3403
3412
  disabled && "opacity-disabled cursor-not-allowed",
3404
3413
  className
3405
3414
  ),
@@ -3482,9 +3491,9 @@ function NumberInput({
3482
3491
  var variantStyles2 = {
3483
3492
  default: "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-primary)]",
3484
3493
  subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
3485
- success: "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)]",
3486
- warning: "bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning)]",
3487
- error: "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)]",
3494
+ success: "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]",
3495
+ warning: "bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]",
3496
+ error: "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]",
3488
3497
  outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
3489
3498
  };
3490
3499
  var sizeStyles2 = {
@@ -3617,7 +3626,8 @@ function TagInput({
3617
3626
  "rounded-[var(--ds-radius-md)]",
3618
3627
  "shadow-[var(--ds-input-shadow)]",
3619
3628
  "transition-colors duration-[var(--ds-transition-speed)] cursor-text",
3620
- "has-[:focus-visible]:ring-[length:var(--ds-border-width)] has-[:focus-visible]:ring-[var(--ds-input-focus-ring)]",
3629
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3630
+ "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
3621
3631
  disabled && "opacity-disabled cursor-not-allowed",
3622
3632
  className
3623
3633
  ),
@@ -3753,7 +3763,8 @@ function PinInput({
3753
3763
  "rounded-[var(--ds-radius-md)]",
3754
3764
  "shadow-[var(--ds-input-shadow)]",
3755
3765
  "transition-colors",
3756
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
3766
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3767
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
3757
3768
  "placeholder:text-[var(--ds-text-muted)]",
3758
3769
  sizes3[size],
3759
3770
  disabled && "opacity-disabled cursor-not-allowed"
@@ -4085,7 +4096,8 @@ function ColorPicker({
4085
4096
  "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
4086
4097
  "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
4087
4098
  "rounded-[var(--ds-radius-sm)]",
4088
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]"
4099
+ "hover:border-[var(--ds-input-border-hover)]",
4100
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]"
4089
4101
  )
4090
4102
  }
4091
4103
  )
@@ -81881,8 +81893,9 @@ function MentionInput({
81881
81893
  "rounded-[var(--ds-radius-md)]",
81882
81894
  "shadow-[var(--ds-input-shadow)]",
81883
81895
  "placeholder:text-[var(--ds-text-muted)]",
81884
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
81885
- "disabled:cursor-not-allowed disabled:opacity-disabled",
81896
+ "hover:border-[var(--ds-input-border-hover)]",
81897
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
81898
+ "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
81886
81899
  "transition-colors duration-[var(--ds-transition-speed)]"
81887
81900
  )
81888
81901
  }
@@ -82791,11 +82804,11 @@ var variantStyles4 = {
82791
82804
  neutral: "bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]",
82792
82805
  subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
82793
82806
  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-primary)]",
82794
- "success-soft": "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)]",
82807
+ "success-soft": "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]",
82795
82808
  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-primary)]",
82796
- "warning-soft": "bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning)]",
82809
+ "warning-soft": "bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]",
82797
82810
  error: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
82798
- "error-soft": "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)]",
82811
+ "error-soft": "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]",
82799
82812
  outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
82800
82813
  };
82801
82814
  var sizeStyles4 = {
@@ -96815,8 +96828,7 @@ function Alert({ variant, title, children, dismissible, onDismiss, action, class
96815
96828
  "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
96816
96829
  "border-[length:var(--ds-border-width)] border-current",
96817
96830
  "transition-colors cursor-pointer",
96818
- "hover:bg-[var(--ds-bg-muted)]",
96819
- variant === "error" ? "text-[var(--ds-status-error)]" : variant === "warning" ? "text-[var(--ds-status-warning)]" : variant === "success" ? "text-[var(--ds-status-success)]" : "text-[var(--ds-accent-primary)]"
96831
+ variant === "error" ? "text-[var(--ds-status-error)] hover:bg-[color-mix(in_srgb,var(--ds-status-error)_12%,transparent)]" : variant === "warning" ? "text-[var(--ds-status-warning)] hover:bg-[color-mix(in_srgb,var(--ds-status-warning)_15%,transparent)]" : variant === "success" ? "text-[var(--ds-status-success)] hover:bg-[color-mix(in_srgb,var(--ds-status-success)_12%,transparent)]" : "text-[var(--ds-accent-primary)] hover:bg-[color-mix(in_srgb,var(--ds-accent-primary)_12%,transparent)]"
96820
96832
  ),
96821
96833
  children: action.label
96822
96834
  }