@nattstack/ui 0.0.66 → 0.0.68

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 +19 -3
  2. package/dist/components/index.js +47 -2
  3. package/dist/components/style.css +57 -1
  4. package/package.json +4 -4
package/dist/components/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CSSProperties, ComponentProps, ElementType, JSX, ReactNode } from "react";
2
- import { Drawer, Menu as Menu$1, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
2
+ import { Checkbox as Checkbox$1, Drawer, Menu as Menu$1, 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 {
@@ -53,12 +53,28 @@ declare const BUTTON_CLASS_NAME: {
53
53
  };
54
54
  //#endregion
55
55
  //#region src/components/button-link/button-link.d.ts
56
- type ButtonLinkProps<ComponentType extends ElementType = "a"> = ButtonLinkInternalProps<ComponentType> & Omit<ComponentProps<ComponentType>, keyof ButtonLinkInternalProps<ComponentType>>;
56
+ type ButtonLinkProps<ComponentType extends ElementType = "a"> = ButtonLinkHrefProps<ComponentType> & ButtonLinkInternalProps<ComponentType> & Omit<ComponentProps<ComponentType>, "href" | keyof ButtonLinkInternalProps<ComponentType>>;
57
+ type ButtonLinkHrefProps<ComponentType extends ElementType> = ComponentProps<ComponentType> extends {
58
+ href: infer Href;
59
+ } ? {
60
+ href: Href | string;
61
+ } : ComponentProps<ComponentType> extends {
62
+ href?: infer Href;
63
+ } ? {
64
+ href?: Href | string;
65
+ } : unknown;
57
66
  interface ButtonLinkInternalProps<ComponentType extends ElementType> extends Pick<ButtonProps, "isFullWidth" | "isIconOnly" | "isRounded" | "size" | "variant"> {
58
67
  as?: ComponentType;
59
68
  }
60
69
  declare function ButtonLink<ComponentType extends ElementType = "a">(props: ButtonLinkProps<ComponentType>): JSX.Element;
61
70
  //#endregion
71
+ //#region src/components/checkbox/checkbox.d.ts
72
+ interface CheckboxProps extends ComponentProps<typeof Checkbox$1.Root> {}
73
+ declare function Checkbox(props: CheckboxProps): JSX.Element;
74
+ declare const CHECKBOX_CLASS_NAME: {
75
+ readonly BASE: string;
76
+ };
77
+ //#endregion
62
78
  //#region src/components/column/column.d.ts
63
79
  type ColumnProps<ComponentType extends ElementType = "div"> = ColumnInternalProps & ComponentProps<ComponentType>;
64
80
  interface ColumnInternalProps {
@@ -414,4 +430,4 @@ declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
414
430
  interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
415
431
  declare function TooltipTrigger(props: TooltipTriggerProps): JSX.Element;
416
432
  //#endregion
417
- 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, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, MenuViewport, MenuViewportProps, 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_POPUP_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipPopup, TooltipPopupProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, createMenuHandle };
433
+ export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, CHECKBOX_CLASS_NAME, COLUMN_CLASS_NAME, Checkbox, CheckboxProps, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, MenuViewport, MenuViewportProps, 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_POPUP_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipPopup, TooltipPopupProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, createMenuHandle };
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, Menu as Menu$1, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
4
+ import { Checkbox as Checkbox$1, Drawer, Menu as Menu$1, 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
@@ -115,6 +115,51 @@ function ButtonLink(props) {
115
115
  });
116
116
  }
117
117
  //#endregion
118
+ //#region src/components/checkbox/checkbox-icon.tsx
119
+ function CheckboxIcon(props) {
120
+ const { ...rest } = props;
121
+ return /* @__PURE__ */ jsx("svg", {
122
+ fill: "none",
123
+ height: "24",
124
+ viewBox: "0 0 24 24",
125
+ width: "24",
126
+ xmlns: "http://www.w3.org/2000/svg",
127
+ ...rest,
128
+ children: /* @__PURE__ */ jsx("path", {
129
+ d: "M5 13.875L9.2 18L19 7",
130
+ stroke: "black",
131
+ strokeLinecap: "round",
132
+ strokeLinejoin: "round",
133
+ strokeWidth: "1.5"
134
+ })
135
+ });
136
+ }
137
+ //#endregion
138
+ //#region src/components/checkbox/checkbox.module.css
139
+ var checkbox_module_default = {
140
+ "checkbox": "checkbox-module_checkbox_tQ0i7W",
141
+ "icon": "checkbox-module_icon_tQ0i7W",
142
+ "indicator": "checkbox-module_indicator_tQ0i7W"
143
+ };
144
+ //#endregion
145
+ //#region src/components/checkbox/checkbox.tsx
146
+ function Checkbox(props) {
147
+ const { children = void 0, className: customClassName = "", ...rest } = props;
148
+ const combinedClassName = normalizeWhitespace(`
149
+ ${CHECKBOX_CLASS_NAME.BASE}
150
+ ${customClassName}
151
+ `);
152
+ return /* @__PURE__ */ jsx(Checkbox$1.Root, {
153
+ className: combinedClassName,
154
+ ...rest,
155
+ children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
156
+ className: checkbox_module_default.indicator,
157
+ children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: checkbox_module_default.icon })
158
+ })
159
+ });
160
+ }
161
+ const CHECKBOX_CLASS_NAME = { BASE: checkbox_module_default.checkbox };
162
+ //#endregion
118
163
  //#region src/components/column/column.module.css
119
164
  var column_module_default = { "column": "column-module_column_CgFaGG" };
120
165
  //#endregion
@@ -1033,4 +1078,4 @@ function TooltipTrigger(props) {
1033
1078
  });
1034
1079
  }
1035
1080
  //#endregion
1036
- 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, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MenuViewport, 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_POPUP_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createMenuHandle };
1081
+ export { BUTTON_CLASS_NAME, Button, ButtonLink, CHECKBOX_CLASS_NAME, COLUMN_CLASS_NAME, Checkbox, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MenuViewport, 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_POPUP_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createMenuHandle };
package/dist/components/style.css CHANGED
@@ -221,6 +221,59 @@
221
221
  .button-module_button__width_full_4nLWdW {
222
222
  width: 100%;
223
223
  }
224
+ .checkbox-module_checkbox_tQ0i7W {
225
+ --size: 16px;
226
+ background-color: var(--color-bg-shell-inner);
227
+ border: 1px solid var(--color-border);
228
+ cursor: pointer;
229
+ height: var(--size);
230
+ outline-color: var(--color-primary);
231
+ outline-offset: 2px;
232
+ width: var(--size);
233
+ border-radius: 4px;
234
+ outline-width: 0;
235
+ outline-style: solid;
236
+ justify-content: center;
237
+ align-items: center;
238
+ transition-property: background-color, border-color;
239
+ transition-duration: .15s;
240
+ display: flex;
241
+ }
242
+
243
+ .checkbox-module_checkbox_tQ0i7W:focus-visible {
244
+ outline-width: 2px;
245
+ }
246
+
247
+ .checkbox-module_checkbox_tQ0i7W:hover {
248
+ background-color: var(--color-gray-3);
249
+ border-color: var(--color-gray-6);
250
+ }
251
+
252
+ .checkbox-module_checkbox_tQ0i7W[data-checked] {
253
+ background-color: var(--color-primary);
254
+ border-color: #0000;
255
+ }
256
+
257
+ .checkbox-module_indicator_tQ0i7W {
258
+ opacity: 0;
259
+ transition-property: opacity;
260
+ transition-duration: .15s;
261
+ }
262
+
263
+ .checkbox-module_indicator_tQ0i7W[data-checked] {
264
+ opacity: 1;
265
+ }
266
+
267
+ .checkbox-module_icon_tQ0i7W {
268
+ --size: 12px;
269
+ height: var(--size);
270
+ width: var(--size);
271
+
272
+ & > path {
273
+ stroke-width: 3px;
274
+ stroke: #fff;
275
+ }
276
+ }
224
277
  .column-module_column_CgFaGG {
225
278
  flex-direction: column;
226
279
  display: flex;
@@ -490,7 +543,7 @@
490
543
  }
491
544
 
492
545
  .menu-module_menu_content_7pJHya {
493
- background-color: var(--color-bg-primary);
546
+ background-color: var(--color-bg-shell-inner);
494
547
  box-shadow: 0 0 0 1px var(--color-border) inset,
495
548
  0 16px 32px oklab(0% none none / .16);
496
549
  color: var(--color-text-primary);
@@ -760,6 +813,7 @@
760
813
  cursor: pointer;
761
814
  outline-color: var(--color-primary-9);
762
815
  outline-offset: -4px;
816
+ white-space: nowrap;
763
817
  outline-width: 0;
764
818
  outline-style: solid;
765
819
  flex-shrink: 0;
@@ -845,6 +899,7 @@
845
899
  cursor: pointer;
846
900
  outline-color: var(--color-primary-9);
847
901
  outline-offset: -4px;
902
+ white-space: nowrap;
848
903
  border-radius: 10px;
849
904
  outline-width: 0;
850
905
  outline-style: solid;
@@ -897,6 +952,7 @@
897
952
  cursor: pointer;
898
953
  outline-color: var(--color-primary-9);
899
954
  outline-offset: -2px;
955
+ white-space: nowrap;
900
956
  border-radius: 8px;
901
957
  outline-width: 0;
902
958
  outline-style: solid;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.66",
3
+ "version": "0.0.68",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",
@@ -54,8 +54,8 @@
54
54
  "typescript": "6.0.3"
55
55
  },
56
56
  "peerDependencies": {
57
- "@types/react": "^19.2.15",
58
- "react": "^19.2.6",
59
- "react-dom": "^19.2.6"
57
+ "@types/react": "^19.2.16",
58
+ "react": "^19.2.7",
59
+ "react-dom": "^19.2.7"
60
60
  }
61
61
  }