@qoretechnologies/reqore 0.41.1 → 0.43.0

package/dist/index.js

@@ -10,6 +10,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 exports.__esModule = true;
 exports.ReqoreHorizontalSpacer = exports.ReqoreRadioGroup = exports.ReqorePopover = exports.ReqoreParagraph = exports.ReqoreP = exports.ReqorePanel = exports.ReqorePagination = exports.ReqoreNotification = exports.ReqoreNotificationsWrapper = exports.ReqoreNavbarItem = exports.ReqoreNavbarGroup = exports.ReqoreNavbarDivider = exports.ReqoreHeader = exports.ReqoreFooter = exports.ReqoreMultiSelect = exports.ReqoreModal = exports.ReqoreMessage = exports.ReqoreMenuSection = exports.ReqoreMenuItem = exports.ReqoreMenuDivider = exports.ReqoreMenu = exports.ReqoreLayoutContent = exports.ReqoreKeyValueTable = exports.ReqoreInput = exports.ReqoreIcon = exports.ReqoreHeading = exports.ReqoreH6 = exports.ReqoreH5 = exports.ReqoreH4 = exports.ReqoreH3 = exports.ReqoreH2 = exports.ReqoreH1 = exports.ReqoreTextEffect = exports.ReqoreEffect = exports.ReqoreDropdownItem = exports.ReqoreDropdownDivider = exports.ReqoreDropdown = exports.ReqoreBackdrop = exports.ReqoreDrawer = exports.ReqoreControlGroup = exports.ReqoreContent = exports.ReqoreCommentFeed = exports.ReqoreComment = exports.ReqoreColumn = exports.ReqoreColumns = exports.ReqoreCollection = exports.ReqoreCheckbox = exports.ReqoreButton = exports.ReqoreBreadcrumbsItem = exports.ReqoreBreadcrumbs = void 0;
 exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useReqorePaging = exports.useLatestZIndex = exports.useCloneThroughFragments = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqorePaginationContainer = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = exports.ReqoreTableValue = exports.ReqoreTableRow = exports.ReqoreTableHeaderCell = exports.ReqoreTableBodyCell = exports.ReqoreTable = exports.ReqoreSpinner = exports.ReqoreVerticalSpacer = exports.ReqoreSpacer = void 0;
@@ -61,6 +64,7 @@ var Input_1 = require("./components/Input");
 __createBinding(exports, Input_1, "default", "ReqoreInput");
 var KeyValueTable_1 = require("./components/KeyValueTable");
 __createBinding(exports, KeyValueTable_1, "ReqoreKeyValueTable");
+__exportStar(require("./components/Label"), exports);
 var content_1 = require("./components/Layout/content");
 __createBinding(exports, content_1, "default", "ReqoreLayoutContent");
 var Menu_1 = require("./components/Menu");
@@ -101,6 +105,7 @@ var Popover_1 = require("./components/Popover");
 __createBinding(exports, Popover_1, "default", "ReqorePopover");
 var RadioGroup_1 = require("./components/RadioGroup");
 __createBinding(exports, RadioGroup_1, "default", "ReqoreRadioGroup");
+__exportStar(require("./components/Slider"), exports);
 var Spacer_1 = require("./components/Spacer");
 __createBinding(exports, Spacer_1, "ReqoreHorizontalSpacer");
 __createBinding(exports, Spacer_1, "ReqoreSpacer");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,yDAA8D;AAArD,uDAAc;AACvB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,4DAAiE;AAAxD,iEAAmB;AAC5B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,qDAA8D;AAArD,yDAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,8CAAuD;AAA9C,uDAAgB;AACzB,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,gDAAqD;AAA5C,qDAAa;AACtB,4CAA4D;AAAnD,4DAAsB;AAC/B,gDAA8D;AAArD,wDAAmB;AAC5B,4DAAsE;AAA7D,gEAAqB;AAC9B,8CAAmE;AAA1D,6DAAyB;AAClC,kDAA4D;AAAnD,sDAAgB;AACzB,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8CAAgE;AAAvD,gEAAyB;AAClC,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,6EAA4E;AAAnE,iFAAwB;AACjC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAAoD;AAA3C,yDAAe;AACxB,+CAA8C;AAArC,mDAAS;AAClB,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,yDAA8D;AAArD,uDAAc;AACvB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,4DAAiE;AAAxD,iEAAmB;AAC5B,qDAAmC;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,qDAA8D;AAArD,yDAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,8CAAuD;AAA9C,uDAAgB;AACzB,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,sDAAoC;AACpC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,gDAAqD;AAA5C,qDAAa;AACtB,4CAA4D;AAAnD,4DAAsB;AAC/B,gDAA8D;AAArD,wDAAmB;AAC5B,4DAAsE;AAA7D,gEAAqB;AAC9B,8CAAmE;AAA1D,6DAAyB;AAClC,kDAA4D;AAAnD,sDAAgB;AACzB,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8CAAgE;AAAvD,gEAAyB;AAClC,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,6EAA4E;AAAnE,iFAAwB;AACjC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAAoD;AAA3C,yDAAe;AACxB,+CAA8C;AAArC,mDAAS;AAClB,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.41.1",
+  "version": "0.43.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,7 +28,6 @@
     "react"
   ],
   "pre-push": [
-    "source",
     "build:test:prod",
     "lint",
     "test"
@@ -96,6 +95,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
+    "@radix-ui/react-slider": "^1.1.2",
     "@react-spring/web": "^9.6.1",
     "classnames": "^2.2.6",
     "epoch-timeago": "^1.1.9",

package/src/components/ControlGroup/index.tsx

@@ -36,6 +36,7 @@ export interface IReqoreControlGroupComponentProps
   vertical?: boolean;
   verticalAlign?: 'flex-start' | 'center' | 'flex-end';
   horizontalAlign?: 'flex-start' | 'center' | 'flex-end';
+  spaceBetween?: boolean;
   wrap?: boolean;
   isInsideStackGroup?: boolean;
   isInsideVerticalGroup?: boolean;
@@ -67,9 +68,24 @@ export const StyledReqoreControlGroup = styled(StyledEffect)<IReqoreControlGroup
   display: flex;
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? undefined : '0 0 auto')};
   width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  justify-content: ${({ fluid, vertical }) => (vertical && fluid ? 'stretch' : undefined)};
-  align-items: ${({ vertical, fluid, horizontalAlign }) =>
-    vertical ? (fluid ? 'stretch' : horizontalAlign) : undefined};
+  justify-content: ${({ fluid, vertical, spaceBetween }) =>
+    vertical && fluid
+      ? spaceBetween
+        ? 'space-between'
+        : 'stretch'
+      : !vertical && spaceBetween
+      ? 'space-between'
+      : undefined};
+  align-items: ${({ vertical, fluid, horizontalAlign, spaceBetween }) =>
+    vertical
+      ? fluid
+        ? spaceBetween
+          ? 'space-between'
+          : 'stretch'
+        : horizontalAlign
+      : vertical && spaceBetween
+      ? 'space-between'
+      : undefined};
   flex-flow: ${({ vertical }) => (vertical ? 'column' : 'row')};
   gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
   flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};

package/src/components/Input/index.tsx

@@ -53,6 +53,7 @@ export interface IReqoreInputProps
   flat?: boolean;
   rounded?: boolean;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+  step?: number;
   wrapperStyle?: React.CSSProperties;
   iconColor?: TReqoreEffectColor;
   rightIconColor?: TReqoreEffectColor;

package/src/components/Label/index.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef, Ref } from 'react';
+import ReqoreTag, { IReqoreCustomTagProps } from '../Tag';
+
+export interface IReqoreLabelProps
+  extends IReqoreCustomTagProps,
+    Omit<React.ComponentPropsWithoutRef<'label'>, 'color'> {}
+
+export const ReqoreLabel = forwardRef((props: IReqoreLabelProps, ref: Ref<HTMLLabelElement>) => {
+  return <ReqoreTag as='label' color='transparent' {...props} ref={ref} />;
+});

package/src/components/Slider/index.tsx

@@ -0,0 +1,358 @@
+import * as Slider from '@radix-ui/react-slider';
+import { useCallback, useMemo, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { HALF_PADDING_FROM_SIZE, ICON_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import { TReqoreTooltipProp } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
+import { IReqoreEffect, IReqoreTextEffectProps, StyledEffect, TReqoreEffectColor } from '../Effect';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
+import { IReqoreParagraphProps, ReqoreP } from '../Paragraph';
+import ReqoreTag, { IReqoreTagProps } from '../Tag';
+
+export interface ISliderProps<T extends number | [number, number] = number>
+  extends Omit<Slider.SliderProps, 'onChange' | 'value' | 'defaultValue' | 'onValueChange'> {
+  value: T;
+  onChange(values: T): void;
+  fluid?: boolean;
+
+  icon?: IReqoreIconName;
+  iconColor?: TReqoreEffectColor;
+  iconProps?: IReqoreIconProps;
+
+  rightIcon?: IReqoreIconName;
+  rightIconColor?: TReqoreEffectColor;
+  rightIconProps?: IReqoreIconProps;
+
+  showLabels?: boolean;
+  size?: TSizes;
+  labelsPosition: 'top' | 'bottom';
+  customTheme?: IReqoreCustomTheme;
+  intent?: TReqoreIntent;
+  effect?: IReqoreEffect;
+  tooltip: TReqoreTooltipProp;
+
+  trackProps?: Partial<IReqoreTextEffectProps>;
+  rangeProps?: Partial<IReqoreTextEffectProps>;
+  thumbProps?: Partial<IReqoreTextEffectProps>;
+
+  minLabelProps?: IReqoreParagraphProps;
+  currentMinLabelProps?: IReqoreTagProps;
+  maxLabelProps?: IReqoreParagraphProps;
+  currentMaxLabelProps?: IReqoreTagProps;
+  wrapperProps?: IReqoreControlGroupProps;
+
+  displayCurrentValueOverThumb?: boolean;
+}
+
+const StyledControlGroupWrapper = styled(ReqoreControlGroup)`
+  &[data-orientation='horizontal'] {
+    &[data-fluid='false'] {
+      max-width: 200px;
+      min-width: 200px;
+    }
+  }
+  &[data-orientation='vertical'] {
+    &[data-fluid='false'] {
+      max-height: 200px;
+    }
+  }
+`;
+
+const StyledTrack = styled(Slider.Track)`
+  background-color: ${(props) => props.background};
+  position: relative;
+  border-radius: 9999px;
+`;
+const StyledRange = styled(Slider.Range)`
+  position: absolute;
+  background-color: ${(props) => props.background};
+  border-radius: 9999px;
+`;
+const StyledThumb = styled(Slider.Thumb)`
+  display: block;
+  background-color: ${(props) => props.background};
+  border-radius: 9999px;
+  transition: all 0.2s ease-out;
+
+  &:focus {
+    box-shadow: 0 0 0 8px ${(props) => props.background}15;
+    outline: none;
+  }
+`;
+const StyledRoot = styled(Slider.Root)`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  flex-grow: 1;
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  ${({ 'data-size': size }) => css`
+    ${StyledThumb} {
+      width: ${ICON_FROM_SIZE[size]}px;
+      height: ${ICON_FROM_SIZE[size]}px;
+      min-width: ${ICON_FROM_SIZE[size]}px;
+    }
+  `}
+
+  &[data-orientation='horizontal'] {
+    width: 100%;
+
+    ${({ 'data-size': size }) => css`
+      height: ${ICON_FROM_SIZE[size]}px;
+
+      ${StyledTrack} {
+        height: ${HALF_PADDING_FROM_SIZE[size]}px;
+      }
+    `}
+
+    ${StyledTrack} {
+      flex-grow: 1;
+    }
+    ${StyledRange} {
+      height: 100%;
+    }
+  }
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    justify-content: center;
+    height: 200px;
+
+    ${({ 'data-size': size }) => css`
+      width: ${ICON_FROM_SIZE[size]}px;
+
+      ${StyledTrack} {
+        width: ${HALF_PADDING_FROM_SIZE[size]}px;
+      }
+    `}
+
+    ${StyledTrack} {
+      flex-grow: 1;
+    }
+    ${StyledRange} {
+      width: 100%;
+    }
+  }
+`;
+
+const StyledCurrentValue = styled(ReqoreTag)`
+  position: absolute;
+  ${({ position, isAboveThreshold, isBelowThreshold }) =>
+    css`
+      ${position}: ${isAboveThreshold || isBelowThreshold ? '-5px' : '-35px'};
+      ${position === 'left' || position === 'right' ? 'top' : 'left'}: 50%;
+      transform: ${position === 'left' || position === 'right'
+        ? 'translateY(-50%)'
+        : 'translateX(-50%)'};
+    `}
+`;
+
+const SliderRootWrapper = styled(ReqoreControlGroup)`
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+`;
+
+export function ReqoreSlider<T extends number | [number, number] = number>({
+  value,
+  onChange,
+  step = 0.1,
+  orientation = 'horizontal',
+  fluid = true,
+  showLabels,
+  icon,
+  iconColor,
+  iconProps,
+  rightIcon,
+  rightIconColor,
+  rightIconProps,
+  customTheme,
+  intent,
+  effect,
+  trackProps,
+  rangeProps,
+  thumbProps,
+  minLabelProps,
+  maxLabelProps,
+  size = 'normal',
+  wrapperProps,
+  labelsPosition = 'top',
+  tooltip,
+  currentMaxLabelProps,
+  currentMinLabelProps,
+  displayCurrentValueOverThumb,
+  ...props
+}: ISliderProps<T>) {
+  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement>(undefined);
+  const theme = useReqoreTheme('main', customTheme, intent);
+
+  useTooltip(wrapperRef, tooltip);
+
+  const background = intent
+    ? changeLightness(theme.main, 0.2)
+    : getReadableColor(theme, undefined, undefined, true);
+  const trackBackground = intent
+    ? changeLightness(theme.main, 0.05)
+    : changeLightness(theme.main, 0.2);
+  const isRange = Array.isArray(value);
+
+  const renderLabels = useCallback(() => {
+    if (!showLabels) {
+      return null;
+    }
+
+    return (
+      <ReqoreControlGroup fluid spaceBetween vertical={orientation === 'vertical'} fill>
+        <ReqoreControlGroup fixed vertical={orientation === 'vertical'} horizontalAlign='center'>
+          {icon && (
+            <ReqoreIcon icon={icon} size={size} color={iconColor} intent={intent} {...iconProps} />
+          )}
+          {props.min || props.min === 0 ? (
+            <ReqoreP size={size} intent={intent} effect={effect} {...minLabelProps}>
+              {props.min}
+            </ReqoreP>
+          ) : null}
+        </ReqoreControlGroup>
+        <ReqoreControlGroup fixed vertical={orientation === 'vertical'} horizontalAlign='center'>
+          {props.max || props.max === 0 ? (
+            <ReqoreP size={size} intent={intent} effect={effect} {...maxLabelProps}>
+              {props.max}
+            </ReqoreP>
+          ) : null}
+          {rightIcon && (
+            <ReqoreIcon
+              icon={rightIcon}
+              size={size}
+              color={rightIconColor}
+              intent={intent}
+              {...rightIconProps}
+            />
+          )}
+        </ReqoreControlGroup>
+      </ReqoreControlGroup>
+    );
+  }, [
+    icon,
+    rightIcon,
+    iconProps,
+    rightIconProps,
+    minLabelProps,
+    maxLabelProps,
+    size,
+    intent,
+    props.min,
+    props.max,
+    showLabels,
+    orientation,
+    effect,
+  ]);
+
+  const currentValuePosition = useMemo(() => {
+    return orientation === 'horizontal'
+      ? labelsPosition === 'top'
+        ? 'top'
+        : 'bottom'
+      : labelsPosition === 'top'
+      ? 'left'
+      : 'right';
+  }, [orientation, labelsPosition]);
+
+  const isMinValueBelowThreshold = useMemo(() => {
+    const _value: number = isRange ? value[0] : value;
+
+    return _value < props.min + step * 5;
+  }, [value, props.min]);
+
+  const isMaxValueAboveThreshold = useMemo(() => {
+    if (!isRange) return false;
+
+    const _value: number = value[1];
+
+    return _value > props.max - step * 5;
+  }, [value, props.max]);
+
+  return (
+    <StyledControlGroupWrapper
+      ref={setWrapperRef}
+      data-orientation={orientation}
+      data-labels-position={labelsPosition}
+      data-fluid={fluid}
+      fluid={fluid}
+      vertical={orientation === 'horizontal'}
+      fill
+      gapSize={orientation === 'horizontal' ? 'big' : 'normal'}
+      {...wrapperProps}
+    >
+      {labelsPosition === 'top' && renderLabels()}
+      <SliderRootWrapper vertical={orientation === 'vertical'}>
+        <StyledRoot
+          data-size={size}
+          orientation={orientation}
+          minStepsBetweenThumbs={step}
+          inverted={orientation === 'vertical'}
+          step={step}
+          {...props}
+          value={isRange ? value : [value]}
+          onValueChange={(values) => {
+            onChange((isRange ? values : values[0]) as T);
+          }}
+        >
+          <StyledTrack background={trackBackground} asChild>
+            <StyledEffect effect={effect} {...trackProps}>
+              <StyledRange background={background} asChild>
+                <StyledEffect effect={effect} {...rangeProps} />
+              </StyledRange>
+            </StyledEffect>
+          </StyledTrack>
+
+          <StyledThumb background={background} asChild>
+            <StyledEffect effect={effect} {...thumbProps}>
+              {showLabels && (
+                <StyledCurrentValue
+                  size={size}
+                  effect={effect}
+                  intent={intent}
+                  position={currentValuePosition}
+                  label={isRange ? value[0] : value}
+                  isBelowThreshold={displayCurrentValueOverThumb || isMinValueBelowThreshold}
+                  {...currentMinLabelProps}
+                />
+              )}
+            </StyledEffect>
+          </StyledThumb>
+          {isRange && (
+            <StyledThumb background={background} asChild>
+              <StyledEffect effect={effect} {...thumbProps}>
+                {showLabels && (
+                  <StyledCurrentValue
+                    size={size}
+                    effect={effect}
+                    intent={intent}
+                    position={currentValuePosition}
+                    isAboveThreshold={displayCurrentValueOverThumb || isMaxValueAboveThreshold}
+                    label={value[1]}
+                    {...currentMaxLabelProps}
+                  />
+                )}
+              </StyledEffect>
+            </StyledThumb>
+          )}
+        </StyledRoot>
+      </SliderRootWrapper>
+      {labelsPosition === 'bottom' && renderLabels()}
+    </StyledControlGroupWrapper>
+  );
+}
+
+export default ReqoreSlider;

package/src/components/Tag/index.tsx

@@ -51,9 +51,8 @@ export interface IReqoreTagAction
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-export interface IReqoreTagProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
-    IWithReqoreTooltip,
+export interface IReqoreCustomTagProps
+  extends IWithReqoreTooltip,
     IReqoreDisabled,
     IWithReqoreMinimal,
     IWithReqoreFluid,
@@ -65,7 +64,6 @@ export interface IReqoreTagProps
   label?: string | number;
   labelKey?: string | number;
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   leftIconProps?: IReqoreIconProps;
   rightIcon?: IReqoreIconName;
@@ -81,7 +79,11 @@ export interface IReqoreTagProps
   wrap?: boolean;
   labelEffect?: IReqoreEffect;
   labelKeyEffect?: IReqoreEffect;
+  as?: string | React.ElementType;
 }
+export interface IReqoreTagProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'>,
+    IReqoreCustomTagProps {}
 
 export interface IReqoreTagStyle extends IReqoreTagProps {
   theme: IReqoreTheme;
@@ -247,22 +249,21 @@ const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
   align-items: center;
   transition: all 0.2s ease-out;
 
-  ${({ color, effect }) =>
-    css`
+  ${({ color, effect }) => css`
+    .reqore-icon {
+      transform: scale(0.85);
+    }
+    &:hover {
+      cursor: pointer;
+      background-color: ${color && !effect?.gradient
+        ? changeLightness(color, 0.09)
+        : rgba('#000000', 0.2)};
+
       .reqore-icon {
-        transform: scale(0.85);
-      }
-      &:hover {
-        cursor: pointer;
-        background-color: ${color && !effect?.gradient
-          ? changeLightness(color, 0.09)
-          : rgba('#000000', 0.2)};
-
-        .reqore-icon {
-          transform: scale(1);
-        }
+        transform: scale(1);
       }
-    `}
+    }
+  `}
 `;
 
 const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(

package/src/index.tsx

@@ -26,6 +26,7 @@ export {
 export { default as ReqoreIcon } from './components/Icon';
 export { default as ReqoreInput } from './components/Input';
 export { ReqoreKeyValueTable } from './components/KeyValueTable';
+export * from './components/Label';
 export { default as ReqoreLayoutContent } from './components/Layout/content';
 export { default as ReqoreMenu } from './components/Menu';
 export { default as ReqoreMenuDivider } from './components/Menu/divider';
@@ -45,6 +46,7 @@ export { ReqorePanel } from './components/Panel';
 export { ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
 export { default as ReqorePopover } from './components/Popover';
 export { default as ReqoreRadioGroup } from './components/RadioGroup';
+export * from './components/Slider';
 export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
 export { ReqoreSpinner } from './components/Spinner';
 export { default as ReqoreTable } from './components/Table';

package/src/stories/Label/Label.stories.tsx

@@ -0,0 +1,33 @@
+import { StoryObj } from '@storybook/react';
+import ReqoreControlGroup from '../../components/ControlGroup';
+import ReqoreInput from '../../components/Input';
+import { ReqoreLabel } from '../../components/Label';
+import { StoryMeta } from '../utils';
+import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
+
+const meta = {
+  title: 'Form/Label/Stories',
+  component: ReqoreLabel,
+  argTypes: {
+    ...MinimalArg,
+    ...FlatArg,
+    ...SizeArg,
+    ...IconArg('icon', 'Icon'),
+  },
+  args: {
+    icon: 'SearchLine',
+    label: 'Search',
+  },
+  render(args) {
+    return (
+      <ReqoreControlGroup vertical>
+        <ReqoreLabel htmlFor='search' {...args} />
+        <ReqoreInput id='search' placeholder='Search' />
+      </ReqoreControlGroup>
+    );
+  },
+} as StoryMeta<typeof ReqoreLabel>;
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+export const Default: Story = {};