@quen-ui/components 0.0.13

package/dist/typography/Text/types.d.ts

@@ -0,0 +1,22 @@
+import { MouseEventHandler, JSX, CSSProperties } from 'react';
+export declare const TEXT_SIZE: readonly ["xl", "l", "m", "s", "xs"];
+export declare const TEXT_TYPE: readonly ["secondary", "success", "warning", "danger", "disabled"];
+export type TTextSize = (typeof TEXT_SIZE)[number];
+export type TTextType = (typeof TEXT_TYPE)[number];
+export interface ITextProps {
+    /** Controls text size */
+    size?: TTextSize;
+    /** Custom CSS color value (overrides type) */
+    color?: string;
+    /** Click event handler */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Semantic state style */
+    type?: TTextType;
+    /** HTML tag to render */
+    as?: keyof JSX.IntrinsicElements;
+    /** Custom CSS class */
+    className?: string;
+    /** Inline styles */
+    styles?: CSSProperties;
+    [key: string]: any;
+}

package/dist/typography/Title/Title.cjs.js

@@ -0,0 +1,26 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Title = ({
+  children,
+  size,
+  color,
+  onClick,
+  type,
+  className,
+  id,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  styles.TitleStyled,
+  {
+    id,
+    size,
+    color,
+    onClick,
+    type,
+    className,
+    ...props,
+    children
+  }
+);
+module.exports = Title;

package/dist/typography/Title/Title.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { ITitleProps } from './types';
+declare const Title: ({ children, size, color, onClick, type, className, id, ...props }: PropsWithChildren<ITitleProps>) => import("react/jsx-runtime").JSX.Element;
+export default Title;

package/dist/typography/Title/Title.es.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { TitleStyled } from "./styles.es.js";
+const Title = ({
+  children,
+  size,
+  color,
+  onClick,
+  type,
+  className,
+  id,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  TitleStyled,
+  {
+    id,
+    size,
+    color,
+    onClick,
+    type,
+    className,
+    ...props,
+    children
+  }
+);
+export {
+  Title as default
+};

package/dist/typography/Title/__stories__/Title.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react';
+import { Title } from '../';
+declare const _default: StoryObj<typeof Title>;
+export default _default;
+export declare const Example: {
+    args: {
+        children: string;
+    };
+};

package/dist/typography/Title/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Title } from './Title';
+export type { ITitleProps, TTitleType, TTitleSize } from './types';

package/dist/typography/Title/styles.cjs.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const getFonts = (size, theme) => {
+  switch (size) {
+    case "2xl":
+      return styled.css`
+        font-size: ${theme.fonts.header.size["2xl"]};
+        line-height: ${theme.fonts.header.lineHeight["2xl"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "xl":
+      return styled.css`
+        font-size: ${theme.fonts.header.size["xl"]};
+        line-height: ${theme.fonts.header.lineHeight["xl"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "l":
+      return styled.css`
+        font-size: ${theme.fonts.header.size["l"]};
+        line-height: ${theme.fonts.header.lineHeight["l"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "m":
+      return styled.css`
+        font-size: ${theme.fonts.header.size["m"]};
+        line-height: ${theme.fonts.header.lineHeight["m"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "s":
+      return styled.css`
+        font-size: ${theme.fonts.header.size["s"]};
+        line-height: ${theme.fonts.header.lineHeight["s"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "xs":
+      return styled.css`
+        font-size: ${theme.fonts.header.size["xs"]};
+        line-height: ${theme.fonts.header.lineHeight["xs"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+  }
+};
+const getColor = ({
+  type,
+  color,
+  theme
+}) => {
+  if (color) {
+    return color;
+  } else {
+    switch (type) {
+      case "secondary":
+        return theme.colors.grayViolet["6"];
+      case "success":
+        return theme.colors.green["6"];
+      case "warning":
+        return theme.colors.orange["6"];
+      case "danger":
+        return theme.colors.red["6"];
+      case "disabled":
+        return theme.colors.gray["4"];
+      default:
+        return theme.textColor;
+    }
+  }
+};
+const TitleStyled = styled.span.attrs({
+  className: "quen-ui__title"
+})`
+  margin: 0;
+  ${({ theme, size }) => getFonts(size, theme)};
+  color: ${({ color, type, theme }) => getColor({ color, theme, type })};
+`;
+exports.TitleStyled = TitleStyled;

package/dist/typography/Title/styles.d.ts

@@ -0,0 +1,2 @@
+import { ITitleProps } from './types';
+export declare const TitleStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, ITitleProps>> & string;

package/dist/typography/Title/styles.es.js

@@ -0,0 +1,75 @@
+import styled, { css } from "styled-components";
+const getFonts = (size, theme) => {
+  switch (size) {
+    case "2xl":
+      return css`
+        font-size: ${theme.fonts.header.size["2xl"]};
+        line-height: ${theme.fonts.header.lineHeight["2xl"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "xl":
+      return css`
+        font-size: ${theme.fonts.header.size["xl"]};
+        line-height: ${theme.fonts.header.lineHeight["xl"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "l":
+      return css`
+        font-size: ${theme.fonts.header.size["l"]};
+        line-height: ${theme.fonts.header.lineHeight["l"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "m":
+      return css`
+        font-size: ${theme.fonts.header.size["m"]};
+        line-height: ${theme.fonts.header.lineHeight["m"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "s":
+      return css`
+        font-size: ${theme.fonts.header.size["s"]};
+        line-height: ${theme.fonts.header.lineHeight["s"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+    case "xs":
+      return css`
+        font-size: ${theme.fonts.header.size["xs"]};
+        line-height: ${theme.fonts.header.lineHeight["xs"]};
+        font-weight: ${theme.fonts.header.weight};
+      `;
+  }
+};
+const getColor = ({
+  type,
+  color,
+  theme
+}) => {
+  if (color) {
+    return color;
+  } else {
+    switch (type) {
+      case "secondary":
+        return theme.colors.grayViolet["6"];
+      case "success":
+        return theme.colors.green["6"];
+      case "warning":
+        return theme.colors.orange["6"];
+      case "danger":
+        return theme.colors.red["6"];
+      case "disabled":
+        return theme.colors.gray["4"];
+      default:
+        return theme.textColor;
+    }
+  }
+};
+const TitleStyled = styled.span.attrs({
+  className: "quen-ui__title"
+})`
+  margin: 0;
+  ${({ theme, size }) => getFonts(size, theme)};
+  color: ${({ color, type, theme }) => getColor({ color, theme, type })};
+`;
+export {
+  TitleStyled
+};

package/dist/typography/Title/types.d.ts

@@ -0,0 +1,22 @@
+import { default as React, JSX } from 'react';
+export declare const TITLE_SIZE: readonly ["2xl", "xl", "l", "m", "s", "xs"];
+export declare const TITLE_TYPE: readonly ["secondary", "success", "warning", "danger", "disabled"];
+export type TTitleSize = (typeof TITLE_SIZE)[number];
+export type TTitleType = (typeof TITLE_TYPE)[number];
+export interface ITitleProps {
+    /** Visual size */
+    size: TTitleSize;
+    /** Custom CSS color value (overrides type) */
+    color?: string;
+    /** Click event handler */
+    onClick?: () => void;
+    /** Applies semantic state styling */
+    type?: TTitleType;
+    /** Custom CSS class */
+    className?: string;
+    /** DOM element id */
+    id?: string;
+    /** Defines rendered HTML tag */
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    [key: string]: any;
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@quen-ui/components",
+  "private": false,
+  "version": "0.0.13",
+  "type": "module",
+  "homepage": "https://quen-ui.github.io/quen-ui/",
+  "description": "React components library",
+  "author": "QuenUI",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@quen-ui/helpers": "*",
+    "@quen-ui/hooks": "*",
+    "polished": "^4.3.1",
+    "rc-input-number": "^9.5.0",
+    "rc-select": "^14.16.6",
+    "react-textarea-autosize": "^8.5.9",
+    "react-transition-group": "^4.4.5",
+    "react-transition-state": "^2.3.1",
+    "styled-components": "^6.1.15"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@types/react-transition-group": "^4.4.12",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@quen-ui/theme": "*"
+  },
+  "keywords": [
+    "components",
+    "react",
+    "react-components",
+    "design",
+    "frontend",
+    "library",
+    "ui",
+    "ui-kit"
+  ],
+  "license": "MIT"
+}