@nattstack/ui 0.0.33 → 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.
- package/dist/components/index.d.ts +20 -2
- package/dist/components/index.js +38 -2
- package/dist/components/style.css +36 -0
- package/package.json +5 -5
|
@@ -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 };
|
package/dist/components/index.js
CHANGED
|
@@ -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.
|
|
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.
|
|
51
|
+
"@tsdown/css": "0.21.9",
|
|
52
52
|
"@types/bun": "1.3.12",
|
|
53
|
-
"tsdown": "0.21.
|
|
54
|
-
"typescript": "6.0.
|
|
53
|
+
"tsdown": "0.21.9",
|
|
54
|
+
"typescript": "6.0.3"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"@types/react": "^18 || ^19",
|