x-ui-design 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { Form } from '@/xUiDesign/components/Form';
+export { FormItem } from '@/xUiDesign/components/Form/Item';
+export { Checkbox } from '@/xUiDesign/components/Checkbox';
+export { DatePicker } from '@/xUiDesign/components/DatePicker';
+export { TimePicker } from '@/xUiDesign/components/DatePicker/TimePicker';
+export { RangePicker } from '@/xUiDesign/components/DatePicker/RangePicker';
+export { ButtonComponent } from '@/xUiDesign/components/Button';
+export { EmptyContent } from '@/xUiDesign/components/Empty';
+export { Input } from '@/xUiDesign/components/Input';
+export { Textarea } from '@/xUiDesign/components/Input/Textarea';
+export { Radio } from '@/xUiDesign/components/Radio';
+export { RadioGroup } from '@/xUiDesign/components/Radio/Group';
+export { RadioButton } from '@/xUiDesign/components/Radio/Button';
+export { Select } from '@/xUiDesign/components/Select';
+export { Option } from '@/xUiDesign/components/Select/Option';
+export { Tag } from '@/xUiDesign/components/Select/Tag';
+export { Skeleton } from '@/xUiDesign/components/Skeleton';
+export { SkeletonAvatar } from '@/xUiDesign/components/Skeleton/Avatar';
+export { SkeletonButton } from '@/xUiDesign/components/Skeleton/Button';
+export { SkeletonImage } from '@/xUiDesign/components/Skeleton/Image';
+export { SkeletonInput } from '@/xUiDesign/components/Skeleton/Input';
+export { Upload } from '@/xUiDesign/components/Upload';
+export { useForm } from '@/xUiDesign/hooks/useForm';
+export { useWatch } from '@/xUiDesign/hooks/useWatch';

package/dist/index.js

@@ -0,0 +1,25 @@
+export { Form } from '@/xUiDesign/components/Form';
+export { FormItem } from '@/xUiDesign/components/Form/Item';
+export { Checkbox } from '@/xUiDesign/components/Checkbox';
+export { DatePicker } from '@/xUiDesign/components/DatePicker';
+export { TimePicker } from '@/xUiDesign/components/DatePicker/TimePicker';
+export { RangePicker } from '@/xUiDesign/components/DatePicker/RangePicker';
+export { ButtonComponent } from '@/xUiDesign/components/Button';
+export { EmptyContent } from '@/xUiDesign/components/Empty';
+export { Input } from '@/xUiDesign/components/Input';
+export { Textarea } from '@/xUiDesign/components/Input/Textarea';
+export { Radio } from '@/xUiDesign/components/Radio';
+export { RadioGroup } from '@/xUiDesign/components/Radio/Group';
+export { RadioButton } from '@/xUiDesign/components/Radio/Button';
+export { Select } from '@/xUiDesign/components/Select';
+export { Option } from '@/xUiDesign/components/Select/Option';
+export { Tag } from '@/xUiDesign/components/Select/Tag';
+export { Skeleton } from '@/xUiDesign/components/Skeleton';
+export { SkeletonAvatar } from '@/xUiDesign/components/Skeleton/Avatar';
+export { SkeletonButton } from '@/xUiDesign/components/Skeleton/Button';
+export { SkeletonImage } from '@/xUiDesign/components/Skeleton/Image';
+export { SkeletonInput } from '@/xUiDesign/components/Skeleton/Input';
+export { Upload } from '@/xUiDesign/components/Upload';
+export { useForm } from '@/xUiDesign/hooks/useForm';
+export { useWatch } from '@/xUiDesign/hooks/useWatch';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,26 +1,39 @@
 {
   "name": "x-ui-design",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
+    "rollup-build": "rollup -c --bundleConfigAsCjs",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "next": "15.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.2.0",
-    "typescript": "^5"
+    "rollup": "^4.40.2",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.8.3"
   }
 }

package/eslint.config.mjs

@@ -1,16 +0,0 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
-
-export default eslintConfig;

package/next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;

package/src/app/globals.css

@@ -1,43 +0,0 @@
-:root {
-    /* MAIN */
-    --xui-color-hover: #f5f5f5;
-    --xui-color-disabled: #e6e6e6;
-
-    --xui-primary-color: #1677ff;
-    --xui-primary-color-light: #40a9ff;
-
-    --xui-text-color: rgba(0, 0, 0, 0.88);
-    --xui-text-color-light: rgba(0, 0, 0, 0.5);
-
-    --xui-error-color: #ff4d4f;
-    --xui-success-color: #52c41a;
-
-    --xui-background-color: #ffffff;
-
-    /* FONTS */
-    --xui-font-size-xs: 12px;
-    --xui-font-size-sm: 14px;
-    --xui-font-size-md: 14px;
-    --xui-font-size-lg: 16px;
-
-    /* BORDERS */
-    --xui-border-radius-sm: 4px;
-    --xui-border-radius-md: 4px;
-    --xui-border-radius-lg: 6px;
-
-    --xui-border-color: #d9d9d9;
-
-    /* SELECT */
-    --xui-select-primary-color: var(--xui-primary-color);
-    --xui-select-background-color: var(--xui-background-color);
-}
-
-html {
-    font-family: sans-serif;
-}
-
-.globalEllipsis {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}

package/src/app/layout.tsx

@@ -1,16 +0,0 @@
-import { ReactNode } from "react";
-import "./globals.css";
-
-export default function RootLayout({
-	children,
-}: Readonly<{
-	children: ReactNode;
-}>) {
-	return (
-		<html lang="en">
-			<body>
-				{children}
-			</body>
-		</html>
-	);
-}

package/src/app/page.tsx

@@ -1,18 +0,0 @@
-'use client'
-
-import Upload from "@/xUiDesign/components/Upload";
-
-export default function Home() {
-    return (
-        <>
-            <Upload
-                action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
-                listType="picture"
-                multiple
-                onChange={(e) => console.log(e)}
-            >
-                <button>Select File</button>
-            </Upload>
-        </>
-    )
-}

package/src/xUiDesign/components/Checkbox/index.tsx

@@ -1,110 +0,0 @@
-"use client"
-
-import {
-  ForwardedRef,
-  forwardRef,
-  MouseEvent,
-  ReactElement,
-  useEffect,
-  useState
-} from 'react';
-import { SyntheticBaseEvent } from '@/xUiDesign/types';
-import { CheckboxProps } from '@/xUiDesign/types/checkbox';
-import { prefixClsCheckbox } from '@/xUiDesign/utils';
-import './style.css';
-import { clsx } from '@/xUiDesign/helpers';
-
-const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
-  prefixCls = prefixClsCheckbox,
-  className = '',
-  defaultChecked = false,
-  checked,
-  style,
-  disabled = false,
-  onChange,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  onKeyPress,
-  onKeyDown,
-  tabIndex,
-  name,
-  children,
-  id,
-  autoFocus,
-  type = 'checkbox',
-  value = false,
-  required = false,
-  noStyle
-}, ref: ForwardedRef<HTMLDivElement>): ReactElement => {
-  const isChecked = checked !== undefined ? checked : defaultChecked || value;
-  const [internalChecked, setInternalChecked] = useState(isChecked);
-
-  const handleClick = (
-    e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
-  ) => {
-    e.stopPropagation();
-
-    if (disabled) {
-      return;
-    }
-
-    setInternalChecked(!internalChecked);
-    e.target.value = !internalChecked;
-
-    onClick?.(e);
-    onChange?.(e);
-  };
-
-  useEffect(() => {
-    if (checked !== undefined) {
-      setInternalChecked(checked);
-    }
-  }, [checked]);
-
-  return (
-    <div className={`${prefixCls}-wrapper`}>
-    <div
-      ref={ref}
-      style={style}
-      onClick={handleClick}
-      className={clsx([
-        prefixCls,
-        className,
-        {
-          'noStyle': noStyle,
-          [`${prefixCls}-disabled`]: disabled,
-          [`${prefixCls}-checked`]: internalChecked
-        }
-      ])}
-    >
-      <input
-        id={id}
-        type={type}
-        name={name}
-        disabled={disabled}
-        tabIndex={tabIndex}
-        required={required}
-        autoFocus={autoFocus}
-        onKeyDown={onKeyDown}
-        onKeyPress={onKeyPress}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      />
-
-      <span className={`${prefixCls}-box`}>
-        <span
-          className={`${prefixCls}-check`}
-          style={{ opacity: Number(internalChecked) }}
-        />
-      </span>
-      </div>
-
-      {children && <span className={`${prefixCls}-label`}>{children}</span>}
-    </div>
-  );
-});
-
-Checkbox.displayName = "Checkbox"
-
-export { Checkbox };

package/src/xUiDesign/components/Checkbox/style.css

@@ -1,91 +0,0 @@
-.xUi-checkbox-wrapper {
-    cursor: pointer;
-    font-size: var(--xui-font-size-md);
-    align-items: center;
-    display: inline-flex;
-    color: var(--xui-main-color);
-    margin: 16px 0;
-}
-
-.xUi-checkbox {
-    width: 14px;
-    height: 14px;
-    position: relative;
-    border-radius: var(--xui-border-radius-sm);
-    transition: all 0.3s;
-    display: inline-block;
-    background-color: transparent;
-    border: 1px solid var(--xui-border-color);
-}
-
-.xUi-checkbox.xUi-checkbox-checked {
-    border-color: var(--xui-primary-color);
-    background-color: #f0f5ff;
-}
-
-.xUi-checkbox input {
-    inset: 0;
-    opacity: 0;
-    cursor: pointer;
-    position: absolute;
-}
-
-.xUi-checkbox-inner {
-    top: 50%;
-    left: 50%;
-    width: 10px;
-    height: 6px;
-    border-top: 0;
-    border-left: 0;
-    position: absolute;
-    border: 2px solid var(--xui-background-color);
-    transform: rotate(45deg) scale(0);
-    transition: transform 0.2s ease-in-out;
-}
-
-.xUi-checkbox-check {
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: relative;
-    transition: 0.1s ease;
-    border-color: var(--xui-primary-color);
-    background-color: var(--xui-primary-color);
-}
-
-.xUi-checkbox-check::after {
-    top: 1px;
-    left: 3px;
-    width: 5px;
-    height: 8px;
-    content: "";
-    position: absolute;
-    border: solid white;
-    transform: rotate(45deg);
-    border-width: 0 2px 2px 0;
-}
-
-.xUi-checkbox-disabled,
-.xUi-checkbox-disabled .xUi-checkbox-check {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background-color: var(--xui-color-disabled);
-    border-color: var(--xui-border-color) !important;
-}
-
-.xUi-checkbox-label {
-    margin-left: 8px;
-    user-select: none;
-    font-size: 14px;
-}
-
-.xUi-checkbox:hover:not(.disabled),
-.xUi-checkbox:focus:not(.disabled) {
-    border-color: var(--xui-primary-color);
-    cursor: pointer;
-}
-
-.xUi-checkbox.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}