@scaleflex/ui-tw 0.0.21 → 0.0.24

package/button/button.component.js

@@ -3,13 +3,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children", "size", "startIcon", "endIcon", "variant", "loading", "asChild", "disabled"];
 import { Slot } from '@radix-ui/react-slot';
 import SpinnerIcon from '@scaleflex/icons-tw/spinner';
-import { ButtonSize, ButtonVariant, buttonSizeOptions, buttonVariantOptions } from '@scaleflex/ui-tw/button/button.constants';
-import { EndIcon } from '@scaleflex/ui-tw/button/components/end-icon';
-import { StartIcon, startIconVariants } from '@scaleflex/ui-tw/button/components/start-icon';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
-import React from 'react';
-import { getIconSizeInRem } from './button.utils';
+import React, { useRef } from 'react';
+import { ButtonSize, ButtonVariant, buttonSizeOptions, buttonVariantOptions } from './button.constants';
+import { createRipple, getIconSizeInRem } from './button.utils';
+import { EndIcon } from './components/end-icon';
+import { StartIcon, startIconVariants } from './components/start-icon';
 var buttonVariants = cva('', {
   variants: {
     variant: buttonVariantOptions,
@@ -36,15 +36,23 @@ function Button(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var buttonRef = useRef(null);
   var Comp = asChild ? Slot : 'button';
+  var handleClick = function handleClick(e) {
+    if (buttonRef.current) {
+      createRipple(e, buttonRef.current);
+    }
+  };
   return /*#__PURE__*/React.createElement(Comp, _extends({
+    ref: buttonRef,
     "data-slot": "button",
-    className: cn('group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium whitespace-nowrap transition-all outline-none', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", buttonVariants({
+    className: cn('group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md font-medium whitespace-nowrap transition-all outline-none', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", buttonVariants({
       variant: variant,
       size: size,
       className: className
     }), loading && 'pointer-events-none opacity-30'),
-    disabled: disabled
+    disabled: disabled,
+    onMouseDown: handleClick
   }, rest), startIcon || endIcon || loading ? /*#__PURE__*/React.createElement("span", {
     className: "flex items-center"
   }, startIcon && /*#__PURE__*/React.createElement(StartIcon, {

package/button/button.utils.d.ts

@@ -1,2 +1,4 @@
 import { ButtonSizeType } from '@scaleflex/ui-tw/button/button.types';
+import type { MouseEvent } from 'react';
 export declare const getIconSizeInRem: (sizeName?: ButtonSizeType | null) => string;
+export declare const createRipple: (event: MouseEvent, container: HTMLElement) => void;

package/button/button.utils.js

@@ -16,4 +16,19 @@ export var getIconSizeInRem = function getIconSizeInRem(sizeName) {
     default:
       return '1rem';
   }
+};
+export var createRipple = function createRipple(event, container) {
+  if (!container) return;
+  var ripple = document.createElement('span');
+  var diameter = Math.max(container.clientWidth, container.clientHeight);
+  var radius = diameter / 2;
+  ripple.style.width = ripple.style.height = "".concat(diameter, "px");
+  ripple.style.left = "".concat(event.clientX - container.getBoundingClientRect().left - radius, "px");
+  ripple.style.top = "".concat(event.clientY - container.getBoundingClientRect().top - radius, "px");
+  ripple.style.willChange = 'transform, opacity';
+  ripple.className = 'absolute z-10 bg-foreground/20 rounded-full pointer-events-none animate-[ripple_500ms_ease-out_forwards]';
+  container.appendChild(ripple);
+  setTimeout(function () {
+    return ripple.remove();
+  }, 500);
 };

package/form/components/form-field-group.component.d.ts

@@ -1,5 +1,5 @@
-import { FormFieldGroupProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
+import { FormFieldGroupProps } from '../form.types';
 declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, highlight, horizontal, horizontalLabelWidth, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
 export { FormFieldGroup };

package/form/components/form-field-group.component.js

@@ -1,7 +1,7 @@
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@scaleflex/ui-tw/form';
-import { labelHeightVariants } from '@scaleflex/ui-tw/form/form.constants';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import React from 'react';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../form.component';
+import { labelHeightVariants } from '../form.constants';
 function FormFieldGroup(_ref) {
   var control = _ref.control,
     name = _ref.name,

package/form/components/form-input-field.component.d.ts

@@ -1,5 +1,5 @@
-import { FormInputFieldProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
+import { FormInputFieldProps } from '../form.types';
 declare function FormInputField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ inputProps, ...rest }: FormInputFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormInputField };

package/form/components/form-input-field.component.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["inputProps"];
-import { FormFieldGroup } from '@scaleflex/ui-tw/form';
 import { Input } from '@scaleflex/ui-tw/input';
 import React from 'react';
+import { FormFieldGroup } from './form-field-group.component';
 function FormInputField(_ref) {
   var inputProps = _ref.inputProps,
     rest = _objectWithoutProperties(_ref, _excluded);

package/form/components/form-password-field.component.d.ts

@@ -1,5 +1,5 @@
-import { FormInputFieldProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
+import { FormInputFieldProps } from '../form.types';
 declare function FormPasswordField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ inputProps, ...rest }: FormInputFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormPasswordField };

package/form/components/form-password-field.component.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["inputProps"];
-import { FormFieldGroup } from '@scaleflex/ui-tw/form';
 import { PasswordInput } from '@scaleflex/ui-tw/input';
 import React from 'react';
+import { FormFieldGroup } from './form-field-group.component';
 function FormPasswordField(_ref) {
   var inputProps = _ref.inputProps,
     rest = _objectWithoutProperties(_ref, _excluded);

package/form/components/form-switch-field.component.d.ts

@@ -1,5 +1,5 @@
-import { FormSwitchFieldProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
+import { FormSwitchFieldProps } from '../form.types';
 declare function FormSwitchField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, disabled, tooltip, size, layout, switchProps, }: FormSwitchFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormSwitchField };

package/form/components/form-switch-field.component.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@scaleflex/ui-tw/form';
-import { SwitchLayout, formSwitchFieldSizeOptions } from '@scaleflex/ui-tw/form/form.constants';
 import { Label } from '@scaleflex/ui-tw/label';
 import { Switch } from '@scaleflex/ui-tw/switch';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React from 'react';
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '../form.component';
+import { SwitchLayout, formSwitchFieldSizeOptions } from '../form.constants';
 var formSwitchFieldVariants = cva('', {
   variants: {
     size: formSwitchFieldSizeOptions

package/form/components/form-textarea-field.component.d.ts

@@ -1,5 +1,5 @@
-import { FormTextareaFieldProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
+import { FormTextareaFieldProps } from '../form.types';
 declare function FormTextareaField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ textareaProps, ...rest }: FormTextareaFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormTextareaField };

package/form/components/form-textarea-field.component.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["textareaProps"];
-import { FormFieldGroup } from '@scaleflex/ui-tw/form';
 import { Textarea } from '@scaleflex/ui-tw/textarea';
 import React from 'react';
+import { FormFieldGroup } from './form-field-group.component';
 function FormTextareaField(_ref) {
   var textareaProps = _ref.textareaProps,
     rest = _objectWithoutProperties(_ref, _excluded);

package/form/form.component.d.ts

@@ -1,9 +1,9 @@
 import { Slot } from '@radix-ui/react-slot';
-import { FormMessageSizeType } from '@scaleflex/ui-tw/form/form.types';
 import { LabelProps } from '@scaleflex/ui-tw/label/label.types';
 import * as React from 'react';
 import { ComponentProps } from 'react';
 import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+import { FormMessageSizeType } from './form.types';
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
 declare const useFormField: () => {

package/form/form.component.js

@@ -9,12 +9,12 @@ var _excluded = ["className", "horizontal", "firstColumnWidth"],
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Slot } from '@radix-ui/react-slot';
-import { FormMessageSize, formMessageSizeOptions } from '@scaleflex/ui-tw/form/form.constants';
 import { Label } from '@scaleflex/ui-tw/label';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import * as React from 'react';
 import { createContext, useContext, useId } from 'react';
 import { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';
+import { FormMessageSize, formMessageSizeOptions } from './form.constants';
 var Form = FormProvider;
 var FormFieldContext = /*#__PURE__*/createContext({});
 var FormField = function FormField(_ref) {

package/form/form.types.d.ts

@@ -1,4 +1,3 @@
-import { FormMessageSize, SwitchLayout } from '@scaleflex/ui-tw/form/form.constants';
 import { InputProps } from '@scaleflex/ui-tw/input';
 import { SwitchProps } from '@scaleflex/ui-tw/switch/switch.types';
 import { TextareaProps } from '@scaleflex/ui-tw/textarea';
@@ -6,6 +5,7 @@ import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { Values } from '@scaleflex/ui-tw/types/values';
 import { ReactElement, ReactNode } from 'react';
 import { ControllerRenderProps, type FieldPath, FieldValues, Path, UseControllerProps } from 'react-hook-form';
+import { FormMessageSize, SwitchLayout } from './form.constants';
 export type FormMessageSizeType = Values<typeof FormMessageSize>;
 export type SwitchLayoutType = Values<typeof SwitchLayout>;
 export type FormItemContextValue = {

package/input/components/password-input.component.d.ts

@@ -1,3 +1,3 @@
-import { InputProps } from '@scaleflex/ui-tw/input/input.types';
 import React from 'react';
+import { InputProps } from '../input.types';
 export declare function PasswordInput({ className, size, disabled, readOnly, ...props }: InputProps): React.JSX.Element;

package/input/components/password-input.component.js

@@ -4,9 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "size", "disabled", "readOnly"];
 import EyeClosed from '@scaleflex/icons-tw/eye-closed';
 import EyeOpen from '@scaleflex/icons-tw/eye-open';
-import { Input } from '@scaleflex/ui-tw/input';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import React, { useState } from 'react';
+import { Input } from '../input.component';
 export function PasswordInput(_ref) {
   var className = _ref.className,
     size = _ref.size,

package/input/input.component.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from '@scaleflex/ui-tw/input/input.types';
 import React from 'react';
+import { InputProps } from './input.types';
 declare const inputVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/input/input.component.js

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "type", "size", "disabled", "readOnly"];
-import { ButtonSize } from '@scaleflex/ui-tw/button';
-import { InputType, inputSizeOptions } from '@scaleflex/ui-tw/input/input.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React from 'react';
+import { InputType, inputSizeOptions } from './input.constants';
 var inputVariants = cva('', {
   variants: {
     size: inputSizeOptions
   },
   defaultVariants: {
-    size: ButtonSize.Md
+    size: FormSize.Md
   }
 });
 function Input(_ref) {
@@ -31,7 +30,7 @@ function Input(_ref) {
     "data-slot": "input",
     disabled: disabled,
     readOnly: readOnly,
-    className: cn('border-input text-foreground bg-background flex w-full min-w-0 rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', 'group-data-[highlight=true]:border-warning group-data-[highlight=true]:focus-visible:ring-warning/20', inputVariants({
+    className: cn('border-input text-foreground bg-background flex w-full min-w-0 rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'focus-visible:border-secondary-foreground/50 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground hover:border-secondary-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20', inputVariants({
       size: size,
       className: className
     }))

package/label/label.component.d.ts

@@ -1,4 +1,4 @@
-import { LabelProps } from '@scaleflex/ui-tw/label/label.types';
 import * as React from 'react';
+import { LabelProps } from './label.types';
 declare function Label({ className, size, children, icon, tooltip, ...props }: LabelProps): React.JSX.Element;
 export { Label };

package/label/label.component.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "size", "children", "icon", "tooltip"];
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
-import { labelSizeOptions } from '@scaleflex/ui-tw/label/label.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
+import { LabelIcon } from './components/label-icon';
+import { labelSizeOptions } from './label.constants';
 var labelVariants = cva('', {
   variants: {
     size: labelSizeOptions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.21",
+  "version": "0.0.24",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -18,7 +18,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.21",
+    "@scaleflex/icons-tw": "^0.0.24",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",
@@ -30,6 +30,7 @@
   "devDependencies": {
     "@types/prop-types": "^15.7.3",
     "postcss": "^8.5.3",
+    "tailwind-scrollbar": "^4.0.2",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {

package/styles/ripple.css

@@ -0,0 +1,12 @@
+@layer utilities {
+  @keyframes ripple {
+    0% {
+      transform: scale(0.1);
+      opacity: 0.8;
+    }
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+}

package/styles/scrollbar.css

@@ -0,0 +1,27 @@
+/* Firefox scrollbar colors */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #ccd6de transparent;
+}
+
+/* WebKit scrollbar styling */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccd6de;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 999px;
+}
+
+/* Optional: hide corner square */
+::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/styles/theme-map.css

@@ -0,0 +1,52 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-shadow: var(--shadow);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-10: var(--warning-10);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-10: var(--destructive-10);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-panel: var(--panel);
+  --color-panel-foreground: var(--panel-foreground);
+  --color-panel-primary: var(--panel-primary);
+  --color-panel-primary-foreground: var(--panel-primary-foreground);
+  --color-panel-border: var(--panel-border);
+  --color-panel-input: var(--panel-input);
+  --color-panel-ring: var(--panel-ring);
+}

package/styles/theme.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@import "./variables.css";
+@import "./theme-map.css";
+@import "./scrollbar.css";
+@import "./ripple.css";
+
+@plugin 'tailwind-scrollbar';

package/styles/variables.css

@@ -0,0 +1,111 @@
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.37 0.022 248.413);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.37 0.022 248.413);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.37 0.022 248.413);
+  --primary: oklch(0.578 0.198 268.129);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(98.16% 0.002 247.84);
+  --secondary-foreground: oklch(53.03% 0.039 249.89);
+  --muted: oklch(0.974 0.006 239.819);
+  --muted-foreground: oklch(0.685 0.033 249.82);
+  --accent: oklch(0.578 0.198 268.129 / 0.07);
+  --accent-foreground: oklch(0.578 0.198 268.129);
+
+  --success: oklch(0.637 0.17 151.295);
+  --success-foreground: oklch(0.429 0.107 154.754);
+  --destructive: oklch(0.577 0.215 27.325);
+  --destructive-foreground: oklch(0.472 0.173 26.157);
+  --destructive-10: oklch(0.967 0.016 17.438);
+  --info: oklch(0.632 0.161 245.564);
+  --info-foreground: oklch(0.391 0.091 241.289);
+  --warning: oklch(0.734 0.157 69.419);
+  --warning-foreground: oklch(0.456 0.095 58.822);
+  --warning-10: oklch(0.978 0.025 86.868);
+
+  --border: oklch(92.86% 0.009 247.92);
+  --input: oklch(0.871 0.016 241.798);
+  --ring: oklch(0.578 0.198 268.129 / 0.7);
+  --shadow: oklch(26.18% 0.024 256.43 / 0.1);
+
+  --chart-1: oklch(0.646 0.222 41.116);   /* Chart 1 - Orange/Yellow Base - approx #DA9834 */
+  --chart-2: oklch(0.6 0.118 184.704);    /* Chart 2 - Teal/Greenish-Blue Base - approx #4BA3AD */
+  --chart-3: oklch(0.398 0.07 227.392);   /* Chart 3 - Muted Blue Base - approx #435C9A */
+  --chart-4: oklch(0.828 0.189 84.429);   /* Chart 4 - Bright Lime-Yellow Base - approx #E2E14D */
+  --chart-5: oklch(0.769 0.188 70.08);    /* Chart 5 - Golden-Yellow Base - approx #E3C442 */
+
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.37 0.022 248.413);
+  --sidebar-primary: oklch(0.578 0.198 268.129);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.578 0.198 268.129 / 0.07);
+  --sidebar-accent-foreground: oklch(0.578 0.198 268.129);
+  --sidebar-border: oklch(92.86% 0.009 247.92);
+  --sidebar-ring: oklch(0.578 0.198 268.129 / 0.7);
+
+  --panel: oklch(0.45 0.229 265.091);
+  --panel-foreground: oklch(1 0 0);
+  --panel-primary: oklch(0.578 0.198 268.129);
+  --panel-primary-foreground: oklch(1 0 0);
+  --panel-border: oklch(0.9103 0.0177 246.73);
+  --panel-input: oklch(1 0 0);
+  --panel-ring: oklch(0.578 0.198 268.129 / 0.7);
+}
+
+:root.dark {
+  --background: oklch(0.13 0.027 261.692);
+  --foreground: oklch(0.95 0.01 264.55);
+  --card: oklch(0.25 0.01 264.55);
+  --card-foreground: oklch(0.95 0.01 264.55);
+  --popover: oklch(0.25 0.01 264.55);
+  --popover-foreground: oklch(0.95 0.01 264.55);
+  --primary: oklch(0.6 0.2 268.129);
+  --primary-foreground: oklch(0.95 0.01 264.55);
+  --secondary: oklch(0.13 0.027 261.692);
+  --secondary-foreground: oklch(0.9 0.01 264.55);
+  --muted: oklch(0.3 0.01 285);
+  --muted-foreground: oklch(0.75 0.01 249.82);
+  --accent: oklch(0.6 0.2 268.129 / 0.07);
+  --accent-foreground: oklch(0.95 0.01 264.55);
+
+  --success: oklch(0.6 0.2 154.83);
+  --success-foreground: oklch(0.2 0.1 165.45);
+  --destructive: oklch(0.55 0.2 27.325);
+  --destructive-foreground: oklch(0.704 0.183 22.984);
+  --destructive-10: oklch(0.2 0.01 17.438);
+  --info: oklch(0.65 0.2 241.34);
+  --info-foreground: oklch(0.95 0.01 248.61);
+  --warning: oklch(0.7 0.15 69.419);
+  --warning-foreground: oklch(0.756 0.114 77.312);
+  --warning-10: oklch(0.3 0.01 86.868);
+
+  --border: oklch(0.3 0.01 247.92);
+  --input: oklch(0.4 0.02 248.73);
+  --ring: oklch(0.6 0.2 268.129 / 0.7);
+  --shadow: oklch(0 0 0 / 0.2);
+
+  --chart-1: oklch(0.7 0.2 41.116);
+  --chart-2: oklch(0.65 0.1 184.704);
+  --chart-3: oklch(0.6 0.07 227.392);
+  --chart-4: oklch(0.75 0.18 84.429);
+  --chart-5: oklch(0.7 0.18 70.08);
+
+  --sidebar: oklch(0.45 0.229 265.091); /* Background stateless #153DD1 */
+  --sidebar-foreground: oklch(1 0 0); /* Text Primary #ffffff */
+  --sidebar-primary: oklch(0.578 0.198 268.129); /* Accent Stateless #6879EB */
+  --sidebar-primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
+  --sidebar-accent: oklch(0.9641 0.0065 231.29); /* Background active #F3F7FA */
+  --sidebar-accent-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
+  --sidebar-border: oklch(0.9103 0.0177 246.73); /* Borders Secondary #DFE7ED */
+  --sidebar-ring: oklch(0.6 0.2 268.129 / 0.7);
+
+  --panel: oklch(0.28 0.15 278.91);
+  --panel-foreground: oklch(0.98 0.01 264.55);
+  --panel-primary: oklch(0.35 0.18 278.91);
+  --panel-primary-foreground: oklch(1 0 0);
+  --panel-border: oklch(0.2 0.01 268.16);
+  --panel-input: oklch(0.2 0.01 264.55);
+  --panel-ring: oklch(0.6 0.2 280.88);
+}

package/switch/switch.component.d.ts

@@ -1,4 +1,4 @@
-import { SwitchProps } from '@scaleflex/ui-tw/switch/switch.types';
 import * as React from 'react';
+import { SwitchProps } from './switch.types';
 declare function Switch({ className, size, ...props }: SwitchProps): React.JSX.Element;
 export { Switch };

package/switch/switch.component.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "size"];
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { switchSizeOptions, switchThumbSizeOptions } from '@scaleflex/ui-tw/switch/switch.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
+import { switchSizeOptions, switchThumbSizeOptions } from './switch.constants';
 var switchVariants = cva('', {
   variants: {
     size: switchSizeOptions
@@ -30,7 +30,7 @@ function Switch(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(SwitchPrimitive.Root, _extends({
     "data-slot": "switch",
-    className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', switchVariants({
+    className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none', 'hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', switchVariants({
       size: size
     }), className)
   }, props), /*#__PURE__*/React.createElement(SwitchPrimitive.Thumb, {

package/textarea/textarea.component.d.ts

@@ -1,5 +1,5 @@
-import { TextareaProps } from '@scaleflex/ui-tw/textarea/textarea.types';
 import React from 'react';
+import { TextareaProps } from './textarea.types';
 declare const textareaVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/textarea/textarea.component.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "size", "disabled", "readOnly"];
-import { textareaSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React from 'react';
+import { textareaSizeOptions } from './textarea.constants';
 var textareaVariants = cva('', {
   variants: {
     size: textareaSizeOptions
@@ -27,7 +27,7 @@ function Textarea(_ref) {
     "data-slot": "textarea",
     disabled: disabled,
     readOnly: readOnly,
-    className: cn('field-sizing-content', 'border-input text-foreground bg-background flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', 'group-data-[highlight=true]:border-warning group-data-[highlight=true]:focus-visible:ring-warning/20', textareaVariants({
+    className: cn('field-sizing-content resize-y', 'border-input text-foreground bg-background flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'focus-visible:border-secondary-foreground/50 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground hover:border-secondary-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20', textareaVariants({
       size: size,
       className: className
     }))

package/toaster/toaster.component.d.ts

@@ -1,4 +1,4 @@
-import { ToasterProps } from '@scaleflex/ui-tw/toaster';
 import React from 'react';
+import { ToasterProps } from './toaster.types';
 declare const Toaster: ({ ...props }: ToasterProps) => React.JSX.Element;
 export { Toaster };

package/tooltip/tooltip.component.d.ts

@@ -1,7 +1,7 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { TooltipContentProps, WithTooltipProps } from '@scaleflex/ui-tw/tooltip/tooltip.types';
 import * as React from 'react';
 import { ComponentProps } from 'react';
+import { TooltipContentProps, WithTooltipProps } from './tooltip.types';
 declare function TooltipProvider({ delayDuration, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
 declare function Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
 declare function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;

package/tooltip/tooltip.component.js

@@ -5,10 +5,10 @@ var _excluded = ["delayDuration"],
   _excluded2 = ["className", "sideOffset", "children", "variant"],
   _excluded3 = ["variant", "content", "children"];
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { TooltipVariant, tooltipVariantOptions } from '@scaleflex/ui-tw/tooltip/tooltip.constants';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
+import { TooltipVariant, tooltipVariantOptions } from './tooltip.constants';
 function TooltipProvider(_ref) {
   var _ref$delayDuration = _ref.delayDuration,
     delayDuration = _ref$delayDuration === void 0 ? 0 : _ref$delayDuration,

package/tooltip/tooltip.constants.d.ts

@@ -5,6 +5,6 @@ export declare const TooltipVariant: {
 };
 export declare const tooltipVariantOptions: {
     readonly default: "bg-muted text-foreground";
-    readonly warning: "bg-warning-4 text-warning-foreground";
-    readonly error: "bg-destructive-4 text-destructive-foreground";
+    readonly warning: "bg-warning-10 text-warning-foreground";
+    readonly error: "bg-destructive-10 text-destructive-foreground";
 };

package/tooltip/tooltip.constants.js

@@ -4,4 +4,4 @@ export var TooltipVariant = {
   Error: 'error',
   Warning: 'warning'
 };
-export var tooltipVariantOptions = _defineProperty(_defineProperty(_defineProperty({}, TooltipVariant.Default, 'bg-muted text-foreground'), TooltipVariant.Warning, 'bg-warning-4 text-warning-foreground'), TooltipVariant.Error, 'bg-destructive-4 text-destructive-foreground');
+export var tooltipVariantOptions = _defineProperty(_defineProperty(_defineProperty({}, TooltipVariant.Default, 'bg-muted text-foreground'), TooltipVariant.Warning, 'bg-warning-10 text-warning-foreground'), TooltipVariant.Error, 'bg-destructive-10 text-destructive-foreground');

package/tooltip/tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { TooltipVariant } from '@scaleflex/ui-tw/tooltip/tooltip.constants';
 import { ComponentProps, ReactElement } from 'react';
+import { TooltipVariant } from './tooltip.constants';
 export type TooltipVariantType = (typeof TooltipVariant)[keyof typeof TooltipVariant];
 export interface WithTooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'content'> {
     content?: ReactElement | undefined | string;

package/theme.css

@@ -1,160 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-:root {
-  --background: oklch(1 0 0); /* Background stateless #ffffff */
-  --foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
-  --popover: oklch(1 0 0); /* Background stateless #ffffff */
-  --popover-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
-  --primary: oklch(0.578 0.198 268.129); /* Accent Stateless #496CED */
-  --primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
-  --secondary: oklch(98.16% 0.002 247.84); /* Background active #F8F9FA */
-  --secondary-foreground: oklch(53.03% 0.039 249.89);
-  --muted: oklch(0.95 0.01 285); /* Background active #F3F7FA */
-  --muted-foreground: oklch(0.685 0.033 249.82);
-  --accent: oklch(0.578 0.198 268.129 / 0.07); /* Background active #F3F7FA */
-  --accent-foreground: oklch(0.578 0.198 268.129); /* Text Primary #37414B */
-  --success: oklch(0.7487 0.1799 154.83); /* #26C17A */
-  --success-foreground: oklch(0.4238 0.1235 165.45); /* #006D3B */
-  --destructive: oklch(0.577 0.215 27.325); /* #DC2626 */
-  --destructive-foreground: oklch(0.3963 0.1994 27.40); /* #82181A */
-  --destructive-4: oklch(0.967 0.016 17.438); /* #FFF0F0 */
-  --info: oklch(0.6632 0.1896 241.34); /* #0090E4 */
-  --info-foreground: oklch(0.3902 0.1177 248.61); /* #024A71 */
-  --warning: oklch(0.734 0.157 69.419); /* #E7940F */
-  --warning-foreground: oklch(0.4429 0.1617 63.95); /* #733E0A */
-  --warning-4: oklch(0.978 0.025 86.868); /* #FFF7E5 */
-  --border: oklch(92.86% 0.009 247.92); /* Borders Secondary #E3E8ED */
-  --input: oklch(0.8625 0.0257 248.73); /* Border Primary Stateless #CCD6DE */
-  --ring: oklch(0.578 0.198 268.129 / 0.7);
-  --shadow: oklch(26.18% 0.024 256.43 / 0.1);
-
-  --chart-1: oklch(0.646 0.222 41.116);   /* Chart 1 - Orange/Yellow Base - approx #DA9834 */
-  --chart-2: oklch(0.6 0.118 184.704);    /* Chart 2 - Teal/Greenish-Blue Base - approx #4BA3AD */
-  --chart-3: oklch(0.398 0.07 227.392);   /* Chart 3 - Muted Blue Base - approx #435C9A */
-  --chart-4: oklch(0.828 0.189 84.429);   /* Chart 4 - Bright Lime-Yellow Base - approx #E2E14D */
-  --chart-5: oklch(0.769 0.188 70.08);    /* Chart 5 - Golden-Yellow Base - approx #E3C442 */
-
-  --sidebar: oklch(0.45 0.229 265.091); /* Background stateless #153DD1 */
-  --sidebar-foreground: oklch(1 0 0); /* Text Primary #ffffff */
-  --sidebar-primary: oklch(0.578 0.198 268.129); /* Accent Stateless #6879EB */
-  --sidebar-primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
-  --sidebar-accent: oklch(0.9641 0.0065 231.29); /* Background active #F3F7FA */
-  --sidebar-accent-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
-  --sidebar-border: oklch(0.9103 0.0177 246.73); /* Borders Secondary #DFE7ED */
-  --sidebar-ring: oklch(0.6 0.2 268.129 / 0.7);
-
-  --panel: oklch(0.5202 0.2024 278.91); /* Background Accent Active #4958BC */
-  --panel-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
-  --panel-primary: oklch(0.5202 0.2024 278.91); /* Background Accent Active #4958BC */
-  --panel-primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
-  --panel-input: oklch(1 0 0); /* Background stateless #ffffff */
-  --panel-ring: oklch(0.6662 0.2007 280.88); /* Borders Base #6879EB */
-}
-
-:root.dark {
-  --background: oklch(0.13 0.027 261.692);
-  --foreground: oklch(0.95 0.01 264.55);
-  --card: oklch(0.25 0.01 264.55);
-  --card-foreground: oklch(0.95 0.01 264.55);
-  --popover: oklch(0.25 0.01 264.55);
-  --popover-foreground: oklch(0.95 0.01 264.55);
-  --primary: oklch(0.6 0.2 268.129);
-  --primary-foreground: oklch(0.95 0.01 264.55);
-  --secondary: oklch(0.13 0.027 261.692);
-  --secondary-foreground: oklch(0.9 0.01 264.55);
-  --muted: oklch(0.3 0.01 285);
-  --muted-foreground: oklch(0.75 0.01 249.82);
-  --accent: oklch(0.6 0.2 268.129 / 0.07);
-  --accent-foreground: oklch(0.95 0.01 264.55);
-  --success: oklch(0.6 0.2 154.83);
-  --success-foreground: oklch(0.2 0.1 165.45);
-  --destructive: oklch(0.55 0.2 27.325);
-  --destructive-foreground: oklch(0.9 0.01 264.55);
-  --destructive-4: oklch(0.2 0.01 17.438);
-  --info: oklch(0.65 0.2 241.34);
-  --info-foreground: oklch(0.95 0.01 248.61);
-  --warning: oklch(0.7 0.15 69.419);
-  --warning-foreground: oklch(0.2 0.1 63.95);
-  --warning-4: oklch(0.3 0.01 86.868);
-  --border: oklch(0.3 0.01 247.92);
-  --input: oklch(0.4 0.02 248.73);
-  --ring: oklch(0.6 0.2 268.129 / 0.7);
-  --shadow: oklch(0 0 0 / 0.2);
-
-  --chart-1: oklch(0.7 0.2 41.116);
-  --chart-2: oklch(0.65 0.1 184.704);
-  --chart-3: oklch(0.6 0.07 227.392);
-  --chart-4: oklch(0.75 0.18 84.429);
-  --chart-5: oklch(0.7 0.18 70.08);
-
-  --sidebar: oklch(0.45 0.229 265.091); /* Background stateless #153DD1 */
-  --sidebar-foreground: oklch(1 0 0); /* Text Primary #ffffff */
-  --sidebar-primary: oklch(0.578 0.198 268.129); /* Accent Stateless #6879EB */
-  --sidebar-primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
-  --sidebar-accent: oklch(0.9641 0.0065 231.29); /* Background active #F3F7FA */
-  --sidebar-accent-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
-  --sidebar-border: oklch(0.9103 0.0177 246.73); /* Borders Secondary #DFE7ED */
-  --sidebar-ring: oklch(0.6 0.2 268.129 / 0.7);
-
-  --panel: oklch(0.28 0.15 278.91);
-  --panel-foreground: oklch(0.98 0.01 264.55);
-  --panel-primary: oklch(0.35 0.18 278.91);
-  --panel-primary-foreground: oklch(1 0 0);
-  --panel-input: oklch(0.2 0.01 264.55);
-  --panel-ring: oklch(0.6 0.2 280.88);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-shadow: var(--shadow);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-warning: var(--warning);
-  --color-warning-4: var(--warning-4);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-4: var(--destructive-4);
-  --color-destructive-foreground: var(--destructive-foreground);
-
-  --color-panel: var(--panel);
-  --color-panel-foreground: var(--panel-foreground);
-  --color-panel-primary: var(--panel-primary);
-  --color-panel-primary-foreground: var(--panel-primary-foreground);
-  --color-panel-input: var(--panel-input);
-  --color-panel-ring: var(--panel-ring);
-}