@deckai/deck-ui 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AboutCard.cjs +14 -0
- package/dist/components/AboutCard.cjs.map +1 -0
- package/dist/components/AboutCard.d.cts +12 -0
- package/dist/components/AboutCard.d.ts +12 -0
- package/dist/components/AboutCard.js +14 -0
- package/dist/components/AboutCard.js.map +1 -0
- package/dist/components/Avatar.cjs +2 -0
- package/dist/components/Avatar.cjs.map +1 -0
- package/dist/components/Avatar.d.cts +10 -0
- package/dist/components/Avatar.d.ts +10 -0
- package/dist/components/Avatar.js +2 -0
- package/dist/components/Avatar.js.map +1 -0
- package/dist/components/Badge.cjs +2 -0
- package/dist/components/Badge.cjs.map +1 -0
- package/dist/components/Badge.d.cts +13 -0
- package/dist/components/Badge.d.ts +13 -0
- package/dist/components/Badge.js +2 -0
- package/dist/components/Badge.js.map +1 -0
- package/dist/components/Breadcrumbs.cjs +2 -0
- package/dist/components/Breadcrumbs.cjs.map +1 -0
- package/dist/components/Breadcrumbs.d.cts +15 -0
- package/dist/components/Breadcrumbs.d.ts +15 -0
- package/dist/components/Breadcrumbs.js +2 -0
- package/dist/components/Breadcrumbs.js.map +1 -0
- package/dist/components/Button.cjs +14 -0
- package/dist/components/Button.cjs.map +1 -0
- package/dist/components/Button.d.cts +28 -0
- package/dist/components/Button.d.ts +28 -0
- package/dist/components/Button.js +14 -0
- package/dist/components/Button.js.map +1 -0
- package/dist/components/Combobox.cjs +2 -0
- package/dist/components/Combobox.cjs.map +1 -0
- package/dist/components/Combobox.d.cts +14 -0
- package/dist/components/Combobox.d.ts +14 -0
- package/dist/components/Combobox.js +2 -0
- package/dist/components/Combobox.js.map +1 -0
- package/dist/components/ContactItem.cjs +2 -0
- package/dist/components/ContactItem.cjs.map +1 -0
- package/dist/components/ContactItem.d.cts +11 -0
- package/dist/components/ContactItem.d.ts +11 -0
- package/dist/components/ContactItem.js +2 -0
- package/dist/components/ContactItem.js.map +1 -0
- package/dist/components/Icon.cjs +2 -0
- package/dist/components/Icon.cjs.map +1 -0
- package/dist/components/Icon.d.cts +18 -0
- package/dist/components/Icon.d.ts +18 -0
- package/dist/components/Icon.js +2 -0
- package/dist/components/Icon.js.map +1 -0
- package/dist/components/Input.cjs +2 -0
- package/dist/components/Input.cjs.map +1 -0
- package/dist/components/Input.d.cts +14 -0
- package/dist/components/Input.d.ts +14 -0
- package/dist/components/Input.js +2 -0
- package/dist/components/Input.js.map +1 -0
- package/dist/components/Link.cjs +2 -0
- package/dist/components/Link.cjs.map +1 -0
- package/dist/components/Link.d.cts +13 -0
- package/dist/components/Link.d.ts +13 -0
- package/dist/components/Link.js +2 -0
- package/dist/components/Link.js.map +1 -0
- package/dist/components/Logo.cjs +3 -0
- package/dist/components/Logo.cjs.map +1 -0
- package/dist/components/Logo.d.cts +11 -0
- package/dist/components/Logo.d.ts +11 -0
- package/dist/components/Logo.js +3 -0
- package/dist/components/Logo.js.map +1 -0
- package/dist/components/Navbar.cjs +3 -0
- package/dist/components/Navbar.cjs.map +1 -0
- package/dist/components/Navbar.d.cts +19 -0
- package/dist/components/Navbar.d.ts +19 -0
- package/dist/components/Navbar.js +3 -0
- package/dist/components/Navbar.js.map +1 -0
- package/dist/components/NavbarItem.cjs +2 -0
- package/dist/components/NavbarItem.cjs.map +1 -0
- package/dist/components/NavbarItem.d.cts +13 -0
- package/dist/components/NavbarItem.d.ts +13 -0
- package/dist/components/NavbarItem.js +2 -0
- package/dist/components/NavbarItem.js.map +1 -0
- package/dist/components/Option.cjs +2 -0
- package/dist/components/Option.cjs.map +1 -0
- package/dist/components/Option.d.cts +11 -0
- package/dist/components/Option.d.ts +11 -0
- package/dist/components/Option.js +2 -0
- package/dist/components/Option.js.map +1 -0
- package/dist/components/Pressable.cjs +2 -0
- package/dist/components/Pressable.cjs.map +1 -0
- package/dist/components/Pressable.d.cts +6 -0
- package/dist/components/Pressable.d.ts +6 -0
- package/dist/components/Pressable.js +2 -0
- package/dist/components/Pressable.js.map +1 -0
- package/dist/components/ProfileCard.cjs +14 -0
- package/dist/components/ProfileCard.cjs.map +1 -0
- package/dist/components/ProfileCard.d.cts +15 -0
- package/dist/components/ProfileCard.d.ts +15 -0
- package/dist/components/ProfileCard.js +14 -0
- package/dist/components/ProfileCard.js.map +1 -0
- package/dist/components/SocialCard.cjs +2 -0
- package/dist/components/SocialCard.cjs.map +1 -0
- package/dist/components/SocialCard.d.cts +12 -0
- package/dist/components/SocialCard.d.ts +12 -0
- package/dist/components/SocialCard.js +2 -0
- package/dist/components/SocialCard.js.map +1 -0
- package/dist/components/Switch.cjs +2 -0
- package/dist/components/Switch.cjs.map +1 -0
- package/dist/components/Switch.d.cts +13 -0
- package/dist/components/Switch.d.ts +13 -0
- package/dist/components/Switch.js +2 -0
- package/dist/components/Switch.js.map +1 -0
- package/dist/components/Tabs.cjs +2 -0
- package/dist/components/Tabs.cjs.map +1 -0
- package/dist/components/Tabs.d.cts +16 -0
- package/dist/components/Tabs.d.ts +16 -0
- package/dist/components/Tabs.js +2 -0
- package/dist/components/Tabs.js.map +1 -0
- package/dist/components/Tag.cjs +2 -0
- package/dist/components/Tag.cjs.map +1 -0
- package/dist/components/Tag.d.cts +10 -0
- package/dist/components/Tag.d.ts +10 -0
- package/dist/components/Tag.js +2 -0
- package/dist/components/Tag.js.map +1 -0
- package/dist/components/Text.cjs +2 -0
- package/dist/components/Text.cjs.map +1 -0
- package/dist/components/Text.d.cts +46 -0
- package/dist/components/Text.d.ts +46 -0
- package/dist/components/Text.js +2 -0
- package/dist/components/Text.js.map +1 -0
- package/dist/components/Tooltip.cjs +2 -0
- package/dist/components/Tooltip.cjs.map +1 -0
- package/dist/components/Tooltip.d.cts +13 -0
- package/dist/components/Tooltip.d.ts +13 -0
- package/dist/components/Tooltip.js +2 -0
- package/dist/components/Tooltip.js.map +1 -0
- package/dist/components/WorkCard.cjs +2 -0
- package/dist/components/WorkCard.cjs.map +1 -0
- package/dist/components/WorkCard.d.cts +13 -0
- package/dist/components/WorkCard.d.ts +13 -0
- package/dist/components/WorkCard.js +2 -0
- package/dist/components/WorkCard.js.map +1 -0
- package/dist/index.cjs +5 -1005
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +29 -288
- package/dist/index.d.ts +29 -288
- package/dist/index.js +5 -954
- package/dist/index.js.map +1 -1
- package/dist/styles/fonts.css +1 -29
- package/dist/styles/fonts.css.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/dist/styles/styles.css.map +1 -1
- package/dist/tailwind-DJFscIlV.d.cts +35 -0
- package/dist/tailwind-DJFscIlV.d.ts +35 -0
- package/package.json +10 -3
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
type OptionProps = {
|
|
4
|
+
label: string;
|
|
5
|
+
value: string;
|
|
6
|
+
onChange?: (value: string) => void;
|
|
7
|
+
selected?: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare const Option: ({ value, label, onChange, selected }: OptionProps) => React__default.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { Option, type OptionProps };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
type OptionProps = {
|
|
4
|
+
label: string;
|
|
5
|
+
value: string;
|
|
6
|
+
onChange?: (value: string) => void;
|
|
7
|
+
selected?: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare const Option: ({ value, label, onChange, selected }: OptionProps) => React__default.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { Option, type OptionProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import s from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function t(...o){return twMerge(clsx(o))}var f=({value:o,label:r,onChange:e,selected:n})=>s.createElement("button",{type:"button",className:t("relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded",n&&"bg-gray-100"),onClick:()=>{e?.(o);}},r);if (exports.default) module.exports = exports.default;export{f as Option};//# sourceMappingURL=Option.js.map
|
|
2
|
+
//# sourceMappingURL=Option.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","Option","value","label","onChange","selected","React"],"mappings":"kFAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCMO,IAAMG,CAAS,CAAA,CAAC,CAAE,KAAA,CAAAC,EAAO,KAAAC,CAAAA,CAAAA,CAAO,QAAAC,CAAAA,CAAAA,CAAU,QAAAC,CAAAA,CAAS,IACxDC,CAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,IAAA,CAAK,QACL,CAAA,SAAA,CAAWT,EACT,+FACAQ,CAAAA,CAAAA,EAAY,aACd,CAAA,CACA,OAAS,CAAA,IAAM,CACbD,CAAWF,GAAAA,CAAK,EAClB,CAAA,CAAA,CAECC,CACH","file":"Option.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type OptionProps = {\n label: string;\n value: string;\n onChange?: (value: string) => void;\n selected?: boolean;\n};\n\nexport const Option = ({ value, label, onChange, selected }: OptionProps) => (\n <button\n type=\"button\"\n className={cn(\n \"relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded\",\n selected && \"bg-gray-100\"\n )}\n onClick={() => {\n onChange?.(value);\n }}\n >\n {label}\n </button>\n);\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var n=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var n__default=/*#__PURE__*/_interopDefault(n);var t="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var f=({children:e,type:s="button",className:o,...r})=>n__default.default.createElement("button",{type:s,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${t} ${o}`,...r},e);if (exports.default) module.exports = exports.default;exports.Pressable=f;//# sourceMappingURL=Pressable.cjs.map
|
|
2
|
+
//# sourceMappingURL=Pressable.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React"],"mappings":"oJAmEO,IAAMA,CAAAA,CACX,sGC/DWC,IAAAA,CAAAA,CAAsC,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CAAO,SACP,SAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CACEC,GAAAA,kBAAAA,CAAA,aAAC,CAAA,QAAA,CAAA,CAEC,KAAMH,CACN,CAAA,SAAA,CAAW,CAAmEH,gEAAAA,EAAAA,CAAe,CAAII,CAAAA,EAAAA,CAAS,CACzG,CAAA,CAAA,GAAGC,GAEHH,CACH","file":"Pressable.cjs","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import n from'react';var t="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var f=({children:e,type:s="button",className:o,...r})=>n.createElement("button",{type:s,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${t} ${o}`,...r},e);if (exports.default) module.exports = exports.default;export{f as Pressable};//# sourceMappingURL=Pressable.js.map
|
|
2
|
+
//# sourceMappingURL=Pressable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React"],"mappings":"qBAmEO,IAAMA,CAAAA,CACX,sGC/DWC,IAAAA,CAAAA,CAAsC,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CAAO,SACP,SAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CACEC,GAAAA,CAAAA,CAAA,aAAC,CAAA,QAAA,CAAA,CAEC,KAAMH,CACN,CAAA,SAAA,CAAW,CAAmEH,gEAAAA,EAAAA,CAAe,CAAII,CAAAA,EAAAA,CAAS,CACzG,CAAA,CAAA,GAAGC,GAEHH,CACH","file":"Pressable.js","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';var o=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons'),l=require('@radix-ui/react-tooltip'),b=require('@radix-ui/react-switch');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var o__namespace=/*#__PURE__*/_interopNamespace(o);var l__namespace=/*#__PURE__*/_interopNamespace(l);var b__namespace=/*#__PURE__*/_interopNamespace(b);function c(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var E={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},B={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},I=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,i={width:`${t}px`,height:`${t}px`},a=r.filter(n=>typeof n=="string"&&n.includes(":")).reduce((n,p)=>{let[m,d]=p.split(":");return n[B[m]]={width:`${d}px`,height:`${d}px`},n},{});return Object.keys(a).length>0&&(i["@media"]=a),i},f=o__namespace.default.forwardRef(({name:e,size:r=24,color:t="primary",title:i,className:a,style:n={},...p},m)=>{let d=icons.IconMap[e],v=I(r);return o__namespace.default.createElement("div",{className:c("flex justify-center items-center",a),style:{...v,"--icon-stroke":E[t],...n}},o__namespace.default.createElement(d,{ref:m,"aria-hidden":!i,"aria-label":i,stroke:e.includes("filled")?void 0:E[t],...p}))});f.displayName="Icon";var V={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},O=e=>{let[r,t]=e.split("-");return r==="heading"?V[t]||"p":r==="label"?"label":"p"},j={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},z=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[i,a]=t.split(":");return `${i}:text-${a}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",s=o__namespace.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:i,children:a,weight:n,...p},m)=>{let d=z(e),v=r&&r==="inherit"?"inherit":r?`text-${r}`:"",S=o__namespace.default.useMemo(()=>{let k=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return O(k)},[e]);return o__namespace.default.createElement(t||S,{ref:m,className:`font-sans antialiased ${d} ${v} ${n?`!${j[n]}`:""} ${i??""}`,...p},a)});s.displayName="Text";var L=o__namespace.forwardRef(({className:e,variant:r="pink",iconName:t,children:i,...a},n)=>o__namespace.createElement("span",{ref:n,className:c("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",{pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25"}[r],e),...a},t&&o__namespace.createElement(f,{size:16,name:t}),o__namespace.createElement(s,{variant:"body-xxs-medium"},i)));L.displayName="Badge";var T="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var G={black:"bg-text-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},K={black:"border border-text-primary text-text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},h=o__namespace.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:i=!1,children:a,disabled:n,...p},m)=>o__namespace.createElement("button",{ref:m,className:`
|
|
2
|
+
px-7
|
|
3
|
+
py-2
|
|
4
|
+
inline-flex items-center justify-center
|
|
5
|
+
rounded-lg
|
|
6
|
+
transition-colors duration-200
|
|
7
|
+
${T}
|
|
8
|
+
disabled:opacity-50 disabled:pointer-events-none
|
|
9
|
+
hover:opacity-80 active:scale-95
|
|
10
|
+
truncate
|
|
11
|
+
${r==="filled"?G[t]:K[t]}
|
|
12
|
+
${e}
|
|
13
|
+
`,disabled:n||i,type:"button",...p},typeof a=="string"?o__namespace.createElement(s,{variant:"body-default-bold",color:"inherit"},a):a));h.displayName="Button";var C=({content:e,children:r,side:t="bottom",align:i="center",className:a,delayDuration:n=200})=>o__namespace.createElement(l__namespace.Provider,{delayDuration:n},o__namespace.createElement(l__namespace.Root,null,o__namespace.createElement(l__namespace.Trigger,{asChild:!0},o__namespace.createElement("span",{tabIndex:0},r)),o__namespace.createElement(l__namespace.Portal,null,o__namespace.createElement(l__namespace.Content,{side:t,align:i,sideOffset:4,className:c("z-50 overflow-hidden rounded-lg","bg-text-primary px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60",a)},e,o__namespace.createElement(l__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))));var P=o__namespace.forwardRef(({className:e,label:r,description:t,...i},a)=>o__namespace.createElement("div",{className:"flex items-center gap-2"},o__namespace.createElement(b__namespace.Root,{className:c("peer inline-flex h-6 w-11 shrink-0 cursor-pointer","items-center rounded-full border-2 border-transparent","transition-colors focus-visible:outline-none",T,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",e),...i,ref:a},o__namespace.createElement(b__namespace.Thumb,{className:c("pointer-events-none block h-5 w-5","rounded-full bg-white shadow-lg ring-0","transition-transform","data-[state=checked]:translate-x-5","data-[state=unchecked]:translate-x-0")})),(r||t)&&o__namespace.createElement("div",{className:"flex flex-col"},r&&o__namespace.createElement("label",{className:"text-sm font-medium text-text-primary",htmlFor:i.id},r),t&&o__namespace.createElement("span",{className:"text-xs text-text-secondary"},t))));P.displayName="Switch";var w=({children:e,padded:r,color:t="primary",...i})=>o__namespace.default.createElement("div",{className:`rounded bg-secondary-400 ${r?"px-3":"px-2"} py-1.5 h-min`,...i},typeof e=="string"?o__namespace.default.createElement(s,{color:t==="primary"?"primary-100":"text-primary",variant:["body-default-medium","md:body-xs-medium"],className:"truncate"},e):e);var $e=({profileImage:e,name:r,location:t,memberSince:i,interests:a,badges:n})=>{let p=o.useId();return o__namespace.default.createElement("div",{className:"lg:basis-[635px] p-10 rounded-xl border border-stroke relative flex gap-6"},o__namespace.default.createElement(h,{variant:"outlined",color:"secondary",className:"absolute top-10 right-10 !px-2 py-2"},o__namespace.default.createElement(f,{color:"secondary",name:"edit-2"})),o__namespace.default.createElement("div",{className:"flex flex-row gap-6"},o__namespace.default.createElement("div",{className:"flex flex-col gap-4"},o__namespace.default.createElement("img",{src:e,alt:"profile for fiona chen"}),o__namespace.default.createElement(h,null,"Preview Profile"),o__namespace.default.createElement("div",{className:"flex flex-col gap-1"},o__namespace.default.createElement("div",{className:"flex flex-row justify-between"},o__namespace.default.createElement(s,{as:"label",htmlFor:p,variant:"body-default-semibold",color:"text-secondary"},"Private Mode"),o__namespace.default.createElement(P,{id:p})),o__namespace.default.createElement("div",{className:"flex flex-row gap-1"},o__namespace.default.createElement(s,{variant:"body-xs",color:"text-secondary"},"What is this?"),o__namespace.default.createElement(C,{content:"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode."},o__namespace.default.createElement(f,{name:"message-question",color:"secondary",size:16}))))),o__namespace.default.createElement("div",{className:"flex flex-col gap-2"},o__namespace.default.createElement(s,{as:"h1",variant:["heading-lg","md:heading-md"]},r),o__namespace.default.createElement("div",{className:"flex gap-2 items-center"},o__namespace.default.createElement(f,{name:"location",size:"md:16"}),o__namespace.default.createElement(s,{variant:["body-lg","md:body-default"],color:"text-secondary"},t)),o__namespace.default.createElement("div",{className:"flex gap-2 items-center"},o__namespace.default.createElement(f,{name:"profile",size:"md:16"}),o__namespace.default.createElement(s,{variant:["body-lg","md:body-default"],color:"text-secondary"},"Member Since"," ",o__namespace.default.createElement(s,{as:"span",variant:["body-lg","md:body-default"]},i))),a&&o__namespace.default.createElement("div",{className:"flex flex-col gap-2 pt-6"},o__namespace.default.createElement(s,{variant:"heading-xs"},"Interests"),o__namespace.default.createElement("div",{className:"flex flex-wrap gap-2"},a.map((m,d)=>o__namespace.default.createElement(w,{key:d},m)))),n&&o__namespace.default.createElement("div",{className:"flex gap-2 flex-wrap pt-6"},n.map((m,d)=>o__namespace.default.createElement(L,{key:d,...m}))))))};if (exports.default) module.exports = exports.default;exports.ProfileCard=$e;//# sourceMappingURL=ProfileCard.cjs.map
|
|
14
|
+
//# sourceMappingURL=ProfileCard.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx","../../src/components/Button.tsx","../../src/utils/tailwind.ts","../../src/components/Tooltip.tsx","../../src/components/Switch.tsx","../../src/components/Tag.tsx","../../src/components/ProfileCard.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","React","name","color","title","className","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Badge","x","iconName","focusRingStyles","filled","outlined","Button","u","isLoading","disabled","Tooltip","content","side","align","delayDuration","g","l","Switch","y","label","description","b","Tag","padded","ProfileCard","profileImage","location","memberSince","interests","badges","randomId","useId","interest","idx","badge"],"mappings":"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","file":"ProfileCard.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant = \"pink\", iconName, children, ...props }, ref) => {\n const variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\"\n };\n\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded-lg px-2 py-1\",\n \"text-sm font-medium\",\n variants[variant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-medium\">{children}</Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst filled = {\n black: \"bg-text-primary text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nconst outlined = {\n black: \"border border-text-primary text-text-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={`\n px-7\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n ${focusRingStyles}\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate\n ${variant === \"filled\" ? filled[color] : outlined[color]}\n ${className}\n `}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text variant=\"body-default-bold\" color=\"inherit\">\n {children}\n </Text>\n ) : (\n children\n )}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"../utils\";\n\nexport interface TooltipProps {\n content: React.ReactNode;\n children: React.ReactNode;\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n className?: string;\n delayDuration?: number;\n}\n\nexport const Tooltip = ({\n content,\n children,\n side = \"bottom\",\n align = \"center\",\n className,\n delayDuration = 200\n}: TooltipProps) => (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root>\n <TooltipPrimitive.Trigger asChild>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n <span tabIndex={0}>{children}</span>\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n \"z-50 overflow-hidden rounded-lg\",\n \"bg-text-primary px-3 py-1.5\",\n \"text-xs text-white\",\n \"animate-in fade-in-0 zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n \"data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=top]:slide-in-from-bottom-2\",\n \"select-none\",\n \"max-w-60\",\n className\n )}\n >\n {content}\n <TooltipPrimitive.Arrow\n className=\"fill-text-primary\"\n width={10}\n height={5}\n />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n);\n","import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n typeof SwitchPrimitive.Root\n> & {\n label?: string;\n description?: string;\n};\n\nexport const Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n <div className=\"flex items-center gap-2\">\n <SwitchPrimitive.Root\n className={cn(\n \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n \"items-center rounded-full border-2 border-transparent\",\n \"transition-colors focus-visible:outline-none\",\n focusRingStyles,\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n className\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n \"pointer-events-none block h-5 w-5\",\n \"rounded-full bg-white shadow-lg ring-0\",\n \"transition-transform\",\n \"data-[state=checked]:translate-x-5\",\n \"data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitive.Root>\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <label\n className=\"text-sm font-medium text-text-primary\"\n htmlFor={props.id}\n >\n {label}\n </label>\n )}\n {description && (\n <span className=\"text-xs text-text-secondary\">{description}</span>\n )}\n </div>\n )}\n </div>\n));\n\nSwitch.displayName = \"Switch\";\n","import React, { HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\n\nexport type TagProps = {\n children: React.ReactNode;\n padded?: boolean;\n color?: \"primary\" | \"text\";\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const Tag = ({\n children,\n padded,\n color = \"primary\",\n ...props\n}: TagProps) => (\n <div\n className={`rounded bg-secondary-400 ${padded ? \"px-3\" : \"px-2\"} py-1.5 h-min`}\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n color={color === \"primary\" ? \"primary-100\" : \"text-primary\"}\n variant={[\"body-default-medium\", \"md:body-xs-medium\"]}\n className=\"truncate\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n </div>\n);\n","import React, { useId } from \"react\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Tooltip } from \"./Tooltip\";\nimport { Switch } from \"./Switch\";\nimport { Tag } from \"./Tag\";\n\nexport type ProfileCardProps = {\n profileImage: string;\n name: string;\n location: string;\n memberSince?: string;\n interests?: string[];\n badges?: BadgeProps[];\n};\n\nexport const ProfileCard = ({\n profileImage,\n name,\n location,\n memberSince,\n interests,\n badges\n}: ProfileCardProps) => {\n const randomId = useId();\n return (\n <div className=\"lg:basis-[635px] p-10 rounded-xl border border-stroke relative flex gap-6\">\n <Button\n variant=\"outlined\"\n color=\"secondary\"\n className=\"absolute top-10 right-10 !px-2 py-2\"\n >\n <Icon color=\"secondary\" name=\"edit-2\" />\n </Button>\n <div className=\"flex flex-row gap-6\">\n <div className=\"flex flex-col gap-4\">\n <img src={profileImage} alt=\"profile for fiona chen\" />\n <Button>Preview Profile</Button>\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex flex-row justify-between\">\n <Text\n as=\"label\"\n htmlFor={randomId}\n variant=\"body-default-semibold\"\n color=\"text-secondary\"\n >\n Private Mode\n </Text>\n <Switch id={randomId} />\n </div>\n <div className=\"flex flex-row gap-1\">\n <Text variant=\"body-xs\" color=\"text-secondary\">\n What is this?\n </Text>\n <Tooltip content=\"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode.\">\n <Icon name=\"message-question\" color=\"secondary\" size={16} />\n </Tooltip>\n </div>\n </div>\n </div>\n <div className=\"flex flex-col gap-2\">\n <Text as=\"h1\" variant={[\"heading-lg\", \"md:heading-md\"]}>\n {name}\n </Text>\n <div className=\"flex gap-2 items-center\">\n <Icon name=\"location\" size={\"md:16\"} />\n <Text\n variant={[\"body-lg\", \"md:body-default\"]}\n color=\"text-secondary\"\n >\n {location}\n </Text>\n </div>\n <div className=\"flex gap-2 items-center\">\n <Icon name=\"profile\" size={\"md:16\"} />\n <Text\n variant={[\"body-lg\", \"md:body-default\"]}\n color=\"text-secondary\"\n >\n Member Since{\" \"}\n <Text as=\"span\" variant={[\"body-lg\", \"md:body-default\"]}>\n {memberSince}\n </Text>\n </Text>\n </div>\n {interests && (\n <div className=\"flex flex-col gap-2 pt-6\">\n <Text variant=\"heading-xs\">Interests</Text>\n <div className=\"flex flex-wrap gap-2\">\n {interests.map((interest, idx) => (\n <Tag key={idx}>{interest}</Tag>\n ))}\n </div>\n </div>\n )}\n {badges && (\n <div className=\"flex gap-2 flex-wrap pt-6\">\n {badges.map((badge, idx) => (\n <Badge key={idx} {...badge} />\n ))}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { BadgeProps } from './Badge.cjs';
|
|
3
|
+
import '@deckai/icons';
|
|
4
|
+
|
|
5
|
+
type ProfileCardProps = {
|
|
6
|
+
profileImage: string;
|
|
7
|
+
name: string;
|
|
8
|
+
location: string;
|
|
9
|
+
memberSince?: string;
|
|
10
|
+
interests?: string[];
|
|
11
|
+
badges?: BadgeProps[];
|
|
12
|
+
};
|
|
13
|
+
declare const ProfileCard: ({ profileImage, name, location, memberSince, interests, badges }: ProfileCardProps) => React__default.JSX.Element;
|
|
14
|
+
|
|
15
|
+
export { ProfileCard, type ProfileCardProps };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { BadgeProps } from './Badge.js';
|
|
3
|
+
import '@deckai/icons';
|
|
4
|
+
|
|
5
|
+
type ProfileCardProps = {
|
|
6
|
+
profileImage: string;
|
|
7
|
+
name: string;
|
|
8
|
+
location: string;
|
|
9
|
+
memberSince?: string;
|
|
10
|
+
interests?: string[];
|
|
11
|
+
badges?: BadgeProps[];
|
|
12
|
+
};
|
|
13
|
+
declare const ProfileCard: ({ profileImage, name, location, memberSince, interests, badges }: ProfileCardProps) => React__default.JSX.Element;
|
|
14
|
+
|
|
15
|
+
export { ProfileCard, type ProfileCardProps };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import*as o from'react';import o__default,{useId}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';import*as l from'@radix-ui/react-tooltip';import*as b from'@radix-ui/react-switch';function c(...e){return twMerge(clsx(e))}var E={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},B={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},I=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,i={width:`${t}px`,height:`${t}px`},a=r.filter(n=>typeof n=="string"&&n.includes(":")).reduce((n,p)=>{let[m,d]=p.split(":");return n[B[m]]={width:`${d}px`,height:`${d}px`},n},{});return Object.keys(a).length>0&&(i["@media"]=a),i},f=o__default.forwardRef(({name:e,size:r=24,color:t="primary",title:i,className:a,style:n={},...p},m)=>{let d=IconMap[e],v=I(r);return o__default.createElement("div",{className:c("flex justify-center items-center",a),style:{...v,"--icon-stroke":E[t],...n}},o__default.createElement(d,{ref:m,"aria-hidden":!i,"aria-label":i,stroke:e.includes("filled")?void 0:E[t],...p}))});f.displayName="Icon";var V={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},O=e=>{let[r,t]=e.split("-");return r==="heading"?V[t]||"p":r==="label"?"label":"p"},j={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},z=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[i,a]=t.split(":");return `${i}:text-${a}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",s=o__default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:i,children:a,weight:n,...p},m)=>{let d=z(e),v=r&&r==="inherit"?"inherit":r?`text-${r}`:"",S=o__default.useMemo(()=>{let k=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return O(k)},[e]);return o__default.createElement(t||S,{ref:m,className:`font-sans antialiased ${d} ${v} ${n?`!${j[n]}`:""} ${i??""}`,...p},a)});s.displayName="Text";var L=o.forwardRef(({className:e,variant:r="pink",iconName:t,children:i,...a},n)=>o.createElement("span",{ref:n,className:c("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",{pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25"}[r],e),...a},t&&o.createElement(f,{size:16,name:t}),o.createElement(s,{variant:"body-xxs-medium"},i)));L.displayName="Badge";var T="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var G={black:"bg-text-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},K={black:"border border-text-primary text-text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},h=o.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:i=!1,children:a,disabled:n,...p},m)=>o.createElement("button",{ref:m,className:`
|
|
2
|
+
px-7
|
|
3
|
+
py-2
|
|
4
|
+
inline-flex items-center justify-center
|
|
5
|
+
rounded-lg
|
|
6
|
+
transition-colors duration-200
|
|
7
|
+
${T}
|
|
8
|
+
disabled:opacity-50 disabled:pointer-events-none
|
|
9
|
+
hover:opacity-80 active:scale-95
|
|
10
|
+
truncate
|
|
11
|
+
${r==="filled"?G[t]:K[t]}
|
|
12
|
+
${e}
|
|
13
|
+
`,disabled:n||i,type:"button",...p},typeof a=="string"?o.createElement(s,{variant:"body-default-bold",color:"inherit"},a):a));h.displayName="Button";var C=({content:e,children:r,side:t="bottom",align:i="center",className:a,delayDuration:n=200})=>o.createElement(l.Provider,{delayDuration:n},o.createElement(l.Root,null,o.createElement(l.Trigger,{asChild:!0},o.createElement("span",{tabIndex:0},r)),o.createElement(l.Portal,null,o.createElement(l.Content,{side:t,align:i,sideOffset:4,className:c("z-50 overflow-hidden rounded-lg","bg-text-primary px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60",a)},e,o.createElement(l.Arrow,{className:"fill-text-primary",width:10,height:5})))));var P=o.forwardRef(({className:e,label:r,description:t,...i},a)=>o.createElement("div",{className:"flex items-center gap-2"},o.createElement(b.Root,{className:c("peer inline-flex h-6 w-11 shrink-0 cursor-pointer","items-center rounded-full border-2 border-transparent","transition-colors focus-visible:outline-none",T,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",e),...i,ref:a},o.createElement(b.Thumb,{className:c("pointer-events-none block h-5 w-5","rounded-full bg-white shadow-lg ring-0","transition-transform","data-[state=checked]:translate-x-5","data-[state=unchecked]:translate-x-0")})),(r||t)&&o.createElement("div",{className:"flex flex-col"},r&&o.createElement("label",{className:"text-sm font-medium text-text-primary",htmlFor:i.id},r),t&&o.createElement("span",{className:"text-xs text-text-secondary"},t))));P.displayName="Switch";var w=({children:e,padded:r,color:t="primary",...i})=>o__default.createElement("div",{className:`rounded bg-secondary-400 ${r?"px-3":"px-2"} py-1.5 h-min`,...i},typeof e=="string"?o__default.createElement(s,{color:t==="primary"?"primary-100":"text-primary",variant:["body-default-medium","md:body-xs-medium"],className:"truncate"},e):e);var $e=({profileImage:e,name:r,location:t,memberSince:i,interests:a,badges:n})=>{let p=useId();return o__default.createElement("div",{className:"lg:basis-[635px] p-10 rounded-xl border border-stroke relative flex gap-6"},o__default.createElement(h,{variant:"outlined",color:"secondary",className:"absolute top-10 right-10 !px-2 py-2"},o__default.createElement(f,{color:"secondary",name:"edit-2"})),o__default.createElement("div",{className:"flex flex-row gap-6"},o__default.createElement("div",{className:"flex flex-col gap-4"},o__default.createElement("img",{src:e,alt:"profile for fiona chen"}),o__default.createElement(h,null,"Preview Profile"),o__default.createElement("div",{className:"flex flex-col gap-1"},o__default.createElement("div",{className:"flex flex-row justify-between"},o__default.createElement(s,{as:"label",htmlFor:p,variant:"body-default-semibold",color:"text-secondary"},"Private Mode"),o__default.createElement(P,{id:p})),o__default.createElement("div",{className:"flex flex-row gap-1"},o__default.createElement(s,{variant:"body-xs",color:"text-secondary"},"What is this?"),o__default.createElement(C,{content:"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode."},o__default.createElement(f,{name:"message-question",color:"secondary",size:16}))))),o__default.createElement("div",{className:"flex flex-col gap-2"},o__default.createElement(s,{as:"h1",variant:["heading-lg","md:heading-md"]},r),o__default.createElement("div",{className:"flex gap-2 items-center"},o__default.createElement(f,{name:"location",size:"md:16"}),o__default.createElement(s,{variant:["body-lg","md:body-default"],color:"text-secondary"},t)),o__default.createElement("div",{className:"flex gap-2 items-center"},o__default.createElement(f,{name:"profile",size:"md:16"}),o__default.createElement(s,{variant:["body-lg","md:body-default"],color:"text-secondary"},"Member Since"," ",o__default.createElement(s,{as:"span",variant:["body-lg","md:body-default"]},i))),a&&o__default.createElement("div",{className:"flex flex-col gap-2 pt-6"},o__default.createElement(s,{variant:"heading-xs"},"Interests"),o__default.createElement("div",{className:"flex flex-wrap gap-2"},a.map((m,d)=>o__default.createElement(w,{key:d},m)))),n&&o__default.createElement("div",{className:"flex gap-2 flex-wrap pt-6"},n.map((m,d)=>o__default.createElement(L,{key:d,...m}))))))};if (exports.default) module.exports = exports.default;export{$e as ProfileCard};//# sourceMappingURL=ProfileCard.js.map
|
|
14
|
+
//# sourceMappingURL=ProfileCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx","../../src/components/Button.tsx","../../src/utils/tailwind.ts","../../src/components/Tooltip.tsx","../../src/components/Switch.tsx","../../src/components/Tag.tsx","../../src/components/ProfileCard.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","React","name","color","title","className","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Badge","x","iconName","focusRingStyles","filled","outlined","Button","u","isLoading","disabled","Tooltip","content","side","align","delayDuration","g","Switch","y","label","description","Tag","padded","ProfileCard","profileImage","location","memberSince","interests","badges","randomId","useId","interest","idx","badge"],"mappings":"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","file":"ProfileCard.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant = \"pink\", iconName, children, ...props }, ref) => {\n const variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\"\n };\n\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded-lg px-2 py-1\",\n \"text-sm font-medium\",\n variants[variant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-medium\">{children}</Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst filled = {\n black: \"bg-text-primary text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nconst outlined = {\n black: \"border border-text-primary text-text-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={`\n px-7\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n ${focusRingStyles}\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate\n ${variant === \"filled\" ? filled[color] : outlined[color]}\n ${className}\n `}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text variant=\"body-default-bold\" color=\"inherit\">\n {children}\n </Text>\n ) : (\n children\n )}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"../utils\";\n\nexport interface TooltipProps {\n content: React.ReactNode;\n children: React.ReactNode;\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n className?: string;\n delayDuration?: number;\n}\n\nexport const Tooltip = ({\n content,\n children,\n side = \"bottom\",\n align = \"center\",\n className,\n delayDuration = 200\n}: TooltipProps) => (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root>\n <TooltipPrimitive.Trigger asChild>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n <span tabIndex={0}>{children}</span>\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n \"z-50 overflow-hidden rounded-lg\",\n \"bg-text-primary px-3 py-1.5\",\n \"text-xs text-white\",\n \"animate-in fade-in-0 zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n \"data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=top]:slide-in-from-bottom-2\",\n \"select-none\",\n \"max-w-60\",\n className\n )}\n >\n {content}\n <TooltipPrimitive.Arrow\n className=\"fill-text-primary\"\n width={10}\n height={5}\n />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n);\n","import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n typeof SwitchPrimitive.Root\n> & {\n label?: string;\n description?: string;\n};\n\nexport const Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n <div className=\"flex items-center gap-2\">\n <SwitchPrimitive.Root\n className={cn(\n \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n \"items-center rounded-full border-2 border-transparent\",\n \"transition-colors focus-visible:outline-none\",\n focusRingStyles,\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n className\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n \"pointer-events-none block h-5 w-5\",\n \"rounded-full bg-white shadow-lg ring-0\",\n \"transition-transform\",\n \"data-[state=checked]:translate-x-5\",\n \"data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitive.Root>\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <label\n className=\"text-sm font-medium text-text-primary\"\n htmlFor={props.id}\n >\n {label}\n </label>\n )}\n {description && (\n <span className=\"text-xs text-text-secondary\">{description}</span>\n )}\n </div>\n )}\n </div>\n));\n\nSwitch.displayName = \"Switch\";\n","import React, { HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\n\nexport type TagProps = {\n children: React.ReactNode;\n padded?: boolean;\n color?: \"primary\" | \"text\";\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const Tag = ({\n children,\n padded,\n color = \"primary\",\n ...props\n}: TagProps) => (\n <div\n className={`rounded bg-secondary-400 ${padded ? \"px-3\" : \"px-2\"} py-1.5 h-min`}\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n color={color === \"primary\" ? \"primary-100\" : \"text-primary\"}\n variant={[\"body-default-medium\", \"md:body-xs-medium\"]}\n className=\"truncate\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n </div>\n);\n","import React, { useId } from \"react\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Tooltip } from \"./Tooltip\";\nimport { Switch } from \"./Switch\";\nimport { Tag } from \"./Tag\";\n\nexport type ProfileCardProps = {\n profileImage: string;\n name: string;\n location: string;\n memberSince?: string;\n interests?: string[];\n badges?: BadgeProps[];\n};\n\nexport const ProfileCard = ({\n profileImage,\n name,\n location,\n memberSince,\n interests,\n badges\n}: ProfileCardProps) => {\n const randomId = useId();\n return (\n <div className=\"lg:basis-[635px] p-10 rounded-xl border border-stroke relative flex gap-6\">\n <Button\n variant=\"outlined\"\n color=\"secondary\"\n className=\"absolute top-10 right-10 !px-2 py-2\"\n >\n <Icon color=\"secondary\" name=\"edit-2\" />\n </Button>\n <div className=\"flex flex-row gap-6\">\n <div className=\"flex flex-col gap-4\">\n <img src={profileImage} alt=\"profile for fiona chen\" />\n <Button>Preview Profile</Button>\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex flex-row justify-between\">\n <Text\n as=\"label\"\n htmlFor={randomId}\n variant=\"body-default-semibold\"\n color=\"text-secondary\"\n >\n Private Mode\n </Text>\n <Switch id={randomId} />\n </div>\n <div className=\"flex flex-row gap-1\">\n <Text variant=\"body-xs\" color=\"text-secondary\">\n What is this?\n </Text>\n <Tooltip content=\"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode.\">\n <Icon name=\"message-question\" color=\"secondary\" size={16} />\n </Tooltip>\n </div>\n </div>\n </div>\n <div className=\"flex flex-col gap-2\">\n <Text as=\"h1\" variant={[\"heading-lg\", \"md:heading-md\"]}>\n {name}\n </Text>\n <div className=\"flex gap-2 items-center\">\n <Icon name=\"location\" size={\"md:16\"} />\n <Text\n variant={[\"body-lg\", \"md:body-default\"]}\n color=\"text-secondary\"\n >\n {location}\n </Text>\n </div>\n <div className=\"flex gap-2 items-center\">\n <Icon name=\"profile\" size={\"md:16\"} />\n <Text\n variant={[\"body-lg\", \"md:body-default\"]}\n color=\"text-secondary\"\n >\n Member Since{\" \"}\n <Text as=\"span\" variant={[\"body-lg\", \"md:body-default\"]}>\n {memberSince}\n </Text>\n </Text>\n </div>\n {interests && (\n <div className=\"flex flex-col gap-2 pt-6\">\n <Text variant=\"heading-xs\">Interests</Text>\n <div className=\"flex flex-wrap gap-2\">\n {interests.map((interest, idx) => (\n <Tag key={idx}>{interest}</Tag>\n ))}\n </div>\n </div>\n )}\n {badges && (\n <div className=\"flex gap-2 flex-wrap pt-6\">\n {badges.map((badge, idx) => (\n <Badge key={idx} {...badge} />\n ))}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var s=require('react'),icons=require('@deckai/icons'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);var g="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var u=({children:e,type:t="button",className:r,...o})=>s__default.default.createElement("button",{type:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${g} ${r}`,...o},e);function h(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},C={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},$=e=>{if(!e)return {width:"24px",height:"24px"};let t=Array.isArray(e)?e:[e],r=typeof t[0]=="number"?t[0]:24,o={width:`${r}px`,height:`${r}px`},a=t.filter(n=>typeof n=="string"&&n.includes(":")).reduce((n,p)=>{let[l,i]=p.split(":");return n[C[l]]={width:`${i}px`,height:`${i}px`},n},{});return Object.keys(a).length>0&&(o["@media"]=a),o},m=s__default.default.forwardRef(({name:e,size:t=24,color:r="primary",title:o,className:a,style:n={},...p},l)=>{let i=icons.IconMap[e],y=$(t);return s__default.default.createElement("div",{className:h("flex justify-center items-center",a),style:{...y,"--icon-stroke":f[r],...n}},s__default.default.createElement(i,{ref:l,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:f[r],...p}))});m.displayName="Icon";var A={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},S=e=>{let[t,r]=e.split("-");return t==="heading"?A[r]||"p":t==="label"?"label":"p"},R={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},P=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[o,a]=r.split(":");return `${o}:text-${a}`}return Array.isArray(e)?`lg:text-${r}`:`text-${r}`}).join(" "):"text-body-default",c=s__default.default.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:o,children:a,weight:n,...p},l)=>{let i=P(e),y=t&&t==="inherit"?"inherit":t?`text-${t}`:"",b=s__default.default.useMemo(()=>{let x=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return S(x)},[e]);return s__default.default.createElement(r||b,{ref:l,className:`font-sans antialiased ${i} ${y} ${n?`!${R[n]}`:""} ${o??""}`,...p},a)});c.displayName="Text";var Z=({icon:e,followers:t,engagement:r,...o})=>s__default.default.createElement(u,{...o},s__default.default.createElement("div",{className:"flex gap-4 px-6 py-4 border border-secondary rounded-lg"},s__default.default.createElement(m,{name:e,size:40}),s__default.default.createElement("div",{className:"flex items-center"},s__default.default.createElement(m,{name:"profile",size:20}),s__default.default.createElement(c,{variant:["body-default-medium","md:body-xs-medium"]},t)),s__default.default.createElement("div",{className:"flex items-center"},s__default.default.createElement(m,{name:"arrow-swap-horizontal",className:"rotate-90",size:20}),s__default.default.createElement(c,{variant:["body-default-medium","md:body-xs-medium"]},r))));if (exports.default) module.exports = exports.default;exports.SocialCard=Z;//# sourceMappingURL=SocialCard.cjs.map
|
|
2
|
+
//# sourceMappingURL=SocialCard.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","name","color","title","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.cjs","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n icon: IconName;\n followers: string;\n engagement: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n icon,\n followers,\n engagement,\n ...pressableProps\n}: SocialCardProps) => (\n <Pressable {...pressableProps}>\n <div className=\"flex gap-4 px-6 py-4 border border-secondary rounded-lg\">\n <Icon name={icon} size={40} />\n <div className=\"flex items-center\">\n <Icon name=\"profile\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {followers}\n </Text>\n </div>\n <div className=\"flex items-center\">\n <Icon name=\"arrow-swap-horizontal\" className=\"rotate-90\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {engagement}\n </Text>\n </div>\n </div>\n </Pressable>\n);\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { PressableProps } from './Pressable.cjs';
|
|
3
|
+
import { IconName } from '@deckai/icons';
|
|
4
|
+
|
|
5
|
+
type SocialCardProps = {
|
|
6
|
+
icon: IconName;
|
|
7
|
+
followers: string;
|
|
8
|
+
engagement: string;
|
|
9
|
+
} & PressableProps;
|
|
10
|
+
declare const SocialCard: ({ icon, followers, engagement, ...pressableProps }: SocialCardProps) => React__default.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { SocialCard, type SocialCardProps };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { PressableProps } from './Pressable.js';
|
|
3
|
+
import { IconName } from '@deckai/icons';
|
|
4
|
+
|
|
5
|
+
type SocialCardProps = {
|
|
6
|
+
icon: IconName;
|
|
7
|
+
followers: string;
|
|
8
|
+
engagement: string;
|
|
9
|
+
} & PressableProps;
|
|
10
|
+
declare const SocialCard: ({ icon, followers, engagement, ...pressableProps }: SocialCardProps) => React__default.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { SocialCard, type SocialCardProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import s from'react';import {IconMap}from'@deckai/icons';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var g="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var u=({children:e,type:t="button",className:r,...o})=>s.createElement("button",{type:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${g} ${r}`,...o},e);function h(...e){return twMerge(clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},C={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},$=e=>{if(!e)return {width:"24px",height:"24px"};let t=Array.isArray(e)?e:[e],r=typeof t[0]=="number"?t[0]:24,o={width:`${r}px`,height:`${r}px`},a=t.filter(n=>typeof n=="string"&&n.includes(":")).reduce((n,p)=>{let[l,i]=p.split(":");return n[C[l]]={width:`${i}px`,height:`${i}px`},n},{});return Object.keys(a).length>0&&(o["@media"]=a),o},m=s.forwardRef(({name:e,size:t=24,color:r="primary",title:o,className:a,style:n={},...p},l)=>{let i=IconMap[e],y=$(t);return s.createElement("div",{className:h("flex justify-center items-center",a),style:{...y,"--icon-stroke":f[r],...n}},s.createElement(i,{ref:l,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:f[r],...p}))});m.displayName="Icon";var A={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},S=e=>{let[t,r]=e.split("-");return t==="heading"?A[r]||"p":t==="label"?"label":"p"},R={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},P=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[o,a]=r.split(":");return `${o}:text-${a}`}return Array.isArray(e)?`lg:text-${r}`:`text-${r}`}).join(" "):"text-body-default",c=s.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:o,children:a,weight:n,...p},l)=>{let i=P(e),y=t&&t==="inherit"?"inherit":t?`text-${t}`:"",b=s.useMemo(()=>{let x=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return S(x)},[e]);return s.createElement(r||b,{ref:l,className:`font-sans antialiased ${i} ${y} ${n?`!${R[n]}`:""} ${o??""}`,...p},a)});c.displayName="Text";var Z=({icon:e,followers:t,engagement:r,...o})=>s.createElement(u,{...o},s.createElement("div",{className:"flex gap-4 px-6 py-4 border border-secondary rounded-lg"},s.createElement(m,{name:e,size:40}),s.createElement("div",{className:"flex items-center"},s.createElement(m,{name:"profile",size:20}),s.createElement(c,{variant:["body-default-medium","md:body-xs-medium"]},t)),s.createElement("div",{className:"flex items-center"},s.createElement(m,{name:"arrow-swap-horizontal",className:"rotate-90",size:20}),s.createElement(c,{variant:["body-default-medium","md:body-xs-medium"]},r))));if (exports.default) module.exports = exports.default;export{Z as SocialCard};//# sourceMappingURL=SocialCard.js.map
|
|
2
|
+
//# sourceMappingURL=SocialCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","name","color","title","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.js","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n icon: IconName;\n followers: string;\n engagement: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n icon,\n followers,\n engagement,\n ...pressableProps\n}: SocialCardProps) => (\n <Pressable {...pressableProps}>\n <div className=\"flex gap-4 px-6 py-4 border border-secondary rounded-lg\">\n <Icon name={icon} size={40} />\n <div className=\"flex items-center\">\n <Icon name=\"profile\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {followers}\n </Text>\n </div>\n <div className=\"flex items-center\">\n <Icon name=\"arrow-swap-horizontal\" className=\"rotate-90\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {engagement}\n </Text>\n </div>\n </div>\n </Pressable>\n);\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var t=require('react'),e=require('@radix-ui/react-switch'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var t__namespace=/*#__PURE__*/_interopNamespace(t);var e__namespace=/*#__PURE__*/_interopNamespace(e);function i(...s){return tailwindMerge.twMerge(clsx.clsx(s))}var n="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var p=t__namespace.forwardRef(({className:s,label:o,description:r,...a},c)=>t__namespace.createElement("div",{className:"flex items-center gap-2"},t__namespace.createElement(e__namespace.Root,{className:i("peer inline-flex h-6 w-11 shrink-0 cursor-pointer","items-center rounded-full border-2 border-transparent","transition-colors focus-visible:outline-none",n,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",s),...a,ref:c},t__namespace.createElement(e__namespace.Thumb,{className:i("pointer-events-none block h-5 w-5","rounded-full bg-white shadow-lg ring-0","transition-transform","data-[state=checked]:translate-x-5","data-[state=unchecked]:translate-x-0")})),(o||r)&&t__namespace.createElement("div",{className:"flex flex-col"},o&&t__namespace.createElement("label",{className:"text-sm font-medium text-text-primary",htmlFor:a.id},o),r&&t__namespace.createElement("span",{className:"text-xs text-text-secondary"},r))));p.displayName="Switch";if (exports.default) module.exports = exports.default;exports.Switch=p;//# sourceMappingURL=Switch.cjs.map
|
|
2
|
+
//# sourceMappingURL=Switch.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Switch.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","Switch","t","className","label","description","props","ref","e"],"mappings":"8hBAGO,SAASA,KAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAQC,CAAAA,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,qGAAA,KCxDWC,CAAe,CAAAC,YAAA,CAAA,UAAA,CAG1B,CAAC,CAAE,SAAA,CAAAC,CAAW,CAAA,KAAA,CAAAC,CAAO,CAAA,WAAA,CAAAC,EAAa,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC9CL,YAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,yBACb,CAAA,CAAAA,YAAA,CAAA,aAAA,CAAiBM,YAAhB,CAAA,IAAA,CAAA,CACC,SAAWZ,CAAAA,CAAAA,CACT,oDACA,uDACA,CAAA,8CAAA,CACAI,EACA,iDACA,CAAA,2EAAA,CACAG,CACF,CACC,CAAA,GAAGG,CACJ,CAAA,GAAA,CAAKC,CAEL,CAAA,CAAAL,YAAA,CAAA,aAAA,CAAiBM,mBAAhB,CACC,SAAA,CAAWZ,CACT,CAAA,mCAAA,CACA,wCACA,CAAA,sBAAA,CACA,qCACA,sCACF,CAAA,CACF,CACF,CAAA,CAAA,CACEQ,CAASC,EAAAA,CAAAA,GACTH,2BAAC,KAAI,CAAA,CAAA,SAAA,CAAU,iBACZE,CACC,EAAAF,YAAA,CAAA,aAAA,CAAC,SACC,SAAU,CAAA,uCAAA,CACV,OAASI,CAAAA,CAAAA,CAAM,EAEdF,CAAAA,CAAAA,CACH,EAEDC,CACC,EAAAH,YAAA,CAAA,aAAA,CAAC,MAAK,CAAA,CAAA,SAAA,CAAU,6BAA+BG,CAAAA,CAAAA,CAAY,CAE/D,CAEJ,CACD,EAEDJ,CAAAA,CAAO,WAAc,CAAA,QAAA","file":"Switch.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n typeof SwitchPrimitive.Root\n> & {\n label?: string;\n description?: string;\n};\n\nexport const Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n <div className=\"flex items-center gap-2\">\n <SwitchPrimitive.Root\n className={cn(\n \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n \"items-center rounded-full border-2 border-transparent\",\n \"transition-colors focus-visible:outline-none\",\n focusRingStyles,\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n className\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n \"pointer-events-none block h-5 w-5\",\n \"rounded-full bg-white shadow-lg ring-0\",\n \"transition-transform\",\n \"data-[state=checked]:translate-x-5\",\n \"data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitive.Root>\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <label\n className=\"text-sm font-medium text-text-primary\"\n htmlFor={props.id}\n >\n {label}\n </label>\n )}\n {description && (\n <span className=\"text-xs text-text-secondary\">{description}</span>\n )}\n </div>\n )}\n </div>\n));\n\nSwitch.displayName = \"Switch\";\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
3
|
+
|
|
4
|
+
type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
|
|
5
|
+
label?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
};
|
|
8
|
+
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
9
|
+
label?: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
|
|
13
|
+
export { Switch, type SwitchProps };
|