@nattstack/ui 0.0.66 → 0.0.67

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 +54 -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_checkbox_tQ0i7W[data-checked] > .checkbox-module_indicator_tQ0i7W {
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.66",
3
+ "version": "0.0.67",
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
  }