@getgreenline/blaze-ui 1.0.14 → 1.0.16

package/dist/components/button.js

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { LoaderCircleIcon } from 'lucide-react';
 import { cn } from '../lib/utils.js';
 
-const buttonVariants = cva("tw:relative tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:disabled:pointer-events-none tw:data-[disabled]:pointer-events-none tw:data-[loading]:pointer-events-none tw:disabled:opacity-50 tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*='size-'])]:size-4 tw:shrink-0 tw:[&_svg]:shrink-0 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", {
+const buttonVariants = cva("tw:relative tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:cursor-pointer tw:disabled:cursor-not-allowed tw:disabled:pointer-events-none tw:data-[disabled]:pointer-events-none tw:data-[loading]:pointer-events-none tw:disabled:opacity-50 tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*='size-'])]:size-4 tw:shrink-0 tw:[&_svg]:shrink-0 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", {
     variants: {
         variant: {
             default: "tw:bg-primary tw:text-primary-foreground tw:shadow-xs tw:hover:bg-primary/90",

package/dist/components/segmented-control.js

@@ -25,7 +25,7 @@ const segmentedControlVariants = cva("tw:inline-flex tw:items-center tw:gap-1 tw
         size: "default",
     },
 });
-const segmentedControlItemVariants = cva("tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:duration-200 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:focus-visible:ring-offset-2 tw:focus-visible:ring-offset-background tw:focus:z-10 tw:disabled:pointer-events-none tw:disabled:opacity-50", {
+const segmentedControlItemVariants = cva("tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:duration-200 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:focus-visible:ring-offset-2 tw:focus-visible:ring-offset-background tw:focus:z-10 tw:cursor-pointer tw:disabled:cursor-not-allowed tw:disabled:pointer-events-none tw:disabled:opacity-50", {
     variants: {
         variant: {
             default: "tw:text-foreground/70 tw:hover:text-primary tw:hover:bg-primary/10 tw:data-[state=active]:bg-primary tw:data-[state=active]:text-primary-foreground tw:data-[state=active]:shadow-xs",

package/dist/components/switch.js

@@ -3,7 +3,7 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { cn } from '../lib/utils.js';
 
 function Switch({ className, ...props }) {
-    return (jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("tw:peer tw:data-[state=checked]:bg-primary tw:data-[state=unchecked]:bg-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:dark:data-[state=unchecked]:bg-input/80 tw:inline-flex tw:h-[1.15rem] tw:w-8 tw:shrink-0 tw:items-center tw:rounded-full tw:border tw:border-transparent tw:shadow-xs tw:transition-all tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className), ...props, children: jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("tw:bg-background tw:dark:data-[state=unchecked]:bg-foreground tw:dark:data-[state=checked]:bg-primary-foreground tw:pointer-events-none tw:block tw:size-4 tw:rounded-full tw:ring-0 tw:transition-transform tw:data-[state=checked]:translate-x-[calc(100%-2px)] tw:data-[state=unchecked]:translate-x-0") }) }));
+    return (jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("tw:peer tw:data-[state=checked]:bg-primary tw:data-[state=unchecked]:bg-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:dark:data-[state=unchecked]:bg-input/80 tw:inline-flex tw:h-[1.15rem] tw:w-8 tw:shrink-0 tw:items-center tw:rounded-full tw:border tw:border-transparent tw:shadow-xs tw:transition-all tw:outline-none tw:focus-visible:ring-[3px] tw:cursor-pointer tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className), ...props, children: jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("tw:bg-background tw:dark:data-[state=unchecked]:bg-foreground tw:dark:data-[state=checked]:bg-primary-foreground tw:pointer-events-none tw:block tw:size-4 tw:rounded-full tw:ring-0 tw:transition-transform tw:data-[state=checked]:translate-x-[calc(100%-2px)] tw:data-[state=unchecked]:translate-x-0") }) }));
 }
 
 export { Switch };

package/dist/globals.css

@@ -166,66 +166,8 @@
   }
 }
 
-/* Overrides of styles for homi-web */
-.blaze-ui-homi button[data-slot='button'] {
-  color: initial;
-  background-color: initial;
-  border: none;
-  box-shadow: none;
-}
-
-.blaze-ui-homi button[data-slot='button'] {
-  @apply tw:rounded-md;
-}
-
-.blaze-ui-homi button[data-slot='switch'] {
-  @apply tw:rounded-full;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:bg-primary {
-  @apply tw:bg-primary;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:bg-destructive {
-  @apply tw:bg-destructive;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:bg-secondary {
-  @apply tw:bg-secondary;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:bg-background {
-  @apply tw:bg-background;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:text-primary-foreground {
-  @apply tw:text-primary-foreground;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:text-white {
-  @apply tw:text-white;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:text-secondary-foreground {
-  @apply tw:text-secondary-foreground;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:text-primary {
-  @apply tw:text-primary;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:shadow-xs,
-.blaze-ui-homi button[data-slot='switch'].tw\:shadow-xs {
-  @apply tw:shadow-xs;
-}
-
-.blaze-ui-homi button[data-slot='button'].tw\:border,
-.blaze-ui-homi button[data-slot='switch'].tw\:border {
-  @apply tw:border tw:border-border;
-}
-
-/* Overrides of styles for  */
-.blaze-ui-420 {
+/* Fix style collisions with poopstrap/reactstrap/mui/antd  */
+.blaze-ui-root {
   --blaze-420-font-sm: 14px;
   --blaze-420-font-base: 16px;
   --blaze-420-line-sm: 20px;
@@ -244,16 +186,15 @@
   @apply tw:text-foreground tw:font-sans;
 }
 
-.blaze-ui-420 button[data-slot='button'],
-.blaze-ui-420 button[data-slot='switch'] {
+.blaze-ui-root button[data-slot='button'],
+.blaze-ui-root button[data-slot='switch'] {
   color: inherit;
-  background-color: transparent;
-  border: none;
   box-shadow: none;
   font: inherit;
 }
 
-.blaze-ui-420 button[data-slot='button'] {
+.blaze-ui-root button[data-slot='button'] {
+  background-color: initial;
   min-height: var(--blaze-420-height-9);
   height: var(--blaze-420-height-9);
   padding: var(--blaze-420-space-2) var(--blaze-420-space-4);
@@ -263,13 +204,14 @@
   line-height: var(--blaze-420-line-sm);
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:has-\[\>svg\]\:px-3,
-.blaze-ui-420 button[data-slot='button']:has(> svg) {
+.blaze-ui-root button[data-slot='button'].tw\:has-\[\>svg\]\:px-3,
+.blaze-ui-root button[data-slot='button']:has(> svg) {
   padding-left: var(--blaze-420-space-3);
   padding-right: var(--blaze-420-space-3);
 }
 
-.blaze-ui-420 button[data-slot='switch'] {
+.blaze-ui-root button[data-slot='switch'] {
+  background-color: initial;
   width: var(--blaze-420-switch-width);
   min-width: var(--blaze-420-switch-width);
   height: var(--blaze-420-switch-height);
@@ -277,143 +219,167 @@
   border-radius: var(--blaze-420-radius-full);
 }
 
-.blaze-ui-420 button[data-slot='switch']>[data-slot='switch-thumb'] {
+.blaze-ui-root button[data-slot='switch']>[data-slot='switch-thumb'] {
   width: var(--blaze-420-thumb-size);
   height: var(--blaze-420-thumb-size);
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:bg-primary {
+.blaze-ui-root button[data-slot='button'].tw\:bg-primary {
   @apply tw:bg-primary;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:bg-destructive {
+.blaze-ui-root button[data-slot='button'].tw\:bg-destructive {
   @apply tw:bg-destructive;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:bg-secondary {
+.blaze-ui-root button[data-slot='button'].tw\:bg-secondary {
   @apply tw:bg-secondary;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:bg-background {
+.blaze-ui-root button[data-slot='button'].tw\:bg-background {
   @apply tw:bg-background;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:text-primary-foreground {
+.blaze-ui-root button[data-slot='button'].tw\:text-primary-foreground {
   @apply tw:text-primary-foreground;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:text-white {
+.blaze-ui-root button[data-slot='button'].tw\:text-white {
   @apply tw:text-white;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:text-secondary-foreground {
+.blaze-ui-root button[data-slot='button'].tw\:text-secondary-foreground {
   @apply tw:text-secondary-foreground;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:text-primary {
+.blaze-ui-root button[data-slot='button'].tw\:text-primary {
   @apply tw:text-primary;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:shadow-xs,
-.blaze-ui-420 button[data-slot='switch'].tw\:shadow-xs {
+.blaze-ui-root button[data-slot='button'].tw\:shadow-xs,
+.blaze-ui-root button[data-slot='switch'].tw\:shadow-xs {
   @apply tw:shadow-xs;
 }
 
-.blaze-ui-420 button[data-slot='button'].tw\:border,
-.blaze-ui-420 button[data-slot='switch'].tw\:border {
+.blaze-ui-root button[data-slot='button'].tw\:border {
   @apply tw:border tw:border-border;
 }
 
-.blaze-ui-420 .tw\:rounded-md {
+.blaze-ui-root button[data-slot='switch'].tw\:border {
+  @apply tw:border tw:border-transparent;
+}
+
+.blaze-ui-root .tw\:rounded-md {
   border-radius: var(--blaze-420-radius-md);
 }
 
-.blaze-ui-420 .tw\:gap-1 {
+.blaze-ui-root .tw\:gap-1 {
   gap: var(--blaze-420-space-1);
 }
 
-.blaze-ui-420 .tw\:gap-2 {
+.blaze-ui-root .tw\:gap-2 {
   gap: var(--blaze-420-space-2);
 }
 
-.blaze-ui-420 .tw\:gap-6 {
+.blaze-ui-root .tw\:gap-6 {
   gap: var(--blaze-420-space-6);
 }
 
-.blaze-ui-420 .tw\:p-1 {
+.blaze-ui-root .tw\:p-1 {
   padding: var(--blaze-420-space-1);
 }
 
-.blaze-ui-420 .tw\:p-4 {
+.blaze-ui-root .tw\:p-4 {
   padding: var(--blaze-420-space-4);
 }
 
-.blaze-ui-420 .tw\:px-3 {
+.blaze-ui-root .tw\:px-3 {
   padding-left: var(--blaze-420-space-3);
   padding-right: var(--blaze-420-space-3);
 }
 
-.blaze-ui-420 .tw\:px-4 {
+.blaze-ui-root .tw\:px-4 {
   padding-left: var(--blaze-420-space-4);
   padding-right: var(--blaze-420-space-4);
 }
 
-.blaze-ui-420 .tw\:py-1 {
+.blaze-ui-root .tw\:py-1 {
   padding-top: var(--blaze-420-space-1);
   padding-bottom: var(--blaze-420-space-1);
 }
 
-.blaze-ui-420 .tw\:py-2 {
+.blaze-ui-root .tw\:py-2 {
   padding-top: var(--blaze-420-space-2);
   padding-bottom: var(--blaze-420-space-2);
 }
 
-.blaze-ui-420 .tw\:mr-4 {
+.blaze-ui-root .tw\:mr-4 {
   margin-right: var(--blaze-420-space-4);
 }
 
-.blaze-ui-420 .tw\:h-9 {
+.blaze-ui-root .tw\:h-9 {
   height: var(--blaze-420-height-9);
 }
 
-.blaze-ui-420 .tw\:min-h-9 {
+.blaze-ui-root .tw\:min-h-9 {
   min-height: var(--blaze-420-height-9);
 }
 
-.blaze-ui-420 .tw\:size-4 {
+.blaze-ui-root .tw\:size-4 {
   width: var(--blaze-420-thumb-size);
   height: var(--blaze-420-thumb-size);
 }
 
-.blaze-ui-420 .tw\:w-8 {
+.blaze-ui-root .tw\:w-8 {
   width: var(--blaze-420-switch-width);
 }
 
-.blaze-ui-420 .tw\:h-\[1\.15rem\] {
+.blaze-ui-root .tw\:h-\[1\.15rem\] {
   height: var(--blaze-420-switch-height);
 }
 
-.blaze-ui-420 .tw\:text-sm {
+.blaze-ui-root .tw\:text-sm {
   font-size: var(--blaze-420-font-sm);
   line-height: var(--blaze-420-line-sm);
 }
 
-.blaze-ui-420 .tw\:text-base {
+.blaze-ui-root .tw\:text-base {
   font-size: var(--blaze-420-font-base);
   line-height: var(--blaze-420-line-base);
 }
 
 @media (min-width: 768px) {
-  .blaze-ui-420 .tw\:md\:text-sm {
+  .blaze-ui-root .tw\:md\:text-sm {
     font-size: var(--blaze-420-font-sm);
     line-height: var(--blaze-420-line-sm);
   }
 }
 
-.blaze-ui-420 .tw\:underline-offset-4 {
+.blaze-ui-root .tw\:underline-offset-4 {
   text-underline-offset: 4px;
 }
 
-.blaze-ui-420 a.tw\:ml-auto {
+.blaze-ui-root a.tw\:ml-auto {
   @apply tw:text-primary tw:hover:text-primary/90;
+}
+
+.blaze-ui-root button[data-slot='switch'][data-state='checked'] {
+  background-color: var(--primary) !important;
+}
+
+.blaze-ui-root button[data-slot='switch'][data-state='unchecked'] {
+  background-color: var(--input) !important;
+}
+
+.blaze-ui-root [data-slot='segmented-control-item'][data-state='active'] {
+  color: var(--primary-foreground) !important;
+}
+
+.blaze-ui-root [data-slot='label']>span[aria-hidden='true'] {
+  margin-left: var(--blaze-420-space-1);
+}
+
+.blaze-ui-root [data-slot='button-spinner'] svg {
+  stroke: currentColor;
+  fill: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getgreenline/blaze-ui",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -36,8 +36,8 @@
     "rollup": "^4.52.0",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.9.2",
-    "@workspace/eslint-config": "0.0.0",
-    "@workspace/typescript-config": "0.0.0"
+    "@workspace/typescript-config": "0.0.0",
+    "@workspace/eslint-config": "0.0.0"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",