@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/components/input.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from 'erxes-ui/lib/utils';
+import { Except } from 'type-fest';
+import { IMaskInput } from 'react-imask';
+
+export const inputVariants = cva(
+  'flex h-8 w-full rounded-sm bg-background px-3 py-2 text-sm text-foreground shadow-xs transition-[color,box-shadow] placeholder:text-accent-foreground/70 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 focus-visible:shadow-focus',
+  {
+    variants: {
+      type: {
+        file: 'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        search:
+          '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none',
+        default: '',
+        number:
+          '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+      },
+      variant: {
+        default: '',
+        secondary: 'bg-muted shadow-none focus-visible:shadow-subtle',
+      },
+    },
+    defaultVariants: {
+      type: 'default',
+      variant: 'default',
+    },
+  },
+);
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
+  Except<VariantProps<typeof inputVariants>, 'type'>;
+
+const InputMain = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, variant, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        autoComplete="off"
+        className={cn(
+          inputVariants({
+            type:
+              type === 'file'
+                ? 'file'
+                : type === 'search'
+                ? 'search'
+                : 'default',
+            variant,
+          }),
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+InputMain.displayName = 'Input';
+
+export const InputNumber = React.forwardRef<
+  React.ElementRef<typeof IMaskInput>,
+  Except<
+    React.ComponentPropsWithoutRef<typeof IMaskInput>,
+    'onChange' | 'value'
+  > & {
+    onChange?: (value?: number | '') => void;
+    value?: number;
+  }
+>(({ value, onChange, className, ...props }, ref) => {
+  return (
+    <IMaskInput
+      ref={ref}
+      mask={Number as any}
+      onAccept={(value) => {
+        onChange?.(value ? Number(value) : '');
+      }}
+      value={value + ''}
+      autoComplete="off"
+      radix="."
+      thousandsSeparator={','}
+      className={cn(inputVariants({ type: 'number' }), className)}
+      unmask
+      {...props}
+    />
+  );
+});
+
+InputNumber.displayName = 'InputNumber';
+
+export const Input = Object.assign(InputMain, {
+  Number: InputNumber,
+});

package/src/components/kbd.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { cn } from 'erxes-ui/lib';
+
+/**
+ * This component is based on the `kbd` element and supports all of its props
+ */
+export const Kbd = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'kbd'> & {
+    variant?: 'background' | 'foreground';
+  }
+>(({ children, className, variant = 'background', ...props }, ref) => {
+  return (
+    <kbd
+      {...props}
+      ref={ref}
+      className={cn(
+        'opacity-70 inline-flex h-5 w-fit min-w-[20px] items-center justify-center rounded-md border px-1',
+        'text-xs',
+        variant === 'background' && 'bg-background/10 border-background/20',
+        variant === 'foreground' && 'bg-foreground/10 border-foreground/20',
+        className,
+      )}
+    >
+      {children}
+    </kbd>
+  );
+});
+Kbd.displayName = 'Kbd';

package/src/components/label.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { Label as LabelPrimitive } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const labelVariants = cva(
+  'leading-none inline-block peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  {
+    variants: {
+      variant: {
+        default:
+          'font-mono uppercase font-semibold text-xs text-accent-foreground ',
+        peer: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, variant, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants({ variant }), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;