@sakura-ui/sakura-ui 0.5.0 → 0.5.2

package/packages/core/src/components/LinkCard.tsx

@@ -12,41 +12,45 @@ export namespace LinkCard {
  * through a ::after overlay, so the card cannot contain another link, a button
  * or a form control.
  */
+/**
+ * z-0 establishes a stacking context so that the overlay of the title can be
+ * raised above the rest of the card. CardFooter is sticky, which makes it a
+ * positioned element that would otherwise paint over the overlay and swallow
+ * the clicks aimed at the bottom of the card.
+ */
+export const linkCardPositionStyle = `
+  relative
+  z-0
+  group
+`
+
+export const linkCardHoverStyle = `
+  hover:outline
+  hover:outline-2
+  hover:outline-black
+  hover:bg-solid-gray-50
+`
+
+/**
+ * The focus ring goes on the card itself, not on the <a>, so that it surrounds
+ * the whole card. The card sets overflow-hidden, which would cut off a ring
+ * drawn on the ::after overlay inside it. An element never clips its own
+ * outline, so the ring survives here.
+ */
+export const linkCardFocusStyle = `
+  has-[a:focus-visible]:outline
+  has-[a:focus-visible]:outline-4
+  has-[a:focus-visible]:outline-black
+  has-[a:focus-visible]:outline-offset-[calc(2/16*1rem)]
+  has-[a:focus-visible]:ring-[calc(2/16*1rem)]
+  has-[a:focus-visible]:ring-yellow-300
+`
+
 export const LinkCard = <T extends React.ElementType = 'div'>(
   props: LinkCard.Props<T> & Omit<React.ComponentProps<T>, keyof LinkCard.Props<T>>
 ) => {
   const { className, children, ...restProps } = props
 
-  // z-0 establishes a stacking context so that the overlay of the title can be
-  // raised above the rest of the card. CardFooter is sticky, which makes it a
-  // positioned element that would otherwise paint over the overlay and swallow
-  // the clicks aimed at the bottom of the card.
-  const stylePosition = `
-    relative
-    z-0
-    group
-  `
-
-  const styleHover = `
-    hover:outline
-    hover:outline-2
-    hover:outline-black
-    hover:bg-solid-gray-50
-  `
-
-  // The focus ring goes on the card itself, not on the <a>, so that it surrounds
-  // the whole card. The card sets overflow-hidden, which would cut off a ring
-  // drawn on the ::after overlay inside it. An element never clips its own
-  // outline, so the ring survives here.
-  const styleFocus = `
-    has-[a:focus-visible]:outline
-    has-[a:focus-visible]:outline-4
-    has-[a:focus-visible]:outline-black
-    has-[a:focus-visible]:outline-offset-[calc(2/16*1rem)]
-    has-[a:focus-visible]:ring-[calc(2/16*1rem)]
-    has-[a:focus-visible]:ring-yellow-300
-  `
-
   // TypeScript cannot carry the generic through to Card, which is polymorphic in
   // the same way. The public signature above stays exact; only this hand-off is
   // widened.
@@ -54,7 +58,12 @@ export const LinkCard = <T extends React.ElementType = 'div'>(
 
   return (
     <Root
-      className={cx(stylePosition, styleHover, styleFocus, className)}
+      className={cx(
+        linkCardPositionStyle,
+        linkCardHoverStyle,
+        linkCardFocusStyle,
+        className
+      )}
       {...restProps}
     >
       {children}
@@ -64,6 +73,49 @@ export const LinkCard = <T extends React.ElementType = 'div'>(
 
 LinkCard.displayName = 'LinkCard'
 
+export const linkCardHeadingStyle = `
+  decoration-blue-900
+  underline
+  underline-offset-[calc(3/16*1rem)]
+
+  group-hover:text-blue-900
+  group-hover:decoration-[calc(3/16*1rem)]
+`
+
+/**
+ * The ::after overlay makes the whole card clickable. It carries no visual of
+ * its own; the focus ring lives on the LinkCard element.
+ */
+export const linkCardOverlayStyle = `
+  after:content-['']
+  after:absolute
+  after:inset-0
+  after:z-10
+  focus-visible:outline-none
+`
+
+export const linkCardFooterStyle = `
+  flex
+  justify-between
+  items-center
+`
+
+export const linkCardArrowStyle = `
+  inline-flex
+  items-center
+  justify-center
+  w-6 h-6
+  text-blue-1000
+  border
+  border-blue-1000
+  rounded-full
+`
+
+export const linkCardArrowHoverStyle = `
+  group-hover:bg-blue-1000
+  group-hover:text-white
+`
+
 export namespace LinkCardHeader {
   export interface Props<T extends React.ElementType> {
     /** The element to render the title as. See CardHeader. */
@@ -98,28 +150,9 @@ export const LinkCardHeader = <T extends React.ElementType = 'a'>(
     )
   }
 
-  const styleHeading = `
-    decoration-blue-900
-    underline
-    underline-offset-[calc(3/16*1rem)]
-   
-    group-hover:text-blue-900
-    group-hover:decoration-[calc(3/16*1rem)]
-  `
-
-  // The ::after overlay makes the whole card clickable. It carries no visual of
-  // its own; the focus ring lives on the LinkCard element.
-  const styleOverlay = `
-    after:content-['']
-    after:absolute
-    after:inset-0
-    after:z-10
-    focus-visible:outline-none
-  `
-
   return (
-    <CardHeader as={as} className={cx(className, styleHeading)}>
-      <Component className={styleOverlay} {...restProps}>
+    <CardHeader as={as} className={cx(className, linkCardHeadingStyle)}>
+      <Component className={linkCardOverlayStyle} {...restProps}>
         {children}
         {restProps.target === '_blank' && (
           <Icon opticalSize={16} className="ml-1" altText="新しいタブで開きます">
@@ -140,32 +173,10 @@ export namespace LinkCardFooter {
 export const LinkCardFooter = (props: LinkCardFooter.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    flex
-    justify-between
-    items-center
-  `
-
-  const styleIcon = `
-    inline-flex
-    items-center
-    justify-center
-    w-6 h-6
-    text-blue-1000
-    border
-    border-blue-1000
-    rounded-full
-  `
-
-  const styleIconHover = `
-    group-hover:bg-blue-1000
-    group-hover:text-white
-  `
-
   return (
-    <CardFooter className={cx(style, className)} {...restProps}>
+    <CardFooter className={cx(linkCardFooterStyle, className)} {...restProps}>
       <span>{children}</span>
-      <span className={cx(styleIcon, styleIconHover)}>
+      <span className={cx(linkCardArrowStyle, linkCardArrowHoverStyle)}>
         <Icon opticalSize={16}>arrow_forward</Icon>
       </span>
     </CardFooter>

package/packages/core/src/components/List.tsx

@@ -1,6 +1,24 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
+/**
+ * The nested markers rely on the class being present on the nested list too:
+ * `[&_&]` compiles to a descendant selector of the class with itself. Anything
+ * rendering lists without React has to emit the same class for that to hold.
+ */
+export const ulStyle = `
+  list-disc
+  [&_&]:list-circle
+  [&_&_&]:list-square
+  pl-8
+`
+
+export const olStyle = `
+  list-decimal
+  [&_&]:list-lower-latin
+  pl-8
+`
+
 export namespace Ul {
   export interface Props extends React.ComponentPropsWithoutRef<'ul'> {}
 }
@@ -8,14 +26,8 @@ export namespace Ul {
 export const Ul = (props: Ul.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    list-disc
-    [&_&]:list-circle
-    [&_&_&]:list-square
-    pl-8
-  `
   return (
-    <ul className={cx(style, className)} {...restProps}>
+    <ul className={cx(ulStyle, className)} {...restProps}>
       {children}
     </ul>
   )
@@ -28,13 +40,8 @@ export namespace Ol {
 export const Ol = (props: Ol.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    list-decimal
-    [&_&]:list-lower-latin
-    pl-8
-  `
   return (
-    <ol className={cx(style, className)} {...restProps}>
+    <ol className={cx(olStyle, className)} {...restProps}>
       {children}
     </ol>
   )

package/packages/core/src/components/OverflowContainer.tsx

@@ -1,6 +1,14 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
+export const overflowContainerStyle = `
+  w-full
+  overflow-x-auto
+  whitespace-nowrap
+  print:overflow-visible
+  print:whitespace-normal
+`
+
 export namespace OverflowContainer {
   export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
 }
@@ -8,16 +16,8 @@ export namespace OverflowContainer {
 export const OverflowContainer = (props: OverflowContainer.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    w-full
-    overflow-x-auto
-    whitespace-nowrap
-    print:overflow-visible
-    print:whitespace-normal
-  `
-
   return (
-    <div className={cx(style, className)} {...restProps}>
+    <div className={cx(overflowContainerStyle, className)} {...restProps}>
       {children}
     </div>
   )

package/packages/core/src/components/PopoverMenu.tsx

@@ -7,22 +7,11 @@ export const PopoverMenu = React.forwardRef<
   React.ComponentProps<'ul'>
 >((props, ref) => {
   const { className, children, ...rest } = props
-  const stylePopover = `
-    min-w-fit
-    w-auto
-    py-2
-    bg-white
-    shadow-1
-    rounded-lg
-    border
-    border-solid-grey-420
-    has-[>:nth-child(7)]:rounded-r-none
-  `
 
   const style = `
     font-normal
     whitespace-nowrap
-    ${stylePopover}
+    ${Style.popover}
   `
 
   return (
@@ -46,7 +35,7 @@ export const PopoverMenuItem = React.forwardRef<
     flex
     items-center
     gap-x-1.5
-    hover:bg-solid-grey-50
+    hover:bg-solid-gray-50
     ${Style.focusRectCondensedWithBg}
   `
 

package/packages/core/src/components/Pre.tsx

@@ -1,6 +1,14 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
+export const preStyle = `
+  p-4
+  bg-solid-gray-50
+  rounded-lg
+  whitespace-pre-wrap
+  overflow-y-scroll
+`
+
 export namespace Pre {
   export interface Props extends React.ComponentPropsWithoutRef<'pre'> {}
 }
@@ -8,16 +16,8 @@ export namespace Pre {
 export const Pre = (props: Pre.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    p-4
-    bg-solid-gray-50
-    rounded-lg
-    whitespace-pre-wrap
-    overflow-y-scroll
-  `
-
   return (
-    <pre className={cx(style, className)} {...restProps}>
+    <pre className={cx(preStyle, className)} {...restProps}>
       {children}
     </pre>
   )

package/packages/core/src/components/Table.tsx

@@ -1,21 +1,40 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export namespace Table {
-  export interface Props extends React.ComponentPropsWithoutRef<'table'> {}
-}
-
-const styleBorder = `
+/**
+ * Table classes are exported separately, in the order the components combine
+ * them, so that anything rendering a table without React produces the same
+ * class attribute.
+ */
+export const tableBorderStyle = `
   border
   border-collapse
-  border-solid-grey-420
+  border-solid-gray-420
 `
 
+export const captionStyle = 'text-left'
+
+export const thStyle = `
+  p-2
+  bg-[#f8f8fb]
+  text-label
+  text-left
+`
+
+export const tdStyle = `
+  p-2
+  text-label
+`
+
+export namespace Table {
+  export interface Props extends React.ComponentPropsWithoutRef<'table'> {}
+}
+
 export const Table = (props: Table.Props) => {
   const { className, children, ...restProps } = props
 
   return (
-    <table className={cx(styleBorder, className)} {...restProps}>
+    <table className={cx(tableBorderStyle, className)} {...restProps}>
       {children}
     </table>
   )
@@ -28,9 +47,8 @@ export namespace Caption {
 export const Caption = (props: Caption.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = 'text-left'
   return (
-    <caption className={cx(style, className)} {...restProps}>
+    <caption className={cx(captionStyle, className)} {...restProps}>
       {children}
     </caption>
   )
@@ -71,14 +89,8 @@ export namespace Th {
 export const Th = (props: Th.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    p-2
-    bg-[#f8f8fb]
-    text-label
-    text-left
-  `
   return (
-    <th className={cx(style, styleBorder, className)} {...restProps}>
+    <th className={cx(thStyle, tableBorderStyle, className)} {...restProps}>
       {children}
     </th>
   )
@@ -91,10 +103,8 @@ export namespace Tr {
 export const Tr = (props: Tr.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = ''
-
   return (
-    <tr className={cx(style, styleBorder, className)} {...restProps}>
+    <tr className={cx(tableBorderStyle, className)} {...restProps}>
       {children}
     </tr>
   )
@@ -107,13 +117,8 @@ export namespace Td {
 export const Td = (props: Td.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    p-2
-    text-label
-  `
-
   return (
-    <td className={cx(style, styleBorder, className)} {...restProps}>
+    <td className={cx(tdStyle, tableBorderStyle, className)} {...restProps}>
       {children}
     </td>
   )

package/packages/core/src/components/index.ts

@@ -16,3 +16,4 @@ export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
 export { OverflowContainer } from './OverflowContainer'
 export { LangSelector } from './LangSelector'
 export { PopoverMenu, PopoverMenuItem } from './PopoverMenu'
+export * as styles from './styles'

package/packages/core/src/components/styles.ts

@@ -0,0 +1,42 @@
+/**
+ * The class strings the components put on the elements they render.
+ *
+ * They are exported so that anything producing the same markup without React —
+ * @sakura-ui/markdown builds HTML strings — reads these instead of keeping a
+ * copy of its own, which would drift the moment a component is restyled.
+ *
+ * Reach for a component first. These are for the cases where there is no React
+ * tree to put one in.
+ */
+
+export {
+  base as buttonBaseStyle,
+  getVariantStyle as getButtonVariantStyle,
+  getSizeStyle as getButtonSizeStyle
+} from './buttonStyle'
+export {
+  cardStyle,
+  cardImgStyle,
+  cardHeaderStyle,
+  cardBodyStyle,
+  cardFooterPositionStyle
+} from './Card'
+export { codeStyle } from './Code'
+export { faqStyle, faqMarkerStyle, questionStyle, answerStyle } from './Faq'
+export { headingStyle } from './Heading'
+export { iconStyle, iconSizeStyle } from './Icon'
+export { linkStyle } from './Link'
+export {
+  linkCardPositionStyle,
+  linkCardHoverStyle,
+  linkCardFocusStyle,
+  linkCardHeadingStyle,
+  linkCardOverlayStyle,
+  linkCardFooterStyle,
+  linkCardArrowStyle,
+  linkCardArrowHoverStyle
+} from './LinkCard'
+export { ulStyle, olStyle } from './List'
+export { overflowContainerStyle } from './OverflowContainer'
+export { preStyle } from './Pre'
+export { tableBorderStyle, captionStyle, thStyle, tdStyle } from './Table'

package/packages/core/src/index.ts

@@ -40,3 +40,5 @@ export {
 } from './components'
 
 export type { CardHeaderAs } from './components'
+
+export { styles } from './components'

package/packages/forms/.turbo/turbo-build.log

@@ -1,12 +1,12 @@
 $ rimraf dist
 $ run-p build:*
-$ tsc && tsc-alias
 $ vite build
+$ tsc && tsc-alias
 vite v7.3.6 building client environment for production...
 transforming...
 ✓ 25 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.js  24.36 kB │ gzip: 6.13 kB
-dist/index.cjs.js  16.94 kB │ gzip: 5.27 kB
-✓ built in 375ms
+dist/index.es.js  24.22 kB │ gzip: 6.09 kB
+dist/index.cjs.js  16.80 kB │ gzip: 5.23 kB
+✓ built in 459ms