@scaleflex/ui-tw 0.0.10 → 0.0.13

package/card/card.component.js

@@ -13,7 +13,7 @@ function Card(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "card",
-    className: cn('bg-card lg:border-border border-y-border shadow-shadow mt-8 max-w-7xl border-y shadow-md lg:rounded-xl lg:border', className)
+    className: cn('text-card-foreground bg-card lg:border-border border-y-border shadow-shadow mt-8 max-w-7xl border-y shadow-md lg:rounded-xl lg:border', className)
   }, rest));
 }
 function CardHeader(_ref2) {

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

@@ -0,0 +1,5 @@
+import { FormInputFieldProps } from '@scaleflex/ui-tw/form/form.types';
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+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

@@ -0,0 +1,16 @@
+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';
+function FormPasswordField(_ref) {
+  var inputProps = _ref.inputProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
+    return /*#__PURE__*/React.createElement(PasswordInput, _extends({
+      placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder
+    }, args, inputProps, field));
+  });
+}
+export { FormPasswordField };

package/form/index.d.ts

@@ -1,5 +1,6 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField, } from './form.component';
 export { FormFieldGroup } from './components/form-field-group.component';
 export { FormInputField } from './components/form-input-field.component';
+export { FormPasswordField } from './components/form-password-field.component';
 export { FormTextareaField } from './components/form-textarea-field.component';
 export { FormSwitchField } from './components/form-switch-field.component';

package/form/index.js

@@ -1,5 +1,6 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField } from './form.component';
 export { FormFieldGroup } from './components/form-field-group.component';
 export { FormInputField } from './components/form-input-field.component';
+export { FormPasswordField } from './components/form-password-field.component';
 export { FormTextareaField } from './components/form-textarea-field.component';
 export { FormSwitchField } from './components/form-switch-field.component';

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

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

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

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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';
+export function PasswordInput(_ref) {
+  var className = _ref.className,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPassword = _useState2[0],
+    setShowPassword = _useState2[1];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative w-full"
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+    type: showPassword ? 'text' : 'password',
+    size: size,
+    disabled: disabled,
+    readOnly: readOnly,
+    className: cn('pr-10', className)
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setShowPassword(function (value) {
+        return !value;
+      });
+    },
+    className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer p-1 focus:outline-none",
+    tabIndex: -1,
+    "aria-label": showPassword ? 'Hide password' : 'Show password'
+  }, showPassword ? /*#__PURE__*/React.createElement(EyeClosed, null) : /*#__PURE__*/React.createElement(EyeOpen, null)));
+}

package/input/index.d.ts

@@ -1,3 +1,4 @@
 export { Input, inputVariants } from './input.component';
 export type { InputProps } from './input.types';
 export { InputType } from './input.constants';
+export { PasswordInput } from './components/password-input.component';

package/input/index.js

@@ -1,2 +1,3 @@
 export { Input, inputVariants } from './input.component';
-export { InputType } from './input.constants';
+export { InputType } from './input.constants';
+export { PasswordInput } from './components/password-input.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -17,12 +17,13 @@
     "@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.10",
+    "@scaleflex/icons-tw": "^0.0.13",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",
     "lucide-react": "^0.487.0",
     "prop-types": "^15.7.2",
+    "sonner": "^2.0.3",
     "tw-animate-css": "^1.2.5"
   },
   "devDependencies": {

package/theme.css

@@ -20,10 +20,12 @@
   --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); /* Borders Base #6879EB */
@@ -49,6 +51,59 @@
   --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.18 0.01 264.55);
+  --sidebar-foreground: oklch(0.95 0.01 264.55);
+  --sidebar-primary: oklch(0.6 0.2 280.88);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.3 0.01 231.29);
+  --sidebar-accent-foreground: oklch(0.95 0.01 264.55);
+  --sidebar-border: oklch(0.3 0.01 246.73);
+  --sidebar-ring: oklch(0.6 0.2 280.88);
+
+  --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);
@@ -69,8 +124,6 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-shadow: var(--shadow);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -89,7 +142,11 @@
   --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);

package/toaster/index.d.ts

@@ -0,0 +1,3 @@
+export { toast } from 'sonner';
+export { Toaster } from './toaster.component';
+export { ToasterProps } from './toaster.types';

package/toaster/index.js

@@ -0,0 +1,3 @@
+export { toast } from 'sonner';
+export { Toaster } from './toaster.component';
+export { ToasterProps } from './toaster.types';

package/toaster/toaster.component.d.ts

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

package/toaster/toaster.component.js

@@ -0,0 +1,22 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Toaster as Sonner } from 'sonner';
+var Toaster = function Toaster(_ref) {
+  var _props$position, _props$richColors, _props$closeButton, _props$duration;
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(Sonner, _extends({
+    position: (_props$position = props.position) !== null && _props$position !== void 0 ? _props$position : 'bottom-center',
+    richColors: (_props$richColors = props.richColors) !== null && _props$richColors !== void 0 ? _props$richColors : true,
+    closeButton: (_props$closeButton = props.closeButton) !== null && _props$closeButton !== void 0 ? _props$closeButton : true,
+    duration: (_props$duration = props.duration) !== null && _props$duration !== void 0 ? _props$duration : 3000,
+    toastOptions: {
+      classNames: {
+        toast: '!text-sm !shadow-sm !items-start !font-roboto',
+        closeButton: '!-right-4 !left-auto',
+        icon: '!top-0.5'
+      }
+    }
+  }, props));
+};
+export { Toaster };

package/toaster/toaster.types.d.ts

@@ -0,0 +1,3 @@
+import { ToasterProps as SonnerToasterProps } from 'sonner';
+export interface ToasterProps extends SonnerToasterProps {
+}

package/toaster/toaster.types.js

@@ -0,0 +1 @@
+export {};

package/tooltip/index.d.ts

@@ -1 +1,3 @@
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip } from './tooltip.component';
+export { TooltipVariant } from './tooltip.constants';
+export type { TooltipVariantType } from './tooltip.types';

package/tooltip/index.js

@@ -1 +1,2 @@
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip } from './tooltip.component';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip } from './tooltip.component';
+export { TooltipVariant } from './tooltip.constants';

package/tooltip/tooltip.component.d.ts

@@ -1,10 +1,10 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { WithTooltipProps } from '@scaleflex/ui-tw/tooltip/tooltip.types';
+import { TooltipContentProps, WithTooltipProps } from '@scaleflex/ui-tw/tooltip/tooltip.types';
 import * as React from 'react';
 import { ComponentProps } from 'react';
 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;
-declare function TooltipContent({ className, sideOffset, children, ...props }: ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
-declare function WithTooltip({ content, children }: WithTooltipProps): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, variant, ...props }: TooltipContentProps): React.JSX.Element;
+declare function WithTooltip({ variant, content, children }: WithTooltipProps): React.JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip };

package/tooltip/tooltip.component.js

@@ -2,9 +2,11 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructurin
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["delayDuration"],
-  _excluded2 = ["className", "sideOffset", "children"];
+  _excluded2 = ["className", "sideOffset", "children", "variant"];
 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';
 function TooltipProvider(_ref) {
   var _ref$delayDuration = _ref.delayDuration,
@@ -27,25 +29,42 @@ function TooltipTrigger(_ref3) {
     "data-slot": "tooltip-trigger"
   }, props));
 }
+var tooltipVariants = cva('', {
+  variants: {
+    variant: tooltipVariantOptions
+  },
+  defaultVariants: {
+    variant: TooltipVariant.Default
+  }
+});
 function TooltipContent(_ref4) {
   var className = _ref4.className,
     _ref4$sideOffset = _ref4.sideOffset,
     sideOffset = _ref4$sideOffset === void 0 ? 0 : _ref4$sideOffset,
     children = _ref4.children,
+    _ref4$variant = _ref4.variant,
+    variant = _ref4$variant === void 0 ? TooltipVariant.Default : _ref4$variant,
     props = _objectWithoutProperties(_ref4, _excluded2);
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, _extends({
     "data-slot": "tooltip-content",
     sideOffset: sideOffset,
-    className: cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', className)
+    className: cn('animate-in fade-in-0 zoom-in-95 text-md z-50 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2 text-balance', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
+      variant: variant
+    }), className)
   }, props), children, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
-    className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
+    className: cn('z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] fill-transparent', tooltipVariants({
+      variant: variant
+    }))
   })));
 }
 function WithTooltip(_ref5) {
-  var content = _ref5.content,
+  var variant = _ref5.variant,
+    content = _ref5.content,
     children = _ref5.children;
   return /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
     asChild: true
-  }, children), /*#__PURE__*/React.createElement(TooltipContent, null, content));
+  }, children), /*#__PURE__*/React.createElement(TooltipContent, {
+    variant: variant
+  }, content));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip };

package/tooltip/tooltip.constants.d.ts

@@ -0,0 +1,10 @@
+export declare const TooltipVariant: {
+    readonly Default: "default";
+    readonly Error: "error";
+    readonly Warning: "warning";
+};
+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";
+};

package/tooltip/tooltip.constants.js

@@ -0,0 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var TooltipVariant = {
+  Default: 'default',
+  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');

package/tooltip/tooltip.types.d.ts

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