@ourtrip/ui 1.0.5 → 1.0.7

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@ourtrip/ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "webpack"
   },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -16,16 +21,12 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@types/react-slider": "^1.3.6",
     "microbundle": "^0.15.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "rollup": "^2.79.2",
-    "rollup-plugin-typescript2": "^0.36.0",
     "ts-loader": "^9.5.2",
     "typescript": "^5.8.2",
     "webpack": "^5.98.0",

package/src/components/accordion.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-
-interface IAccordionProps {
-  title: string;
-  text: string;
-}
-
-const Accordion = ({ title, text }: IAccordionProps) => {
-  const [open, setOpen] = useState<boolean>(false);
-
-  return (
-    <div
-      className='w-full flex flex-col p-6 border border-gray-200 rounded-default cursor-pointer'
-      onClick={() => setOpen(prev => !prev)}
-    >
-      <div className='flex items-center gap-6'>
-        <div
-          className={`relative w-10 h-10 rounded-full flex justify-center items-center transition-colors duration-300 ${
-            open ? 'bg-primary-900' : 'bg-gray-100'
-          }`}
-        >
-          <div
-            className={`absolute w-4 h-0.5 rounded transition-transform duration-300 ${
-              open
-                ? 'bg-primary-900 transform rotate-[-90deg]'
-                : 'bg-primary-900 transform rotate-[-180deg]'
-            }`}
-          />
-          <div
-            className={`absolute w-4 h-0.5 rounded transition-transform duration-300 ${
-              open
-                ? 'bg-white transform rotate-0'
-                : 'bg-primary-900 transform rotate-[-90deg]'
-            }`}
-          />
-        </div>
-        <h2 className='font-medium text-lg text-primary-900'>{title}</h2>
-      </div>
-      <div
-        className={`pl-16 overflow-hidden transition-max-height duration-500 ease-in-out ${
-          open ? 'max-h-56' : 'max-h-0'
-        }`}
-      >
-        <p className='pt-2.5 text-base text-gray-500 leading-7'>{text}</p>
-      </div>
-    </div>
-  );
-};
-
-export default Accordion;

package/src/components/alert.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import React, { FC, ReactNode } from 'react';
-import { Check, Info, Warning, WarningCircle } from '@phosphor-icons/react';
-
-type TAlertType = 'info' | 'success' | 'danger' | 'warning';
-type TAlertVariant = 'fill' | 'outline';
-
-interface IAlertProps {
-  type: TAlertType;
-  variant: TAlertVariant;
-  children: ReactNode;
-}
-
-const iconByAlertType: Record<TAlertType, ReactNode> = {
-  danger: <WarningCircle size={24} />,
-  success: <Check size={24} />,
-  info: <Info size={24} />,
-  warning: <Warning size={24} />
-};
-
-const Alert: FC<IAlertProps> = ({ type, variant, children }) => {
-  const baseClasses = 'rounded-default p-4 flex items-start gap-4';
-  const typeVariantClasses: Record<
-    TAlertType,
-    Record<TAlertVariant, string>
-  > = {
-    info: {
-      fill: 'bg-info-500 text-white',
-      outline: 'border border-info-500 text-info-500'
-    },
-    success: {
-      fill: 'bg-success-500 text-white',
-      outline: 'border border-success-500 text-success-500'
-    },
-    danger: {
-      fill: 'bg-danger-500 text-white',
-      outline: 'border border-danger-500 text-danger-500'
-    },
-    warning: {
-      fill: 'bg-warning-500 text-white',
-      outline: 'border border-warning-500 text-warning-500'
-    }
-  };
-
-  const className = `${baseClasses} ${typeVariantClasses[type][variant]}`;
-
-  return (
-    <div className={className}>
-      {iconByAlertType[type]}
-      <div>{children}</div>
-    </div>
-  );
-};
-
-export default Alert;

package/src/components/badge.tsx

@@ -1,84 +0,0 @@
-'use client';
-
-import React, { FC, ReactNode } from 'react';
-
-type BadgeSize = 'small' | 'normal' | 'large';
-
-interface IBadgeProps {
-  icon?: ReactNode;
-  children: ReactNode;
-  type:
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'info'
-    | 'white'
-    | 'primary'
-    | 'secondary';
-  size?: BadgeSize;
-  mobile?: boolean;
-  className?: string;
-}
-
-const Badge: FC<IBadgeProps> = ({
-  children,
-  icon,
-  type,
-  size = 'normal',
-  mobile,
-  className
-}) => {
-  const baseClasses = `flex items-center rounded-button ${
-    mobile ? 'lg:hidden md:flex' : ''
-  } ${className || ''}`;
-  let typeClasses = '';
-
-  const sizeClasses = {
-    small: 'px-2 py-1 gap-0',
-    normal: 'py-2 px-3 gap-2',
-    large: 'py-3 px-4 gap-3'
-  }[size];
-
-  const textSizesClasses = {
-    small: 'text-xs font-normal',
-    normal: 'text-sm font-semibold',
-    large: 'text-base font-semibold'
-  }[size];
-
-  switch (type) {
-    case 'success':
-      typeClasses = 'bg-success-100 text-success-600';
-      break;
-    case 'warning':
-      typeClasses = 'bg-warning-100 text-warning-600';
-      break;
-    case 'danger':
-      typeClasses = 'bg-danger-100 text-danger-600';
-      break;
-    case 'info':
-      typeClasses = 'bg-info-100 text-info-900';
-      break;
-    case 'white':
-      typeClasses = 'bg-white text-gray-900';
-      break;
-    case 'primary':
-      typeClasses = 'bg-primary-500 text-white';
-      break;
-    case 'secondary':
-      typeClasses = 'bg-gray-100 text-primary-500';
-      break;
-    default:
-      typeClasses = '';
-  }
-
-  const textClasses = `font-semibold whitespace-nowrap ${textSizesClasses}`;
-
-  return (
-    <div className={`${baseClasses} ${typeClasses} ${sizeClasses}`}>
-      {icon && <span className='mr-2'>{icon}</span>}
-      <p className={textClasses}>{children}</p>
-    </div>
-  );
-};
-
-export default Badge;

package/src/components/breadcrumbs.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react';
-import { CaretRight } from '@phosphor-icons/react';
-
-export type BreadcrumbsItemType = {
-  id: string;
-  text: string;
-  href: string;
-};
-
-interface IBreadcrumbsProps {
-  items: BreadcrumbsItemType[];
-}
-
-const Breadcrumbs = ({ items }: IBreadcrumbsProps) => {
-  return (
-    <div className='flex items-center gap-2.5'>
-      {items?.map((item, index) => {
-        const isActive = index !== items.length - 1;
-        return (
-          <div key={item.id} className='flex items-center gap-2.5'>
-            <a
-              onClick={() => {
-                if (isActive) {
-                  window.open(item.href, '_blank');
-                }
-              }}
-              className={`no-underline text-blue-900 text-sm ${
-                isActive
-                  ? 'hover:text-blue-500 hover:cursor-pointer'
-                  : 'cursor-text'
-              }`}
-            >
-              {item.text}
-            </a>
-            {isActive && <CaretRight />}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Breadcrumbs;

package/src/components/button.tsx

@@ -1,187 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { CircleNotch } from '@phosphor-icons/react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/classes';
-
-const buttonVariants = cva(
-  'flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus:outline-hidden',
-  {
-    variants: {
-      variant: {
-        fill: '',
-        outline: 'bg-transparent border'
-      },
-      color: {
-        primary: '',
-        secondary: '',
-        danger: '',
-        gray: '',
-        white: ''
-      },
-      size: {
-        small: 'h-[32px] px-4 text-sm',
-        normal: 'h-[40px] px-6 text-base',
-        large: 'h-[48px] px-8 text-lg',
-        icon: 'h-[40px] w-[40px] p-0'
-      },
-      shape: {
-        default: 'rounded-inner',
-        rounded: 'rounded-full'
-      },
-      fontWeight: {
-        normal: 'font-normal',
-        bold: 'font-medium'
-      },
-      fullWidth: {
-        true: 'w-full',
-        false: ''
-      },
-      fullHeight: {
-        true: 'h-full',
-        false: ''
-      },
-      disabled: {
-        true: 'bg-gray-200 text-gray-900 border-none cursor-not-allowed hover:bg-gray-200 hover:text-gray-900',
-        false: ''
-      }
-    },
-    compoundVariants: [
-      {
-        variant: 'fill',
-        color: 'primary',
-        disabled: false,
-        className: 'bg-primary-500 text-white hover:bg-primary-400 active:bg-primary-600'
-      },
-      {
-        variant: 'fill',
-        color: 'secondary',
-        disabled: false,
-        className: 'bg-secondary-500 text-white hover:bg-secondary-400 active:bg-secondary-600'
-      },
-      {
-        variant: 'fill',
-        color: 'danger',
-        disabled: false,
-        className: 'bg-red-500 text-white hover:bg-red-400 active:bg-red-600'
-      },
-      {
-        variant: 'fill',
-        color: 'gray',
-        disabled: false,
-        className: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300'
-      },
-      {
-        variant: 'fill',
-        color: 'white',
-        disabled: false,
-        className: 'bg-white text-black hover:bg-gray-200'
-      },
-      {
-        variant: 'outline',
-        color: 'primary',
-        disabled: false,
-        className:
-          'text-primary-500 border-primary-500 hover:text-primary-400 hover:border-primary-400'
-      },
-      {
-        variant: 'outline',
-        color: 'secondary',
-        disabled: false,
-        className:
-          'text-secondary-500 border-secondary-500 hover:text-secondary-400 hover:border-secondary-400'
-      },
-      {
-        variant: 'outline',
-        color: 'danger',
-        disabled: false,
-        className:
-          'text-red-500 border-red-500 hover:text-red-400 hover:border-red-400'
-      },
-      {
-        variant: 'outline',
-        color: 'gray',
-        disabled: false,
-        className:
-          'text-gray-300 border-gray-300 hover:text-gray-500 hover:border-gray-400'
-      },
-      {
-        variant: 'outline',
-        color: 'white',
-        disabled: false,
-        className:
-          'text-white border-white hover:text-gray-200 hover:border-gray-200'
-      }
-    ],
-    defaultVariants: {
-      variant: 'fill',
-      color: 'primary',
-      size: 'normal',
-      shape: 'default',
-      fontWeight: 'normal',
-      fullWidth: false,
-      fullHeight: false,
-      disabled: false
-    }
-  }
-);
-
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  loading?: boolean;
-  color?: 'primary' | 'secondary' | 'danger' | 'gray' | 'white';
-  disabled?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      color,
-      size,
-      shape,
-      fontWeight,
-      fullWidth,
-      fullHeight,
-      disabled,
-      loading = false,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        className={cn(
-          buttonVariants({
-            variant,
-            color,
-            size,
-            shape,
-            fontWeight,
-            fullWidth,
-            fullHeight,
-            disabled: disabled || loading
-          }),
-          className
-        )}
-        ref={ref}
-        disabled={disabled || loading}
-        {...props}
-      >
-        {loading ? (
-          <CircleNotch className='animate-spin' weight='bold' />
-        ) : (
-          children
-        )}
-      </button>
-    );
-  }
-);
-
-Button.displayName = 'Button';
-
-export default Button;

package/src/components/card.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import React, { FC, HTMLAttributes, ReactNode } from 'react';
-
-interface ICardProps {
-  children: ReactNode;
-}
-
-const Card: FC<ICardProps & HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <div
-      className='p-4 rounded-default border bg-white border-gray-200'
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default Card;

package/src/components/checkbox.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import React, { ReactNode, memo, useEffect, useState } from 'react';
-import { Check } from '@phosphor-icons/react';
-import Stars from './stars';
-
-interface ICheckbox {
-  value?: boolean;
-  // eslint-disable-next-line no-unused-vars
-  onChange?: (checked: boolean) => void;
-  label?: ReactNode;
-  trailing?: string | number;
-  textColor?: 'primary';
-  type?: string;
-}
-
-const Checkbox = ({
-  value,
-  onChange,
-  label,
-  trailing,
-  textColor,
-  type
-}: ICheckbox) => {
-  const [checked, setChecked] = useState<boolean>(value || false);
-  useEffect(() => {
-    if (value !== undefined) setChecked(value);
-  }, [value]);
-
-  return (
-    <div
-      className='w-full flex items-center justify-between cursor-pointer gap-2 select-none'
-      onClick={() => {
-        setChecked(prev => !prev);
-        onChange?.(!checked);
-      }}
-    >
-      <div className='flex items-center gap-2'>
-        <div
-          className={`w-5 h-5 flex items-center justify-center border border-primary-500 rounded-md flex-none mt-[3px] hover:bg-primary-500 ${
-            checked ? 'bg-primary-500' : ''
-          }`}
-        >
-          {checked && <Check size={12} color='white' weight='bold' />}
-        </div>
-        {label && (
-          <p
-            className={`flex items-center gap-1 text-sm mt-1 ${
-              textColor === 'primary' ? 'text-primary-900' : 'text-gray-500'
-            }`}
-          >
-            {type === 'stars' ? (
-              <Stars rate={parseFloat(label.toString())} />
-            ) : (
-              label
-            )}
-          </p>
-        )}
-      </div>
-      {trailing !== undefined && (
-        <p className='text-sm text-gray-500'>{trailing}</p>
-      )}
-    </div>
-  );
-};
-
-const propsAreEqual = (prevProps: ICheckbox, nextProps: ICheckbox) =>
-  prevProps.value === nextProps.value && prevProps.label === nextProps.label;
-
-export default memo(Checkbox, propsAreEqual);

package/src/components/collapse.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import React, { FC, ReactNode, useState } from 'react';
-import { CaretDown, CaretUp } from '@phosphor-icons/react';
-
-type TToggleType = 'bottom' | 'right';
-type IToggleTextType = {
-  open: string;
-  close: string;
-};
-
-interface ICollapseProps {
-  title: string;
-  content: ReactNode;
-  showPreview?: boolean;
-  toggleText?: IToggleTextType;
-  togglePosition?: TToggleType;
-}
-
-const Collapse: FC<ICollapseProps> = ({
-  title,
-  content,
-  showPreview = false,
-  togglePosition = 'right',
-  toggleText
-}) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div
-      className={`relative flex items-start ${
-        togglePosition === 'right' ? 'flex-row' : 'flex-col'
-      } gap-3`}
-      onClick={() => setOpen(prev => !prev)}
-    >
-      <div className='mt-1'>
-        <h3 className='text-sm text-primary-900'>{title}</h3>
-        <div
-          className={`overflow-hidden transition-max-height duration-300 ease-in-out ${
-            open ? 'max-h-[1000px]' : showPreview ? 'max-h-12' : 'max-h-0'
-          }`}
-        >
-          <p className='mt-1 text-gray-500'>{content}</p>
-        </div>
-      </div>
-      <div className='flex items-center gap-2'>
-        {toggleText && <span>{open ? toggleText.close : toggleText.open}</span>}
-        <div className='w-7 h-7 rounded-full bg-gray-100 flex items-center justify-center'>
-          {open ? <CaretUp size={18} /> : <CaretDown size={18} />}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Collapse;

package/src/components/divider.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import React, { HTMLAttributes } from 'react';
-import classNames from 'classnames';
-
-interface IDivider extends HTMLAttributes<HTMLDivElement> {
-  orientation?: 'horizontal' | 'vertical';
-  fullHeight?: boolean;
-  className?: string;
-}
-
-const Divider = ({
-  orientation = 'vertical',
-  fullHeight,
-  className,
-  ...props
-}: IDivider) => {
-  const dividerClass = classNames({
-    'w-px h-10 bg-gray-200': orientation === 'vertical' && !fullHeight,
-    'w-full h-px bg-gray-200': orientation === 'horizontal',
-    'w-px h-full bg-gray-200': orientation === 'vertical' && fullHeight,
-    [className as string]: className
-  });
-
-  return <div {...props} className={dividerClass} />;
-};
-
-export default Divider;