@nattstack/ui 0.0.34 → 0.0.35

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.
@@ -1,5 +1,5 @@
1
1
  import { CSSProperties, ComponentProps, ElementType, JSX, ReactNode } from "react";
2
- import { Drawer, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
2
+ import { Drawer, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
3
3
 
4
4
  //#region src/components/button/button.d.ts
5
5
  interface ButtonIconProps extends ButtonInternalProps {
@@ -126,6 +126,24 @@ declare const LABEL_CLASS_NAME: {
126
126
  readonly BASE: string;
127
127
  };
128
128
  //#endregion
129
+ //#region src/components/otp/otp.d.ts
130
+ interface OtpProps extends Omit<OTPFieldPreview.Root.Props, "disabled"> {
131
+ isDisabled?: OTPFieldPreview.Root.Props["disabled"];
132
+ }
133
+ declare function Otp(props: OtpProps): JSX.Element;
134
+ declare const OTP_CLASS_NAME: {
135
+ readonly BASE: string;
136
+ };
137
+ //#endregion
138
+ //#region src/components/otp/otp-input.d.ts
139
+ interface OtpInputProps extends Omit<OTPFieldPreview.Input.Props, "disabled"> {
140
+ isDisabled?: OTPFieldPreview.Input.Props["disabled"];
141
+ }
142
+ declare function OtpInput(props: OtpInputProps): JSX.Element;
143
+ declare const OTP_INPUT_CLASS_NAME: {
144
+ readonly BASE: string;
145
+ };
146
+ //#endregion
129
147
  //#region src/components/row/row.d.ts
130
148
  type RowProps<ComponentType extends ElementType = "div"> = ComponentProps<ComponentType> & RowInternalProps;
131
149
  interface RowInternalProps {
@@ -275,4 +293,4 @@ declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
275
293
  interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
276
294
  declare function TooltipTrigger(props: TooltipTriggerProps): JSX.Element;
277
295
  //#endregion
278
- 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, 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 };
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, OTP_CLASS_NAME, OTP_INPUT_CLASS_NAME, Otp, OtpInput, 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 };
@@ -1,7 +1,7 @@
1
1
  import './style.css';
2
2
  import { createElement } from "react";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
- import { Drawer, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
4
+ import { Drawer, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
5
5
  //#region src/utils/normalize-whitespace.ts
6
6
  /**
7
7
  * Collapses consecutive whitespace characters into single spaces and trims
@@ -316,6 +316,42 @@ function Label(props) {
316
316
  }
317
317
  const LABEL_CLASS_NAME = { BASE: label_module_default.label };
318
318
  //#endregion
319
+ //#region src/components/otp/otp.module.css
320
+ var otp_module_default = { "otp": "otp-module_otp_GDMgwa" };
321
+ //#endregion
322
+ //#region src/components/otp/otp.tsx
323
+ function Otp(props) {
324
+ const { className: customClassName = "", isDisabled = false, ...rest } = props;
325
+ const combinedClassName = normalizeWhitespace(`
326
+ ${OTP_CLASS_NAME.BASE}
327
+ ${customClassName}
328
+ `);
329
+ return /* @__PURE__ */ jsx(OTPFieldPreview.Root, {
330
+ className: combinedClassName,
331
+ disabled: isDisabled,
332
+ ...rest
333
+ });
334
+ }
335
+ const OTP_CLASS_NAME = { BASE: otp_module_default.otp };
336
+ //#endregion
337
+ //#region src/components/otp/otp-input.module.css
338
+ var otp_input_module_default = { "otp_input": "otp-input-module_otp_input_-VweWG" };
339
+ //#endregion
340
+ //#region src/components/otp/otp-input.tsx
341
+ function OtpInput(props) {
342
+ const { className: customClassName = "", isDisabled = false, ...rest } = props;
343
+ const combinedClassName = normalizeWhitespace(`
344
+ ${OTP_INPUT_CLASS_NAME.BASE}
345
+ ${customClassName}
346
+ `);
347
+ return /* @__PURE__ */ jsx(OTPFieldPreview.Input, {
348
+ className: combinedClassName,
349
+ disabled: isDisabled,
350
+ ...rest
351
+ });
352
+ }
353
+ const OTP_INPUT_CLASS_NAME = { BASE: otp_input_module_default.otp_input };
354
+ //#endregion
319
355
  //#region src/components/row/row.module.css
320
356
  var row_module_default = { "row": "row-module_row_sYCFIW" };
321
357
  //#endregion
@@ -703,4 +739,4 @@ function TooltipTrigger(props) {
703
739
  });
704
740
  }
705
741
  //#endregion
706
- 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, 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 };
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, OTP_CLASS_NAME, OTP_INPUT_CLASS_NAME, Otp, OtpInput, 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 };
@@ -434,6 +434,42 @@
434
434
  width: fit-content;
435
435
  font-size: 14px;
436
436
  }
437
+ .otp-module_otp_GDMgwa {
438
+ flex-wrap: wrap;
439
+ justify-content: center;
440
+ gap: 8px;
441
+ width: fit-content;
442
+ display: flex;
443
+ }
444
+ .otp-input-module_otp_input_-VweWG {
445
+ background-color: var(--color-bg-primary);
446
+ box-shadow: 0 0 0 1px var(--color-border) inset;
447
+ color: var(--color-text-primary);
448
+ outline-color: var(--color-outline);
449
+ outline-offset: -2px;
450
+ text-align: center;
451
+ border-radius: 14px;
452
+ outline-width: 0;
453
+ outline-style: solid;
454
+ width: 40px;
455
+ height: 48px;
456
+ font-size: 14px;
457
+ transition-property: box-shadow;
458
+ transition-duration: .15s;
459
+ }
460
+
461
+ .otp-input-module_otp_input_-VweWG:enabled:hover {
462
+ --color-border: var(--color-gray-6);
463
+ }
464
+
465
+ .otp-input-module_otp_input_-VweWG:disabled {
466
+ cursor: not-allowed;
467
+ opacity: .5;
468
+ }
469
+
470
+ .otp-input-module_otp_input_-VweWG:focus-visible {
471
+ outline-width: 2px;
472
+ }
437
473
  .row-module_row_sYCFIW {
438
474
  flex-direction: row;
439
475
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.34",
3
+ "version": "0.0.35",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",
@@ -41,17 +41,17 @@
41
41
  "build": "tsdown",
42
42
  "check:type": "tsc",
43
43
  "dev": "tsdown --watch",
44
- "prepublishOnly": "bun run build",
44
+ "prepublishOnly": "bun install && bun run check:type && bun run build",
45
45
  "release": "bun publish"
46
46
  },
47
47
  "dependencies": {
48
48
  "@base-ui/react": "1.4.0"
49
49
  },
50
50
  "devDependencies": {
51
- "@tsdown/css": "0.21.8",
51
+ "@tsdown/css": "0.21.9",
52
52
  "@types/bun": "1.3.12",
53
- "tsdown": "0.21.8",
54
- "typescript": "6.0.2"
53
+ "tsdown": "0.21.9",
54
+ "typescript": "6.0.3"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@types/react": "^18 || ^19",