@companix/uikit 0.0.2 → 0.0.4

package/playground/switch/index.tsx

@@ -1,44 +0,0 @@
-import { Icon } from '@/Icon'
-import { Switch, SwitchProps } from '@/Switch'
-import { faCheck, faClose } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-
-const longtext = `The expanded form makes it easy to schedule meetings: fields to fill out are displayed on the left, and the participants' schedule is shown on the right.`
-
-export const SwitchExample = () => {
-  return (
-    <div className="col-group">
-      <div className="flex gap-24">
-        <div className="flex flex-col gap-12">
-          <SwitchControl label="Accept terms and conditions" />
-          <SwitchControl
-            label="I want to recieve promote emails"
-            checkedIcon={<Icon icon={faCheck} />}
-            uncheckedIcon={<Icon icon={faClose} />}
-          />
-        </div>
-        <div className="flex flex-col gap-12">
-          <SwitchControl label="Accept terms and conditions" disabled defaultChecked />
-          <SwitchControl label="I want to recieve promote emails" disabled />
-        </div>
-      </div>
-      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <div className="flex flex-col gap-12">
-        <SwitchControl label="Accept terms and conditions" defaultChecked />
-        <SwitchControl defaultChecked label={'Use the advanced form to create events'} />
-        <SwitchControl label={longtext + ' ' + longtext} defaultChecked />
-      </div>
-    </div>
-  )
-}
-
-interface Props extends Omit<SwitchProps, 'checked' | 'onCheckedChange'> {
-  label?: React.ReactNode
-  defaultChecked?: boolean
-}
-
-const SwitchControl = ({ defaultChecked, ...props }: Props) => {
-  const [checked, setCheck] = useState(defaultChecked ?? false)
-
-  return <Switch {...props} checked={checked} onCheckedChange={setCheck} />
-}

package/playground/tabs/index.tsx

@@ -1,16 +0,0 @@
-import { Tabs } from '@/Tabs'
-import { useState } from 'react'
-
-export const TabsExample = () => {
-  const [value, onChange] = useState<string>('account')
-
-  return (
-    <div>
-      <Tabs value={value} onChange={onChange}>
-        <Tabs.Tab value="account">Account</Tabs.Tab>
-        <Tabs.Tab value="password">Password</Tabs.Tab>
-        <Tabs.Tab value="settings">Settings</Tabs.Tab>
-      </Tabs>
-    </div>
-  )
-}

package/playground/text-area/index.tsx

@@ -1,17 +0,0 @@
-import { TextArea } from '@/TextArea'
-
-export const TextAreaExample = () => {
-  return (
-    <div className="col-group">
-      <div className="flex items-start gap-10">
-        <TextArea grow placeholder="Auto growing" />
-        <TextArea grow placeholder="Growing limited" style={{ maxHeight: '240px' }} />
-        <TextArea placeholder="Resizable and fill" fill />
-      </div>
-      <div className="flex items-start gap-10">
-        <TextArea grow placeholder="Auto growing" disabled />
-        <TextArea grow placeholder="Growing limited" style={{ maxHeight: '240px' }} required />
-      </div>
-    </div>
-  )
-}

package/playground/text-input/index.tsx

@@ -1,12 +0,0 @@
-import { Form } from '@/Form'
-
-export const TextInput = () => {
-  return (
-    <div style={{ width: '200px' }}>
-      <div style={{ color: '#ffffff', marginBottom: '10px' }}>TextInput</div>
-      <div style={{ marginBottom: '20px' }}>
-        <Form />
-      </div>
-    </div>
-  )
-}

package/playground/toaster/index.tsx

@@ -1,156 +0,0 @@
-import { Button } from '@/Button'
-import { ButtonGroup } from '@/ButtonGroup'
-import { Icon } from '@/Icon'
-import { createToaster } from '@/Toaster'
-import { faCircleCheck, faCircleInfo, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-
-const Toaster = createToaster({ duration: 2500, align: 'center' })
-
-export const ToasterExample = () => {
-  const [side, setSide] = useState<'top' | 'bottom'>('top')
-  const [align, setAlign] = useState<'center' | 'left' | 'right'>('center')
-
-  return (
-    <div>
-      <div className="col-group">
-        <div className="row-group">
-          <ButtonGroup>
-            <Button active={side === 'top'} onClick={() => setSide('top')}>
-              top
-            </Button>
-            <Button active={side === 'bottom'} onClick={() => setSide('bottom')}>
-              bottom
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <Button active={align === 'left'} onClick={() => setAlign('left')}>
-              left
-            </Button>
-            <Button active={align === 'center'} onClick={() => setAlign('center')}>
-              center
-            </Button>
-            <Button active={align === 'right'} onClick={() => setAlign('right')}>
-              right
-            </Button>
-          </ButtonGroup>
-        </div>
-        <div className="row-group">
-          <Button
-            appearance="neutral"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'neutral',
-                title: 'Event created',
-                description: 'Sunday, December 21, 2025 at 2:45 AM'
-              })
-            }}
-          >
-            Create event
-          </Button>
-          <Button
-            onClick={() => {
-              Toaster.send({
-                appearance: 'neutral',
-                title: 'The text is copied'
-              })
-            }}
-          >
-            Copy text
-          </Button>
-          <Button
-            onClick={() => {
-              Toaster.send({
-                appearance: 'positive',
-                title: 'Move files is completed!',
-                description: 'Moved 6 files'
-              })
-            }}
-          >
-            Move files
-          </Button>
-          <Button
-            onClick={() =>
-              Toaster.send({
-                appearance: 'negative',
-                title: 'Permission error',
-                description:
-                  'You do not have permissions to perform this action. Please contact your system administrator to request the appropriate access rights.'
-              })
-            }
-          >
-            Delete root
-          </Button>
-        </div>
-        <div className="row-group">
-          <Button
-            appearance="primary"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'primary',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faCircleInfo} />
-              })
-            }}
-          >
-            Primary
-          </Button>
-          <Button
-            appearance="neutral"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'neutral',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faCircleInfo} />
-              })
-            }}
-          >
-            Neutral
-          </Button>
-          <Button
-            appearance="positive"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'positive',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faCircleCheck} />
-              })
-            }}
-          >
-            Positive
-          </Button>
-          <Button
-            appearance="negative"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'negative',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faTriangleExclamation} />
-              })
-            }}
-          >
-            Negative
-          </Button>
-          <Button
-            appearance="neutral"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'warning',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faTriangleExclamation} />
-              })
-            }}
-          >
-            Warning
-          </Button>
-        </div>
-      </div>
-      <Toaster.Viewport align={align} side={side} />
-    </div>
-  )
-}

package/playground/tooltip/index.tsx

@@ -1,26 +0,0 @@
-import { Button } from '@/Button'
-import { ButtonGroup } from '@/ButtonGroup'
-import { Tooltip } from '@/Tooltip'
-
-export const TooltipExample = () => {
-  return (
-    <div className="col-group">
-      <div className="row-group">
-        <Tooltip content={<div>Content Tooltip</div>}>
-          <Button>Hover</Button>
-        </Tooltip>
-        <ButtonGroup>
-          <Tooltip content={<div>Each</div>}>
-            <Button>Group</Button>
-          </Tooltip>
-          <Tooltip content={<div>has</div>}>
-            <Button>Of</Button>
-          </Tooltip>
-          <Tooltip content={<div>a tooltip</div>}>
-            <Button>Buttons</Button>
-          </Tooltip>
-        </ButtonGroup>
-      </div>
-    </div>
-  )
-}

package/src/Button/index.tsx

@@ -1,72 +0,0 @@
-import classNames from 'classnames'
-import { Spinner } from '../Spinner'
-import { forwardRef } from 'react'
-import { attr } from '@companix/utils-browser'
-
-export type Appearance = 'primary' | 'neutral' | 'positive' | 'negative'
-export type Mode = 'default' | 'outline' | 'minimal'
-export type Size = 'sm' | 'md' | 'lg'
-
-export interface InternButtonProps {
-  icon?: React.ReactNode
-  iconRight?: React.ReactNode
-  appearance?: Appearance
-  mode?: Mode
-  size?: Size
-  fill?: boolean
-  align?: 'left' | 'center' | 'right'
-  loading?: boolean
-  active?: boolean
-  text?: React.ReactNode
-  children?: React.ReactNode
-  className?: string
-}
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, InternButtonProps {}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      fill,
-      text,
-      active,
-      mode = 'default',
-      appearance = 'neutral',
-      size = 'md',
-      align,
-      icon,
-      loading,
-      className,
-      iconRight,
-      ...buttonProps
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        className={classNames('button', className)}
-        data-size={size}
-        data-loading={attr(loading)}
-        data-align={loading ? 'center' : align ?? (icon && iconRight ? 'left' : 'center')}
-        data-appearance={appearance}
-        data-mode={mode}
-        data-fill={attr(fill)}
-        data-active={attr(active)}
-        {...buttonProps}
-        onClick={loading ?? buttonProps.disabled ? undefined : buttonProps.onClick}
-      >
-        {loading ? (
-          <Spinner size={14} width={2} />
-        ) : (
-          <>
-            {icon}
-            {(children ?? text) && <span className="button-text">{text ?? children}</span>}
-            {iconRight}
-          </>
-        )}
-      </button>
-    )
-  }
-)

package/src/ButtonGroup/index.tsx

@@ -1,20 +0,0 @@
-import './ButtonGroup.scss'
-import { forwardRef } from 'react'
-import cn from 'classnames'
-import { attr } from '@companix/utils-browser'
-
-interface ButtonGroupProps {
-  children: React.ReactNode
-  className?: string
-  fill?: boolean
-}
-
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ children, className, fill }, ref) => {
-    return (
-      <div ref={ref} className={cn('button-group', className)} data-fill={attr(fill)}>
-        {children}
-      </div>
-    )
-  }
-)

package/src/Checkbox/index.tsx

@@ -1,46 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Icon } from '../Icon'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { useId } from 'react'
-import { attr } from '@companix/utils-browser'
-
-interface CheckboxProps {
-  checked: boolean
-  onCheckedChange: (checked: boolean) => void
-  size?: 'sm' | 'md'
-  label?: React.ReactNode
-  disabled?: boolean
-  required?: boolean
-}
-
-const Checkbox = ({ checked, required, disabled, onCheckedChange, size, label }: CheckboxProps) => {
-  const id = useId()
-
-  return (
-    <div
-      className="checkbox"
-      data-size={size ?? 'md'}
-      data-required={attr(required && !checked)}
-      data-disabled={attr(disabled)}
-    >
-      <CheckboxPrimitive.Root
-        className="checkbox-box"
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        disabled={disabled}
-        id={id}
-      >
-        <CheckboxPrimitive.Indicator className="checkbox-icon">
-          <Icon icon={faCheck} size="xxxs" />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label && (
-        <label className="checkbox-label" htmlFor={id} data-disabled={attr(disabled)}>
-          {label}
-        </label>
-      )}
-    </div>
-  )
-}
-
-export { Checkbox }

package/src/Countdown/index.tsx

@@ -1,54 +0,0 @@
-import { getNextCandleTime, getTimes, sleep } from '@companix/utils-js'
-import { useState, useEffect, useRef } from 'react'
-
-const formatTime = (num: number) => String(num).padStart(2, '0')
-
-interface CountDownProps {
-  expiration: number
-  separator?: string
-  onExpired?: VoidFunction
-}
-
-export const Countdown = ({ expiration, separator = ':', onExpired }: CountDownProps) => {
-  const ref = useRef<null | NodeJS.Timeout>(null)
-  const [, rerender] = useState([])
-
-  useEffect(() => {
-    const currentTime = Date.now()
-    const closestNextSecondTimestamp = getNextCandleTime(currentTime, '1s')
-    const waitToNextSecond = closestNextSecondTimestamp - currentTime
-
-    if (ref.current) {
-      clearInterval(ref.current)
-    }
-
-    sleep(waitToNextSecond).then(() => {
-      rerender([])
-
-      ref.current = setInterval(() => {
-        rerender([])
-      }, 1000)
-    })
-
-    return () => {
-      if (ref.current) {
-        clearInterval(ref.current)
-      }
-    }
-  }, [expiration])
-
-  const time = expiration - Date.now()
-  const { hours, minutes, seconds } = getTimes(time)
-
-  useEffect(() => {
-    if (time <= 0) {
-      onExpired?.()
-
-      if (ref.current) {
-        clearInterval(ref.current)
-      }
-    }
-  }, [time <= 0])
-
-  return <>{[formatTime(hours), formatTime(minutes), formatTime(seconds)].join(separator)}</>
-}

package/src/DateInput/index.tsx

@@ -1,96 +0,0 @@
-import { useMemo, useEffect } from 'react'
-import { DateFormat, Select } from '..'
-import { createDateValidation, getMonthMaxDay } from '../__utils/utils'
-import { defaultMax, defaultMin, useCalendarOptions } from '../__hooks/useCalendarOptions'
-
-export interface DatePickerProps {
-  min?: DateFormat
-  max?: DateFormat
-  noDaySelect?: boolean
-  noYearSelect?: boolean
-  disabled?: boolean
-  required?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  value: DateFormat
-  onChange: (e: DateFormat) => void
-}
-
-export const DateInput = ({
-  min = defaultMin,
-  max = defaultMax,
-  disabled,
-  value,
-  noDaySelect,
-  noYearSelect,
-  onChange,
-  required,
-  size
-}: DatePickerProps) => {
-  const validateDate = useMemo(() => {
-    return createDateValidation({ min, max })
-  }, [min, max])
-
-  useEffect(() => {
-    const changed = validateDate(value)
-
-    if (changed) {
-      onChange(changed)
-    }
-  }, [validateDate, value])
-
-  const { years, months, days } = useCalendarOptions({ min, max, now: value })
-
-  const handleDateChange = (source: 'year' | 'month' | 'day', val: number) => {
-    const nextValue = { ...value }
-
-    nextValue[source] = val
-
-    const max = getMonthMaxDay(nextValue.month, nextValue.year)
-    nextValue.day = nextValue.day > max ? max : nextValue.day
-
-    onChange(nextValue)
-  }
-
-  return (
-    <div className="data-input">
-      {!noYearSelect && years.length > 0 && (
-        <Select
-          placeholder="Год"
-          options={years}
-          onChange={(e) => handleDateChange('year', e || 0)}
-          value={value.year}
-          required={required}
-          disabled={disabled}
-          size={size}
-          minimalOptions
-          matchTarget="min-width"
-        />
-      )}
-      <Select
-        placeholder="Месяц"
-        className="w-full"
-        options={months}
-        onChange={(e) => handleDateChange('month', e || 0)}
-        value={value.month}
-        disabled={disabled}
-        required={required}
-        size={size}
-        minimalOptions
-        matchTarget="min-width"
-      />
-      {!noDaySelect && (
-        <Select
-          placeholder="День"
-          options={days}
-          disabled={disabled || days.length === 0}
-          onChange={(e) => handleDateChange('day', e || 0)}
-          value={value.day}
-          required={required}
-          size={size}
-          minimalOptions
-          matchTarget="min-width"
-        />
-      )}
-    </div>
-  )
-}