@flikk/ui 1.0.0-beta.21 → 1.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.22",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "main": "dist/index.js",
@@ -78,6 +78,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "clean": "rimraf dist",
+    "dev": "concurrently \"npm run watch:css:dev\" \"storybook dev -p 6006\" \"npm --prefix apps/docs run dev\"",
     "storybook": "concurrently \"npm run watch:css:dev\" \"storybook dev -p 6006\"",
     "watch:css:dev": "tailwindcss --watch -i ./src/tailwind-config.css -o ./src/index.css",
     "build:css:dev": "tailwindcss -i ./src/tailwind-config.css -o ./src/index.css",

package/src/global.scss

@@ -857,7 +857,7 @@
 html,
 body {
   font-family: var(--font-family-base);
-  font-size: 14px;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/dist/components/core/FileTypeIcon/FileTypeIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { FileTypeIconProps } from './FileTypeIcon.types';
-export declare const FileTypeIcon: React.ForwardRefExoticComponent<Omit<FileTypeIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/FileTypeIcon/FileTypeIcon.js

@@ -1,33 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { fileTypeIconTheme } from './FileTypeIcon.theme.js';
-import { fileTypes } from './fileTypes.js';
-
-const FileTypeIcon = React__default.forwardRef(({ type, size = 'md', colorMode = 'color', className, theme: customTheme, ...props }, ref) => {
-    var _a;
-    const fileType = fileTypes[type];
-    if (!fileType) {
-        if (process.env.NODE_ENV !== 'production') {
-            console.warn(`[FileTypeIcon]: Unknown type "${type}". Available types: ${Object.keys(fileTypes).join(', ')}`);
-        }
-        return null;
-    }
-    const theme = {
-        ...fileTypeIconTheme,
-        ...customTheme,
-        sizes: { ...fileTypeIconTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
-    };
-    const resolvedSize = typeof size === 'number' ? size : (_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : 24;
-    const strokeColor = colorMode === 'color' ? '#D5D7DA' : 'currentColor';
-    const strokeOpacity = colorMode === 'color' ? 1 : 0.3;
-    const badgeColor = colorMode === 'color' ? fileType.color : 'currentColor';
-    const labelText = fileType.label;
-    const badgeWidth = Math.round(labelText.length * 6 + 8);
-    const badgeX = 1;
-    const textX = badgeX + badgeWidth / 2;
-    return (jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", width: resolvedSize, height: resolvedSize, fill: "none", role: "img", "aria-label": `${fileType.label} file`, "data-type": type, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: [jsx("path", { d: "M11 0.75H27C27.1212 0.75 27.2375 0.798088 27.3232 0.883789L38.1162 11.6768C38.2019 11.7625 38.25 11.8788 38.25 12V36C38.25 37.7949 36.7949 39.25 35 39.25H11C9.20507 39.25 7.75 37.7949 7.75 36V4C7.75 2.20507 9.20508 0.75 11 0.75Z", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("path", { d: "M27 0.5V8C27 10.2091 28.7909 12 31 12H38.5", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("rect", { x: badgeX, y: 18, width: badgeWidth, height: 16, rx: 2, fill: badgeColor, opacity: colorMode === 'color' ? 1 : 0.15 }), jsx("text", { x: textX, y: 26, textAnchor: "middle", dominantBaseline: "central", fill: colorMode === 'color' ? 'white' : 'currentColor', fontSize: 9.5, fontWeight: 700, fontFamily: "Arial, Helvetica, sans-serif", letterSpacing: 0.3, children: labelText })] }));
-});
-FileTypeIcon.displayName = 'FileTypeIcon';
-
-export { FileTypeIcon };

package/dist/components/core/FileTypeIcon/FileTypeIcon.theme.d.ts

@@ -1,2 +0,0 @@
-import { FileTypeIconTheme } from './FileTypeIcon.types';
-export declare const fileTypeIconTheme: FileTypeIconTheme;

package/dist/components/core/FileTypeIcon/FileTypeIcon.theme.js

@@ -1,12 +0,0 @@
-const fileTypeIconTheme = {
-    baseStyle: 'inline-block shrink-0',
-    sizes: {
-        xs: 16,
-        sm: 20,
-        md: 24,
-        lg: 32,
-        xl: 40,
-    },
-};
-
-export { fileTypeIconTheme };

package/dist/components/core/FileTypeIcon/FileTypeIcon.types.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-export type FileTypeName = 'pdf' | 'doc' | 'docx' | 'txt' | 'xls' | 'xlsx' | 'csv' | 'ppt' | 'mp3' | 'wav' | 'mp4' | 'mov' | 'jpg' | 'png' | 'svg' | 'gif' | 'zip' | 'rar';
-export type FileTypeIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type FileTypeIconColorMode = 'color' | 'mono';
-export interface FileTypeIconTheme {
-    baseStyle: string;
-    sizes: Record<FileTypeIconSize, number>;
-}
-export interface FileTypeIconThemeOverrides {
-    baseStyle?: string;
-    sizes?: Partial<Record<FileTypeIconSize, number>>;
-}
-export interface FileTypeIconProps extends React.SVGProps<SVGSVGElement> {
-    type: FileTypeName;
-    size?: FileTypeIconSize | number;
-    colorMode?: FileTypeIconColorMode;
-    className?: string;
-    theme?: FileTypeIconThemeOverrides;
-}

package/dist/components/core/FileTypeIcon/index.d.ts

@@ -1,2 +0,0 @@
-export { FileTypeIcon } from './FileTypeIcon';
-export type { FileTypeIconProps, FileTypeName, FileTypeIconSize, FileTypeIconColorMode, FileTypeIconTheme, FileTypeIconThemeOverrides, } from './FileTypeIcon.types';

package/dist/components/core/SocialIcon/SocialIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { SocialIconProps } from './SocialIcon.types';
-export declare const SocialIcon: React.ForwardRefExoticComponent<Omit<SocialIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/SocialIcon/SocialIcon.js

@@ -1,30 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { socialIconTheme } from './SocialIcon.theme.js';
-import { platforms } from './platforms.js';
-
-const SocialIcon = React__default.forwardRef(({ icon, size = 'md', colorMode = 'brand', className, theme: customTheme, ...props }, ref) => {
-    var _a;
-    const platform = platforms[icon];
-    if (!platform) {
-        if (process.env.NODE_ENV !== 'production') {
-            console.warn(`[SocialIcon]: Unknown icon "${icon}". Available icons: ${Object.keys(platforms).join(', ')}`);
-        }
-        return null;
-    }
-    const theme = {
-        ...socialIconTheme,
-        ...customTheme,
-        sizes: { ...socialIconTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
-    };
-    const resolvedSize = typeof size === 'number' ? size : (_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : 24;
-    const fill = colorMode === 'brand' ? platform.brandColor : 'currentColor';
-    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: platform.viewBox, width: resolvedSize, height: resolvedSize, fill: fill, role: "img", "aria-label": `${platform.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: platform.shapes.map((shape, i) => {
-            var _a;
-            return (jsx("path", { d: shape.d, fill: colorMode === 'brand' ? ((_a = shape.fill) !== null && _a !== void 0 ? _a : undefined) : undefined }, i));
-        }) }));
-});
-SocialIcon.displayName = 'SocialIcon';
-
-export { SocialIcon };

package/dist/components/core/SocialIcon/SocialIcon.theme.d.ts

@@ -1,2 +0,0 @@
-import { SocialIconTheme } from './SocialIcon.types';
-export declare const socialIconTheme: SocialIconTheme;

package/dist/components/core/SocialIcon/SocialIcon.theme.js

@@ -1,12 +0,0 @@
-const socialIconTheme = {
-    baseStyle: 'inline-block shrink-0',
-    sizes: {
-        xs: 16,
-        sm: 20,
-        md: 24,
-        lg: 32,
-        xl: 40,
-    },
-};
-
-export { socialIconTheme };

package/dist/components/core/SocialIcon/SocialIcon.types.d.ts

@@ -1,18 +0,0 @@
-export type SocialIconName = 'github' | 'x' | 'linkedin' | 'instagram' | 'facebook' | 'youtube' | 'discord' | 'dribbble' | 'tiktok' | 'reddit' | 'twitch' | 'slack' | 'medium' | 'pinterest' | 'snapchat' | 'whatsapp' | 'telegram' | 'google' | 'apple';
-export type SocialIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type SocialIconColorMode = 'brand' | 'mono';
-export interface SocialIconTheme {
-    baseStyle: string;
-    sizes: Record<SocialIconSize, number>;
-}
-export interface SocialIconThemeOverrides {
-    baseStyle?: string;
-    sizes?: Partial<Record<SocialIconSize, number>>;
-}
-export interface SocialIconProps extends React.SVGProps<SVGSVGElement> {
-    icon: SocialIconName;
-    size?: SocialIconSize | number;
-    colorMode?: SocialIconColorMode;
-    className?: string;
-    theme?: SocialIconThemeOverrides;
-}

package/dist/components/core/SocialIcon/index.d.ts

@@ -1,2 +0,0 @@
-export { SocialIcon } from './SocialIcon';
-export type { SocialIconProps, SocialIconName, SocialIconSize, SocialIconColorMode, SocialIconTheme, SocialIconThemeOverrides, } from './SocialIcon.types';