@companix/uikit 0.0.1

package/playground/input/index.tsx

@@ -0,0 +1,112 @@
+import { Icon } from '@/Icon'
+import { Form } from '@/Form'
+import { faEye, faEyeSlash, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+
+const sizes = ['lg', 'md', 'sm'] as const
+
+export const InputsExample = () => {
+  return (
+    <div className="col-group">
+      <div className="row-group">
+        <PasswordInput />
+        <PasswordInput2 />
+        <ChangeSize />
+        <Form
+          fill
+          placeholder="Fullwidth input"
+          leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
+        />
+      </div>
+      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
+      <div className="flex gap-10">
+        <div className="flex flex-col gap-10">
+          {sizes.map((size) => {
+            return <Form key={`input-size-${size}`} size={size} placeholder={`Input size ${size}`} />
+          })}
+        </div>
+        <div className="flex flex-col gap-10">
+          {sizes.map((size) => {
+            return (
+              <Form
+                key={`input-size-${size}-disabled`}
+                size={size}
+                placeholder={`Input disabled ${size}`}
+                leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
+                disabled
+              />
+            )
+          })}
+        </div>
+        <div className="flex flex-col gap-10">
+          {sizes.map((size) => {
+            return (
+              <Form
+                key={`input-size-${size}-required`}
+                size={size}
+                placeholder={`Input required ${size}`}
+                leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
+                required
+              />
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const PasswordInput = () => {
+  const [state, setState] = useState(false)
+
+  return (
+    <Form
+      placeholder={`Slot right`}
+      rightElement={
+        <div
+          onClick={() => setState((x) => !x)}
+          data-side={'right'}
+          className="form-slot center h-full cursor-pointer"
+        >
+          {state ? <Icon size="xxs" icon={faEye} /> : <Icon size="xxs" icon={faEyeSlash} />}
+        </div>
+      }
+    />
+  )
+}
+
+const PasswordInput2 = () => {
+  return (
+    <Form
+      placeholder={`Slot left`}
+      leftElement={
+        <div data-side={'left'} className="form-slot center h-full gap-6 cursor-pointer">
+          <Icon size="xxs" icon={faEye} />
+        </div>
+      }
+    />
+  )
+}
+
+const ChangeSize = () => {
+  const [value, setValue] = useState('')
+
+  return (
+    <Form
+      placeholder="Dynamic element"
+      value={value}
+      onValueChange={setValue}
+      leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
+      rightElement={
+        <div className="form-space-margin flex items-center h-full cursor-pointer">
+          <div
+            className="rounded-md px-4 pointer-events-auto"
+            style={{ backgroundColor: 'rgba(143, 153, 168, .15)' }}
+          >
+            {Math.floor(10000 / Math.max(1, Math.pow(value.length, 2)))}
+          </div>
+        </div>
+      }
+    />
+  )
+}

package/playground/number-inputs/index.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { StepperInput } from '@/Stepper'
+import { NumberInput } from '@/NumberInput'
+
+export const NumberInputs = () => {
+  return (
+    <div className="flex flex-col gap-22" style={{ width: '200px' }}>
+      <div>NumberInputs</div>
+      <div>
+        <NumbInput1 />
+      </div>
+      <div>
+        <NumbInput2 />
+      </div>
+      <div>
+        <NumbInput3 />
+      </div>
+    </div>
+  )
+}
+
+const NumbInput1 = () => {
+  const [value, onChange] = useState(0)
+  return (
+    <div className="flex flex-col">
+      <StepperInput buttons step={0.01} value={value} onChange={onChange} />
+      <div onClick={() => onChange(0)}>set 0</div>
+    </div>
+  )
+}
+
+const NumbInput2 = () => {
+  const [value, onChange] = useState(0)
+
+  return <StepperInput step={1} value={value} onChange={onChange} />
+}
+
+const NumbInput3 = () => {
+  const [value, onChange] = useState<number | null>(0)
+
+  console.log(value)
+
+  return (
+    <div>
+      <NumberInput value={value} onChange={onChange} />
+      <div onClick={() => onChange(1122)}>Set 1122</div>
+      <div onClick={() => onChange(null)}>Set null</div>
+    </div>
+  )
+}

package/playground/popovers/index.tsx

@@ -0,0 +1,70 @@
+import { Button } from '@/Button'
+import { Popover, PopoverProps } from '@/Popover'
+import { useState } from 'react'
+
+export const PopoversExample = () => {
+  const [minimal] = useState(false)
+  const [arrows] = useState(true)
+
+  return (
+    <div className="docs-popover-placement-example">
+      <div className="docs-example-grid">
+        <div className="docs-example-grid-1-1" />
+        <div className="docs-example-grid-1-2">
+          <div style={{ display: 'flex', gap: '10px' }}>
+            <PlacementPopover side="bottom" align="start" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="bottom" align="center" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="bottom" align="end" minimal={minimal} showArrows={arrows} />
+          </div>
+        </div>
+        <div className="docs-example-grid-1-3" />
+        <div className="docs-example-grid-2-1">
+          <div style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}>
+            <PlacementPopover side="right" align="start" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="right" align="center" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="right" align="end" minimal={minimal} showArrows={arrows} />
+          </div>
+        </div>
+        <div className="docs-example-grid-2-2">
+          <em>Button positions are flipped here so that all popovers open inward.</em>
+        </div>
+        <div className="docs-example-grid-2-3">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+            <PlacementPopover side="left" align="start" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="left" align="center" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="left" align="end" minimal={minimal} showArrows={arrows} />
+          </div>
+        </div>
+        <div className="docs-example-grid-3-1" />
+        <div className="docs-example-grid-3-2">
+          <div style={{ display: 'flex', gap: '10px' }}>
+            <PlacementPopover side="top" align="start" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="top" align="center" minimal={minimal} showArrows={arrows} />
+            <PlacementPopover side="top" align="end" minimal={minimal} showArrows={arrows} />
+          </div>
+        </div>
+        <div className="docs-example-grid-3-3" />
+      </div>
+    </div>
+  )
+}
+
+const PlacementPopover = (props: Omit<PopoverProps, 'content' | 'children'>) => {
+  return (
+    <Popover
+      {...props}
+      // sideOffset={0}
+
+      content={() => (
+        <div className="p-12">
+          <div>Popover content: {props.align}</div>
+          <div>Popover content: {props.side}</div>
+        </div>
+      )}
+    >
+      <Button fill>
+        {props.side} {props.align}
+      </Button>
+    </Popover>
+  )
+}

package/playground/radio-group/index.tsx

@@ -0,0 +1,69 @@
+import { RadioGroup } from '@/Radio'
+import { useState } from 'react'
+
+export const RadioGroupExample = () => {
+  return (
+    <div className="col-group">
+      <div className="flex gap-24">
+        <RadioGroupControl
+          size="md"
+          options={[
+            { value: 'soup', label: 'Soup with tomatos' },
+            { value: 'salat', label: 'Salat olivie' },
+            { value: 'sandwich', label: 'Sandwich S7 Airlines' }
+          ]}
+        />
+        <RadioGroupControl
+          size="sm"
+          options={[
+            { value: 'soup', label: 'Soup with tomatos' },
+            { value: 'salat', label: 'Salat olivie' },
+            { value: 'sandwich', label: 'Sandwich S7 Airlines' }
+          ]}
+        />
+        <RadioGroupControl
+          size="sm"
+          disabled
+          options={[
+            { value: 'soup', label: 'Soup with tomatos' },
+            { value: 'salat', label: 'Salat olivie' },
+            { value: 'sandwich', label: 'Sandwich S7 Airlines' }
+          ]}
+        />
+      </div>
+      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
+      <RadioGroupControl
+        options={[
+          { value: 'soup', label: 'Basic plan' },
+          { value: 'salat', label: 'Professional plan' },
+          {
+            value: 'sandwich',
+            label:
+              'This plan includes full access to all features, priority customer support, advanced security options, detailed analytics, and the ability to customize the system to fit internal processes. It is intended for companies that need reliability, scalability, and long-term support across multiple departments.'
+          }
+        ]}
+      />
+      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
+      <RadioGroupControl
+        required
+        options={[
+          { value: 'soup', label: 'New York' },
+          { value: 'salat', label: 'Beijing' }
+        ]}
+      />
+    </div>
+  )
+}
+
+interface Props<T> {
+  size?: 'sm' | 'md'
+  options: { value: T; label: string }[]
+  disabled?: boolean
+  required?: boolean
+}
+
+const RadioGroupControl = <T extends string>(props: Props<T>) => {
+  const [value, setValue] = useState<null | T>(null)
+
+  return <RadioGroup {...props} value={value} onChange={setValue} />
+}

package/playground/select/index.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { Select } from '@/Select'
+import { Icon } from '@/Icon'
+import { faGift } from '@fortawesome/free-solid-svg-icons'
+
+export const SelectExample = () => {
+  return (
+    <div className="col-group">
+      <div className="row-group">
+        <div style={{ minWidth: '200px', width: '200px' }}>
+          <SelectItem />
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'center', minWidth: '240px', width: '240px' }}>
+          <SelectItem
+            clearButton
+            icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />}
+          />
+        </div>
+        <div style={{ minWidth: 0, width: '100%' }}>
+          <SelectItem fill icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />} />
+        </div>
+      </div>
+      {/* <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
+      <div className="row-group">
+        <div style={{ minWidth: '200px', width: '200px' }}>
+          <SelectItem />
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'center', minWidth: '240px', width: '240px' }}>
+          <SelectItem
+            clearButton
+            icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />}
+          />
+        </div>
+        <div style={{ minWidth: 0, width: '100%' }}>
+          <SelectItem fill icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />} />
+        </div>
+      </div> */}
+    </div>
+  )
+}
+
+interface ItemProps {
+  fill?: boolean
+  clearButton?: boolean
+  icon?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const SelectItem = ({ fill, clearButton, icon, size }: ItemProps) => {
+  const [value, onChange] = useState<null | number>(null)
+
+  return (
+    <Select<number>
+      value={value}
+      onChange={onChange}
+      leftElement={icon}
+      fill={fill}
+      size={size}
+      clearButton={clearButton}
+      placeholder="Не выбрано"
+      options={[
+        { value: 1, title: 'Vladimir Putin' },
+        { value: 2, title: 'Donald Trump' },
+        { value: 3, title: 'Sergey Lavrov' },
+        ...new Array(10).fill(0).map((_, i) => ({
+          title: `Value ${i + 4}`,
+          value: i + 4
+        }))
+      ]}
+    />
+  )
+}

package/playground/select-tags/index.tsx

@@ -0,0 +1,36 @@
+import { SelectTags } from '@/SelectTags'
+import { useState } from 'react'
+
+export const SelectTagsExample = () => {
+  return (
+    <div className="col-group">
+      <div className="row-group">
+        <div style={{ maxWidth: '380px' }}>
+          <SelectTagsControl />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const SelectTagsControl = ({ fill }: { fill?: boolean } = {}) => {
+  const [value, onChange] = useState<number[]>([])
+
+  return (
+    <SelectTags<number>
+      value={value}
+      onChange={onChange}
+      fill={fill}
+      placeholder="Выберите варианты"
+      options={[
+        { value: 1, title: 'Vladimir Putin' },
+        { value: 2, title: 'Donald Trump' },
+        { value: 3, title: 'Sergey Lavrov' },
+        ...new Array(10).fill(0).map((_, i) => ({
+          title: `Value ${i + 4}`,
+          value: i + 4
+        }))
+      ]}
+    />
+  )
+}

package/playground/styles.scss

@@ -0,0 +1,2 @@
+@use '../themes/classic/classic.scss';
+@use '../src/index.scss';

package/playground/switch/index.tsx

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,156 @@
+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>
+  )
+}