import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Note,
  Title,
  VariantsTable,
  VariantColumn,
  RowTitles,
  CustomArgsTable,
} from "@calcom/storybook/components";

import { Tooltip } from "../tooltip";
import { FiPlus, FiX } from "../icon";

<Meta title="Layout/Spacing" />

<Title title="Spacing" suffix="Brief" subtitle="Version 2.0 — Last Update: 15 Feb 2023" />

## Definition

Defines the spacing guide used in Cal.coms design system

## Structure

<Examples title="Spacing">
  <TooltipPrimitive.Provider>
    <>
      <Example title="0"></Example>
      <Example title="px">
        <Tooltip content="1px">
          <div className="h-4 w-px bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="0.5">
        <Tooltip content="2px">
          <div className="h-4 w-0.5 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="1">
        <Tooltip content="4px">
          <div className="h-4 w-1 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="2">
        <Tooltip content="8px">
          <div className="h-4 w-2 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="3">
        <Tooltip content="12px">
          <div className="h-4 w-3 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="4">
        <Tooltip content="16px">
          <div className="h-4 w-4 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="5">
        <Tooltip content="20px">
          <div className="h-4 w-5 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="6">
        <Tooltip content="24px">
          <div className="h-4 w-6 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="8">
        <Tooltip content="32px">
          <div className="h-4 w-8 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
      <Example title="10">
        <Tooltip content="48px">
          <div className="h-4 w-10 bg-inverted rounded-sm"> </div>
        </Tooltip>
      </Example>
    </>
  </TooltipPrimitive.Provider>
</Examples>