@ably/ui 15.1.9-dev.2e749917 → 15.1.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.
Files changed (35) hide show
  1. package/core/Accordion.js +1 -1
  2. package/core/Icon/computed-icons.js +1 -1
  3. package/core/Icon.js +1 -1
  4. package/core/TabMenu.js +1 -1
  5. package/core/icons/icon-product-platform.svg +5 -0
  6. package/core/sprites.svg +1 -1
  7. package/core/styles/buttons.css +4 -4
  8. package/index.d.ts +10 -2
  9. package/package.json +1 -1
  10. package/core/.DS_Store +0 -0
  11. package/core/Accordion/.DS_Store +0 -0
  12. package/core/Code/.DS_Store +0 -0
  13. package/core/ContactFooter/.DS_Store +0 -0
  14. package/core/CookieMessage/.DS_Store +0 -0
  15. package/core/CustomerLogos/.DS_Store +0 -0
  16. package/core/DropdownMenu/.DS_Store +0 -0
  17. package/core/FeaturedLink/.DS_Store +0 -0
  18. package/core/Flash/.DS_Store +0 -0
  19. package/core/Footer/.DS_Store +0 -0
  20. package/core/Icon/.DS_Store +0 -0
  21. package/core/Loader/.DS_Store +0 -0
  22. package/core/Logo/.DS_Store +0 -0
  23. package/core/Meganav/.DS_Store +0 -0
  24. package/core/MeganavBlogPostsList/.DS_Store +0 -0
  25. package/core/MeganavControl/.DS_Store +0 -0
  26. package/core/MeganavControlMobileDropdown/.DS_Store +0 -0
  27. package/core/MeganavControlMobilePanelClose/.DS_Store +0 -0
  28. package/core/MeganavControlMobilePanelOpen/.DS_Store +0 -0
  29. package/core/MeganavSearchAutocomplete/.DS_Store +0 -0
  30. package/core/MeganavSearchSuggestions/.DS_Store +0 -0
  31. package/core/Notice/.DS_Store +0 -0
  32. package/core/Slider/.DS_Store +0 -0
  33. package/core/Table/.DS_Store +0 -0
  34. package/core/Tooltip/.DS_Store +0 -0
  35. package/core/icons/.DS_Store +0 -0
package/core/Accordion.js CHANGED
@@ -1 +1 @@
1
- import React,{useCallback,useEffect,useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const rowKey=index=>`accordion-item-${index}`;const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const indexRowKey=rowKey(index);const isOpen=openRowValues.includes(indexRowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:indexRowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[JSON.stringify(options?.defaultOpenIndexes),options?.fullyOpen,data.length]);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const[openRowValues,setOpenRowValues]=useState(()=>openIndexes);const newOpenRowValues=useCallback((values,key)=>{if(options?.autoClose){return[key]}return values.includes(key)?values.filter(value=>value!==key):[...values,key].sort()},[options?.autoClose]);const innerAccordion=data.map((item,index)=>/*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{setOpenRowValues(prevValues=>newOpenRowValues(prevValues,rowKey(index)));item.onClick?.(index)},openRowValues:openRowValues},item.content));return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;
1
+ import React,{useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>/*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;
package/core/Icon/computed-icons.js CHANGED
@@ -1 +1 @@
1
- export const computedIcons={"display":["icon-display-48hrs","icon-display-ably-channels","icon-display-about-ably-col","icon-display-api-keys","icon-display-api","icon-display-architectural-guidance","icon-display-asset-tracking-col","icon-display-authentication","icon-display-avatar-stack","icon-display-browser","icon-display-calendar","icon-display-call-mobile","icon-display-careers-col","icon-display-case-studies-col","icon-display-chat-col","icon-display-chat-mono","icon-display-chat-stack-col","icon-display-chat-stack","icon-display-cloud-servers","icon-display-compare-tech-col","icon-display-connection-state-recovery","icon-display-consumer-groups","icon-display-custom-cname","icon-display-custom","icon-display-customers-col","icon-display-data-broadcast-col","icon-display-data-broadcast-mono","icon-display-data-synchronization-col","icon-display-dedicated-cluster","icon-display-deltas","icon-display-docs-col","icon-display-documentation","icon-display-dynamic-channel-groups","icon-display-edge-network","icon-display-elasticity","icon-display-equalisers-mono","icon-display-events-col","icon-display-exactly-once-delivery","icon-display-examples-col","icon-display-fan-out","icon-display-firehose","icon-display-gdpr","icon-display-general-comms","icon-display-granular-permissions","icon-display-hipaa-mono","icon-display-hipaa","icon-display-history","icon-display-integrations-col","icon-display-integrations","icon-display-it-support-access","icon-display-it-support-helpdesk","icon-display-kafka-at-the-edge-col","icon-display-laptop","icon-display-lightbulb-col","icon-display-live-chat","icon-display-live-updates-results-metrics-col","icon-display-map-pin","icon-display-message-batching","icon-display-message-persistence","icon-display-message-queues","icon-display-message","icon-display-multi-user-spaces-col","icon-display-observe-analytics","icon-display-padlock-closed","icon-display-platform","icon-display-play","icon-display-premium-support","icon-display-privacy-shield-framework","icon-display-private-link","icon-display-push-notifications-col","icon-display-push-notifications-mono","icon-display-push-notifications","icon-display-quickstart-guides-col","icon-display-resources-col","icon-display-rewind","icon-display-sdks-col","icon-display-send-received-messages","icon-display-servers","icon-display-shopping-cart","icon-display-sla","icon-display-soc2-type2-mono","icon-display-soc2-type2","icon-display-subscription-filters","icon-display-support-chat-mono","icon-display-system-metadata","icon-display-tech-account-comms","icon-display-tutorials-demos-col","icon-display-virtual-events-col","icon-display-virtual-events"],"gui":["icon-gui-ably-badge","icon-gui-account","icon-gui-app","icon-gui-arrow-bidirectional-horizontal","icon-gui-arrow-bidirectional-vertical","icon-gui-arrow-down-circled","icon-gui-arrow-down","icon-gui-arrow-left","icon-gui-arrow-right","icon-gui-arrow-up","icon-gui-burger-menu","icon-gui-check-circled-fill-black","icon-gui-check-circled-fill","icon-gui-check-circled","icon-gui-check-lotus-circled","icon-gui-checklist-checked","icon-gui-chevron-down","icon-gui-chevron-up","icon-gui-clock","icon-gui-close","icon-gui-copy","icon-gui-cross-circled-fill","icon-gui-cross-circled","icon-gui-dash-circled","icon-gui-disclosure-arrow","icon-gui-document-generic","icon-gui-enlarge","icon-gui-external-link-bolder","icon-gui-external-link","icon-gui-filter-flow-step-1","icon-gui-filter-flow-step-2","icon-gui-filter-flow-step-3","icon-gui-hand","icon-gui-history","icon-gui-info","icon-gui-link-arrow","icon-gui-link","icon-gui-live-chat","icon-gui-minus","icon-gui-organization","icon-gui-partial","icon-gui-plus","icon-gui-quote-marks-solid","icon-gui-refresh","icon-gui-resources","icon-gui-search","icon-gui-tick","icon-gui-warning-fill","icon-gui-warning"],"other":["icon-other-quote"],"product":["icon-product-asset-tracking-mono","icon-product-asset-tracking","icon-product-chat-mono","icon-product-chat","icon-product-liveobjects","icon-product-livesync-mono","icon-product-livesync","icon-product-platform-mono","icon-product-pubsub-mono","icon-product-pubsub","icon-product-spaces-mono","icon-product-spaces"],"social":["icon-social-discord","icon-social-facebook","icon-social-github","icon-social-glassdoor","icon-social-google","icon-social-linkedin","icon-social-stackoverflow","icon-social-twitter","icon-social-x","icon-social-youtube"],"tech":["icon-tech-ably-api-streamer","icon-tech-ably-firehose","icon-tech-ably-native","icon-tech-ably","icon-tech-activemq","icon-tech-activitypub","icon-tech-aerospike","icon-tech-akka","icon-tech-amazon-ec2","icon-tech-amazon-event-bridge","icon-tech-amqp091","icon-tech-amqp10","icon-tech-android-full","icon-tech-android-head","icon-tech-angular","icon-tech-anycable","icon-tech-apache-cassandra","icon-tech-apache-cordova","icon-tech-apache-kafka","icon-tech-apache-spark","icon-tech-apachepulsar","icon-tech-apachestorm","icon-tech-apns","icon-tech-assemblyai","icon-tech-atmosphere","icon-tech-aws-app-sync","icon-tech-aws-aurora","icon-tech-aws-gateway-websockets","icon-tech-aws-sns","icon-tech-aws-sqs","icon-tech-aws","icon-tech-awsiot","icon-tech-awskinesis","icon-tech-awslambda","icon-tech-awssqs","icon-tech-azure-api","icon-tech-azure-archive-api","icon-tech-azure-bus","icon-tech-azure-cosmos","icon-tech-azure-event-hub","icon-tech-azure-functions","icon-tech-azure-search","icon-tech-azure-static-web-app","icon-tech-azure-static-web-apps","icon-tech-azure-storage","icon-tech-azure-web-pubsub","icon-tech-azurefunctions","icon-tech-azureservicebus","icon-tech-azuresignalR","icon-tech-bayeux","icon-tech-c++","icon-tech-centrifugo","icon-tech-client-side-frameworks","icon-tech-clojure","icon-tech-cloudflare-durable-objects","icon-tech-cloudflareworkers","icon-tech-cocoa","icon-tech-confluent","icon-tech-cord","icon-tech-csharp","icon-tech-curl","icon-tech-customwebhooks","icon-tech-datadog","icon-tech-design-patterns","icon-tech-devplatforms","icon-tech-diffusion-data","icon-tech-django","icon-tech-engineio","icon-tech-event-driven-servers","icon-tech-fanout-io","icon-tech-fast-api","icon-tech-fauna","icon-tech-featherjs","icon-tech-firebase-cloud-messaging","icon-tech-firebase","icon-tech-flutter","icon-tech-gcloudbigquery","icon-tech-gclouddataflow","icon-tech-gcloudfunctions","icon-tech-gcloudpubsub","icon-tech-go","icon-tech-grpc","icon-tech-hivemq","icon-tech-http2","icon-tech-http3","icon-tech-httprest","icon-tech-idempotency","icon-tech-ifttt","icon-tech-integrations","icon-tech-ios-generic","icon-tech-ios","icon-tech-ipados","icon-tech-ipfs","icon-tech-ironmq","icon-tech-java","icon-tech-javascript","icon-tech-jms","icon-tech-json-web-tokens","icon-tech-kaazing","icon-tech-kotlin","icon-tech-ksql-db","icon-tech-kubernetes","icon-tech-laravel-broadcast","icon-tech-laravel-echo","icon-tech-lightstreamer","icon-tech-liveblocks","icon-tech-longpolling","icon-tech-macos","icon-tech-matrix","icon-tech-meteor","icon-tech-mongo-db","icon-tech-mono","icon-tech-mqtt","icon-tech-mysql","icon-tech-native-script","icon-tech-net","icon-tech-netlify","icon-tech-nextjs","icon-tech-nkn","icon-tech-nodejs","icon-tech-objectivec","icon-tech-parse-server","icon-tech-php","icon-tech-planetscale","icon-tech-postgres","icon-tech-prisma","icon-tech-programminglanguages","icon-tech-protcol-adaptors","icon-tech-protocols","icon-tech-pub-sub","icon-tech-pubnub","icon-tech-push-technology","icon-tech-pusher","icon-tech-python","icon-tech-quic","icon-tech-rabbitMQ","icon-tech-railsactioncable","icon-tech-react-app","icon-tech-react","icon-tech-reactnative","icon-tech-redis","icon-tech-redpanda","icon-tech-replicache","icon-tech-rethinkdb","icon-tech-rocketmq","icon-tech-ruby","icon-tech-scala","icon-tech-scaledrone","icon-tech-serversentevents","icon-tech-serversideframeworks","icon-tech-signalR","icon-tech-snowflake","icon-tech-socketio","icon-tech-sockjs","icon-tech-solace","icon-tech-spring","icon-tech-stomp","icon-tech-streamdata-io","icon-tech-streamr","icon-tech-swift","icon-tech-symfony-mercure","icon-tech-symfony","icon-tech-tcp-ip","icon-tech-tenefit","icon-tech-terraform","icon-tech-tvos","icon-tech-twilio","icon-tech-typescript","icon-tech-udp-protocol","icon-tech-unity","icon-tech-vercel","icon-tech-vscode","icon-tech-vuejs","icon-tech-wamp","icon-tech-watchos","icon-tech-web-push","icon-tech-web","icon-tech-webhooks","icon-tech-webrtc","icon-tech-websockets","icon-tech-websub","icon-tech-xamarin","icon-tech-xhr-streaming","icon-tech-xmpp","icon-tech-zapier","icon-tech-zeromq"]};
1
+ export const computedIcons={"display":["icon-display-48hrs","icon-display-ably-channels","icon-display-about-ably-col","icon-display-api-keys","icon-display-api","icon-display-architectural-guidance","icon-display-asset-tracking-col","icon-display-authentication","icon-display-avatar-stack","icon-display-browser","icon-display-calendar","icon-display-call-mobile","icon-display-careers-col","icon-display-case-studies-col","icon-display-chat-col","icon-display-chat-mono","icon-display-chat-stack-col","icon-display-chat-stack","icon-display-cloud-servers","icon-display-compare-tech-col","icon-display-connection-state-recovery","icon-display-consumer-groups","icon-display-custom-cname","icon-display-custom","icon-display-customers-col","icon-display-data-broadcast-col","icon-display-data-broadcast-mono","icon-display-data-synchronization-col","icon-display-dedicated-cluster","icon-display-deltas","icon-display-docs-col","icon-display-documentation","icon-display-dynamic-channel-groups","icon-display-edge-network","icon-display-elasticity","icon-display-equalisers-mono","icon-display-events-col","icon-display-exactly-once-delivery","icon-display-examples-col","icon-display-fan-out","icon-display-firehose","icon-display-gdpr","icon-display-general-comms","icon-display-granular-permissions","icon-display-hipaa-mono","icon-display-hipaa","icon-display-history","icon-display-integrations-col","icon-display-integrations","icon-display-it-support-access","icon-display-it-support-helpdesk","icon-display-kafka-at-the-edge-col","icon-display-laptop","icon-display-lightbulb-col","icon-display-live-chat","icon-display-live-updates-results-metrics-col","icon-display-map-pin","icon-display-message-batching","icon-display-message-persistence","icon-display-message-queues","icon-display-message","icon-display-multi-user-spaces-col","icon-display-observe-analytics","icon-display-padlock-closed","icon-display-platform","icon-display-play","icon-display-premium-support","icon-display-privacy-shield-framework","icon-display-private-link","icon-display-push-notifications-col","icon-display-push-notifications-mono","icon-display-push-notifications","icon-display-quickstart-guides-col","icon-display-resources-col","icon-display-rewind","icon-display-sdks-col","icon-display-send-received-messages","icon-display-servers","icon-display-shopping-cart","icon-display-sla","icon-display-soc2-type2-mono","icon-display-soc2-type2","icon-display-subscription-filters","icon-display-support-chat-mono","icon-display-system-metadata","icon-display-tech-account-comms","icon-display-tutorials-demos-col","icon-display-virtual-events-col","icon-display-virtual-events"],"gui":["icon-gui-ably-badge","icon-gui-account","icon-gui-app","icon-gui-arrow-bidirectional-horizontal","icon-gui-arrow-bidirectional-vertical","icon-gui-arrow-down-circled","icon-gui-arrow-down","icon-gui-arrow-left","icon-gui-arrow-right","icon-gui-arrow-up","icon-gui-burger-menu","icon-gui-check-circled-fill-black","icon-gui-check-circled-fill","icon-gui-check-circled","icon-gui-check-lotus-circled","icon-gui-checklist-checked","icon-gui-chevron-down","icon-gui-chevron-up","icon-gui-clock","icon-gui-close","icon-gui-copy","icon-gui-cross-circled-fill","icon-gui-cross-circled","icon-gui-dash-circled","icon-gui-disclosure-arrow","icon-gui-document-generic","icon-gui-enlarge","icon-gui-external-link-bolder","icon-gui-external-link","icon-gui-filter-flow-step-1","icon-gui-filter-flow-step-2","icon-gui-filter-flow-step-3","icon-gui-hand","icon-gui-history","icon-gui-info","icon-gui-link-arrow","icon-gui-link","icon-gui-live-chat","icon-gui-minus","icon-gui-organization","icon-gui-partial","icon-gui-plus","icon-gui-quote-marks-solid","icon-gui-refresh","icon-gui-resources","icon-gui-search","icon-gui-tick","icon-gui-warning-fill","icon-gui-warning"],"other":["icon-other-quote"],"product":["icon-product-asset-tracking-mono","icon-product-asset-tracking","icon-product-chat-mono","icon-product-chat","icon-product-liveobjects","icon-product-livesync-mono","icon-product-livesync","icon-product-platform-mono","icon-product-platform","icon-product-pubsub-mono","icon-product-pubsub","icon-product-spaces-mono","icon-product-spaces"],"social":["icon-social-discord","icon-social-facebook","icon-social-github","icon-social-glassdoor","icon-social-google","icon-social-linkedin","icon-social-stackoverflow","icon-social-twitter","icon-social-x","icon-social-youtube"],"tech":["icon-tech-ably-api-streamer","icon-tech-ably-firehose","icon-tech-ably-native","icon-tech-ably","icon-tech-activemq","icon-tech-activitypub","icon-tech-aerospike","icon-tech-akka","icon-tech-amazon-ec2","icon-tech-amazon-event-bridge","icon-tech-amqp091","icon-tech-amqp10","icon-tech-android-full","icon-tech-android-head","icon-tech-angular","icon-tech-anycable","icon-tech-apache-cassandra","icon-tech-apache-cordova","icon-tech-apache-kafka","icon-tech-apache-spark","icon-tech-apachepulsar","icon-tech-apachestorm","icon-tech-apns","icon-tech-assemblyai","icon-tech-atmosphere","icon-tech-aws-app-sync","icon-tech-aws-aurora","icon-tech-aws-gateway-websockets","icon-tech-aws-sns","icon-tech-aws-sqs","icon-tech-aws","icon-tech-awsiot","icon-tech-awskinesis","icon-tech-awslambda","icon-tech-awssqs","icon-tech-azure-api","icon-tech-azure-archive-api","icon-tech-azure-bus","icon-tech-azure-cosmos","icon-tech-azure-event-hub","icon-tech-azure-functions","icon-tech-azure-search","icon-tech-azure-static-web-app","icon-tech-azure-static-web-apps","icon-tech-azure-storage","icon-tech-azure-web-pubsub","icon-tech-azurefunctions","icon-tech-azureservicebus","icon-tech-azuresignalR","icon-tech-bayeux","icon-tech-c++","icon-tech-centrifugo","icon-tech-client-side-frameworks","icon-tech-clojure","icon-tech-cloudflare-durable-objects","icon-tech-cloudflareworkers","icon-tech-cocoa","icon-tech-confluent","icon-tech-cord","icon-tech-csharp","icon-tech-curl","icon-tech-customwebhooks","icon-tech-datadog","icon-tech-design-patterns","icon-tech-devplatforms","icon-tech-diffusion-data","icon-tech-django","icon-tech-engineio","icon-tech-event-driven-servers","icon-tech-fanout-io","icon-tech-fast-api","icon-tech-fauna","icon-tech-featherjs","icon-tech-firebase-cloud-messaging","icon-tech-firebase","icon-tech-flutter","icon-tech-gcloudbigquery","icon-tech-gclouddataflow","icon-tech-gcloudfunctions","icon-tech-gcloudpubsub","icon-tech-go","icon-tech-grpc","icon-tech-hivemq","icon-tech-http2","icon-tech-http3","icon-tech-httprest","icon-tech-idempotency","icon-tech-ifttt","icon-tech-integrations","icon-tech-ios-generic","icon-tech-ios","icon-tech-ipados","icon-tech-ipfs","icon-tech-ironmq","icon-tech-java","icon-tech-javascript","icon-tech-jms","icon-tech-json-web-tokens","icon-tech-kaazing","icon-tech-kotlin","icon-tech-ksql-db","icon-tech-kubernetes","icon-tech-laravel-broadcast","icon-tech-laravel-echo","icon-tech-lightstreamer","icon-tech-liveblocks","icon-tech-longpolling","icon-tech-macos","icon-tech-matrix","icon-tech-meteor","icon-tech-mongo-db","icon-tech-mono","icon-tech-mqtt","icon-tech-mysql","icon-tech-native-script","icon-tech-net","icon-tech-netlify","icon-tech-nextjs","icon-tech-nkn","icon-tech-nodejs","icon-tech-objectivec","icon-tech-parse-server","icon-tech-php","icon-tech-planetscale","icon-tech-postgres","icon-tech-prisma","icon-tech-programminglanguages","icon-tech-protcol-adaptors","icon-tech-protocols","icon-tech-pub-sub","icon-tech-pubnub","icon-tech-push-technology","icon-tech-pusher","icon-tech-python","icon-tech-quic","icon-tech-rabbitMQ","icon-tech-railsactioncable","icon-tech-react-app","icon-tech-react","icon-tech-reactnative","icon-tech-redis","icon-tech-redpanda","icon-tech-replicache","icon-tech-rethinkdb","icon-tech-rocketmq","icon-tech-ruby","icon-tech-scala","icon-tech-scaledrone","icon-tech-serversentevents","icon-tech-serversideframeworks","icon-tech-signalR","icon-tech-snowflake","icon-tech-socketio","icon-tech-sockjs","icon-tech-solace","icon-tech-spring","icon-tech-stomp","icon-tech-streamdata-io","icon-tech-streamr","icon-tech-swift","icon-tech-symfony-mercure","icon-tech-symfony","icon-tech-tcp-ip","icon-tech-tenefit","icon-tech-terraform","icon-tech-tvos","icon-tech-twilio","icon-tech-typescript","icon-tech-udp-protocol","icon-tech-unity","icon-tech-vercel","icon-tech-vscode","icon-tech-vuejs","icon-tech-wamp","icon-tech-watchos","icon-tech-web-push","icon-tech-web","icon-tech-webhooks","icon-tech-webrtc","icon-tech-websockets","icon-tech-websub","icon-tech-xamarin","icon-tech-xhr-streaming","icon-tech-xmpp","icon-tech-zapier","icon-tech-zeromq"]};
package/core/Icon.js CHANGED
@@ -1 +1 @@
1
- import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return /*#__PURE__*/React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}))},[name,size,color,additionalCSS,JSON.stringify(additionalAttributes),lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return /*#__PURE__*/React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
1
+ import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return /*#__PURE__*/React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}))},[name,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return /*#__PURE__*/React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
package/core/TabMenu.js CHANGED
@@ -1 +1 @@
1
- import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,options})=>{const{defaultTabIndex=0,underline=true,animated=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return /*#__PURE__*/React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight})},/*#__PURE__*/React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>/*#__PURE__*/React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),/*#__PURE__*/React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>/*#__PURE__*/React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`},content)))};export default TabMenu;
1
+ import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return /*#__PURE__*/React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},/*#__PURE__*/React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>/*#__PURE__*/React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),/*#__PURE__*/React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>/*#__PURE__*/React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
package/core/icons/icon-product-platform.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M9.70314 1.3249C9.7943 1.27574 9.89624 1.25 9.99981 1.25C10.1034 1.25 10.2053 1.27574 10.2965 1.3249L18.4215 5.6999C18.5207 5.75345 18.6036 5.83285 18.6613 5.92967C18.7191 6.0265 18.7496 6.13715 18.7496 6.2499C18.7496 6.36265 18.7191 6.4733 18.6613 6.57012C18.6036 6.66695 18.5207 6.74634 18.4215 6.7999L10.2965 11.1749C10.2053 11.2241 10.1034 11.2498 9.99981 11.2498C9.89624 11.2498 9.7943 11.2241 9.70314 11.1749L1.57814 6.7999C1.47892 6.74634 1.39604 6.66695 1.33827 6.57012C1.2805 6.4733 1.25 6.36265 1.25 6.2499C1.25 6.13715 1.2805 6.0265 1.33827 5.92967C1.39604 5.83285 1.47892 5.75345 1.57814 5.6999L9.70314 1.3249Z" fill="currentColor"/>
3
+ <path d="M2.72078 8.83506L9.11078 12.2759C9.38404 12.4231 9.68957 12.5001 9.99995 12.5001C10.3103 12.5001 10.6159 12.4231 10.8891 12.2759L17.2791 8.83423L18.4208 9.45006C18.52 9.50362 18.6029 9.58301 18.6607 9.67984C18.7184 9.77666 18.7489 9.88731 18.7489 10.0001C18.7489 10.1128 18.7184 10.2235 18.6607 10.3203C18.6029 10.4171 18.52 10.4965 18.4208 10.5501L10.2958 14.9251C10.2048 14.9739 10.1032 14.9995 9.99995 14.9995C9.8967 14.9995 9.79507 14.9739 9.70412 14.9251L1.57912 10.5501C1.4799 10.4965 1.39701 10.4171 1.33924 10.3203C1.28148 10.2235 1.25098 10.1128 1.25098 10.0001C1.25098 9.88731 1.28148 9.77666 1.33924 9.67984C1.39701 9.58301 1.4799 9.50362 1.57912 9.45006L2.72078 8.83506Z" fill="currentColor"/>
4
+ <path d="M9.11078 16.0259L2.72078 12.5842L1.57912 13.2001C1.4799 13.2536 1.39701 13.333 1.33924 13.4298C1.28148 13.5267 1.25098 13.6373 1.25098 13.7501C1.25098 13.8628 1.28148 13.9735 1.33924 14.0703C1.39701 14.1671 1.4799 14.2465 1.57912 14.3001L9.70412 18.6751C9.88828 18.7751 10.1116 18.7751 10.2958 18.6751L18.4208 14.3001C18.52 14.2465 18.6029 14.1671 18.6607 14.0703C18.7184 13.9735 18.7489 13.8628 18.7489 13.7501C18.7489 13.6373 18.7184 13.5267 18.6607 13.4298C18.6029 13.333 18.52 13.2536 18.4208 13.2001L17.2791 12.5851L10.8891 16.0267C10.6158 16.1738 10.3102 16.2507 9.99985 16.2506C9.68947 16.2504 9.38398 16.1732 9.11078 16.0259Z" fill="currentColor"/>
5
+ </svg>