@nattstack/ui 0.0.39 → 0.0.41

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/components/index.d.ts +9 -11
  2. package/dist/components/index.js +14 -15
  3. package/dist/components/style.css +9 -4
  4. package/package.json +1 -1
package/dist/components/index.d.ts CHANGED
@@ -126,21 +126,19 @@ declare const LABEL_CLASS_NAME: {
126
126
  readonly BASE: string;
127
127
  };
128
128
  //#endregion
129
- //#region src/components/passcode/passcode.d.ts
130
- interface PasscodeProps extends Omit<OTPFieldPreview.Root.Props, "disabled"> {
129
+ //#region src/components/otp-field/otp-field.d.ts
130
+ interface OTPFieldProps extends Omit<OTPFieldPreview.Root.Props, "disabled"> {
131
131
  isDisabled?: OTPFieldPreview.Root.Props["disabled"];
132
132
  }
133
- declare function Passcode(props: PasscodeProps): JSX.Element;
134
- declare const PASSCODE_CLASS_NAME: {
133
+ declare function OTPField(props: OTPFieldProps): JSX.Element;
134
+ declare const OTP_FIELD_CLASS_NAME: {
135
135
  readonly BASE: string;
136
136
  };
137
137
  //#endregion
138
- //#region src/components/passcode/passcode-input.d.ts
139
- interface PasscodeInputProps extends Omit<OTPFieldPreview.Input.Props, "disabled"> {
140
- isDisabled?: OTPFieldPreview.Input.Props["disabled"];
141
- }
142
- declare function PasscodeInput(props: PasscodeInputProps): JSX.Element;
143
- declare const PASSCODE_INPUT_CLASS_NAME: {
138
+ //#region src/components/otp-field/otp-field-input.d.ts
139
+ interface OTPFieldInputProps extends OTPFieldPreview.Input.Props {}
140
+ declare function OTPFieldInput(props: OTPFieldInputProps): JSX.Element;
141
+ declare const OTP_FIELD_INPUT_CLASS_NAME: {
144
142
  readonly BASE: string;
145
143
  };
146
144
  //#endregion
@@ -293,4 +291,4 @@ declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
293
291
  interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
294
292
  declare function TooltipTrigger(props: TooltipTriggerProps): JSX.Element;
295
293
  //#endregion
296
- export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, PASSCODE_CLASS_NAME, PASSCODE_INPUT_CLASS_NAME, Passcode, PasscodeInput, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps };
294
+ export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps };
package/dist/components/index.js CHANGED
@@ -316,14 +316,14 @@ function Label(props) {
316
316
  }
317
317
  const LABEL_CLASS_NAME = { BASE: label_module_default.label };
318
318
  //#endregion
319
- //#region src/components/passcode/passcode.module.css
320
- var passcode_module_default = { "passcode": "passcode-module_passcode_7_gTQW" };
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" };
321
321
  //#endregion
322
- //#region src/components/passcode/passcode.tsx
323
- function Passcode(props) {
322
+ //#region src/components/otp-field/otp-field.tsx
323
+ function OTPField(props) {
324
324
  const { className: customClassName = "", isDisabled = false, ...rest } = props;
325
325
  const combinedClassName = normalizeWhitespace(`
326
- ${PASSCODE_CLASS_NAME.BASE}
326
+ ${OTP_FIELD_CLASS_NAME.BASE}
327
327
  ${customClassName}
328
328
  `);
329
329
  return /* @__PURE__ */ jsx(OTPFieldPreview.Root, {
@@ -332,25 +332,24 @@ function Passcode(props) {
332
332
  ...rest
333
333
  });
334
334
  }
335
- const PASSCODE_CLASS_NAME = { BASE: passcode_module_default.passcode };
335
+ const OTP_FIELD_CLASS_NAME = { BASE: otp_field_module_default.otp_field };
336
336
  //#endregion
337
- //#region src/components/passcode/passcode-input.module.css
338
- var passcode_input_module_default = { "passcode_input": "passcode-input-module_passcode_input_CHGhjq" };
337
+ //#region src/components/otp-field/otp-field-input.module.css
338
+ var otp_field_input_module_default = { "otp_field_input": "otp-field-input-module_otp_field_input_58X00q" };
339
339
  //#endregion
340
- //#region src/components/passcode/passcode-input.tsx
341
- function PasscodeInput(props) {
342
- const { className: customClassName = "", isDisabled = false, ...rest } = props;
340
+ //#region src/components/otp-field/otp-field-input.tsx
341
+ function OTPFieldInput(props) {
342
+ const { className: customClassName = "", ...rest } = props;
343
343
  const combinedClassName = normalizeWhitespace(`
344
- ${PASSCODE_INPUT_CLASS_NAME.BASE}
344
+ ${OTP_FIELD_INPUT_CLASS_NAME.BASE}
345
345
  ${customClassName}
346
346
  `);
347
347
  return /* @__PURE__ */ jsx(OTPFieldPreview.Input, {
348
348
  className: combinedClassName,
349
- disabled: isDisabled,
350
349
  ...rest
351
350
  });
352
351
  }
353
- const PASSCODE_INPUT_CLASS_NAME = { BASE: passcode_input_module_default.passcode_input };
352
+ const OTP_FIELD_INPUT_CLASS_NAME = { BASE: otp_field_input_module_default.otp_field_input };
354
353
  //#endregion
355
354
  //#region src/components/row/row.module.css
356
355
  var row_module_default = { "row": "row-module_row_sYCFIW" };
@@ -739,4 +738,4 @@ function TooltipTrigger(props) {
739
738
  });
740
739
  }
741
740
  //#endregion
742
- export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, PASSCODE_CLASS_NAME, PASSCODE_INPUT_CLASS_NAME, Passcode, PasscodeInput, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
741
+ export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
package/dist/components/style.css CHANGED
@@ -434,15 +434,16 @@
434
434
  width: fit-content;
435
435
  font-size: 14px;
436
436
  }
437
- .passcode-module_passcode_7_gTQW {
437
+ .otp-field-module_otp_field_l-Sakq {
438
438
  flex-wrap: wrap;
439
439
  justify-content: center;
440
440
  gap: 8px;
441
441
  width: fit-content;
442
442
  display: flex;
443
443
  }
444
- .passcode-input-module_passcode_input_CHGhjq {
444
+ .otp-field-input-module_otp_field_input_58X00q {
445
445
  background-color: var(--color-gray-3);
446
+ box-shadow: 0 0 0 1px var(--color-border) inset;
446
447
  color: var(--color-text-primary);
447
448
  font-family: var(--font-body);
448
449
  outline-color: var(--color-outline);
@@ -459,12 +460,16 @@
459
460
  transition-duration: .15s;
460
461
  }
461
462
 
462
- .passcode-input-module_passcode_input_CHGhjq:disabled {
463
+ .otp-field-input-module_otp_field_input_58X00q:enabled:hover {
464
+ box-shadow: 0 0 0 1px var(--color-gray-6) inset;
465
+ }
466
+
467
+ .otp-field-input-module_otp_field_input_58X00q:disabled {
463
468
  cursor: not-allowed;
464
469
  opacity: .5;
465
470
  }
466
471
 
467
- .passcode-input-module_passcode_input_CHGhjq:focus-visible {
472
+ .otp-field-input-module_otp_field_input_58X00q:focus-visible {
468
473
  outline-width: 2px;
469
474
  }
470
475
  .row-module_row_sYCFIW {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.39",
3
+ "version": "0.0.41",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",