@nattstack/ui 0.0.42 → 0.0.44

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.
@@ -16,11 +16,14 @@
16
16
  - Prevent automatic text resizing
17
17
  - Match native UI to the active color scheme
18
18
  - Disable extra gestures such as double-tap to zoom
19
+ - Set scrollbar color and width
19
20
  */
20
21
  html {
21
22
  -moz-text-size-adjust: none;
22
23
  -webkit-text-size-adjust: none;
23
24
  color-scheme: light dark;
25
+ scrollbar-color: var(--color-gray-6) transparent;
26
+ scrollbar-width: thin;
24
27
  text-size-adjust: none;
25
28
  touch-action: manipulation;
26
29
  }
@@ -134,6 +134,7 @@ interface OTPFieldProps extends Omit<OTPFieldPreview.Root.Props, "disabled"> {
134
134
  declare function OTPField(props: OTPFieldProps): JSX.Element;
135
135
  declare const OTP_FIELD_CLASS_NAME: {
136
136
  readonly BASE: string;
137
+ readonly MASKED: string;
137
138
  };
138
139
  //#endregion
139
140
  //#region src/components/otp-field/otp-field-input.d.ts
@@ -317,13 +317,17 @@ function Label(props) {
317
317
  const LABEL_CLASS_NAME = { BASE: label_module_default.label };
318
318
  //#endregion
319
319
  //#region src/components/otp-field/otp-field.module.css
320
- var otp_field_module_default = { "otp_field": "otp-field-module_otp_field_l-Sakq" };
320
+ var otp_field_module_default = {
321
+ "otp_field": "otp-field-module_otp_field_l-Sakq",
322
+ "otp_field__masked": "otp-field-module_otp_field__masked_l-Sakq"
323
+ };
321
324
  //#endregion
322
325
  //#region src/components/otp-field/otp-field.tsx
323
326
  function OTPField(props) {
324
327
  const { className: customClassName = "", isDisabled = false, isMasked = false, ...rest } = props;
325
328
  const combinedClassName = normalizeWhitespace(`
326
329
  ${OTP_FIELD_CLASS_NAME.BASE}
330
+ ${isMasked ? OTP_FIELD_CLASS_NAME.MASKED : ""}
327
331
  ${customClassName}
328
332
  `);
329
333
  return /* @__PURE__ */ jsx(OTPFieldPreview.Root, {
@@ -333,7 +337,10 @@ function OTPField(props) {
333
337
  ...rest
334
338
  });
335
339
  }
336
- const OTP_FIELD_CLASS_NAME = { BASE: otp_field_module_default.otp_field };
340
+ const OTP_FIELD_CLASS_NAME = {
341
+ BASE: otp_field_module_default.otp_field,
342
+ MASKED: otp_field_module_default.otp_field__masked
343
+ };
337
344
  //#endregion
338
345
  //#region src/components/otp-field/otp-field-input.module.css
339
346
  var otp_field_input_module_default = { "otp_field_input": "otp-field-input-module_otp_field_input_58X00q" };
@@ -441,6 +441,10 @@
441
441
  width: fit-content;
442
442
  display: flex;
443
443
  }
444
+
445
+ .otp-field-module_otp_field__masked_l-Sakq > input {
446
+ font-family: var(--font-code);
447
+ }
444
448
  .otp-field-input-module_otp_field_input_58X00q {
445
449
  background-color: var(--color-gray-3);
446
450
  box-shadow: 0 0 0 1px var(--color-border) inset;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.42",
3
+ "version": "0.0.44",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",