kaleido-ui 0.1.25 → 0.1.26

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 (3) hide show
  1. package/dist/web/index.cjs +54 -37
  2. package/dist/web/index.js +54 -37
  3. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -3102,24 +3102,46 @@ function AssetSelector({
3102
3102
  }
3103
3103
  )
3104
3104
  ] }),
3105
- hasCategoryFilters && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: categories.map((category) => {
3106
- const isActive = activeCategories.includes(category.id);
3107
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3105
+ hasCategoryFilters && /*
3106
+ * Multi-select category chips — spec calls for "Filter and
3107
+ * Order menus (like in Blog)" but multi-select is the more
3108
+ * useful behaviour for an asset picker (lets the user see
3109
+ * stables + RWA together while comparing) and chips are
3110
+ * more discoverable than a dropdown for 3 short labels.
3111
+ * Restyle the chips to read as borderless pills consistent
3112
+ * with the rest of the modal, and add a small "Clear"
3113
+ * affordance when at least one chip is off so the user
3114
+ * can return to "all" without toggling each one.
3115
+ */
3116
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
3117
+ categories.map((category) => {
3118
+ const isActive = activeCategories.includes(category.id);
3119
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3120
+ "button",
3121
+ {
3122
+ type: "button",
3123
+ onClick: () => setActiveCategories(
3124
+ (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
3125
+ ),
3126
+ className: cn(
3127
+ "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
3128
+ isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
3129
+ ),
3130
+ children: category.label
3131
+ },
3132
+ category.id
3133
+ );
3134
+ }),
3135
+ activeCategories.length !== categories.length && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3108
3136
  "button",
3109
3137
  {
3110
3138
  type: "button",
3111
- onClick: () => setActiveCategories(
3112
- (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
3113
- ),
3114
- className: cn(
3115
- "rounded-full border px-3 py-1 text-xxs font-bold uppercase tracking-eyebrow transition-colors",
3116
- isActive ? "border-primary/35 bg-primary/[0.14] text-primary" : "border-border bg-white/[0.03] text-white/40 hover:border-white/20 hover:text-white/65"
3117
- ),
3118
- children: category.label
3119
- },
3120
- category.id
3121
- );
3122
- }) })
3139
+ onClick: () => setActiveCategories(categories.map((category) => category.id)),
3140
+ className: "ml-auto rounded-full px-2 py-1 text-tiny font-bold uppercase tracking-wide text-white/40 transition-colors hover:text-white/75",
3141
+ children: "All"
3142
+ }
3143
+ )
3144
+ ] })
3123
3145
  ] }),
3124
3146
  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
3125
3147
  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon2, { name: "search", size: "md", className: "opacity-40" }),
@@ -3153,34 +3175,29 @@ function AssetSelector({
3153
3175
  {
3154
3176
  ticker: option.ticker,
3155
3177
  logoUri: option.icon,
3156
- size: 32,
3178
+ size: 38,
3157
3179
  className: cn(
3158
- "transition-transform duration-200",
3180
+ "shrink-0 transition-transform duration-200",
3159
3181
  !isDisabled && "group-hover:scale-[1.04]"
3160
3182
  )
3161
3183
  }
3162
3184
  ),
3163
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
3164
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-2 font-semibold text-white", children: [
3165
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
3166
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: option.ticker }),
3167
- option.network && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3168
- NetworkBadge,
3169
- {
3170
- network: option.network,
3171
- showLabel: true,
3172
- className: "py-[1px]"
3173
- }
3174
- )
3175
- ] }),
3176
- isSelected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" })
3185
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
3186
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 flex flex-col leading-tight", children: [
3187
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate text-base font-bold tracking-wide text-white", children: option.name ?? option.ticker }),
3188
+ option.network && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3189
+ NetworkBadge,
3190
+ {
3191
+ network: option.network,
3192
+ showLabel: true,
3193
+ size: "sm",
3194
+ className: "py-[1px]"
3195
+ }
3196
+ ) })
3177
3197
  ] }),
3178
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-0.5 flex items-center justify-between gap-3", children: [
3179
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "truncate text-xs text-white/35", children: option.name ?? option.ticker }),
3180
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
3181
- optionCategoryLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full border border-border-default bg-surface-overlay px-2 py-0.5 text-xxs font-semibold uppercase tracking-eyebrow text-text-dimmed", children: optionCategoryLabel }),
3182
- isDisabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xxs font-medium uppercase tracking-wide text-white/25", children: "In use" })
3183
- ] })
3198
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
3199
+ isSelected ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : optionCategoryLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
3200
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-tiny font-medium uppercase tracking-wide text-white/35", children: isDisabled ? "In use" : option.ticker })
3184
3201
  ] })
3185
3202
  ] })
3186
3203
  ]
package/dist/web/index.js CHANGED
@@ -2947,24 +2947,46 @@ function AssetSelector({
2947
2947
  }
2948
2948
  )
2949
2949
  ] }),
2950
- hasCategoryFilters && /* @__PURE__ */ jsx34("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: categories.map((category) => {
2951
- const isActive = activeCategories.includes(category.id);
2952
- return /* @__PURE__ */ jsx34(
2950
+ hasCategoryFilters && /*
2951
+ * Multi-select category chips — spec calls for "Filter and
2952
+ * Order menus (like in Blog)" but multi-select is the more
2953
+ * useful behaviour for an asset picker (lets the user see
2954
+ * stables + RWA together while comparing) and chips are
2955
+ * more discoverable than a dropdown for 3 short labels.
2956
+ * Restyle the chips to read as borderless pills consistent
2957
+ * with the rest of the modal, and add a small "Clear"
2958
+ * affordance when at least one chip is off so the user
2959
+ * can return to "all" without toggling each one.
2960
+ */
2961
+ /* @__PURE__ */ jsxs22("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
2962
+ categories.map((category) => {
2963
+ const isActive = activeCategories.includes(category.id);
2964
+ return /* @__PURE__ */ jsx34(
2965
+ "button",
2966
+ {
2967
+ type: "button",
2968
+ onClick: () => setActiveCategories(
2969
+ (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
2970
+ ),
2971
+ className: cn(
2972
+ "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
2973
+ isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
2974
+ ),
2975
+ children: category.label
2976
+ },
2977
+ category.id
2978
+ );
2979
+ }),
2980
+ activeCategories.length !== categories.length && /* @__PURE__ */ jsx34(
2953
2981
  "button",
2954
2982
  {
2955
2983
  type: "button",
2956
- onClick: () => setActiveCategories(
2957
- (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
2958
- ),
2959
- className: cn(
2960
- "rounded-full border px-3 py-1 text-xxs font-bold uppercase tracking-eyebrow transition-colors",
2961
- isActive ? "border-primary/35 bg-primary/[0.14] text-primary" : "border-border bg-white/[0.03] text-white/40 hover:border-white/20 hover:text-white/65"
2962
- ),
2963
- children: category.label
2964
- },
2965
- category.id
2966
- );
2967
- }) })
2984
+ onClick: () => setActiveCategories(categories.map((category) => category.id)),
2985
+ className: "ml-auto rounded-full px-2 py-1 text-tiny font-bold uppercase tracking-wide text-white/40 transition-colors hover:text-white/75",
2986
+ children: "All"
2987
+ }
2988
+ )
2989
+ ] })
2968
2990
  ] }),
2969
2991
  /* @__PURE__ */ jsx34(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
2970
2992
  /* @__PURE__ */ jsx34(Icon2, { name: "search", size: "md", className: "opacity-40" }),
@@ -2998,34 +3020,29 @@ function AssetSelector({
2998
3020
  {
2999
3021
  ticker: option.ticker,
3000
3022
  logoUri: option.icon,
3001
- size: 32,
3023
+ size: 38,
3002
3024
  className: cn(
3003
- "transition-transform duration-200",
3025
+ "shrink-0 transition-transform duration-200",
3004
3026
  !isDisabled && "group-hover:scale-[1.04]"
3005
3027
  )
3006
3028
  }
3007
3029
  ),
3008
- /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-1 text-left", children: [
3009
- /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between gap-2 font-semibold text-white", children: [
3010
- /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 items-center gap-1.5", children: [
3011
- /* @__PURE__ */ jsx34("span", { children: option.ticker }),
3012
- option.network && /* @__PURE__ */ jsx34(
3013
- NetworkBadge,
3014
- {
3015
- network: option.network,
3016
- showLabel: true,
3017
- className: "py-[1px]"
3018
- }
3019
- )
3020
- ] }),
3021
- isSelected && /* @__PURE__ */ jsx34("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" })
3030
+ /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
3031
+ /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex flex-col leading-tight", children: [
3032
+ /* @__PURE__ */ jsx34("span", { className: "truncate text-base font-bold tracking-wide text-white", children: option.name ?? option.ticker }),
3033
+ option.network && /* @__PURE__ */ jsx34("span", { className: "mt-1", children: /* @__PURE__ */ jsx34(
3034
+ NetworkBadge,
3035
+ {
3036
+ network: option.network,
3037
+ showLabel: true,
3038
+ size: "sm",
3039
+ className: "py-[1px]"
3040
+ }
3041
+ ) })
3022
3042
  ] }),
3023
- /* @__PURE__ */ jsxs22("div", { className: "mt-0.5 flex items-center justify-between gap-3", children: [
3024
- /* @__PURE__ */ jsx34("div", { className: "truncate text-xs text-white/35", children: option.name ?? option.ticker }),
3025
- /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
3026
- optionCategoryLabel && /* @__PURE__ */ jsx34("span", { className: "rounded-full border border-border-default bg-surface-overlay px-2 py-0.5 text-xxs font-semibold uppercase tracking-eyebrow text-text-dimmed", children: optionCategoryLabel }),
3027
- isDisabled && /* @__PURE__ */ jsx34("span", { className: "text-xxs font-medium uppercase tracking-wide text-white/25", children: "In use" })
3028
- ] })
3043
+ /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
3044
+ isSelected ? /* @__PURE__ */ jsx34("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : optionCategoryLabel && /* @__PURE__ */ jsx34("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
3045
+ /* @__PURE__ */ jsx34("span", { className: "text-tiny font-medium uppercase tracking-wide text-white/35", children: isDisabled ? "In use" : option.ticker })
3029
3046
  ] })
3030
3047
  ] })
3031
3048
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.25",
3
+ "version": "0.1.26",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",