gridsmith-ui 0.2.13 → 0.2.15

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 +35 -21
  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
@@ -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,9 @@ 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 && !disabled && "hover:border-[var(--ds-input-border-hover)]",
2234
+ open && !error && "border-[var(--ds-input-focus-ring)] ring-2 ring-[var(--ds-input-focus-ring)]",
2235
+ "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
2236
  "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
2231
2237
  !selectedValues.length && "text-[var(--ds-text-muted)]"
2232
2238
  ),
@@ -2424,7 +2430,8 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
2424
2430
  "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
2425
2431
  "shadow-[var(--ds-input-shadow)]",
2426
2432
  "transition-colors duration-[var(--ds-transition-speed)]",
2427
- "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)]",
2433
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
2434
+ "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
2428
2435
  disabled && "opacity-disabled pointer-events-none"
2429
2436
  ),
2430
2437
  children: [
@@ -2773,7 +2780,8 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
2773
2780
  "shadow-[var(--ds-input-shadow)]",
2774
2781
  "transition-colors cursor-pointer",
2775
2782
  "px-ds-3 py-ds-2",
2776
- open && "border-[var(--ds-accent-primary)]",
2783
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
2784
+ open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
2777
2785
  disabled && "opacity-disabled cursor-not-allowed",
2778
2786
  value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
2779
2787
  ),
@@ -3248,7 +3256,8 @@ function TimePicker({
3248
3256
  "shadow-[var(--ds-input-shadow)]",
3249
3257
  "transition-colors cursor-pointer",
3250
3258
  "px-ds-3 py-ds-2",
3251
- open && "border-[var(--ds-accent-primary)]",
3259
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3260
+ open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
3252
3261
  disabled && "opacity-disabled cursor-not-allowed",
3253
3262
  value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
3254
3263
  ),
@@ -3399,7 +3408,8 @@ function NumberInput({
3399
3408
  "shadow-[var(--ds-input-shadow)]",
3400
3409
  "bg-[var(--ds-input-bg)]",
3401
3410
  "transition-colors duration-[var(--ds-transition-speed)]",
3402
- "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)]",
3411
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3412
+ "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
3403
3413
  disabled && "opacity-disabled cursor-not-allowed",
3404
3414
  className
3405
3415
  ),
@@ -3482,9 +3492,9 @@ function NumberInput({
3482
3492
  var variantStyles2 = {
3483
3493
  default: "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-primary)]",
3484
3494
  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)]",
3495
+ 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]",
3496
+ 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]",
3497
+ 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
3498
  outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
3489
3499
  };
3490
3500
  var sizeStyles2 = {
@@ -3617,7 +3627,8 @@ function TagInput({
3617
3627
  "rounded-[var(--ds-radius-md)]",
3618
3628
  "shadow-[var(--ds-input-shadow)]",
3619
3629
  "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)]",
3630
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3631
+ "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
3621
3632
  disabled && "opacity-disabled cursor-not-allowed",
3622
3633
  className
3623
3634
  ),
@@ -3753,7 +3764,8 @@ function PinInput({
3753
3764
  "rounded-[var(--ds-radius-md)]",
3754
3765
  "shadow-[var(--ds-input-shadow)]",
3755
3766
  "transition-colors",
3756
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
3767
+ !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
3768
+ "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
3769
  "placeholder:text-[var(--ds-text-muted)]",
3758
3770
  sizes3[size],
3759
3771
  disabled && "opacity-disabled cursor-not-allowed"
@@ -4085,7 +4097,8 @@ function ColorPicker({
4085
4097
  "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
4086
4098
  "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
4087
4099
  "rounded-[var(--ds-radius-sm)]",
4088
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]"
4100
+ "hover:border-[var(--ds-input-border-hover)]",
4101
+ "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
4102
  )
4090
4103
  }
4091
4104
  )
@@ -81881,8 +81894,9 @@ function MentionInput({
81881
81894
  "rounded-[var(--ds-radius-md)]",
81882
81895
  "shadow-[var(--ds-input-shadow)]",
81883
81896
  "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",
81897
+ "hover:border-[var(--ds-input-border-hover)]",
81898
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
81899
+ "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
81886
81900
  "transition-colors duration-[var(--ds-transition-speed)]"
81887
81901
  )
81888
81902
  }
@@ -82791,11 +82805,11 @@ var variantStyles4 = {
82791
82805
  neutral: "bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]",
82792
82806
  subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
82793
82807
  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)]",
82808
+ "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
82809
  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)]",
82810
+ "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
82811
  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)]",
82812
+ "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
82813
  outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
82800
82814
  };
82801
82815
  var sizeStyles4 = {