@cosxai/ui 0.4.1 → 0.4.2
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.
- package/package.json +1 -1
- package/src/primitives/Input.tsx +8 -0
- package/src/styles/index.css +24 -0
package/package.json
CHANGED
package/src/primitives/Input.tsx
CHANGED
|
@@ -98,6 +98,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
|
|
98
98
|
flexDirection: "column",
|
|
99
99
|
gap: 6,
|
|
100
100
|
width: fit === "full" ? "100%" : undefined,
|
|
101
|
+
// minWidth: 0 lets a parent flex container shrink this
|
|
102
|
+
// wrapper past the inner addon-wrap's nowrap suffix content.
|
|
103
|
+
// Without it, a long suffix (e.g. ".meta.test.cosx.dev")
|
|
104
|
+
// sets a min-content floor that pushes the form wider than
|
|
105
|
+
// its mobile viewport. Per-page CSS workarounds in consumer
|
|
106
|
+
// apps only cover their own scope; fixing it at the primitive
|
|
107
|
+
// catches every page.
|
|
108
|
+
minWidth: 0,
|
|
101
109
|
}}
|
|
102
110
|
>
|
|
103
111
|
{label && (
|
package/src/styles/index.css
CHANGED
|
@@ -117,6 +117,30 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
|
|
|
117
117
|
color: var(--ck-text-tertiary);
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
+
/* ---------- Input + Textarea disabled state ----------
|
|
121
|
+
Native :disabled styling is barely perceptible on a cream / dark
|
|
122
|
+
surface, which made disabled fields read as editable in
|
|
123
|
+
product-meta's settings (the email field in particular). Match
|
|
124
|
+
the .ck-btn:disabled treatment so consumers don't have to
|
|
125
|
+
reapply the same opacity / cursor pattern at every call site.
|
|
126
|
+
|
|
127
|
+
The addon-wrap variant uses :has(:disabled) so a wrapping
|
|
128
|
+
.ck-input-addon-wrap also dims when its inner <input> is disabled
|
|
129
|
+
— otherwise the slug input dims but its ".meta.test.cosx.dev"
|
|
130
|
+
suffix stays at full opacity, which looks broken. :has() is
|
|
131
|
+
supported across all evergreen browsers since 2023; pre-1.0 we
|
|
132
|
+
don't need a polyfill. */
|
|
133
|
+
.ck-input:disabled,
|
|
134
|
+
.ck-textarea:disabled,
|
|
135
|
+
.ck-input-addon-wrap:has(:disabled) {
|
|
136
|
+
opacity: 0.55;
|
|
137
|
+
cursor: not-allowed;
|
|
138
|
+
}
|
|
139
|
+
.ck-input:disabled,
|
|
140
|
+
.ck-textarea:disabled {
|
|
141
|
+
background: var(--ck-bg-muted, var(--ck-bg-surface));
|
|
142
|
+
}
|
|
143
|
+
|
|
120
144
|
/* ---------- Select (custom listbox — never native <select>) ----------
|
|
121
145
|
The trigger LOOKS like .ck-input so chrome restyles cascade
|
|
122
146
|
uniformly. Chromes that want a different vibe (terminal squared,
|