@nattstack/ui 0.0.3 → 0.0.5

package/dist/colors/root.css

@@ -1,10 +1,4 @@
 :root {
-  /* =================================================== */
-  /* White & Black
-  /* =================================================== */
-  --color-white: rgba(255, 255, 255, 1);
-  --color-black: rgba(0, 0, 0, 1);
-
   /* =================================================== */
   /* Gray */
   /* =================================================== */

package/dist/components/{button.module-EYMY7VLZ.module.css → button.module-D3HOTJS3.module.css}

@@ -20,7 +20,7 @@
   outline-width: 0px;
   overflow: hidden;
   transition-duration: 150ms;
-  transition-property: background-color, box-shadow, opacity, translate;
+  transition-property: background-color, opacity, translate;
   user-select: none;
 }
 
@@ -105,7 +105,7 @@
 /* ===================================================== */
 /* Accent */
 .button__variant_accent {
-  color: var(--color-white);
+  color: white;
   background-color: var(--color-primary-9);
   background-image: linear-gradient(
     to bottom,
@@ -130,7 +130,7 @@
 
 /* Ghost */
 .button__variant_ghost {
-  color: var(--color-black);
+  color: black;
   background-color: transparent;
 }
 
@@ -141,12 +141,12 @@
 }
 
 :global(.dark) .button__variant_ghost {
-  color: var(--color-white);
+  color: white;
 }
 
 /* Primary */
 .button__variant_primary {
-  color: var(--color-white);
+  color: white;
   background-color: var(--color-gray-dark-1);
   background-image: linear-gradient(
     to bottom,
@@ -162,7 +162,7 @@
 }
 
 :global(.dark) .button__variant_primary {
-  color: var(--color-black);
+  color: black;
   background-color: var(--color-gray-light-1);
   background-image: linear-gradient(
     to bottom,
@@ -179,7 +179,7 @@
 
 /* Secondary */
 .button__variant_secondary {
-  color: var(--color-black);
+  color: black;
   background-color: var(--color-gray-2);
   background-image: linear-gradient(
     to bottom,
@@ -196,7 +196,7 @@
 }
 
 :global(.dark) .button__variant_secondary {
-  color: var(--color-white);
+  color: white;
   background-image: linear-gradient(
     to bottom,
     color-mix(in oklab, transparent 100%, #ffffff 1%) 50%,

package/dist/components/index.d.ts

@@ -244,11 +244,12 @@ declare const TEXTAREA_CLASS_NAME: {
     };
 };
 
-interface TooltipProps extends Tooltip$1.Root.Props {
+interface TooltipProps extends Omit<Tooltip$1.Root.Props, "disabled"> {
+    isDisabled?: Tooltip$1.Root.Props["disabled"];
 }
 declare function Tooltip(props: TooltipProps): JSX.Element;
 
-interface TooltipContentProps extends Pick<Tooltip$1.Positioner.Props, "side">, Tooltip$1.Popup.Props {
+interface TooltipContentProps extends Pick<Tooltip$1.Positioner.Props, "side" | "sideOffset">, Tooltip$1.Popup.Props {
 }
 declare function TooltipContent(props: TooltipContentProps): JSX.Element;
 declare const TOOLTIP_CONTENT_CLASS_NAME: {

package/dist/components/index.js

@@ -15,7 +15,7 @@ function normalizeWhitespace(value) {
 }
 
 // src/components/button/button.tsx
-import styles2 from "./button.module-EYMY7VLZ.module.css";
+import styles2 from "./button.module-D3HOTJS3.module.css";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Button(props) {
   const {
@@ -354,7 +354,7 @@ var INPUT_CLASS_NAME = {
 };
 
 // src/components/label/label.tsx
-import styles10 from "./label.module-HUBUIUFV.module.css";
+import styles10 from "./label.module-NYFSR6AT.module.css";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function Label(props) {
   const { className: customClassName = "", htmlFor = void 0, children = "", ...rest } = props;
@@ -432,7 +432,7 @@ var SPACER_CLASS_NAME = {
 
 // src/components/switch/switch.tsx
 import { Switch as BaseSwitch } from "@base-ui/react";
-import styles13 from "./switch.module-TLJBHCSA.module.css";
+import styles13 from "./switch.module-U6Q27QB5.module.css";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function Switch(props) {
   const {
@@ -519,7 +519,7 @@ var TABS_PILL_LIST_CLASS_NAME = {
 
 // src/components/tabs-pill/tabs-pill-tab.tsx
 import { Tabs as BaseTabs3 } from "@base-ui/react";
-import styles16 from "./tabs-pill-tab.module-2F7LOGXE.module.css";
+import styles16 from "./tabs-pill-tab.module-5SZMEO3Y.module.css";
 import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 function TabsPillTab(props) {
   const { className: customClassName = "", isNativeButton = true, ...rest } = props;
@@ -767,17 +767,16 @@ var TEXTAREA_CLASS_NAME = {
 import { Tooltip as BaseTooltip } from "@base-ui/react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 function Tooltip(props) {
-  const { ...rest } = props;
-  return /* @__PURE__ */ jsx26(BaseTooltip.Root, { "data-slot": "tooltip", disableHoverablePopup: true, ...rest });
+  const { isDisabled = false, ...rest } = props;
+  return /* @__PURE__ */ jsx26(BaseTooltip.Root, { "data-slot": "tooltip", disabled: isDisabled, disableHoverablePopup: true, ...rest });
 }
 
 // src/components/tooltip/tooltip-content.tsx
 import { Tooltip as BaseTooltip2 } from "@base-ui/react";
-import styles26 from "./tooltip-content.module-5MWTMSBY.module.css";
+import styles26 from "./tooltip-content.module-QGRFS5NN.module.css";
 import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
 function TooltipContent(props) {
-  const { children, className: customClassName = "", side = "top", ...rest } = props;
-  const SIDE_OFFSET = 4;
+  const { children, className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
   const combinedClassName = normalizeWhitespace(`
     ${TOOLTIP_CONTENT_CLASS_NAME.BASE}
     ${customClassName}
@@ -787,7 +786,7 @@ function TooltipContent(props) {
     {
       className: styles26.tooltip_content_positioner,
       side,
-      sideOffset: SIDE_OFFSET,
+      sideOffset,
       children: [
         /* @__PURE__ */ jsx27(BaseTooltip2.Popup, { className: combinedClassName, "data-slot": "tooltip-content", ...rest, children }),
         /* @__PURE__ */ jsx27(BaseTooltip2.Arrow, {})

package/dist/components/{label.module-HUBUIUFV.module.css → label.module-NYFSR6AT.module.css}

@@ -2,8 +2,8 @@
 /* Base */
 /* ===================================================== */
 .label {
-  width: fit-content;
+  color: var(--color-gray-11);
   font-size: 13px;
   font-weight: 500;
-  color: var(--color-gray-11, #646464);
+  width: fit-content;
 }

package/dist/components/{switch.module-TLJBHCSA.module.css → switch.module-U6Q27QB5.module.css}

@@ -36,7 +36,7 @@
 .switch__thumb {
   height: 100%;
   aspect-ratio: 1 / 1;
-  background-color: var(--color-white);
+  background-color: white;
   border-radius: 9999px;
   transition-duration: 150ms;
   transition-property: transform;

package/dist/components/{tabs-pill-tab.module-2F7LOGXE.module.css → tabs-pill-tab.module-5SZMEO3Y.module.css}

@@ -1,7 +1,7 @@
 .tabs_pill_tab {
   align-items: center;
   border-radius: var(--border-radius);
-  color: var(--color-black);
+  color: black;
   column-gap: 8px;
   cursor: pointer;
   display: flex;
@@ -29,15 +29,15 @@
 
 .tabs_pill_tab[data-active] {
   background-color: transparent;
-  color: var(--color-white);
+  color: white;
 }
 
 :global(.dark) .tabs_pill_tab {
-  color: var(--color-white);
+  color: white;
 }
 
 :global(.dark) .tabs_pill_tab[data-active] {
-  color: var(--color-black);
+  color: black;
 }
 
 /* Icon size */

package/dist/components/tooltip-content.module-QGRFS5NN.module.css

@@ -0,0 +1,18 @@
+.tooltip_content {
+  background-color: var(--color-gray-dark-1);
+  border-radius: 8px;
+  color: var(--color-gray-dark-12);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 4px 8px;
+}
+
+.tooltip_content_positioner {
+  isolation: isolate;
+  z-index: 50;
+}
+
+:global(.dark) .tooltip_content {
+  background-color: var(--color-gray-light-1);
+  color: var(--color-gray-light-12);
+}

package/dist/tailwind-colors/color.css

@@ -2,10 +2,6 @@
   /* Reset ============================================= */
   --color-\*: initial;
 
-  /* White & Black ===================================== */
-  --color-white: var(--color-white);
-  --color-black: var(--color-black);
-
   /* Gray ============================================== */
   --color-gray-1: var(--color-gray-1);
   --color-gray-2: var(--color-gray-2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
   "keywords": [
     "components",

package/dist/components/tooltip-content.module-5MWTMSBY.module.css

@@ -1,13 +0,0 @@
-.tooltip_content {
-  background-color: var(--color-gray-1);
-  border-radius: 8px;
-  border: 1px solid var(--color-gray-4);
-  color: var(--color-gray-12);
-  font-size: 14px;
-  padding: 4px 8px;
-}
-
-.tooltip_content_positioner {
-  isolation: isolate;
-  z-index: 50;
-}